Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Easy Display Switch with CSS and jQuery

Easy Display Switch with CSS and jQuery

Easy Display Switch with CSS and jQuery

As javascript libraries becomes increasingly popular among designers and website visitors alike, your daily visitors are now expecting more than just static pages – they would be thrilled to see interactive, fluid pages. In 2006 A List Apart published an article on the holy grail of webdesign, which involves coding for fluid layouts in CSS. With the popularity of  javascript libraries like jQuery, Soh Tanaka has written an excellent tutorial on teaching us how to incorporate fluid display options on our pages – allowing visitors to switch between different forms of display (think iTunes libraries). An interesting concept that is actually very simple, and can be easily done with a few lines of jQuery and CSS.

Basically, the technique behind the display switch is simply to style the list containing the gallery items separately – one in the thumbnail form and the other in the detailed listing form. And then you will use jQuery to add/remove a class that is appended to the list, to achieve the different appearance all coded by CSS.

Be Sociable, Share!

Burn after reading » Now you're done reading. What's next?


Related posts that might interest you:


Posts that are popular among visitors: