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!

Scroller not visible in FF or NN, but works in IE?

Status
Not open for further replies.
pyth0n

pyth0n

Programmer
Jan 26, 2005
23
GB
I am working on a site where I am using a javascript text scroller that I have borrowed for news items. The site is being written in ASP.NET, linking various user controls to build the page. Testing the site locally, I find that the page displays correctly in IE6, but when tested in NN7.1 or FF1.02, the scroller doesn't show. The source file for all browsers looks to be the same (as given below). When tested, NN and FF see the code, but doesn't seem to be able to comprehend the 'txt' variable given in the script tag.

This is the problem area:

<!-- HERE SEEMS TO BE THE PROBLEM -->

if(ns4){
txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
txt+='</td></tr></table>'
txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
txt+='<layer name="inner" width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
txt+='</layer>';
}else{
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
}
document.write(txt); <!-- This document.write won't write in FF or NN -->

I checked the orginal site where I saw this in all the above browsers and the code worked then, but why not in my tests?

My local test system is WinXP Pro with IIS5.1 .NET Framework v1.1 and the pages are being scripted with VB.NET and JavaScript. If necessary, I can supply the actual .aspx and .ascx files, but didn't think it necessary at the moment.

Thanks to anyone who can help

The code for the whole source output is given below:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="<head>
<title>Welcome to the High Ridge Specialist Sports College Website</title>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html" ; />
<!-- <link href="./styles/styles.css" type="text/css" rel="stylesheet" /> -->
</head>
<body>
<table width="100%">
<tr><td>
<!-- Header script - DO NOT TOUCH!! -->

<script language="JavaScript">
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script type="text/javascript">
<!--
function ToDaysDate()
{
dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "Decemeber")

now = new Date

var raise
var Day = now.getDate()

var year = now.getYear()
if (year < 2000) { year += 1900 }

switch(Day){
case 1: raise = "st"; break
case 2: raise = "nd"; break
case 3: raise = "rd"; break
default: raise ="th" }

return(dayName[now.getDay()] + ", " + Day +"<sup>"+raise+"</sup> "+ monName[now.getMonth()] +" "+year)
}
// -->
</script>
<!-- Top menu table -->
<table cellspacing="0">
<tr>
<td><img src="./header/images/top_spacer.gif" /></td>
<td><a href="./"> <img alt="Home Page" src="./header/images/home.gif" /></a></td>
<td><a href="./about/"><img alt="About Us" src="./header/images/about.gif" /></a></td>
<td><a href="./awards/"><img alt="Awards" src="./header/images/awards.gif" /></a></td>
<td><a href="./departments/"><img alt="Departments" src="./header/images/departs.gif" /></a></td>
<td><a href="./contact/"><img alt="Contact Us" src="./header/images/contact.gif" /></a></td>
</tr>
</table>
<!-- Side menu table -->
<table cellspacing="0" align="left">
<tr>
<td><a href="./students/"><img alt="Students" src="./header/images/students.gif" /></a>
<br />
<a href="./teachers/"><img alt="Teachers" src="./header/images/teachers.gif" /></a>
<br />
<a href="./policies/"><img alt="Policies" src="./header/images/policies.gif" /></a>
<br />
<a href="./links/"><img alt="Links" src="./header/images/links.gif" /></a>
<br />
</td>
</tr>
</table>
<!-- Title Content Table -->
<table cellspacing="0">
<tr>
<td>
<table>
<tr>
<td><img alt="High Ridge Logo" src="./header/images/logo.gif" /></td>
<td><img alt="spacer" src="./header/images/title_spacer.gif" /></td>
<td><img id="_ctl1_title_image" src="header/images/welcome_header.gif" alt="Title Image" border="0" /></td></tr>
<tr>
<td valign="bottom" align="right" colspan="3"><font size="-1">
<script type="text/javascript">document.write(ToDaysDate())</script></font></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Main Page Content here-->

<!-- Enter the page content here -->

<!-- Contents page -->

<script type="text/javascript">

function greeting() {

atime = new Date;
hour = atime.getHours();

if (hour >= 18 || hour < 0 ) {
greet = "Good Evening ,"
} else {
if (hour >= 12) {
greet = "Good Afternoon, "
} else {
if (hour >= 0) {
greet = "Good Morning, "
}
}
}

return greet;

}
</script>

<table cellspacing="0">
<tr><td>
<h1></h1>
</td></tr>
<tr>
<td align="center">

<!-- Content goes here -->

<h2 id="home"><script type="text/javascript">document.write(greeting())</script>and welcome to the High Ridge Web Site</h2>
</td>
</tr>
<tr>
<td>
<p>Thank you for visiting us here at High Ridge School. Hopefully you like our new website, it is full of information
that you will hopefully find useful and interesting.</p>
</td>
<td rowspan="5"><img src="images/tenpx_spacer.gif" /></td>
<td rowspan="5" id="news">
<table width="220px" height="200px"><tr><td>

<script language="javascript">

//ENTER CONTENT TO SCROLL BELOW.
var content='<p>content</p>';

var boxheight=200; // BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=220; // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="#ececec"; // BACKGROUND BOX COLOR.
var speed=50; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2; // PIXELS "STEPS" PER REPITITION.
var godown=false; // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var outer,inner,elementheight,ref,refX,refY;
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var txt='';

<!-- HERE SEEMS TO BE THE PROBLEM -->

