Html Formating in Javascript Variable

Printable View

10-24-2012, 12:42 AM
xjjon88

Html Formating in Javascript Variable

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"
10-24-2012, 03:41 AM
007Julien

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; }
10-24-2012, 11:04 AM
xjjon88

Will that allow me to use HTML in the string?
10-24-2012, 01:20 PM
007Julien

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>) ...
10-26-2012, 08:50 AM
xjjon88

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!
10-26-2012, 09:42 AM
007Julien

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>>
10-26-2012, 04:03 PM
xjjon88

Thanks so much, I understand it now :)
10-28-2012, 11:34 PM
xjjon88

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.
10-29-2012, 07:49 AM
007Julien

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).