Home/ Questions/Q 6965983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:07:57+00:00

I’ve never used jQuery before, and I would like to ask how to do

  • 0

I’ve never used jQuery before, and I would like to ask how to do something that may seem simple to you people. I’ve looked around but couldn’t find an answer.

Okay, so say I have a HTML document;

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

What I want to ask is how to create a list of strings, and when the page loads the first one is displayed, and after a random interval of specified time it changes to the next one, and so on, and maybe about 5 messages later it would redirect the user to a different page.

If my messages were:

Hello!
This is a website!
You are now going to be redirected.
Are you ready?
You're now being redirected...

In my real site it would be nice if the messages could be hidden from the user (on the page, but in a css/js file it would be fine) and that it had a nice sort of fade effect as the next message came in.

Can someone explain to me how to work this?

I’d just like to add, I have no experience in jQuery (only a little in JavaScript) and I have no idea where the scripts/functions go. Could someone show me how, or link to a beginners guide that shows me this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is one way to do it (jsfiddle demo):

    function nextMsg() {
    if (messages.length == 0) {
        // once there is no more message, do whatever you want
        alert("redirecting");
    } else {
        // change content of message, fade in, wait, fade out and continue with next message
        $('#message').html(messages.pop()).fadeIn(500).delay(1000).fadeOut(500, nextMsg);
    }
};
// list of messages to display
var messages = [
    "Hello!",
    "This is a website!",
    "You are now going to be redirected.",
    "Are you ready?",
    "You're now being redirected..."
].reverse();

// initially hide the message
$('#message').hide();

// start animation
nextMsg();

    with a little bit modification, you should be able to customize the interval for each message.

    • 0