/    Sign up×
Community /Pin to ProfileBookmark

innerHTML in netscape

Copy linkTweet thisAlerts:
Aug 21.2003

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.

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangAug 21.2003 — and the code ...
Copy linkTweet thisAlerts:
@MickeysoftauthorAug 21.2003 — <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>
Copy linkTweet thisAlerts:
@FangAug 21.2003 — Change the div to a span tag.
Copy linkTweet thisAlerts:
@MickeysoftauthorAug 22.2003 — 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.
Copy linkTweet thisAlerts:
@MickeysoftauthorAug 22.2003 — 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?
Copy linkTweet thisAlerts:
@FangAug 22.2003 — Have you changed the selector div for span, or do you mean some other problem?
Copy linkTweet thisAlerts:
@MickeysoftauthorAug 25.2003 — 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
Copy linkTweet thisAlerts:
@MickeysoftauthorAug 26.2003 — <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>
Copy linkTweet thisAlerts:
@GollumAug 26.2003 — you could try specifying the widths and heights in the <TD> tags...
<i>
</i>&lt;td width=200 valign=top height=100&gt;
Copy linkTweet thisAlerts:
@MickeysoftauthorAug 26.2003 — 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.
Copy linkTweet thisAlerts:
@GollumAug 26.2003 — Here's another thing to try...

<center> tags have been deprecated, instead, use a <div> with text-alignment set to center:
<i>
</i>'And why the flashing when using the center tag?&lt;br&gt;&lt;div style="text-align:center;"&gt;&lt;span&gt;Most strange!!&lt;/span&gt;&lt;/div&gt;'
×

Success!

Help @Mickeysoft spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...