display tabs with delay

I need to create a javascript for this . When a tab is clicked I want to display the div with 1-2 seconds delay - a image loader is needed during the delay



I want to use only javascript not ajax - the content from tabs will be loaded at the same time with the page.

Thank you in advance

 

Why would you want to delay the user when it isn't necessary then?

 

Faking an ajax effect? What an absurd idea.... anyway, give setTimeout a try.

 

it is not an absurd ideea .. this is how i need

 

right.
do you already have a tab system? if so, the fake delay is relatively easy.

http://fragged.org/dev/tabber-fake-delay.html - sample i wrote in 20 mins.

in your schema, you will have a container for your content, say something such as this:

<div id="tabs">
    <div class="tabber selected" id="select1" rel="1">
        heading 1
    </div>
    <div class="tabber" id="select2" rel="2">
        heading 2
    </div>
    <div class="tabber" id="select3" rel="3">
        heading 3
    </div>
</div>
<br class="clearThis" />
<div id="container">
    <div class="tabcontent" id="tab1">
        content for tab 1
    </div>
    <div class="tabcontent none" id="tab2">
        content for tab 2
    </div>
    <div class="tabcontent none" id="tab3">
        content for tab 3
    </div>
</div>

HTML:

the CSS:

<style type="text/css">
#container {
    width: 500px;
    height: 400px;
    background: #fff url(images/ajax-spinner.gif) no-repeat center center;
    border: 1px solid #ccc;
}

.clearThis {
    clear: both;
}
.tabcontent {
    background: #fff; /* this will hide the container background */
    width: 100%;
    height: 100%;
}

.none {
    display: none; /* hidden content of inactive tabs */
}

div.tabber {
    float: left;
    width: 120px;
    padding: 2px;
    background: #ccc;
    cursor: pointer;
    _cursor: hand;
}

div.selected {
    background: #777;
}
</style>

HTML:

and the javascript would go into your onload, something like:

var tabber = {
    activeTab: 1,
    timer: false,
    clickDelay: 1000, // 1 second
    clickTab: function(el) {
        // make active disappear
        document.getElementById("tab" + this.activeTab).className = "tabcontent none"; // adding none.
        document.getElementById("select" + this.activeTab).className = "tabber"; // adding none.

        this.activeTab = el.getAttribute("rel");
        this.selectTab();
    },
    selectTab: function() {
        var tabid = "tab" + this.activeTab, tab = "select" + this.activeTab;
        
        // this is the bit that delays the showing of the clicked content.
        clearTimeout(this.timer); // cancel ongoing click if repeated
        this.timer = setTimeout(function() {
            document.getElementById(tabid).className = "tabcontent"; // removes "none"
            document.getElementById(tab).className = "tabber selected";
        }, this.clickDelay);
    },
    addEvents: function(el) {
        if (!el)
           return; // needs an object
        var _this = this;
        el.onclick = function(e) {
             _this.clickTab(this);
        };
    },
    initialize: function() {
        this.tabs = document.getElementById("tabs").getElementsByTagName("div");

        var tabsCount = this.tabs.length;
        while (tabsCount--) {
            this.addEvents(this.tabs[tabsCount]);
        }
    }
};

window.onload = function() {
    tabber.initialize();
};

Code (javascript):

p.s. you are not really meant to use this in a production environment, i have not tested it in any browser outside of FF 3.5 and so forth, it's meant to give you an idea

 

this is exactly what i need .. Thank you so much