Slow Tab Load

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

28-Mar-09 01:44
Hi, I recently found a resource on your site about creating javascript tabs. It is a wonderful help guide and seems to work very well. I have 1 problem with it that greatly takes away from the purpose of it.

http://www.hiddenanime.com/test2/

There is a link to the page that I have been playing with it on.

The problem is simple: All of the Tabs seem to load before the rest of the page loads, which causes all of the tabs to be visible for the first few seconds. Once the function kicks in, things go to the way they should be. Do you have any suggestion as to how I could resolve this issue?

Thanks in advance!
28-Mar-09 03:57
Try removing the 'onload="init()"' from the body tag:

<body onload="init()">

... and instead adding the following after your tab content divs:

<script type="text/javascript">
init();
</script>

This should make the javascript kick in right after the tabs have been defined, rather than waiting for the entire page to load.

Does that help?

--
Matt Doyle, Elated
28-Mar-09 18:35
Matt,

brillant! It works great now.


Now that the function is spot on, I'm trying to change the look of it. I would like the content area to be 540x438, but I can not seem to make it that way. Do you have any suggestion?

Thanks agian.

-------Edit------

Or if it is not possible to specify 540x438, is it possible to make the content box the same size as my content? (it will always be 540x438).


------- 2nd Edit --------

Ok, I have figured out the size issue. You can preview it at the original link I posted. I have a new question though: Im trying to center the code but keep the tabs on the left side of the code box. Is there a way to do this? If I center it it also centers the tabs. If I have the tabs on the left the entire box is on the left.

Thanks again [=

[Edited by ttpyro on 29-Mar-09 04:21]
29-Mar-09 11:42
By code box, do you mean the tab content divs? If so your best bet is to specify a pixel width on both your tabs ul and your content divs, and change the padding on the content divs to use px instead of em. Now you can control the exact widths of both the ul and the content divs. Then use "margin: 0 auto;" on both to centre them. eg:

ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; margin: 0 auto; width: 500px; }

div.tabContent { border: 1px solid #c9c3ba; padding: 5px; background-color: #f1f0ee; width: 489px; margin: 0 auto; }

(adjust the "500px" and "489px" as necessary for your page)

Another approach would be to take the widths off the ul and the content divs, and enclose both the ul and the content divs in an outer fixed-width div that you then centre with "margin: 0 auto;".

BTW you don't need that call to init() after each content div - just once after all the divs will do.

Cheers,
Matt

--
Matt Doyle, Elated
29-Mar-09 17:45
Matt,

Thanks again for the reply. Sorry I was unclear as to what I was asking. I'm not sure exactly what your answer solves (I think its the size of the content area?) So im going to test it out [=.

In the mean time, here is a screenshot that I edited. This is what I would like the final product to look like in terms of the content box being centered within the page and the tabs being left aligned with the content box.

http://hiddenanime.com/images/tabs2.JPG

Have a Good day!


--------Edit--------
I just tried the code you suggested and that is infact what Im going for. The only problem is that it seems to only work in IE6. Chrome, FF, IE7, And Safari all show it incorrectly. Any ideas?

[Edited by ttpyro on 29-Mar-09 16:55]
22-Apr-09 15:38
I am having three tabs in my html.How to make one of the tabs open by default??

Thanks in advance.
23-Apr-09 01:33
In the init() function, change:

if ( i == 0 ) tabLinks[id].className = 'selected';

to:

if ( i == n ) tabLinks[id].className = 'selected';

and:

if ( i != 0 ) contentDivs[id].className = 'tabContent hide';

to:

if ( i != n ) contentDivs[id].className = 'tabContent hide';

where 'n' is the tab number you want to open when the page loads (0 is the first tab, 1 is the second, and so on).


--
Matt Doyle, Elated
23-Apr-09 09:38
Thanks Matt
But my problem is no tab is opened by default. I have another div statement inside the div(the div for tabs).
24-Apr-09 23:45
Then it sounds like you have a problem with your code. What's the URL of your page?

--
Matt Doyle, Elated
14-Oct-09 21:37
Matt. Great work. I have a question. How would you retain the correct tab selected after a postback?
15-Oct-09 01:47
Hi t0mt0mboy, and welcome!

Here's a solution that uses cookies to retain the selected tab ID between form posts:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->

<title>JavaScript tabs example</title>

<style type="text/css">
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }
</style>

<script type="text/javascript">
//<![CDATA[

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}

// Hide all content divs except the first
var i = 0;

for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}

// If a hash was supplied in the page URL,
// display the corresponding tab (if found)
if ( document.location.hash ) showTab( document.location.hash.substring(1) );

// If a selectedTab cookie was set, select the appropriate tab
if ( selectedId = getCookie( "selectedTab" ) ) showTab( selectedId );
}

function showTab( selectedId ) {
if ( typeof selectedId != 'string' ) var selectedId = getHash( this.getAttribute('href') );
setCookie( "selectedTab", selectedId );

// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}

// Stop the browser following the link
return false;
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}

function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}

function setCookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
var cookie_string = name + "=" + escape ( value );

if ( exp_y )
{
var expires = new Date ( exp_y, exp_m, exp_d );
cookie_string += "; expires=" + expires.toGMTString();
}

if ( path )
cookie_string += "; path=" + escape ( path );

if ( domain )
cookie_string += "; domain=" + escape ( domain );

if ( secure )
cookie_string += "; secure";

document.cookie = cookie_string;
}

function getCookie ( cookie_name )
{
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

if ( results )
return ( unescape ( results[2] ) );
else
return null;
}

//]]>
</script>
</head>
<body onload="init()">
<h1>JavaScript tabs example</h1>

<ul id="tabs">
<li><a href="#about">About JavaScript tabs</a></li>
<li><a href="#advantages">Advantages of tabs</a></li>
<li><a href="#usage">Using tabs</a></li>
</ul>

<div class="tabContent" id="about">
<h2>About JavaScript tabs</h2>
<div>
<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>

<div class="tabContent" id="advantages">
<h2>Advantages of tabs</h2>
<div>
<p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
<p>They're also good for things like multi-step Web forms.</p>
</div>
</div>

<div class="tabContent" id="usage">
<h2>Using tabs</h2>
<div>
<p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
</div>
</div>

<p><a href="/articles/javascript-tabs/">Return to the JavaScript Tabs article</a></p>

<form method="post" action="">
<div>
<input type="submit" name="send" value="Send Form"/>
</div>
</form>

</body>
</html>


Does that help?

Matt

--
Matt Doyle, Elated
15-Oct-09 17:46
Thanks Matt. I've think I have a solution and so far it's working. Here's what I've done. I removed the init() call from body onload. Called it after all the controls are loaded. On the procedure that did the postback, I set the location.hash then call the init(). I will try your solution as well. Thanks again for your help.

[Edited by t0mt0mboy on 15-Oct-09 19:41]
16-Oct-09 01:03
No problem. Yes, you could also do it via setting the hash.

Let us know if you need any more help!

Cheers,
Matt

--
Matt Doyle, Elated

 
New posts
Old posts

Follow Elated