Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How do i auto show a hidden div onload

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

    Im using the following code:

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,027
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    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:
    Code:
    <script type="text/javascript">
    zxcShowHide(document.getElementById("click"));
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    scotth (07-19-2012)

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,027
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Putting it at the bottom should be the equivalent of doing it via <body onload=>

    But you could certainly try doing it with onload.

    Code:
    <body onload="zxcShowHide(document.getElementById('click'));">
    If that doesn't work, can you show the page live?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    scotth (07-19-2012)

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    thank you

    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

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,027
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    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
    Code:
    <body>
    and then do this:
    Code:
    ...
    <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
    Code:
    window.onload = ...
    which would conflict with your <body onload=...>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •