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 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 ...

Share this post

Advertisement

8 comments

  1. Another inovation, you are brilliant! Any plans to make a video template? All we have so far is Bloggertube which is excellent but that is the only one I know of.

    ReplyDelete
  2. Great work. Keep it up. Please teach us how to apply to one of your blog such as 'World News'

    ReplyDelete
  3. thx i so love u blog u help me to much plz i want know what u think about my blog now www.uostv.blogspot.com

    ReplyDelete
  4. wow...what a great idea! Another great jobs from you... i will try this later...

    off topic!
    - are you going to produce simple seo friendly blogger template? :)

    ReplyDelete
  5. Good job!!! Keep it up. And it would be better if you teach us how to apply to one of your blog such as 'World News'. Everyone will be grateful to you.

    ReplyDelete
  6. @Nikki Barnard : I explained how it work and the basic concept of this tip . I think you can apply it to anykind of website ,include blogger . But if you have special request ,you can describe it here clearly and I will show you how to do if I can ^^

    ReplyDelete
  7. your blog is really helpful. looking forward for more awesumm tut like this.

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers