PDA

View Full Version : Slide-In Links



jscheuer1
07-24-2006, 07:29 AM
1) Script Title: Slide-In Links

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

3) Describe problems:

A ) The script has several typos that were introduced along the way somewhere such that it won't work if installed as instructed, example:


From the Demo Page
/***********************************
Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
************************************
function moveMenu(){

Notice that in the above that there is no close comment token (*/) before the start of the function. This occurs in several places in the "Step 1: Insert the following code into the <head> section of your page:" area but is not evident in the script code actually used on the page.

B ) The script will not work in a modern browser on a page with a DTD.

I fixed these two major problem areas and tightened up the code a bit eliminating the 'evil' eval()'s - I think there were six of them and added a bit more style for a slightly more pleasing look. I switched from "Browsercheck:" to object checking. I also instituted document.write for portions of the body section of the script to discourage editing of critically spaced (for FF) elements and shifted all editable (and some not editable, these are clearly commented) styles to the style section, as well as making the top offset a configuration item as it must be known to the script one way or another and this way guarantees that. I added the capability in modern browsers for the menu to follow horizontal page scrolls to the original's ability to do this vertically.

I tested out my version in IE4 through 6, IE Mac, FF1.5.0.4, Opera9, Safari3.2, and recent versions of iCab and Konqueror:


<!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">
/*Begin Slide-In Menu Styles*/
#divMenu {
font-family:arial,helvetica,sans-serif;
font-size:12pt;
font-weight:bold;
background-color:#F0F0F0;
}
#divMenu a {
text-decoration:none;
}
#divMenu a:hover {
color:red;
}
#actuator {
background-color:yellow;
text-decoration:none;
padding:0 3px;
}
#menuC { /*These styles should not be edited*/
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
margin-left:-10px;
}
#divMenu { /*These styles should not be edited*/
position:absolute;
visibility:hidden;
}
/*End Slide-In Menu Styles*/
</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/23/06 in http://www.dynamicdrive.com/forums by jscheuer1
to correct typos, update for optional DTD's and current tag conventions,
eliminate eval(), convert to true object testing, add horizontal scrolling.
*****************************************/

//These are the variables you have to set:

//How many pixels of the menu do you want to be visible when it's in the in state?
var lshow=60

//How many pixels should the menu be from the top of the page?
var mTop=250

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

//At what speed interval (lower value is faster)
var menuSpeed=40

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

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

var ie=document.all, n=document.layers, ns6=document.getElementById&&!ie, ltop, tim=0, PX=n? 0 : 'px';

if(n)
document.write('<style type="text/css">\
#actuator {\
padding:0;\
}\
<\/style>')

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

//Object constructor
function makeMenu(obj){
if (n) this.css=document[obj]
else if (ns6) this.css=document.getElementById(obj).style
else if (ie) this.css=ie[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=ie[obj].offsetWidth
this.left=b_getleft
if (ie||ns6)
this.css.paddingLeft='10px';
}
//Get's the left position.
function b_getleft(){
return parseInt(this.css.left);
}
/***********************************
Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
************************************/
if (ie)
var t='';
function moveMenu(){
if (ie&&ie['actuator'].title&&ie['actuator'].title!==''){
t=ie['actuator'].title;
ie['actuator'].title='';
}
if(!oMenu.state){
clearTimeout(tim)
mIn()
}else{
clearTimeout(tim)
mOut()
}
if(ie)
setTimeout("ie['actuator'].title=t;", 500);
}
//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(){
var scrolledt=typeof window.pageYOffset=='number'? window.pageYOffset : iecompattest().scrollTop;
var scrolledl=typeof window.pageXOffset=='number'? window.pageXOffset : iecompattest().scrollLeft;
if(!oMenu.go){
oMenu.css.top=scrolledt+parseInt(ltop)+PX
if (ie||ns6) {
var menuh=n? document['menuC'] : ie? ie['menuC'].style : document.getElementById('menuC').style
menuh.left=scrolledl+PX
}
}
if(typeof window.onscroll!=='object') setTimeout('checkScrolled()',30)
}
/*********************************
Inits the page, makes the menu object, moves it to the right place,
show it
**********************************/
function menuInit(){
oMenu=new makeMenu('divMenu')
oMenu.css.left=-oMenu.width+lshow+PX
ltop=oMenu.css.top
oMenu.css.visibility='visible'
if(moveOnScroll) typeof window.onscroll=='object'?window.onscroll=checkScrolled:checkScrolled();
}


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

<script type="text/javascript">
if (ie||ns6)
document.write('<div id="menuC">')
document.write('<div id="divMenu" style="top:'+mTop+'px;"><nobr>')
</script>

<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> -

<script type="text/javascript">
document.write('<a id="actuator" href="javascript:Move Menu;" onclick="moveMenu();return false;" title="Click to Activate Menu">MENU<\/a><\/nobr><\/div>')
if (ie||ns6)
document.write('<\/div>')
</script>
</body>
</html>