Clever liquid layouts with a dash of unobtrusive JavaScript (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

womble -> Clever liquid layouts with a dash of unobtrusive JavaScript (12/22/2006 17:28:56)

http://www.alistapart.com/articles/switchymclayout

quote:

Switchy McLayout lets you define the dimensions, information richness, and appearance of your content objects for set ranges of screen sizes. A news site, for example, could have one layout and appearance for wide screens, one for medium-sized screens, and another for PDAs. Images could shrink or even disappear according to the screen size, columns could come and go as needed to maintain readability, and you can achieve a more efficient use of the available space for each screen size.


Looks interesting, though you need to 'view source' of the demo page and then view the JS using the FF web dev toolbar to get at the JS code.



Tailslide -> RE: Clever liquid layouts with a dash of unobtrusive JavaScript (12/22/2006 17:33:31)

Problem is that you get a nasty flicker in IE if you resize the viewport.



womble -> RE: Clever liquid layouts with a dash of unobtrusive JavaScript (12/22/2006 17:38:56)

[sm=yikes.gif] Eeeep! That is indeed nasty!



Tailslide -> RE: Clever liquid layouts with a dash of unobtrusive JavaScript (12/23/2006 3:37:59)

There was another similar one a while back - think it was from the Man in Blue but it had the same issues.

It's a difficult one - fluid layouts don't work well with very wide screens and images can't be scaled up easily if you're using an elastic layout so it looks slightly odd with the original sized images.

There's no perfect solution at the moment. There was another script that scaled up the font size according to the screen width which might (or might not, can't remember) scale up divs etc presuming they're sized using ems. I think there was still flicker though. You pays your money and takes your choice!




jaybee -> RE: Clever liquid layouts with a dash of unobtrusive JavaScript (12/23/2006 7:00:26)

Multiple stylesheets with a screen width switcher at the top so people can choose. A lot of the Joomla templates do it.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875