How do i auto show a hidden div onload

Hi guys, new to this forum. really stuck on something...

Im using the following code:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (13-March-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
if (zxcoop){
clearTimeout(zxcoop.to);
if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
else zxcoop.update([zxcsrt,zxcfin],zxctime);
}
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
}

function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
this.srtfin=[zxcsrt,zxcfin];
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde.replace(/[-#]/g,'');
this.update([zxcsrt,zxcfin],zxctime);
}

zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
this.srttime=new Date().getTime();
this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else {
this.data[0]=this.data[2];
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
}
}

zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}


/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcInitTabs(zxcid,zxcspd){
var zxcp=document.getElementById(zxcid);
zxcp.spd=zxcspd;
zxcp.lst=false;
var zxctabs=zxcp.getElementsByTagName('A')
for (var zxc0=0;zxc0<zxctabs.length;zxc0++){
zxctabs[zxc0].panel=document.getElementById(zxctabs[zxc0].title);
zxctabs[zxc0].panel.sheight=zxctabs[zxc0].panel.offsetHeight;
zxcES(zxctabs[zxc0].panel,{overflow:'hidden',height:'0px'});
}
}

function zxcShowHide(zxctab){
zxcp=zxctab.parentNode;
if(zxcp.lst&&zxcp.lst!=zxctab) zxcBAnimator('height#',zxcp.lst.panel,0,zxcp.lst.panel.sheight,zxcp.spd);
zxcBAnimator('height#',zxctab.panel,0,zxctab.panel.sheight,zxcp.spd);
zxcp.lst=zxctab;
}



function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}






/*]]>*/
</script>


<div class="Navigation" id="Navigation" style="position:absolute; top: 0; left:0;">


<a style="width:25px; height:10px; margin-left:470px; margin-top:30px; position:absolute; "
href="#" onclick="return zxcShowHide(this)" id="click" title="UK" class="current"></a>


<a style="width:25px; height:20px; margin-left:210px; margin-top:120px; display:block; position:absolute; "
href="#" onclick="return zxcShowHide(this)" title="USA"></a>


<a style="width:45px; height:10px; margin-left:500px; margin-top:30px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Benelux"></a>



<a style="width:40px; height:10px; margin-left:550px; margin-top:30px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Sweeden"></a>




<a style="width:50px; height:10px; margin-left:600px; margin-top:30px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Germany"></a>



<a style="width:50px; height:10px; margin-left:358px; margin-top:100px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="France"></a>



<a style="width:65px; height:10px; margin-left:358px; margin-top:120px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Switzerland"></a>



<a style="width:50px; height:10px; margin-left:358px; margin-top:138px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Portugal"></a>



<a style="width:50px; height:10px; margin-left:358px; margin-top:158px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Spain"></a>



<a style="width:50px; height:10px; margin-left:358px; margin-top:190px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Italy"></a>


<a style="width:50px; height:30px; margin-left:525px; margin-top:290px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="South Africa"></a>


<a style="width:50px; height:10px; margin-left:598px; margin-top:160px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Dubai"></a>


<a style="width:90px; height:30px; margin-left:648px; margin-top:250px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Duabi and Middle East"></a>


<a style="width:50px; height:10px; margin-left:710px; margin-top:125px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="China"></a>


<a style="width:100px; height:10px; margin-left:858px; margin-top:170px; display:block; position:absolute; " href="#" onclick="return zxcShowHide(this)" title="Shenzhen"></a>






<!-- begin Content -->
<div class="Container" id="Container"><!-- There you go; another 5 babies -->
<div class="News" id="UK">
<div class="Scroller-Container">

<div style="width:500px; height:140px !important; margin-left:310px; margin-top:30px; visibility:visible !important; ">


</div>



</div>




I havent put in all the hidden divs, but onload I would like to show the first div (UK) automatically.

Any ideas?

Thanks very much.

Since the first one has the id of click (not the best choice of ids, but never mind), at the very bottom of the page, just before the </body> put:

<script type="text/javascript">
zxcShowHide(document.getElementById("click"));
</script>

hello, thanks very much for coming back to me.
unfortunately it didn't work, putting that at the bottom.

Do you think there is any way to integrate the function into the body onload?

Thanks very much

Putting it at the bottom should be the equivalent of doing it via <body onload=>

But you could certainly try doing it with onload.


<body onload="zxcShowHide(document.getElementById('click'));">

If that doesn't work, can you show the page live?

thank you very much for your help old pendant.

I mixed in your statement with a comma after the original one and works flawlessly!

<body onload="zxcInitTabs('Navigation',1000), zxcShowHide(document.getElementById('click'));">

Is it ok to have two onloads seperated by a comma?

I really appreciate your help, i had been stuck on that for about 10 hours in all!
I learnt something in the process as well which is great.

Thank you :)

Should be a semicolon, as each is a separate statement, but because each is a function call (and thus an expression) you can use the comma. JavaScript (in common with Java/C/C++/C#) allows a comma between expressions.

What you COULD have done is just use
<body>
and then do this:

...
<script type="text/javascript">
zxcInitTabs('Navigation',1000);
zxcShowHide(document.getElementById('click'));
</script>
</body>
</html>

That is preferred, because you might later include other JS code that would do
window.onload = ...
which would conflict with your <body onload=...>.