Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

JS Browsers Problem 1

Status
Not open for further replies.

triquad

Programmer
Feb 5, 2009
16
EG
I am trying to apply a news ticker using JS. It works fine & smoothly using IE but when I try to use it with any other browser, it doesn't work.

Firefox - Chrome - Safari: The Whole news line appears at once across the screen & it's not moving.

Opera: Nothing Appears.

JS file
Code:
TICKER_CONTENT = document.getElementById("TICKER").innerHTML;
 
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:cascade-light; font-size:18px; color:#ffe991";
TICKER_PAUSED = false;

ticker_start();

function ticker_start() {
	var tickerSupported = false;
	TICKER_WIDTH = document.getElementById("TICKER").style.width;
	var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";

	// Firefox
	if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
		document.getElementById("TICKER").innerHTML = "<TABLE  cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'>&nbsp;</SPAN>"+img+"</TD></TR></TABLE>";
		tickerSupported = true;
	}
	// IE
	if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
		document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
		tickerSupported = true;
	}
	if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
		document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
		document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
		document.getElementById("TICKER").style.display="block";
		TICKER_tick();
	}
}

function TICKER_tick() {
	if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
	if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
	if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
	window.setTimeout("TICKER_tick()", 30);
}

HTML
Code:
  <div style="
position: absolute; left: 253px; top: 152px;
z-index:9" ID="TICKER" STYLE="overflow:hidden; width:685px"  
onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
some text some text some text some text some text somesome text some text some text textsome text some text some text </div>
<script type="text/javascript" 
src="webticker_lib.js" language="javascript"></script>

Do you have any ideas how can I solve this problem ?
 
I agree. Doing browser detection and outputting completely different markup like that should be a thing of the past. You should be able to manage this with one set of markup.

My advice: ditch your browser detection, and go with the DIV markup for all browsers.

Also note that this:

Code:
TICKER_WIDTH = document.getElementById("TICKER").style.width;

will return the width with unit specifier included, e.g. '10px', '5em', etc... so you'd need to run it through 'parseInt(n, 10)' to get the number only before using that number. This also assumes the width style has been explicitly set before trying to read it back.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Thank you. I have solved the problem but I don't understand the solution. I had to remove
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
from my file & it worked when I did so. Do you know why ?!
 
No - but be aware that doing so will put some browsers into non-standards mode ('quirks mode'), and so rendering may not always produce consistent results across all browsers.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top