Annexation.ca 2.0

Annexation.ca 2.0

Postby Americalex » Nov 12, 2013 5:01 pm

Here's a glimpse into the new reinvented Annexation.ca website,

http://www.annexation.ca/annexation.ca/#

The forums will be there of course, as an added category.

* Fully Responsive
* HTML5 + CSS3 + JS + PHP
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Bearsy » Nov 12, 2013 10:18 pm

looks good. just need a new forum. maybe just move to reddit or something, ha!
Radical Centrist
User avatar
Bearsy
Opponent
 
Posts: 2095
Joined: May 03, 2012 11:27 pm
Location: Alberta

Re: Annexation.ca 2.0

Postby Americalex » Nov 12, 2013 10:51 pm

Thanks, if you check again now I think I pretty much nailed the color scheme. I will probably end up adding Discus comments to all the Article pages, and perhaps use some ratings from polldaddy on the photos. Well what I really have in mind is including Reddit buttons, ideally I want to have "share buttons" like they do on IGN:

http://ca.ign.com/articles/2013/11/11/t ... ent-review

Amazing episode by the way, but scroll down (& look to the side) to see what I mean. Notice how they put the reddit button first. That's what I'd like to do with both the Articles section and Forum section. Since I can't see myself converting the forums, the next best thing is buying up that 15$ metro phpbb template that is responsive and html5...

I intend to use an iframe to add it into the website alongside the articles I guess. I'm not too sure if the whole thing loads or only the sections the person skims over, I hope its door #2. Another thing I realized about the video section is that I need to make it like the images with a pop up and descriptor, otherwise it won't look as pro as it needs to.
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Americalex » Nov 13, 2013 10:44 pm

The new website is basically ready:

http://annexation.ca/annexation.ca/

All that's missing is pluging in the forums, which will now be known under the category "Community".

If any you want to help, if you find any picture of interesting stuff related to annexation (maps, stats, etc.) please link them here so I will be able to add them to the website. The idea is that anything good that comes across our discussions on the forums (like that HDI map by Windwalker, and all the various scenario maps we made) should end up on the website in the images section.

P.S. check out the mention from Eric Jon Phelps if you haven't already lol

P.S. Disqus comment functionality integrated and functional within article pages

----

Here's the stripped down version of the forums, if you want to access from there:

http://annexation.ca/annexation.ca/forums/

The idea will be a login section integral to the new site, I hope it all works out.

Phase 1 = Integrate Login Section on Main Website
Phase 2 = Integrate Forums proper with side page of the website like the articles
Phase 3 = Replace the forum template with the responsive metro one.
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Americalex » Nov 14, 2013 3:03 pm

The new website is officially online!

http://www.annexation.ca/

I'll finish transferring the legacy content over to the new site over time, but right now all that is missing is tweaking the forums to have a proper header and footer, as well as a responsive template. Once this accomplished I'll definitively pull the plug on forums.annexation.ca.

The switch-over is a success!
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Bearsy » Nov 14, 2013 4:20 pm

so no forum upgrade??

Why not archive this beast and start fresh with a new modern forum. Screw a migration. New registration new everything.
Radical Centrist
User avatar
Bearsy
Opponent
 
Posts: 2095
Joined: May 03, 2012 11:27 pm
Location: Alberta

Re: Annexation.ca 2.0

Postby Americalex » Nov 14, 2013 6:03 pm

It would defeat the purpose of maintaining the full breath of rich discussions that were held across the years here. There will be forum upgrades, but I haven't processed them yet because it's a tough nut for me to crack, I'm just a beginner with all of the stuff!

Check out the new community portal:

http://annexation.ca/index.html#community
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Americalex » Nov 14, 2013 10:31 pm

Since the challenges of implementing the vision are seriously real, the best I can do for now is share that vision of what I want the forum to go:

Image
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Americalex » Nov 15, 2013 12:15 am

A baffling non service affecting glitch I noticed: When http://annexation.ca/ loads up, everything appears neatly in the proper order and place. However on page reloads, the two images from the community section show up for a microsecond, like some form of subliminal spam which disrupts the experience somewhat. Maybe someone here has an idea to get around this problem, so I'm throwing it out there. "On Reload, reload all even images".
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Bearsy » Nov 15, 2013 12:49 am

One option is putting in a loading bar. All the user sees is the loading bar until the entire page is loaded.

Whats happening is the smaller pics on the page are loading faster that the images / slides. And depending on the code, the slider images and the code for its functionality might be loading last by design

Provided its NOT by design, what you you could possibly do is give the slider container a fixed height so it would force the community images to the correct spot from the get go.

Try swapping the order of the sections. Have an imageless section first.

I know you didn't code this from scratch so I am unsure what your constraints are.

Honestly though no one will care/notice.
Radical Centrist
User avatar
Bearsy
Opponent
 
Posts: 2095
Joined: May 03, 2012 11:27 pm
Location: Alberta

Re: Annexation.ca 2.0

Postby Bearsy » Nov 15, 2013 12:59 am

It appears it is by design

I found this in the CSS code
layout.css
Code: Select all
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
It makes sense other wise you'd have all your slide images appear at once for a split second instead.

However the code: "display: none;" effectively removes the content AND its placeholder from the website structure. If it was replaced with this code: "visibility:hidden;" the content would be hidden but the placeholder would remain in place. In this way you retain the structure of the site and then the community images would not appear to jump.

However you would need to know the corresponding javascript that unhides the slider and fix that too.

Some Reading: http://www.w3schools.com/css/css_display_visibility.asp

