I feel like a complete idiot, and I am sure I am just up to late... but I can not get this to work. On jsFiddle it works wonderfully but when I put it on my html document it does not. Please help! I do not know where the error is. Here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="test-isla.css" type="text/css" />
</head>
<body>
<div id="back">
<div class="red" id="div1"></div>
<div class="red1" id="div2"></div>
<div class="red2" id="div3"></div>
</div>
<div id="content"><p>Body Content goes here!!</p></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function startfade(){
$("#div3").fadeIn(3000, function(){
$(this).delay(2000).fadeOut();
$("#div2").fadeIn(3000, function(){
$(this).delay(2000).fadeOut();
$("#div1").fadeIn(3000, function(){
$(this).delay(1000).fadeOut();
});
});
});
}
setInterval(function() {
startfade();
}, 9000);
startfade();
});
</script>
</body>
</html>
And here is the end result I want to achieve on jsFiddle, where it does work! http://jsfiddle.net/liveandream/TCCn8/46/
Try to [Run] the fiddle in jsFiddle and then use code from http://jsfiddle.net/draft/
This will give you the exact code used on jsFiddle.
This will definitely work.
If I copy and paste the CSS into the HTML it works for me.
I guess your page is not finding the CSS. Check FireBug to confirm that it is finding your CSS file.
Something strange is that when I copied the code from SO. A question mark appears after the last startfade(); it is not a visible character. This is what I see:
startfade();?
FireBug's Javascript console complained about it.
Put css in the same folder and remove questionmark and it will work!
I can't remember if script tags are blocking when included in the body. Is there anything preventing you from moving the jQuery reference to the head?
Also, since your own script is using the document ready function anyhow, you probably don't need it just before the body closing tag either. Since it's there, you could dispense with the document ready function because the nodes you're referencing are already added to the DOM by the time the script runs.
try to arrange your code 1st
put this on the head tag
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
And try first to put css in head too. use
<style></style>
the folowing example work perfectly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#content{
position: relative;
z-index: 999;}
#back{
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
padding:0;
margin-top: 0px;
z-index: 1;
}
.red{
background: red;
width: 800px;
height: 800px;
overflow: hidden;
display: none;
position: absolute;
z-index: 1;
}
.red1{
background: green;
width: 800px;
height: 800px;
display: none;
position: absolute;
overflow: hidden;
z-index: 1;
}
.red2{
background: blue;
width: 800px;
overflow: hidden;
height: 800px;
display: none;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div id="back">
<div class="red" id="div1"></div>
<div class="red1" id="div2"></div>
<div class="red2" id="div3"></div>
</div>
<div id="content"><p>Body Content goes here!!</p></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function(){
function startfade(){
$("#div3").fadeIn(3000, function(){
$(this).delay(2000).fadeOut();
$("#div2").fadeIn(3000, function(){
$(this).delay(2000).fadeOut();
$("#div1").fadeIn(3000, function(){
$(this).delay(1000).fadeOut();
});
});
});
}
setInterval(function() {
startfade();
}, 9000);
});
</script>
</body>
</html>
