As an user Youtube is a great video sharing service .As a web developer ,Youtube like any web 2.0 service ,comes with many effects . One of them is changing the size of video are ,expanding or shrinking with a click .
when you click on "wide" button ,video area expand to a larger size ,sidebar goes down and content in video area stretch fully . When you click on 'normal' ,video area shrink to normal size and sidebar goes up .
Live DemoIn this post ,I want to introduce to you how we can make this trick . It's easy to do and won't take you a lot of time and effort .
This trick is related to a Jquery's API name ToggleClass ,which is a part of Jquery framework .ToggleClass can add or remove one or more classes from each element in the set of matched elements ,for example ,we get an element like this
<div class="tumble">Some text.</div>
if we apply this statement
$('div.tumble').toggleClass('bounce') ,it mean : find all div elements which has class "tumble" and add one more class"bounce" to these div elements . And the result we get here
<div class="tumble bounce">Some text.</div>
But if we apply
$('div.tumble').toggleClass('bounce') again ,the div element above return to "tumble" class only ,"bounce" is removed . So the result after second time is
<div class="tumble">Some text.</div>Base on what ToggleClass can do ,to expand or shrink an element , we can make an element with initial size for example 600px width .When user click on wide button ,we use ToggleClass to add a class "wide" to this element . The "wide" class will re-define width to 900px . And when user click on Normal button , we will apply ToggleClass again for removing "wide" class .The width of element back to 600px .
So ,we got the idea .Here is an example .
In this example ,we create a web page with five elements like this :
<div id="header"></div><div id="main"> <div id="content"></div> <div id="sidebar"></div> <div id="comments"></div></div><div id="footer"></div> Now ,the CSS
#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;}#content.wide { width:900px;}float attribute of sidebar element must be right for it can goes up and down .If you set this attribute to left ,it may ruin your design .
In the website ,create a link for switch between expanding and collapsing mode . A link like this :
<a id="wideView" href="#">Change View</a> Elements are ready ,to make it work ,we need to add a script :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#wideView").click(function() { $("#content").toggleClass("wide"); $(this).toggleClass("wide"); }); }); </script>In the script above :
The first line :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> for loading Jquery Framework so we can use jquery statements .
The following code :
$(document).ready(function() mean we only run this script when page are loaded fully .
$("#wideView").click(function() mean this function is only executed when user click on element which has id "wideView"
$("#content").toggleClass("wide"); as I said on ToggleClass above ,this line will add a class 'wide' to element which has id="content" ,so re-define width of content from 540px to 900px
$("#content").toggleClass("wide"); execute this line when user click element "wideView" again .This statement will remove the class 'wide' from element which id="content" ,so size of content element back to 540px;
Ok ,you are done .
Save webpage and see the result .
This trick can apply in websites and of course ,it work with Blogger . In this post ,I want to explain how it work to you and I hope you can apply it creatively ,unlike other posts, just show you a code and copy paste instruction .This can be used in video website like what youtube did ,or further ,changing web layout ...
