SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I change text from one statement to another in same space?

    Hello;

    I'm trying to find a script that will display one message for a few seconds then display another message in the same space.

    For example I want the first statement to say something like "Changes made to account."

    Then I want the text to automatically change to "Please click submit button to continue."

    Displays this first: Changes made to account. (shows this for a few seconds)
    Then displays this: Please click submit button to continue.

    Thanks.
    .

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    say you have an empty h3 to hold your messages:
    <h3 id="msg1" class="messageClass">&nbsp;</h3>

    You can change the text of the element by writing to the
    firstChild node of the element:

    var el=document.getElementById('msg1').firstChild;
    el.data='Changes made to account.';

    Then set a timeout that delays a call to write the new text to the same
    element after x msecs.

  3. #3
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mrhoo;

    Thanks for responding. I'll give it a try.
    .

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Create the element in JavaScript

    I would recommend creating the element in javascript as opposed to inserting a blank h3 in the document. Mainly because the element is purely for use in your script, and will be useless to those without JavaScript.

    Attach this code in a separate js file or in a script tag in your document head


    Code:
    // Warn object, includes 2 methods (init, and changeText)
    warn = {
    	init:function() {
      // ... after some kind of user interaction or event
    
      // Create element and initial text
      warn.notice = document.createElement('h3');
      var noticeText = document.createTextNode('Changes made to account');
    	
      // Append text to element
      warn.notice.appendChild(noticeText);
      
      // Insert h3 into document. Change depending on 
      // where you want to insert the h3, using insertBefore(), or whatever
    	
    	document.body.appendChild(warn.notice);
      
      // Call changetext function with a delay
      warn.timer = window.setTimeout('warn.changeText(warn.notice)', 3000) 
      // 3000 is in miliseconds (3 sec)
      // passes warn.notice to the changeText function as a parameter called elm
      },
      changeText:function(elm) {
      
      // innerHTML is not a DOM standard but is widely supported
      elm.innerHTML = 'Please click submit to continue';
    
      // Clear timeout
      window.clearTimeout(warn.timer);
      }
    }
    window.onload = warn.init;
    The above is just a sample, and I would normally use a custom addLoadEvent() function to execute multiple scripts on a page load.


Bookmarks

Posting Permissions

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