October 3, 2012 - Classy Elements

A place to discuss things that were on our weekly Web Wednesdays show

October 3, 2012 - Classy Elements

Postby raw10 » Wed Oct 03, 2012 4:47 pm



This week's Web Wednesday was brought to you that elegant, dashing, most fashionable of attributes: the class. One's HTML should, of course be very classy, at least within reason.

Some housekeeping.

We are changing the time that Web Wednesdays happen to 3:30 p.m. Pacific time (that's 6:30 p.m. for you classy folks on the East Coast). Lots of people have mentioned that lunchtime doesn't work so well for them, so let's try pushing it into the afternoon.

Secondly we're working on a dedicated website for Web Wednesdays. It is appropriately located at WebWednesdays.com. We'll be working on adding some styling and content going forward, but you can check it out now if you want. This week's archive is found here:

http://webwednesdays.com/2012/10/03/Classy_elements

Fixed Floater

After some discussion on classes and their uses, we did a bit of a recap of CSS positioning, which led to a question about how to do a "fixed floating" sort of sidebar thingamabob. You know what I mean, the thing that scrolls with the page until it gets to the top, then goes "fixed" (in CSS parlance) in the viewport when it would normally scroll off.

It was made popular by the Apple website some time ago, and has been used and overused ever since. The problem that I see with it is that implementations often rely solely on JavaScript to keep the element in view, and to move it up and down with the page when it's supposed to do that. A bad example is this: http://dropthebit.com/demos/stickyfloat ... float.html

The best way to do it is to rely on standard CSS positioning, then use JS to update that positioning as appropriate. There are also some concerns that arise when the element is too tall to fit in the viewport. What then? You may never get to the bottom of it, literally.

So the real solution is to do a bit of everything. I found a decent solution on HTML5trends.com (http://www.html5trends.com/tutorials/si ... technique/), but I modified it quite a bit to rely on native positioning rather than JS alone (except when the bottom is reached).

You can view the results on our new Web Wednesday site! Check it out: http://webwednesdays.com/demo/fixedfloat.html

More on Internet Explorer

Every week we seem to have more discussions on IE. How to test in it when you develop on a Mac. How to make sure things are gonna work. There's no silver bullet, but I'd just say go with the "KISS" principle and make sure you understand what you're implementing. Otherwise you'll end up not being able to debug anything, particularly on IE. IE 9 is better, but is far from being there yet.

That's about it for the moment, but be sure to drop by at our new time next week. Stay classy!

http://www.magicedit.com/hangout.cl
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Return to Web Wednesdays

Who is online

Users browsing this forum: No registered users and 1 guest

cron