Dynamic FX Slide-in Menu-questions

[Lockerbie]

1) Script Title: Dynamic FX Slide-in Menu

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

3) Describe problem:
A few days ago, someone showed me a site with the kind of navigation I want for my site. After some searching, I came upon the Dynamic FX Slide-in Menu, which looks a lot like this other navigation.
So I'm trying to get this to work, at the place I want it to work (on the right side of a picture). link

Some questions:
- Is it possible to set the absolute height, so it stays the same in most browsers?
- Can you have several of thes menus on one page?
- In Firefox there seem to be some problems: the menu-items are always visible without mouseover, and I get the errormessage: "error while parsing the value for 'clip'. declaration ignored." (I hope I translated it correctly.)

Is there anybody who can help me with these questions? Thanks!

[tonyking]

Some questions:
- Is it possible to set the absolute height, so it stays the same in most browsers?

This is definately possible, but I don't think it's the best way. It's when I use absolute values that I run into most of the alignment issues I see.

- Can you have several of these menus on one page?

Short answer yes, you can. BUT, it would be pretty complicated and a lot of work I believe, as you would have to go through the entire script, and change every variable to a different name so there were no conflicts with multiple scripts.

- In Firefox there seem to be some problems: the menu-items are always visible without mouseover, and I get the errormessage: "error while parsing the value for 'clip'. declaration ignored." (I hope I translated it correctly.)

I cannot reproduce any errors in firefox, other than your menu is always ontop of the background image. If you post your entire code in the ssmItems.js file, I will check it for errors.

At first glance, it looks like theres some kind of conflict with your page format and the .css for the menu that messes it up in firefox. There's a lot of weird stuff going on in your source code.

[Lockerbie]

Thank you for your quick reply.
Do I understand you correct that I'd better look for another way to make such a menu? (Any suggestions?)
In the sourcecode of the site I mentioned earlier, I see the maker used layers, but I'm not quit sure how to do that...

The code from the ssmItems.js-file:

<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=838;
staticYOffset=30; // no quotes!!
slideSpeed=20; // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="Verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Dynamic Drive", "http://www.dynamicdrive.com", ""]
ssmItems[2]=["What's New", "http://www.dynamicdrive.com/new.htm",""]
ssmItems[3]=["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""]
ssmItems[4]=["Message Forum", "http://www.codingforums.com", "_new"]
ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""]
ssmItems[6]=["Link to Us", "http://www.dynamicdrive.com/link.htm", ""]

ssmItems[7]=["FAQ", "http://www.dynamicdrive.com/faqs.htm", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "http://www.dynamicdrive.com/contact.htm", "",1]

ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["JavaScript Kit", "http://www.javascriptkit.com", ""]
ssmItems[11]=["Freewarejava", "http://www.freewarejava.com", ""]
ssmItems[12]=["Coding Forums", "http://www.codingforums.com", ""]

buildMenu();

//-->

[tonyking]

If you want multiple instances of the sliding menu, conditional upon eachother as in your example link, then yes, I would search for another script, or use the script off of lettertuin.nl, and just customize it.

[compuman]

I got this to work in Firefox after some modifications but it messed up with IE, can anyone peek at the code and see what I messed up
Can be viewed working in firefox and not working in IE at: http://www.ceplocal2003.org/test1.html
IE just doesn't like my changes I guess because when viewed in IE it is barely visible LOL
Any help would be great
First code is the short ssmitems and the next code is the ssm.

<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=10; // no quotes!!
XOffset=100;
staticYOffset=10; // no quotes!!
slideSpeed=1 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=100; // Must be a multiple of 10! no quotes!!
menuCols=1;
hdrFontFamily="arial";
hdrFontSize="6";
hdrFontColor="black";
hdrBGColor="#FFFFFF";
hdrAlign="center";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="4";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="center";
barBGColor="";
barFontFamily="arial";
barFontSize="0";
barFontColor="white";
barVAlign="center";
barWidth=0; // no quotes!!
barText=""; // <IMG> tag supported. Put exact html for an image to show.

