Results 1 to 1 of 1

Thread: Slide-In Links Help

  1. #1
    Join Date
    May 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slide-In Links Help

    I have been working on a new version of the 'Slide-In Links' script by Jack Routledge so that it will work with doctyping set (i.e. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). I have tested the following script successfully on:
    PC: IE 5.x, 6.x, Firefox & Netscape 6
    MAC: Firefox & Safari

    The only config I am having trouble with is IE 5.2 on the Mac. For some reason it appears that my setTimeout functions for moving the menu in and out never fire (slidein & slideout). If anyone can shed some light on this I would be very grateful.

    Here is the code in its entirety:

    <script language="javascript">
    /*
    * SlideMenu Class.
    * Version: 1.0.0
    * Desc: Creates a sliding menu
    *
    * Constructor Params:
    * id -The id of a div
    * startY -Starting Y pos of div
    * startV -Boolean to start visible
    * speed -Speed of div when page is scrolled
    *
    * Public Methods:
    * init() -Should be run as window.onload
    *
    * Private Methods:
    * move()
    * floatit()
    * slide()
    * slidein()
    * slideout()
    * getYPos()
    *
    * Example:
    * var s = new SlideMenu("foobardiv",100,true,30);
    * window.onload = init;
    *
    */

    function SlideMenu(id,startY,startV,speed) {
    var self = this;
    var isIE=document.all?1:0;
    var isN=document.layers?1:0;
    var isNS6=document.getElementById&&!document.all?1:0;
    var elDocument = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
    var isMenuIn = (startV) ? false : true;
    var css,obj,objW,objX;
    var objY = startY;
    var slideTimer;

    // Public Method
    self.init = function() {
    obj = document.getElementById ? document.getElementById(id) : document.all ? document.all[id] : document.layers[id];
    css = (document.layers) ? obj : obj.style;
    if (isN) objW = obj.document.width;
    else objW = obj.offsetWidth;
    objX = (startV) ? 0 : -objW;
    css.visibility='visible';

    if(isIE) window.onscroll = floatit;
    floatit();
    }

    // Private Methods
    var move = function(x,y) {
    objX = x;
    objY = y;
    css.left = objX + "px";
    css.top = objY + "px";
    }
    var floatit = function() {
    var y = isNS6 ? pageYOffset : elDocument.scrollTop;
    objY += (y + startY - objY)/8;
    move(objX,objY);
    if(!isIE) setTimeout(floatit,30);
    //setTimeout(floatit,30);
    }

    self.slide = function() {
    clearTimeout(slideTimer);
    if (isMenuIn) {
    slideout();
    } else {
    slidein();
    }
    }
    var slidein = function() {
    if (getYPos()>-objW){
    move(getYPos() - 10,objY);
    slideTimer = setTimeout(slidein,speed);
    } else {
    isMenuIn = true;
    }
    }
    var slideout = function() {
    if(getYPos()<0){
    move(getYPos() + 10,objY);
    slideTimer = setTimeout(slideout,speed);
    } else {
    isMenuIn = false;
    }
    }

    var getYPos = function() {
    if (isIE) return eval(css.pixelLeft);
    else return parseInt(css.left);
    }

    }
    </script>

    To test it simply do:

    <script language="javascript">
    var sm = new SlideMenu('divMenu',200,false,30); //params:[divid,startYPos,startVisible,speed]
    window.onload = sm.init;
    </script>

    <div id="divMenu" style="position:absolute; visibility:hidden;">
    <div id="foobar" style="background-color:#0000ff; color:#ffffff; width:300px; height:75px;">Foo Bar</div>
    </div>

    <a href="javascript:sm.slide()">Slide Test</a>

    <div style="height:2000px;"></div>

    Thanks.
    Last edited by athanasius; 05-02-2005 at 07:46 PM.

Bookmarks

Posting Permissions

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