Question

I’m relatively new to Web dev. The question is generic, but I’ll pose specific user-cases.

Use-case 1:
I have a div element on a web page. When the page loads the first time, this div runs a small 5 sec animation. What I wish to do is, when this animation ends, I want the same div to contain some other element – it could be an image, a link, another animation etc.
That is, one container – the div – hosting multiple elements on a time-scale. First 5 secs animation , followed by an image or a link.
What Javascript methods will allow me to do so?

Use-case 2:
Again, I have a div element in a page. Now this div element is like a tabbed browser – you click on a different tab to view a different web page. Similarly, I wish to make this a “tabbed” div. As in, when the user hovers the mouse on tab 1, the div would show a video, when hovered over tab 2, it would show another video in the same div – that is, replacing the old video. The tabs can be considered as a fancy looking link.

Or, in the first place, is there an alternative to ‘div’ to do the things mentioned above?

Thanks,
SMK.

Answer 1

Solution for use case 2 –
This is a slightly lengthy solution but its extremely flexible and can be scaled up to any number of tabs very easily

We will divide the solution into 3 parts – The CSS, HTML and JQuery.

Lets take a look at the CSS part first

<style>

#tab_holder {
    width: 350px; !important
}
    #tab_holder .tabs {
        float: left;
        height: 20px;
        padding: 5px;
        border: 1px solid #eee;
        border-bottom: none;
        width: 50px;
        cursor: pointer;
        border-radius: 5px 5px 0 0;
    }

    #tab_holder .tabs:hover {
        background-color: #eee;
    }   

    #tab_holder #content_holder {
        width: 400px; !important
        margin: 0 0 0 0;
        border: 1px solid #000;
        padding: 10px;
        float: left;
        border-radius: 0 5px 5px 5px;
    }

.content {
    visibility: hidden;
}

</style>

Let us now take a look at the HTML part of this solution

<div id="tab_holder">
    <div id="tab1" class="tabs">Video1</div>
    <div id="tab2" class="tabs">Video2</div>
    <div id="tab3" class="tabs">Video3</div>
    <div id="content_holder">
        <div id="main_content">Select a tab to see the video..</div>
    </div>
</div>

<!-- These are divs in which you put your actual content. 
     They are always hidden -->
<div id="content1" class="content">
    <iframe width="200" height="200" src="http://www.youtube.com/embed/4Z6YUGGlwtA?rel=0" frameborder="0" allowfullscreen></iframe> 
<    /div>   
<div id="content2" class="content">
    <iframe width="200" height="200" src="http://www.youtube.com/embed/s13dLaTIHSg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>   
<div id="content3" class="content">
    <iframe width="200" height="200" src="http://www.youtube.com/embed/I1qHVVbYG8Y?rel=0" frameborder="0" allowfullscreen></iframe>
</div>   

You can see that each tab is represented by a div which is using the “tabs” class from the CSS section. If you need to add a new tab, all you have to do is add a new div and give is a new id. For example to add a forth tab, you can say –

<div id="tab4" class="tabs">Video4</div>

It is as simple as that.
Now the thing I like about this approach is that you can place the content to be displayed also in div’s, rather that nesting it under jquery. In this case we use the div’s with the id content1 content2 content3

This gives you the flexibility to expand as you enter content into the div and use normal markup without getting confused and at ease.

These div’s are not visible as we have set their visibility to hidden is CSS.

If you add a new tab div you must also add a new content div.

Now we move onto the JQuery part –

$(document).ready(function (){
        /* Add the listeners. */
        $("#tab1").mouseover(function (){
            switch_content('content1')
        });
        $("#tab2").mouseover(function (){
            switch_content('content2')
        });
        $("#tab3").mouseover(function (){
            switch_content('content3')
        });
    });

    function switch_content(name){
        $("#main_content").fadeOut('fast',function (){
            $("#main_content").html($("#"+name).html());
            $("#main_content").fadeIn('fast');
        });
    }

The above JQuery function is extremely straight forward. Each tab is attached a action listener which is fired by a mousover event. So if you add another tab with the id=tab4 and its respective content div with the id=content4 then all you have to add in the jQuery is:

$("#tab4").mouseover(function (){
    switch_content('content4')
});

So it becomes very easy to expand the code.

You can find a working demo of this on my website demo section

Tips –

1. Avoid using hover because it creates an annoying user experience due to accidental hovers and it is hard for mobile platforms to emulate this event. Most of them fall back to click. So I suggest use the click event instead.
2. If you must use, make use of the HTML video tag and pause the video using JS if the user hovers on another tab. This will render a better user experience.