I am trying to do precisely what is illustrated here: http://jsfiddle.net/VB4QC/ but because I am out of my comfort zone, the bits that are not spelt out are stopping me from implementing it myself. Specifically I need to know what the Jquery include looks like, how to insert the Javascript, and how to call it. Let me show you what I'm currently guessing.
In the head of my document I add:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
I have a local copy of this file and it works - tested with other elements, so the above seems fine.
To the Javascript given on the JSFiddle site I have added:
<script type="text/javascript">
.
.
.
</script>
So to be literal, the body of my page contains:
<script type="text/javascript">
var terms = ["term 1", "term 2", "term 3"];
function rotateTerm() {
var ct = $("#rotate").data("term") || 0;
$("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
.delay(2000).fadeOut(200, rotateTerm);
}
$(rotateTerm);
</script>
And lastly my guess was to call it with a body onload:
<body onload="rotateTerm()">
And of course the HTML body contains:
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>
So I am following the example as closely as I can (I think). What happens is that the page renders Here is a sentence and: term 2 is what changes There is no fading up or down, and it doesn't display 'this', 'term 1' or 'term 3', although it looks as if 'term 1' flicks past in a millisecond.
What am I doing wrong? A little hand holding here would go a long way!
Thank you in anticipation!
I am not really sure if I understood your question correctly, but if a single document is what you want, there you go:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var terms = ["term 1", "term 2", "term 3"];
function rotateTerm() {
var ct = $("#rotate").data("term") || 0;
$("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
.delay(2000).fadeOut(200, rotateTerm);
}
// Not needed anymore as the DOM is ready at this point
// $(rotateTerm);
// just call the function directly
rotateTerm();
</script>
</body>
</html>
Personally I would do that script completely different, especially the data storage is unecessary imho. Do you need an explanation of the code?
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments