Here's the scenario, I have a wrapper 900px wide with an infinite number of div.box's inside of it. Those boxes are set to have an initial width & height of say 300px by 200px. At that dimension they would only show the img thumbnail that is inside the div.box (top left corner). When user clicks on a div.box, that div box expands to its full size of 600px x 400px revealing the rest of its content. this would also a displace the other div.box(es), but still remain true to the wrapper's dimensions. The expand div.box would close either on second click or a close button.
I can vaguely remember seeing this done somewhere on the web, but I can not find it anymore. It there a jquery script out there for this or can this be done with pure CSS3?
This can be done with CSS3 in browsers that support it (e.g. Safari/Chrome FF 4). If you use a tool called Modernizr, you can easily detect which browsers support this feature and use jQuery for thost that don't. You'll need to write a custom function, but it would be something like this:
I have a wrapper 900px wide with an infinite number of div.box's inside of it. Those boxes are set to have an initial width & height of say 300px by 200px. At that dimension they would only show the img thumbnail that is inside the div.box (top left corner). When user clicks on a div.box, that div box expands to its full size of 600px x 400px revealing the rest of its content. this would also a displace the other div.box(es), but still remain true to the wrapper's dimensions. The expand div.box would close either on second click or a close button.
I can vaguely remember seeing this done somewhere on the web, but I can not find it anymore. It there a jquery script out there for this or can this be done with pure CSS3?
Thanks for your help!
<pre>
$('#wrapper').delegate('.box', 'click', function() {
if ( $(this).hasClass('open') ) {
$(this).removeClass('open').animate({
'width' : '300px',
'height' : '200px'
}, 500);
} else {
$(this).addClass('open').animate({
'width' : '600px',
'height' : '400px'
}, 500);
}
});
</pre>
This will do the trick, assuming that you've wrapped all of the div.box 's in a wrapper. Just change out that ID and you're good to go.