PDA

View Full Version : Slide-In Links Help



athanasius
05-02-2005, 07:42 PM
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. :D

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.