This is a link to the working jsfiddle /
and following is the code that I am trying to run on my website ( same as the one jsFiddle )
I have tried on two puters. What am I doing wrong?
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tips = [
"creative",
"innovative",
"awesome",
"amazing",
"social"
];
setInterval(function() {
var i = Math.round((Math.random()) * tips.length);
if (i == tips.length)--i;
$('#tip').slideUp(500, function() {
var $this = $(this);
$this.html(tips[i]);
$this.toggleClass('first second');
$this.slideDown(500);
});
}, 3 *1000);
});
</script>
</head>
<body>
<div style=" background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
<div class="thousand">
<div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">The <span id="tip">creative</span><br />brand.
</div>
</div>
</div>
</body>
</html>
This is a link to the working jsfiddle http://jsfiddle/akshaytyagi/SD66b/
and following is the code that I am trying to run on my website ( same as the one jsFiddle )
I have tried on two puters. What am I doing wrong?
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tips = [
"creative",
"innovative",
"awesome",
"amazing",
"social"
];
setInterval(function() {
var i = Math.round((Math.random()) * tips.length);
if (i == tips.length)--i;
$('#tip').slideUp(500, function() {
var $this = $(this);
$this.html(tips[i]);
$this.toggleClass('first second');
$this.slideDown(500);
});
}, 3 *1000);
});
</script>
</head>
<body>
<div style=" background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
<div class="thousand">
<div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">The <span id="tip">creative</span><br />brand.
</div>
</div>
</div>
</body>
</html>
- 2 Did you check the JavaScript console for any errors? – JoeFletch Commented Nov 9, 2012 at 14:29
-
2
Yes, the
<head>should be before the<body>, not inside it. – Pointy Commented Nov 9, 2012 at 14:31 - You have not described the ways in which the code doesn't work for you. It's not working very well even in the jsfiddle, really; the effect is jumpy. – Pointy Commented Nov 9, 2012 at 14:34
- Prisoner : Thanks, fixed it now. @Pointy The animation doesn't work at all. – Akshay Tyagi Commented Nov 9, 2012 at 14:48
4 Answers
Reset to default 8You need to put the script which access DOM element in $(document).ready to make sure the elements are ready before they are accessed.
$(document).ready(function(){
})
Edit based on ments
Change
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
To
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.8.2jquery.min.js"></script>
I copy and pasted your HTML, and after }, 3 * 1000); there is a special char.
Delete that whole line (}, 3 * 1000);) and re-type it.
See:
As andyb has mented, if you're loading the file locally your jquery url wont work. You can either change it to http:// or upload your file somewhere.
Although the right answer was already given, I've taken the liberty to fix your markup. And may I suggest you use proper CSS instead on inline styling? It makes your code much more readable and separates markup and design as you should,
<html><head>
<script src="//ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
var tips = [
'creative',
'innovative',
'awesome',
'amazing',
'social'
];
setInterval(function() {
var i = Math.round((Math.random()) * tips.length);
if (i == tips.length)--i;
$('#tip').slideUp(500, function() {
var $this = $(this);
$this.html(tips[i]);
$this.toggleClass('first second');
$this.slideDown(500);
});
}, 3000);
</script>
</head><body>
<div style="background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
<div class="thousand">
<div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">
The <span id="tip">creative</span><br />brand.
</div>
</div>
</div>
</body></html>
The problem making it work, locally, was that // links do not get resolved to http:// ( src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js instead of just src="//ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js")
[ Thanks to @andyb : I was wondering why Google had improper code on their site. ]