www.webdeveloper.com
Results 1 to 6 of 6

Thread: Adding delay to Javascript Draggable Layer

  1. #1
    Join Date
    May 2008
    Posts
    7

    Adding delay to Javascript Draggable Layer

    I have added a 'popup' so to speak to my own site to get peoples attention. Everything works well with the exception I would like a bit of a delay. I have the Javascript Draggable Layer visible by default but would like it to be visible only after a 3 or 4 second delay after the page loads. Here is the site page in question: www.tinyurl.com/popup-harley The code is here:
    Code:
    <script language="JavaScript1.2">
    <!--
    isIE=document.all;
    isNN=!document.all&&document.getElementById;
    isN4=document.layers;
    isHot=false;
    
    function ddInit(e){
      topDog=isIE ? "BODY" : "HTML";
      whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
      hotDog=isIE ? event.srcElement : e.target;  
      while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
        hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
      }  
      if (hotDog.id=="titleBar"){
        offsetx=isIE ? event.clientX : e.clientX;
        offsety=isIE ? event.clientY : e.clientY;
        nowX=parseInt(whichDog.style.left);
        nowY=parseInt(whichDog.style.top);
        ddEnabled=true;
        document.onmousemove=dd;
      }
    }
    
    function dd(e){
      if (!ddEnabled) return;
      whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
      whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
      return false;  
    }
    
    function ddN4(whatDog){
      if (!isN4) return;
      N4=eval(whatDog);
      N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
      N4.onmousedown=function(e){
        N4.captureEvents(Event.MOUSEMOVE);
        N4x=e.x;
        N4y=e.y;
      }
      N4.onmousemove=function(e){
        if (isHot){
          N4.moveBy(e.x-N4x,e.y-N4y);
          return false;
        }
      }
      N4.onmouseup=function(){
        N4.releaseEvents(Event.MOUSEMOVE);
      }
    }
    
    function hideMe(){
      if (isIE||isNN) whichDog.style.visibility="hidden";
      else if (isN4) document.theLayer.visibility="hide";
    }
    
    function showMe(){
      if (isIE||isNN) whichDog.style.visibility="visible";
      else if (isN4) document.theLayer.visibility="show";
    }
    
    document.onmousedown=ddInit;
    document.onmouseup=Function("ddEnabled=false");
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    
    
    <!-- FLOATING LAYER CODE //-->
    <div id="theLayer" style="position:absolute;width:750px;left:190;top:300;visibility:visible">
    <table width="250" border="0" cellpadding="5" cellspacing="0" background="images/silk_red_background.jpg" bgcolor="#FF0000">
    <tr>
    <td width="100%">
      <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
      <tr>
      <td id="titleBar" style="cursor:move" width="100%">
      <ilayer width="100%" onSelectStart="return false">
      <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
      <font face="Arial" color="#FFFFFF">T-Up</font></layer>
      </ilayer>
      </td>
      <td style="cursor:hand" valign="top">
        <div align="right"><a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">Close</font></a>
          </div></td>
      </tr>
      <tr>
      <td width="100%" bgcolor="#000000" style="padding:4px" colspan="2">
    <!-- CONTENT HERE //--><img src="/images/amp_comp2.jpg" width="750" height="421"><!-- END OF CONTENT//-->  </td>
      </tr>
      </table> 
    </td>
    </tr>
    </table>
    </div>
    <!-- END FLOATING LAYER CODE //-->
    Thank you in advance for any help you can offer.

  2. #2
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726

  3. #3
    Join Date
    May 2008
    Posts
    7
    Quote Originally Posted by astupidname View Post
    For a more astute JavaScript guy I am sure it would help. I have scoured the help pages and have tried many things to no avail. I am sure it is something simple. . . . but just can't figure it out.

  4. #4
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    Change the style declaration in the "theLayer" div's tag from visibility:visible to visibility:hidden,
    then remove all the onload events from the body tag in the html (you actually have two opening body tags here:
    <body onLoad="MM_preloadImages('/images/t-up_menu_products2.gif','/images/t-up_menu_contact2.gif','/images/t-up_menu_home2.gif')"><body onload="Func1Delay()">
    Change everything in the above body tags to just this:
    Code:
    <body>
    And where is Func1Delay() ? I don't see it anywhere's so I am leaving that out of the below, as I presume it was just something you were unsuccessfully testing perhaps, if not add it back in to the window.onload function below: add the following in to your existing script:
    Code:
    window.onload = function () {
        MM_preloadImages('/images/t-up_menu_products2.gif','/images/t-up_menu_contact2.gif','/images/t-up_menu_home2.gif');
        window.setTimeout(
            function () {
                document.getElementById('theLayer').style.visibility = "visible";
            }, 3000); //3000 milliseconds = 3 second delay
    };

  5. #5
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    You appear to be missing a closing head tag also before the body tags, so add one of those in too.

  6. #6
    Join Date
    May 2008
    Posts
    7
    Thank you so very much!

    I implemented your changes and it works just as I want. You have saved me a bunch of time (frankly, I am not sure I would have ever figured it out).

    I am going to now search through the forum for away to get it to fade in.

    Thanks again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles