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 Demo
In 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 ...
Read more...
Blogger is a good blog platform but its editor is not good .It's quite simple and lack of options for profession writer . So using a third-party tool for writing is a good choice .
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=2a3b91a5-f104-41a1-8639-ae1333cfe297)
page by simply click on Add pages under Posting tab .
Posts
