-2

Here is my code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Here is a message: <span id="message"></span></p>
</body>
</html>

​

function nextMsg() {
    if (messages.length == 0) {
        document.write("Done");
    } else {
        $('#message').html(messages.pop()).fadeIn(500).delay(100).fadeOut(500, nextMsg);
    }
};

var messages = [
    "Hello!",
    "This is a website!",
].reverse();

$('#message').hide();
nextMsg();
​

The javascript simply runs through the given text strings and when done runs document.write("Done");

Notice that after the Hello!, and This is a Website! Are displayed, the document.write("Done"); function is displayed in a separate page removing all the HTML.

How can I display permanent text after the Hello and Website text appear..? Thanks for all the help!

user1940201
  • 11
  • 1
  • 1
    don't use `document.write()`. since you're already using jQuery, why not just do ` $('#message').html('Done!')`? – kennypu Dec 31 '12 at 20:27
  • 1
    You would never need to do that anyway. But your fiddle is set to Mootools.onload instead use .html("...") of some container – mplungjan Dec 31 '12 at 20:28
  • 2
    See [*2. `document.write` executes after the page has finished loading and will overwrite the page, or **write a new page,**...*](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). – Jared Farrish Dec 31 '12 at 20:29
  • You've got jQuery in that code. Why are you asking us how to put stuff on the DOM. You're already doing it, and `document.write` is a dead method. – Jared Farrish Dec 31 '12 at 20:31
  • `document.write`... haven't use (or even see) this since long time ago. – Derek 朕會功夫 Dec 31 '12 at 20:36

1 Answers1

0

This is how I would do this:

<h1>Hello world!</h1>
<p>Here is a message:</p>
<p id="message"></p>​

This is in a window.onload block that jsFiddle takes care of: 

var messages = ["Hello!","This is a website!"];

(function nextMsg() {
    $('#message')
        .fadeIn(1500)
        .delay(500)
        .fadeOut(1500, !messages.length || nextMsg)
        .html(messages.shift() || 'Done');
})();​

http://jsfiddle.net/userdude/5s8y3/100/

Jared Farrish
  • 46,034
  • 16
  • 88
  • 98