2
pimps
spam pimp it un-pimp it
130 days, 6 hours, 45 minutes ago
Tuesday, November 10, 2009 12:57:50 AM GMT Monday, November 09, 2009 12:38:13 AM GMT

Create YouTube-like adaptable view using CSS and jQuery
Create YouTube-like adaptable view using CSS and jQuery
 
www.jankoatwarpspeed.com -- Besides Turn off the lights feature I explained earlier, YouTube has more great stuff. I believe that you noticed "change view" feature which allows you to switch between normal and wide mode and thus expand/shrink movie area. I like this feature because in different circumstances, I need a different view. But the thing I like the most is that, although layout changes, it is done seamingly and all the information remains easily accessible. Download source (29kb) View demo Wireframes above shows what happens when you change the view. By changing to wide view sidebar goes down and content stretches fully. Creating this is very simple. The trick is in properly defined structure and a bit of jQuery. Structure This is the most important part of the story. In order to simulate YouTube structure we will define five sections: header, content, comments, sidebar and footer. The structure we need is quite simple:             The key is in CSS - content and comment areas will float to the left, while sidebar will float to the right. This will allow for sidebar to go down when content streches without disturbing the layout. They will be placed inside container "main" that will clear all floats. There won't be any special styling for header and footer. #header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;} #header { width:900px; margin:0px auto;} #main {width:960px; margin:0px auto; overflow:hidden;} #content { width:540px; float:left;} #comments { width:540px; float:left;} #sidebar { width:280px; margin-left:20px; float:right;} #footer { width:900px; margin:0px auto;} Initially, content will be 600px wide (including paddings). When user changes to wide view it will stretch to 960px. To achieve this we will place a command link somewhere on the page, let's say inside the content area. I used CSS Sprites for the command link in demo, but you can create a simple textual link as the one below. Change View Interaction Next we will add a simle jQuery function that will
beebee posted 131 days, 7 hours, 5 minutes ago     show counter code
tags: Tutorials

No comments yet, be the first one to post comment.

To post your comment please login or signup