/////////////////////////// ssmItems[1]=["HOME", "http://www.eplocal2003.org", "" , 1, "no"] Makes two on one line

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Home", "http://www.eplocal2003.org", ""]
ssmItems[2]=["About Us", "http://www.ceplocal2003.org/CEPLocal2003UnionAboutUs.html",""]
ssmItems[3]=["Contact Us", "http://www.ceplocal2003.org/CEPLocal2003UnionContacts.html", ""]
ssmItems[4]=["Where We Are", "http://www.ceplocal2003.org/CEPLocal2003UnionWhereWeAreLocated.html", "_new"]
ssmItems[5]=["Documents & Forms", "http://www.ceplocal2003.org/CEPLocal2003UnionDocumentsandForms.html", ""]
ssmItems[6]=["Featured Unit", "http://www.ceplocal2003.org/CEPLocal2003UnionFeatureBargainingUnit.html", ""]
ssmItems[7]=["Calendar", "http://www.ceplocal2003.org/CEPLocal2003UnionCalendar.html", ""] //create two column row
ssmItems[8]=["Member F.A.Q", "http://www.ceplocal2003.org/CEPLocal2003UnionMemberFAQ'S.html", ""]
ssmItems[9]=["Financials", "http://www.ceplocal2003.org/CEPLocal2003UnionFinancials.html", ""]
ssmItems[10]=["C/A's", "http://www.ceplocal2003.org/CEPLocal2003UnionCollectiveAgreementspage.html", ""]
ssmItems[11]=["TSSA", "http://www.ceplocal2003.org/CEPLocal2003UnionTSSAIssue.html", ""]
ssmItems[12]=["Favorites", "http://www.ceplocal2003.org/CEPLocal2003UnionFavoriteLinks.html", ""]
ssmItems[13]=["Glossary", "http://www.ceplocal2003.org/CEPLocal2003UnionGlossaryofTerms.html", ""]

//// THis creates a new header below the link ssmItems[9]=["External Links", "", ""] //create header
///test Header Links ssmItems[10]=["JavaScript Kit", "http://www.cep.ca", ""]
///test Header Links ssmItems[11]=["Freewarejava", "http://www.cep.ca", ""]
///test Header Links ssmItems[12]=["Coding Forums", "http://www.cep.ca", ""]

buildMenu();

//-->







//Static Slide Menu 6.5 © MaXimuS 2000-2001, All Rights Reserved.
//Site: http://www.absolutegb.com/maximus
//Script featured on Dynamic Drive (http://www.dynamicdrive.com)

NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;ssmItems=new Array();

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

moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(0)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',0)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS6) {ssm.left = parseInt(ssm.left)+num+"px";}
if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = truebody().scrollTop;}
if (NS6||IE||NS) {
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) bssm.pixelTop+=smooth;
if (NS6) bssm.top=parseInt(bssm.top)+smooth+"px"
if (NS) bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout('makeStatic()', 1)}}

function buildBar() {
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}

function initSlide() {
if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style;
bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";}
else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style
bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";}
else if (NS) {bssm=document.layers["basessm1"];
bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];
bssm2.clip.left=0;ssm.visibility = "show";}
if (menuIsStatic=="yes") makeStatic();}

function buildMenu() {
if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+30)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'">');
for(i=0;i<ssmItems.length;i++) {
if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}
else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')}
if(!ssmItems[i][1]){
document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'">&nbsp;<font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}
else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'px" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'">&nbsp;<A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')}
if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}
if(ssmItems[i][4]!="no"){document.write('</TR>')}}
document.write('</table>')
if (NS6){document.write('</TD></TR></TABLE>')}
if (IE||NS6) {document.write('</DIV></DIV>')}
if (NS) {document.write('</LAYER></ILAYER></LAYER>')}
theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}

[amic180]

how do i find style tags because i want to change the color of the links.
what do i need to replace?pls help

"edit the link colors, go to the STYLE tags and edit the ssm2Items colors"

i want to make link colors white