Html Formating in Javascript Variable

**xjjon88** · 10-24-2012 12:42 AM

Hello,

I have a simple question but I can't seem to figure it out.

Code:

<script>
var msgIX = 0
var msgs = new Array(
 "1",
 "2"
)
   
function scrollMessages(milliseconds) {
 window.setInterval("displayMessage()", milliseconds)
}
function displayMessage() {
 if(document.getElementById != null) {
  var heading = document.getElementById("scrollme")
  heading.firstChild.nodeValue = msgs[msgIX]
 }else{
  if(navigator.appName == "Microsoft Internet Explorer") {
   var heading = document.all.item("scrollme")
   heading.innerText = msgs[msgIX]
  }
 }
 ++msgIX
 msgIX %= msgs.length
}</script>
<body onload="scrollMessages(2000)">
<h1 align="center" id="scrollme">0</h1>

So basically 1 and 2 change but I am wondering how I can display the text with html formatting in them.

For example, in the array, I want each variable to display the following

"sample text <br /> -author"
"sample text 2 <br /> -author 2"

**007Julien** · 10-24-2012 03:41 AM

If you want absolutely a script for IE4 (with document.all - document.getElementById is valid since 1998 with IE5) use a function like this

Code:

function $(id){
	if (document.getElementById) return document.getElementById(id);
	if (document.all) return document.all[id]; 
}

Then the function dispalyMessage is easy to define

Code:

function displayMessage(){
	$("scrollme").innerHTML=msgs[msgIX++];
	msgiX%=msgs.length;
}

**xjjon88** · 10-24-2012 11:04 AM

Will that allow me to use HTML in the string?

**007Julien** · 10-24-2012 01:20 PM

Yes you can set or return HTML with innerHTML. See, for example, this w3schools.com page or try it your self.

Take care to insert valid HTML blocks and not only pieces of tags (IE9 insert closure tags if your insert, for example, the beginning of a <p>) ...

**xjjon88** · 10-26-2012 08:50 AM

Hello. Thanks for the reply. I tried what you suggested above but the html tags still display as plain text. I want to put a line break and then more text. Basically I am trying to rotate a quote with the authors name.

Ive only have a minimal knowledge of JavaScript so this is new to me as I am still learning. Thanks!

**007Julien** · 10-26-2012 09:42 AM

Try this, for example

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Scrolling text</title>
<style type="text/css">
body{margin:0;padding:0;}
#pge {width:500px;margin:10px auto;}
#scrollme{display:block;padding:13px;height:300px;background-color:#990000;color:#ffffff;}
fieldset {border:1px solid #000;}
h1{margin:30px;text-align:center;}
span {color:#330066;font-style:italic;}
</style>
</head>
<body>
<div id="pge"><fieldset><legend>InnerHTML tests</legend>
	<div id="scrollme"><h1>Hamlet's Genuineness</h1></div>
</fieldset></div>
<script type="text/javascript">
function $(id){
	if (document.getElementById) return document.getElementById(id);
	if (document.all) return document.all[id]; 
}
var msgs=["<p><span>Queen : <br></span>And let thine eye look like a friend on Denmark.<br>Do not for ever with thy vailed lids<br>Seek for thy noble father in the dust.<br>Thou know’st ‘tis common : all that lives must die,<br>Passing through nature to eternity.</p>","<p><span>Hamlet :<br></span>Ay, madam, it is common.</p>","<p><span>Queen :<br></span> If it be,<br>Why seems it so particular with thee ?</p>","<p><span>Hamlet :<br></span> Seems, madam ? Nay, it is. I know not ‘seems’.<br>‘Tis not alone my inky cloak, good mother,<br>Nor customary suits of solemn black,<br>Nor windy suspiration of forc’d breath,<br>No, nor the fruitful river in the eye,<br>Nor the dejected haviour of the visage,<br>Together with all forms, moods, shapes of grief,<br>That can denote me truly. These indeed seem,<br>For they are actions that a man might play ;<br>But I have that within which passes show,<br>These but the trappings and the suits of woe.</p>"]; 
var msgi=0;
function scrollMessages(milliseconds) {
	window.setInterval(displayMessage, milliseconds)
}
function displayMessage(){
	$("scrollme").innerHTML=msgs[msgi++];
	msgi%=msgs.length;
}
scrollMessages(2000);
</script>
</script>
</body>
</html>>

**xjjon88** · 10-26-2012 04:03 PM

Thanks so much, I understand it now

**xjjon88** · 10-28-2012 11:34 PM

I am sorry, I have a follow up question. I've implemented this on my page and it caused an image slider I had to stop loading.

My page is at preferredevents.net

Thank you.

**007Julien** · 10-29-2012 07:49 AM

Your slider use probably jQuery with an other function $ ?
Change the name of the this function by replacing all $, in the proposed script, with getElm (or an other name).

Thread: Html Formating in Javascript Variable

Thread Tools

Display

Html Formating in Javascript Variable

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions