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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slowing the opening of a div when onclick is activated

    I have a script that when someone clicks on a piece of text it activates the div to appear, there is also a piece of text to close the div. Once the div is activated by the onclick link the extended text appears.

    The code is below, the issue I have is that the person I am doing the site for wants the div to open slower, is there a way to do this? I've searched Google etc. but can't find it, maybe i'm not wording it right. Thanks in advance.

    Reduced HTML for readability:

    Code:
    <a href="#marker" id="box1_show" onclick="groupDivs.show('box1');">Click for more</a>
    <div id="box1" style="display: none;">
    Extended text to be displayed
    <a href="#marker" onclick="groupDivs.hide('box1');">Close</a>
    JavaScript:

    Code:
    function groupShowHide(element_list)
    {
            var groupShowHideClass =
            {
                    groupList: Array(),
                    construct: function(element_list)
                    {
                            for ( var i=0; i < element_list.length ; i++)
                            {
                                    this.groupList.push(document.getElementById(element_list[i]));
                            }
                    },
                    show: function(id)
                    {
                            for ( var i = 0; i < this.groupList.length ; i++)
                            {
                                    if ( this.groupList[i].id == id )
                                    {
                                            this.groupList[i].style.display='';
                                    }
                                    else
                                    {
                                            this.groupList[i].style.display='none';
                                    }
                            }
                    },
                    hide: function(id)
                    {
                            for ( var i = 0; i < this.groupList.length; i++ )
                            {
                                    if ( this.groupList[i].id == id )
                                    {
                                            this.groupList[i].style.display='none';
                                    }
                            }
                    }
            }
            groupShowHideClass.construct(element_list);
            return groupShowHideClass;
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body onload="zxcSlideH('Test1',10,100,20);zxcSlideH('Test2',10,100,100);">
    
    <input type="button" name="" value="Change" onmouseover="zxcSlideHDo('Test1',5);"  onmouseout="zxcSlideHDo('Test1',-1);">
    <input type="button" name="" value="Change" onmouseover="zxcSlideHDo('Test2',1);"  onmouseout="zxcSlideHDo('Test2',-1);">
    <div style="position:relative;width:160px;height:10px;">
    <div id="Test1" style="position:absolute;overflow:hidden;display:none;left:0px;top:0px;width:80px;height:0px;background-color:red;" ></div>
    <div id="Test2" style="position:absolute;overflow:hidden;display:none;left:80px;top:0px;width:80px;height:10px;background-color:green;" ></div>
    </div>
    </script><script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // Initialise by a <BODY> or window onload event for each slide element
    // e.g.
    // <body onload="zxcSlideH('Test1',10,100,20);zxcSlideH('Test2',10,100,100);">
    // where
    // parameter 0 = the unique ID name of the 'Slide' element. (string)
    // parameter 1 = the minimum height.                        (digits)
    // parameter 2 = the maximum height.                        (digits)
    // parameter 3 = the slide speed, 10 = fast, 100 = slow.    (digits)
    
    
    // To Activate
    //
    // e.g.
    // <input type="button" name="" value="Change" onmouseover="zxcSlideHDo('Test1',1);"  onmouseout="zxcSlideHDo('Test1',-1);">
    // where
    // parameter 0 = the unique ID name of the 'Slide' element. (string)
    // parameter 1 = to slide open = > 0, to slide close = < 0. (digits)
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    
    var zxcOOPCnt=0;
    
    
    function zxcSlideH(zxcid,zxcmin,zxcmax,zxcdly){
      var zxcobj=document.getElementById(zxcid);
      window['zxcSlide'+zxcid]=new zxcOOPMMHeight(zxcobj,zxcmin,zxcmax,zxcdly);
    }
    
    function zxcSlideHDo(zxcid,zxcd){
     var zxcobj=window['zxcSlide'+zxcid];
     clearTimeout(zxcobj.to);
     if (zxcd>0){ zxcobj.obj.style.display=''; }
     zxcobj.cngh(zxcd);
    }
    
    function zxcOOPMMHeight(zxcobj,zxcmin,zxcmax,zxcdly){
     this.obj=zxcobj;
     this.ref='zxcmmh'+zxcobj.id;
     window[this.ref]=this;
     this.h=[zxcmin,zxcmax];
     this.dly=zxcdly||20;
     this.to=null;
     this.d=1;
    }
    
    zxcOOPMMHeight.prototype.cngh=function(zxcd){
     this.d=zxcd||this.d;
     this.hnow=parseInt(this.obj.style.height);
     if ((this.d>0&&this.hnow<this.h[1])||(this.d<0&&this.hnow>this.h[0])){
      this.obj.style.height=(this.hnow+=this.d)+'px';
      this.setTimeOut('cngh();',this.dly);
     }
     else {
      if (this.d<0){ this.obj.style.height=this.h[0]; this.obj.style.display='none'; }
      if (this.d>0){ this.obj.style.height=this.h[1]; }
     }
    }
    
    zxcOOPMMHeight.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    
    //-->
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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