PDA

Click to See Complete Forum and Search --> : innerHTML in netscape

Mickeysoft
08-21-2003, 09:07 AM
In netscape, when I update the innerHTML (just simple text) it 'flickers' (i.e. the old text is removed then the new text is displayed with a slight delay). In ie this does not happen, the new text appears instantly.
Reducing the font size helps and so does reducing the amount of text!
Any ideas how to stop the flicker?

My only idea is to use 2 layers, and handle the switch between text myself by displaying one layer while updating the other.

Regards.
Fang
08-21-2003, 09:32 AM
and the code ...
Mickeysoft
08-21-2003, 09:36 AM
<html>
<body>

<style type="text/css">
<!--
Div { font-size: 12px; font-face: verdana }
A:link, A:visited, A:active { text-decoration: none }
-->
</style>

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

ie=(document.all)?1:0
layers=(document.layers)?1:0
ns=(parseInt(navigator.appVersion)>=5&&navigator.appName=="Netscape")

news=["The text for the message goes in here. It flickers in netscape but not in ie.",
"With a yo ho ho and a bottle of rum. More on that story later..."]

function newsBar (name) {
this.name=name
this.line=0
this.position=0
document.write("<div id=\""+name+"\" style=\"TOP:0px;LEFT:0px;HEIGHT:232px;WIDTH:320px;\"></div>")
if (ie)
this.newsbar=document.all[name]
if (ns)
this.newsbar=document.getElementById(name)
if (layers)
this.newsbar=document.layers[name].document
this.addCharacter=addCharacter
}

function addCharacter() {
if (this.position<=news[this.line].length) {
while (news[this.line].substr(this.position,1)=="<")
this.position+=news[this.line].substr(this.position).indexOf(">")+1
text=news[this.line].substr(0,this.position++)+"_"
timer=50
} else {
text=news[this.line]
timer=2000
this.line<news.length-1?this.line++:this.line=0
this.position=0
}
if (layers) {
alert("not yet tested")
this.newsbar.open()
this.newsbar.write(text)
this.newsbar.close()
} else
this.newsbar.innerHTML=text
setTimeout(this.name+".addCharacter()",timer)
}

newsbar=new newsBar("newsbar")
newsbar.addCharacter()

// End -->
</script>

</body>
</html>
Fang
08-21-2003, 02:36 PM
Change the div to a span tag.
Mickeysoft
08-22-2003, 02:46 AM
That works great. Thanks a lot.
Can you give a reference to some online documentation that will point out my mistake, i have no idea what the difference between a div and a span is? in fact, any links to html/ie specifics/netscape specifics bible would be much appreciated.
Mickeysoft
08-22-2003, 07:39 AM
Also, why does netscape resize the hieght,width of the span so that the given text fits correctly? I don't want this to happen.
how can I stop the automatic resize in netscape on the span?
Fang
08-22-2003, 05:07 PM
Have you changed the selector div for span, or do you mean some other problem?
Mickeysoft
08-25-2003, 04:07 AM
I am using a span with a div as its parent.
Place some content on the right hand side of the span (e.g. put into a table).
When the script runs, visually the text wraps when it gets to the right hand side (as it is supposed to) and the word moves to the lower line. But the content on the right hand side moves across the page, thinking it has to move because of the text but it does not have to because the text has wrapped. Its like the higest level page formatter doesn't calculate the width of the span correctly, it takes the actual length of the text. I suppose the length should be taken from the parent, which is a div and not from the span.
I got around this problem by automatically inserting a <br> in the text when it is needed which works fine, but seems a bit ott.
If you use a <center> tag in the news[] text then in netscape the flicker comes back again. Perhaps I should use a <font ?=center> type tag?
I never realised that the difference between ie and netscape was so big. ie seems to work exactly like I think it should, netscape leaves a lot to be desired...
I will try and post a small example later.
Cheers
Mickeysoft
08-26-2003, 02:31 AM
<html>
<body>

<table border=1><tr><td>
<script language="JavaScript">
<!-- Begin

news=["bla bla But not when the page updates using the innerHTML",
"And why the flashing when using the center tag?<br><center>Most strange!</center>"]

function newsBar (name) {
this.addCharacter=addCharacter
if (document.getElementById)
this.compatible=1
else if (document.all)
this.compatible=2
else {
this.compatible=0
return
}
//document.write("<div id=\""+name+"parent\" style=\"TOP:0px;LEFT:0px;HEIGHT:100px;WIDTH:200px;\"><span id=\""+name+"\"></span></div>")
document.write("<div id=\""+name+"\" style=\"TOP:0px;LEFT:0px;HEIGHT:100px;WIDTH:200px;\"></div>")
this.name=name
this.line=0
this.position=0
if (this.compatible==1)
this.newsbar=document.getElementById(name)
if (this.compatible==2)
this.newsbar=document.all[name]
}

function addCharacter() {
if (!this.compatible) return
if (this.position<=news[this.line].length) {
while (news[this.line].substr(this.position,1)=="<")
this.position+=news[this.line].substr(this.position).indexOf(">")+1
text=news[this.line].substr(0,this.position++)+"_"
timer=50
} else {
text=news[this.line]
timer=2000
this.line<news.length-1?this.line++:this.line=0
this.position=0
}
this.newsbar.innerHTML=text
setTimeout(this.name+".addCharacter()",timer)
}

newsbar=new newsBar("newsbar")

// End -->
</script>
</td>
<td>This text moves and should not</td>
</tr>
</table>

<script language="JavaScript">
<!-- Begin
newsbar.addCharacter()
// End -->
</script>

</body>
</html>
Gollum
08-26-2003, 03:03 AM
you could try specifying the widths and heights in the <TD> tags...

<td width=200 valign=top height=100>
Mickeysoft
08-26-2003, 03:12 AM
But using the <center> tag in the text makes the text flash???
swap the commented/uncommented document.write and everthing goes well until it hits the <center> tag - then the flashing starts!
Oh well, its good enough for my purposes...
Thanks again.
Gollum
08-26-2003, 04:55 AM
Here's another thing to try...
<center> tags have been deprecated, instead, use a <div> with text-alignment set to center:

'And why the flashing when using the center tag?<br><div style="text-align:center;"><span>Most strange!!</span></div>'