Help with 'Tab Content' Script

[jonnyp]

DD Script: Tab Content
url:http://www.dynamicdrive.com/dynamici...tabcontent.htm

Hello there!

I've installed the tab content script on my charity website - http://www.rectifi.org.uk - and I think it's made the header look an awful lot smarter. Everything seemed to be working, but I've since noticed a bit of a problem.

On each page - whether shopping, searching or ebay - I automatically edit this line of the code to set which tab to display:

var initialtab=[1, "sc1"]

becomes:
var initialtab=[<php
if ($web) echo "1";
if ($shop) echo "2"; 
if ($ebay) echo "3";?>, "sc1"]

However on a page where it isn't the first tab listed that is the initial tab (ie: http://www.rectifi.org.uk/details/0/...+LE32T51B.html ) it changes the tab to display the correct colour, yet for some reason it always displays the content (a form) of the first tab. If I click to another tab and then back it displays the correct content.
Any ideas why, and what I can do about it?
(I have checked each form is inside the correct div tag)

Additionally, is there anyway I can get the tabs to display before the page loading is complete (I guess this means executing it before the body onload() event?)

Any suggestions would be much appreciated! Many thanks,
Jonny

[jscheuer1]

Looks like PHP to me, something I'm not too up on but, this looks straightforward enough. Still, I may get the PHP syntax wrong. So, here is the idea - you need to initialize both the tab number (which you are doing) and the tab's content id (which you are not). Something like:

var initialtab=[<php
if ($web) echo "1, 'sc1'";
if ($shop) echo "2, 'sc2'"; 
if ($ebay) echo "3, 'sc3'";?>] 

This assumes you are using the default content id's of sc1, sc2, sc3, etc. If not, you need to substitute the actual id's involved.

[jonnyp]

nice one, thanks john - it worked a treat. I remember setting up the script i was just changing 'sc1', but then i changed to only modifying the first number - both was obviously what i needed!

Do you (or anyone) have any ideas on the second question - how I might triggetr the content to appear before the page loads entirely? as a database dribven site it can occasionally be a little slow...

[jscheuer1]

Well, the script needs all of its elements available, before it can initialize. The safe way to do this is onload. However, since you are not (or at least probably should not) be using the persistence feature, you can try this idea which works locally here and in web simulation. Get rid of this from the end of the script:

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

and substitute this:

function init(){
if (document.getElementById('last')){
do_onload();
clearInterval(startit)
}
else if (startit==0)
startit=setInterval("init();", 250)
}
var startit=0
init();

This will require you to also give an id of 'last' to the last element in the content script's markup. In the demo, this is here:

<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input id="last" name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>

If there is no convienient spot for that, you can make one, using an empty span tag after the last content block:

<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div><span id="last"></span>

This may even work with the optional persistence feature but, I haven't tested that and, even without that it may fail in actual live use, so test it out. The idea is, instead of waiting until the page is loaded, simply waiting until the markup for the script is loaded.

[jonnyp]

you're a legend mate, thanks very much (+ apologies for teh gaps in replying)