PDA

View Full Version : Editing a Dynamic-Fx Slide-In Menu



succar
11-13-2004, 09:59 PM
Hey all,

I downloaded this DHTML script for a Dynamic-Fx Slide-In Menu from http://www.dynamicdrive.com and i'm facing some trouble.

The menu suits my needs perfectly with only 1 problem. I want to position the menu in a fixed location on my website somewhere other than the edge of the screen, so i adjust the xy coordinates in the ssmItems.js file to do so...the problem is that the menu changes location depending on whether the window is maximized or not and on the resolution of the monitor. I want it to stay in 1 place ALWAYS! How? PLEASE HELP!

there are two .js files associated with this scrip, ssmItems.js & ssm.js and a bit of html in the <head> section of the file into which the menu is placed. Please find all 3 below:


HTML code in <head> section:
<STYLE>
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</STYLE>

<SCRIPT SRC="ssm.js" language="JavaScript1.2">
</SCRIPT>

<SCRIPT SRC="ssmItems.js" language="JavaScript1.2"></SCRIPT>

<script type="text/javascript">


Code from ssmItems.js file
<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=188; // no quotes!!
XOffset=0;
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="feb300";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=210; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="Arial";
hdrFontSize="2";
hdrFontColor="#feb300";
hdrBGColor="#000066";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="arial";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#feb300";
linkTarget="_top";
linkAlign="Left";
barBGColor="#feb300";
barFontFamily="Arial";
barFontSize="2";
barFontColor="#000066";
barVAlign="center";
barWidth=20; // no quotes!!
barText="RESOURCES 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]=["Apologetics Resources"] //create header
ssmItems[1]=["Christ the Teacher Series", "http://www.lumenverum.org",""]
ssmItems[2]=["Lord of History Series", "http://www.lumenverum.org",""]
ssmItems[3]=["Other Booklets", "http://www.lumenverum.org", ""]
ssmItems[4]=["Catholic Q&A Message Board", "http://www.lumenverum.org", ""]
ssmItems[5]=["Ask us a question directly", "http://www.lumenverum.org", ""]
ssmItems[6]=["LVA Catalogue"] //create header
ssmItems[7]=["Books", "http://www.lumenverum.org", ""]
ssmItems[8]=["Tapes / CD's", "http://www.lumenverum.org", ""]
ssmItems[9]=["Other", "http://www.lumenverum.org", ""]
ssmItems[10]=["Lumen Verum's..."]
ssmItems[11]=["Consitution", "http://www.lumenverum.org", ""]
ssmItems[12]=["Patron Saint", "http://www.lumenverum.org", ""]

buildMenu();

//-->


Code from ssm.js file

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

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

moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
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',1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;}
if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = document.body.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||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+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;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)+'" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" 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+'" 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]+'" 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)}

ultramagna
11-14-2004, 11:35 PM
Works fine for me and stays static when i move the coordinates around. :)

succar
11-15-2004, 08:16 PM
Thank you for reply ultramagna,

Did you have the menu left aligned all the way to the edge (i.e. x=0)? Or did you have the menu somewhere else (e.g. x=350)?

Can you think of any reasons why it doesn't stay in one place with me? I mean theoretically, when using xy coordinates the menu can't stay in one position for every screen size and/or window size as the coordinates from the left side to your desired position varies from screen to screen.

Am I going about this the wrong way? Or is there a way to do away with the xy coordinates and just have the menu positioned in a certain layout table thereby ensuring itís in the same position always regardless of screen sizes?

PLEASE PLEASE HELP!

ddadmin
11-16-2004, 04:04 AM
format

Unfortuantely with absolutely positioned menus, the absolute distance will change depending on the user's resolution somewhat. There is unfortunately no way around this due to the nature of the script. A coordinates input of 0, 0 will look the same for all resolutions obviously, but when you start changing the numbers, it will start to look differently...