if(ns4){
txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
txt+='</td></tr></table>'
txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
txt+='<layer name="inner" width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
txt+='</layer>';
}else{
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
}
document.write(txt); <!-- This docuemnt.write won't write in FF or NN -->

function getElHeight(el){
if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
else if(ie4||ie5)return (el.style.height)? el.style.height : el.clientHeight;
else return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
if(ns4)return el.pageX;
if(ie4||w3c){
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}}

function getPageTop(el){
var y;
if(ns4)return el.pageY;
if(ie4||w3c){
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}}

function scrollbox(){
if(ns4){
inner.top+=(godown)? pixelstep: -pixelstep;
if(godown){
if(inner.top>boxheight)inner.top=-elementheight;
}else{
if(inner.top<2-elementheight)inner.top=boxheight+2;
}}else{
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}}

window.onresize=function(){
if(ns4)setTimeout('history.go(0)', 400);
else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}}

window.onload=function(){
outer=(ns4)?document.layers['outer']:(ie4)?document.all['outer']:document.getElementById('outer');
inner=(ns4)?outer.document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner');
ref=(ns4)?document.layers['ref']:(ie4)?document.all['ref']:document.getElementById('ref');
elementheight=getElHeight(inner);
if(ns4){
outer.moveTo(getPageLeft(ref),getPageTop(ref));
outer.clip.width=boxwidth;
outer.clip.height=boxheight;
inner.top=(godown)? -elementheight : boxheight-2;
inner.clip.width=boxwidth-4;
inner.clip.height=elementheight;
outer.visibility="show";
inner.visibility="show";
}else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
}
setInterval('scrollbox()',speed);
}
</script>
</td></tr></table>
</td>
</tr>

<tr><td align="center"><img src="images/home_center.gif"/></td></tr>

<tr><td>
<p>Plans are to make this site interactive with special areas so that students at the school will have access to
their course materials online.</p>
</td>

</tr>
</table>


</td></tr></table>
<!-- Footer script - DO NOT TOUCH!! -->
<table cellspacing="0" width="100%">
<tr><td rowspan="5"><img src="./header/images/top_spacer.gif" width="21"/></td></tr>

<tr><td id = "footer"><hr /></td></tr>
<tr><td id = "footer">&nbsp;</td></tr>

<tr>
<td id="footer">
<a id="footer" href="./">Home</a> &nbsp;|&nbsp;
<a id="footer" href="./about/">About Us</a> &nbsp;|&nbsp;
<a id="footer" href="./awards/">Awards</a> &nbsp;|&nbsp;
<a id="footer" href="./departments/">Departments</a> &nbsp;|&nbsp;
<a id="footer" href="./contact/">Contact Us</a> &nbsp;|&nbsp;
<a id="footer" href="./students/">Students</a> &nbsp;|&nbsp;
<a id="footer" href="./teachers/">Teachers</a> &nbsp;|&nbsp;
<a id="footer" href="./policies/">Policies</a> &nbsp;|&nbsp;
<a id="footer" href="./links/">Links</a> &nbsp;|&nbsp;
<a id="footer" href="./policies/terms/">Terms of Use</a> &nbsp;|&nbsp;
<a id="footer" href="./policies/privacy/">Privacy Statement</a>
</td>
</tr>

<tr><td id = "footer" colspan="2">&nbsp;</td></tr>
<tr><td id = "footer" colspan="2"><span id="footer">&copy; Copyright High Ridge School 2005</span></td></tr>

</table>

</body>
</html>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>
 
Sort by date Sort by votes
Have you tried using the latest version of that scroller code? V1.3 can be found here:


(click the "Vertical marquee" link).

P.S. You might want to try it without all the Symantec anti-spyware, anti-popup code being loaded, as it may well be that that is interfering with the smooth operation of Brian's scrolling code in some browsers.

P.P.S. It would be nice (although, granted, not asked for) to leave the author's name and site details in the script. That way, it doesn't look as if you are intentionally passing it off as your own.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]
 
Upvote 0 Downvote
Thanks for the tips, I tried them, nothing seems to work. What I did find yesterday however, is that when I put in an ASP.NET label on a page, when displayed in IE, the label shows fine and checking the code it displays all the styles as attributes in the span tag as below:

<span id="_ctl2_lblMenu" style="background-color:#497FBF;border-style:None;width:100%;"><span id='menu'><br /></span></span></td>

Comparing the same section of the page in FF/NN I get this

<span id="_ctl2_lblMenu"><span id='menu'><br /></span></span>

Anyway around this - as this I think is the root of the issue. If I need to create the styles separately, it sort of defeats the object of using the code in the first place doesn't it?

As for the acknowlegdements, I can only apologise to Brain. The site that I took the code from didn't include the comments and update history. I have corrected this from the link given.

Cheers
 
Upvote 0 Downvote

It sounds like your .net control is browser sniffing, and not delivering all the code to the page for non-IE browsers.

I'd start looking at you .net control, if I were you.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Looks as though you are right, I found an article on andrewu.co.uk about ASP.NET and browser sniffing that seems to explain this. Not quite sure as to how to create a work-around but something will crop up.

Thanks for your help - greatly appreciated.

Clive
 
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
345
xwb
xwb
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
274
rogerte
rogerte
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
646
ggriffit
ggriffit
mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
117
mayamanako
mayamanako
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
221
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top