I think this is the JS code that reveals the slider
jquery.flexslider.js
Code: Select all
   if (type === "init") {
          if (!touch) {
            //slider.slides.eq(slider.currentSlide).fadeIn(slider.vars.animationSpeed, slider.vars.easing);
            slider.slides.css({ "opacity": 0, "display": "block", "zIndex": 1 }).eq(slider.currentSlide).css({"zIndex": 2}).animate({"opacity": 1},slider.vars.animationSpeed,slider.vars.easing);
          } else {
            slider.slides.css({ "opacity": 0, "display": "block", "webkitTransition": "opacity " + slider.vars.animationSpeed / 1000 + "s ease", "zIndex": 1 }).eq(slider.currentSlide).css({ "opacity": 1, "zIndex": 2});
          }

So you'd replace both instances of
"display" : "block"
with
"visibility" : "visible"
Radical Centrist
User avatar
Bearsy
Opponent
 
Posts: 2095
Joined: May 03, 2012 11:27 pm
Location: Alberta

Re: Annexation.ca 2.0

Postby Americalex » Nov 15, 2013 1:26 am

These are all very interesting ways of fixing this, out of all of them I think giving the home section a defined height is the easiest and most effective. I may not be a professionally trained coder but I'm learning faster than I expected, having an actual template to start from really helped me get a grip quickly and now I've been doing a lot of customization both in terms of content structure and layout.

I'll try the height fix tomorrow morning and hopefully that will do the trick here.

I'm not out of the woods for the forums though. I need to migrate from 3.0.8 to 3.0.12, then purchase and install the Metro template. Then remove the header and code in the annexation header, annexation footer, and disqus comment area. Also need to switch the background to fix with the community look. But if I can get through all these hurdles it will be great.

One thing I'd like to be able to do is fetch directly recent posts from the forums and display a small group of them in the community portal section, alonside the username, location and avatar photo. I've got a programmer friend who has agreed to help me out in exchange for payment in 22" monitors, but I still hope to get a much done on my own and with the help of others as possible.
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Bearsy » Nov 15, 2013 1:29 am

The Height fix won't work because the entire slider element is REMOVED from the site structure, pushing up the content from below. AFTER the website is fully loaded into memory, the slider element is popped back in pushing the rest of the webpage back down.

Just backup those two files and then make the changes I suggested :P
Radical Centrist
User avatar
Bearsy
Opponent
 
Posts: 2095
Joined: May 03, 2012 11:27 pm
Location: Alberta

Re: Annexation.ca 2.0

Postby Americalex » Nov 15, 2013 1:31 am

Bearsy wrote:The Height fix won't work because the entire slider element is REMOVED from the site structure, pushing up the content from below. AFTER the website is fully loaded into memory, the slider element is popped back in pushing the rest of the webpage back down.

Shit okay,

Well I guess I could submit a question to stack overflow if it comes to that.. If I could make all sections have the same behavior as the home section though, maybe that would work?
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Bearsy » Nov 15, 2013 1:33 am

Alex. I'm semi-wrong. The height fix COULD work! One sec!

Sorry to be so confusing.
Code: Select all
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }

I read this code a bit wrong. Its applying to the "li" elements within not the slider container itself.

Add a height definition like this:
Code: Select all
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
.flexslider {height:300px;}


You'll have to play with the height number of course. But I think it will work and is far simply than my previous suggestion.
Radical Centrist
User avatar
Bearsy
Opponent
 
Posts: 2095
Joined: May 03, 2012 11:27 pm
Location: Alberta

Re: Annexation.ca 2.0

Postby Americalex » Nov 15, 2013 2:24 am

Okay I did it and it worked! I set it up at 666px, enough room for compressed responsive on smartphones, but still a nice height overall for the images and text to fit in larger modes. Thanks!
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Bearsy » Nov 15, 2013 12:25 pm

Glad it worked! Though my first suggested fix is more beautiful because the "flexslide" height will be exactly what it needs to be to fit the inside slides no matter the content or the device and browser its viewed with.
Radical Centrist
User avatar
Bearsy
Opponent
 
Posts: 2095
Joined: May 03, 2012 11:27 pm
Location: Alberta

Re: Annexation.ca 2.0

Postby Americalex » Nov 15, 2013 2:18 pm

Another thing is, when selecting the various sections from the header, the second half's appearance sometimes becomes somewhat broken and has to wait to load which shoulnd't happen :|
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Re: Annexation.ca 2.0

Postby Bearsy » Nov 15, 2013 2:25 pm

That might be a client side problem? Looks fine from my PC at work
Radical Centrist
User avatar
Bearsy
Opponent
 
Posts: 2095
Joined: May 03, 2012 11:27 pm
Location: Alberta

Re: Annexation.ca 2.0

Postby Americalex » Nov 16, 2013 4:31 pm

I'm gonna need some help to cross the finish line, all that is missing is adding the header like the rest of the site, same thing with the footer, and my challenge here is determining what to add and how to add it.

Should I add them through I-frames in order to isolate them from the rest of the CSS? I know I need to insert a chunk of CSS and a chunk of HTML, I know where in which files they need to be inserted, but the whole inheritance thing is confusing.

And some of the divs from the site usually take their properties from a common stylesheet that is different from the common stylesheet of the forums..
User avatar
Americalex
Supporter
 
Posts: 20157
Joined: Aug 27, 2004 2:48 am
Location: Quebec

Next

Return to Community

Who is online

Users browsing this forum: No registered users and 1 guest
cron