JavaScript Forum

**kline11** · 01-10-2008, 03:38 PM

I'm having problems with this script. Everthing works as should, but only if I make a selection, then re-load the page. I want it to occur with the onChange event without having to re-load the page. What am I missing??? Thanks.

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<BODY>
<font face="Verdana" size="2">Menu: </font> 
   <select id="s" name="s" onChange="doDMarquee()" style="color:#FF0000;background-color:#CCCCCC;font-family:Verdana;font-size:12px;">
    <option value="" selected>- Select One -</option>
    <option value="http://www.searchbliss.com/Webmaster-Tools.htm">Webmaster Tools</option>
    <option value="http://www.searchbliss.com/Free-Website-Content.htm">Free Website Content</option>
    <option value="http://www.searchbliss.com/generators.asp">Buy Tools</option>
   </select>
<SCRIPT language="JavaScript">
document.write('<div id=dmarquee class=dmarquee><div><div><a href="'+document.all.s.value+'">'+document.all.s.value+'</a></div></div></div>')

 var oMarquees = [], oMrunning,
	oMInterv =        20,     //interval between increments
	oMStep =          9,      //number of pixels to move between increments
	oStopMAfter =     5,     //how many seconds should marquees run (0 for no limit)
	oResetMWhenStop = false,  //set to true to allow linewrapping when stopping
	oMDirection =     'left'; //'left' for LTR text, 'right' for RTL text

/***     Do not edit anything after here     ***/

function doMStop() {
	clearInterval(oMrunning);
	for( var i = 0; i < oMarquees.length; i++ ) {
		oDiv = oMarquees[i];
		oDiv.mchild.style[oMDirection] = '0px';
		if( oResetMWhenStop ) {
			oDiv.mchild.style.cssText = oDiv.mchild.style.cssText.replace(/;white-space:nowrap;/g,'');
			oDiv.mchild.style.whiteSpace = '';
			oDiv.style.height = '';
			oDiv.style.overflow = '';
			oDiv.style.position = '';
			oDiv.mchild.style.position = '';
			oDiv.mchild.style.top = '';
		}
	}
	oMarquees = [];
}
function doDMarquee() {

	if( oMarquees.length || !document.getElementsByTagName ) { return; }
	var oDivs = document.getElementsByTagName('div');
	for( var i = 0, oDiv; i < oDivs.length; i++ ) {
		oDiv = oDivs[i];
		if( oDiv.className && oDiv.className.match(/\bdmarquee\b/) ) {
			if( !( oDiv = oDiv.getElementsByTagName('div')[0] ) ) { continue; }
			if( !( oDiv.mchild = oDiv.getElementsByTagName('div')[0] ) ) { continue; }

	var selObj = document.getElementById('s');
	var selIndex = selObj.selectedIndex;
	oDiv.value = selObj.options[selIndex].text;

			oDiv.mchild.style.cssText += ';white-space:nowrap;';
			oDiv.mchild.style.whiteSpace = 'nowrap';
			oDiv.style.height = oDiv.offsetHeight + 'px';
			oDiv.style.overflow = 'hidden';
			oDiv.style.position = 'relative';
			oDiv.mchild.style.position = 'absolute';
			oDiv.mchild.style.top = '0px';
			oDiv.mchild.style[oMDirection] = oDiv.offsetWidth + 'px';
			oMarquees[oMarquees.length] = oDiv;
			i += 2;
		}
	}
	oMrunning = setInterval('aniMarquee()',oMInterv);
	if( oStopMAfter ) { setTimeout('doMStop()',oStopMAfter*1000); }
}
function aniMarquee() {
	var oDiv, oPos;
	for( var i = 0; i < oMarquees.length; i++ ) {
		oDiv = oMarquees[i].mchild;
		oPos = parseInt(oDiv.style[oMDirection]);
		if( oPos <= -1 * oDiv.offsetWidth ) {
			oDiv.style[oMDirection] = oMarquees[i].offsetWidth + 'px';
		} else {
			oDiv.style[oMDirection] = ( oPos - oMStep ) + 'px';
		}
	}
}
if( document.s.addEventListener ) {
	document.all.s.addEventListener('change',doDMarquee,false);
} else if( document.all.s.addEventListener ) {
	document.all.s.addEventListener('change',doDMarquee,false);
} else if( document.all.s.attachEvent ) {
	document.all.s.attachEvent('onchange',doDMarquee);
}
</SCRIPT>
</BODY> 
</html>

**kline11** · 01-11-2008, 03:23 PM

What am I missing? I'm sure it's something stupid and it's making me crazy.

**kline11** · 01-13-2008, 04:15 PM

I still can't get this to work without re-loading the page. Please...is there anyone out there that can help. I'm getting desperate.

**chrishirst** · 01-13-2008, 06:15 PM

1/ I would suspect that the functions being defined AFTER the onchange event is defined to cause some problems in some browsers
Move the script block into the document head or in the body ABOVE the select element.

2/ the doDMarquee() doesn't clear the currently set interval before redefining it.
Point the onchange event to a function that calls clearInterval(oMrunning) BEFORE calling doDMarquee() (check that oMrunning exists first of course)

Not tested either of those BTW

**kline11** · 01-15-2008, 05:01 PM

Thanks for the help Chris, but this didn't work at all for me. I can't figure out what I am doing wrong...and now I'm getting a javascript error.

**kline11** · 01-17-2008, 05:15 PM

I figured it out...finally...and all works great now in IE and Firefox. Chris, Thanks again for your suggestions and your Firefox fix with the other menu.