Javascript help please!!!

searchbliss · 01-10-2008, 12:40 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>

searchbliss · 01-11-2008, 08:45 AM

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

Taltos · 01-11-2008, 08:56 AM

I didn't dig through all the code and reverse engineer it but...if it doesn't work until you refresh the page, I would try moving the script up into the HEAD. Javascript in the body gets recognized on load but if you change things dynamically, it can cause problems with script in the head. The fact that refresh seems to make it work make me thing your script, or most of it belongs in the HEAD. Just a quick guess for you. Good luck!

searchbliss · 01-11-2008, 12:22 PM

I have tried that, but I'll try some new variations again. Thanks.

searchbliss · 01-13-2008, 01:19 PM

It still doesn't function without re-loading, no matter what I do. I'm desperate need of help! What the "h" "e" double hockey sticks am I doing wrong?

nasty.web · 01-14-2008, 03:23 AM

Ever considered looking at jQuery or the likes?
http://jscroller.markusbordihn.de/

searchbliss · 01-15-2008, 01:51 PM

Quote:

Originally Posted by nasty.web

Ever considered looking at jQuery or the likes?
http://jscroller.markusbordihn.de/

Thanks for the help, but this won't work for me. If you cut and paste the code above into an html document, then test it on IE or Firefox, you see what I am trying to do...without having to re-load the page after making a selection. You should be able to make a selection, then the active link slides into view. Thanks.

nasty.web · 01-15-2008, 02:19 PM

Ok, quick ugly fix, but you'll get the idea:

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="" id="slink">&nbsp;</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;
      l = document.getElementById("slink");
      l.innerHTML = document.getElementById("s").value;
      l.href = document.getElementById("s").value;
			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>

searchbliss · 01-15-2008, 02:38 PM

I get an error in IE, yet it still works. Thanks alot for your help. I will fix the IE error...I'm just so happy it works...ugly or not. Thank you, thank you, thank you!

searchbliss · 01-17-2008, 02:12 PM

I tweeked it and all works great now. Thanks again nasty.web!

nasty.web · 01-18-2008, 03:39 AM

Quote:

Originally Posted by searchbliss

I tweeked it and all works great now. Thanks again nasty.web!

You're welcome