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!

Register Log in
  • Congratulations strongm 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

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 ?
 
Sort by date Sort by votes
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:
 
Upvote 0 Downvote
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 ?!
 
Upvote 0 Downvote
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:
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
330
xwb
xwb
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
410
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
454
xwb
xwb
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
143
penguinspeaks
penguinspeaks
amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
132
amrmnabil
amrmnabil

Part and Inventory Search

Sponsor

Back
Top