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.

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

Related

Related posts that might interest you:

Popular

Posts that are popular among visitors:

Share it

If you've enjoyed the post, or think that it might be useful to others, do share in on a social network site that you're using. Thank you!

  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • LinkedIn
  • Reddit
  • Design Float
  • Identi.ca
  • Live
  • Ping.fm
  • Print this article!
  • Twitter
  • Netvibes
  • HackerNews
  • Slashdot

There are no comments at the moment.

Looks like there isn't a single comment here yet. Be the first!

Leave a Response » Share your thoughts or Return to top

Your name is required. Why?

  • So that I can address you personally (which I'm more than happy to do).
  • Everyone loves their name to be called, right? Nobody wants to be referred to as 'a certain someone' or Mr X (X-Men members aside).
  • If your post too much spam, your name will be imprinted on a personalised voodoo doll, completely free of charge. I'm just joking!

Your email is needed. Why?

  • Your email is, and will, never be given out to any third party under any conditions (except for people sneaking up behind me when I'm on WP admin).
  • So that I can contact you personally in case of certain issues that I wish to address personally.
  • If you post too much spam, I'll email the same spam you've posted 10 times back to you, completely free of charge.

You can always leave a personal URL behind

  • It can be anything - most people put their blog URL, their facebook page, their Twitter URL, their MySpace or etc.
  • I give love back by saying NO to no-follow. All of your webbie links are dofollows instead.

Twitter. Twitter. Twitter.

  • What is Twitter?: Twitter is a social networking and micro-blogging service that enables its users to send and read other users' updates known as tweets. Tweets are text-based posts of up to 140 bytes in length.
  • What is my Twitter ID?: To get a Twitter ID, you simply have to sign up for an account at Twitter.com. Your ID will be in the format of your profile's URL - http://twitter.com/[userid].

Comment notes

  • Gravatar: You can register for one at Gravatar.com
  • XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">
  • Codes: Wrap them up with <code></code> tags.

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching DJ Earworm - United State of Pop 2009 (Blame It on the Pop). Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence