Menu
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?
213
$() = window. jQuery() $()/jQuery() is a selector function that selects DOM elements. Most of the time you will need to start with $() function. It is advisable to use jQuery after DOM is loaded fully.
jQuery text() MethodThe text() method sets or returns the text content of the selected elements. When this method is used to return content, it returns the text content of all matched elements (HTML markup will be removed). When this method is used to set content, it overwrites the content of ALL matched elements.
The after() method inserts specified content after the selected elements. Tip: To insert content before selected elements, use the before() method.
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.
150
You'll need several moving parts:
jQuery.fade() to animate your text (fading in/out)
setTimeout() - to delay execution ("do this, but in 5 seconds from now")
window.location = 'http://google.com'; to send user to another page.
24
Initially hide all the elements with CSS. Then show them.
You could use the setTimeOut function in Javacript. You can set when the 'show' functions are called using this. The other thing you can do is use the animate/show (animate has a bit more flexibility in what you can do fades colour changes etc) function in jquery. This has a call back you can use so you can chain the series animation functions together e.g.
$(firstelement).animate({animateionstuff},5000,function(){$(secondelement).animate({animationstuff})});
or
$(firstelement).show(function(){$(secondelement).show(function(){do more stuff})});
In the second example you can also set the duration.
More info here in jquery docs: http://api.jquery.com/category/effects/
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
