www.webdeveloper.com
Results 1 to 9 of 9

Thread: Html Formating in Javascript Variable

  1. #1
    Join Date
    Aug 2012
    Posts
    7

    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"

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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;
    }
    Last edited by 007Julien; 10-24-2012 at 03:53 AM. Reason: errors

  3. #3
    Join Date
    Aug 2012
    Posts
    7
    Will that allow me to use HTML in the string?

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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>) ...
    Last edited by 007Julien; 10-24-2012 at 01:26 PM.

  5. #5
    Join Date
    Aug 2012
    Posts
    7
    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!

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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>>

  7. #7
    Join Date
    Aug 2012
    Posts
    7
    Thanks so much, I understand it now

  8. #8
    Join Date
    Aug 2012
    Posts
    7
    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.

  9. #9
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles