PDA

View Full Version : slide in links



kosi
07-21-2006, 03:34 AM
1) Script Title: slide in links

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/slideinlink.htm

3) Describe problem: to be honest, I don't know what the problem is. I copied and pasted the script exactly as it was on the page i got it from, without even modifying it to my own content, and the page appeared exactly the way it would if i had not added any script or menu bar. There are no other scripts on the page, and my server definitely supports javascript, because there are scripts on other pages. Is there a typo or something in the script or am I just crazy?

jscheuer1
07-21-2006, 05:01 AM
It's worse than that. There are quite a number of typos (probably introduced by an editor program or content manager). In addition, the script is out of date. Here is an updated and corrected version tested on IE6, Opera9, and FF1.5.0.4:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#divMenu {
font-family:arial,helvetica,sans-serif;
font-size:12pt;
font-weight:bold;
}
#divMenu a {
text-decoration:none;
}
#divMenu a:hover {
color:red;
}
</style>
<script type="text/javascript">
/****************************************
Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com
Copyright (C) 1999 Thomas Brattli @ www.dhtmlcentral.com
This script is made by and copyrighted to Thomas Brattli
This may be used freely as long as this msg is intact!
This script has been featured on http://www.dynamicdrive.com
Modified 7/21/06 in http://www.dynamicdrive.com/forums by jscheuer1
to correct typos, update for optional DTD's and current tag conventions
****************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
ns6=document.getElementById&&!document.all?1:0

//These are the variables you have to set:

//How much of the layer do you wan't to be visible when it's in the out state?
lshow=60

//How many pixels should it move every step?
var move=10;

//At what speed (in milliseconds, lower value is more speed)
menuSpeed=40

//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true

/***************************************
You should't have to change anything below this.
****************************************/
//Defining variables

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

var ltop;
var tim=0;

//Object constructor
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
if (n) this.css=eval(nest+'document.'+obj)
else if (ns6) this.css=document.getElementById(obj).style
else if (ie) this.css=eval(obj+'.style')
this.state=1
this.go=0
if (n) this.width=this.css.document.width
else if (ns6) this.width=document.getElementById(obj).offsetWidth
else if (ie) this.width=eval(obj+'.offsetWidth')
this.left=b_getleft
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Get's the top position.
function b_getleft(){
if (n||ns6){ gleft=parseInt(this.css.left)}
else if (ie){ gleft=eval(this.css.pixelLeft)}
return gleft;
}
/***********************************
Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
************************************/
function moveMenu(){
if(!oMenu.state){
clearTimeout(tim)
mIn()
}else{
clearTimeout(tim)
mOut()
}
}
//Menu in
function mIn(){
if(oMenu.left()>-oMenu.width+lshow){
oMenu.go=1
oMenu.css.left=oMenu.left()-move+'px'
tim=setTimeout("mIn()",menuSpeed)
}else{
oMenu.go=0
oMenu.state=1
}
}
//Menu out
function mOut(){
if(oMenu.left()<0){
oMenu.go=1
oMenu.css.left=oMenu.left()+move+'px'
tim=setTimeout("mOut()",menuSpeed)
}else{
oMenu.go=0
oMenu.state=0
}
}
/*********************************
Checking if the page is scrolled, if it is move the menu after
**********************************/
function checkScrolled(){
if(!oMenu.go) oMenu.css.top=eval(scrolled)+parseInt(ltop)+'px'
if(n||ns6) setTimeout('checkScrolled()',30)
}
/*********************************
Inits the page, makes the menu object, moves it to the right place,
show it
**********************************/
function menuInit(){
oMenu=new makeMenu('divMenu')
if (n||ns6) scrolled="window.pageYOffset"
else if (ie) scrolled="truebody().scrollTop"
oMenu.css.left=-oMenu.width+lshow+'px'
if (n||ns6) ltop=oMenu.css.top
else if (ie) ltop=oMenu.css.pixelTop
oMenu.css.visibility='visible'
if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}


//Initing menu on pageload
window.onload=menuInit;
</script>
</head>
<body>

<div id="divMenu" style="position:absolute; top:250px; left:30px; visibility:hidden; background-color:#F0F0F0">
<nobr>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a> -
<a href="http://www.codingforums.com">Coding Forums</a> -
<a href="http://active-x.com/">Active-X.com</a> -
<a href="javascript:void(0);" onclick="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a>
</nobr>
</div>
</body>
</html>

Notes: There are still some things about this script that I am not thrilled with, most notably the extensive use of the eval() method but, it works in the browsers mentioned and perhaps will in others.

kosi
07-21-2006, 07:47 PM
It works!!! Thank you!!!

@)~}~~~