I have this code, to do a basic slide show
<script type="text/javascript" src="//ajax.googleapis/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider()
{
$(".slider#1").show("fade",500);
}
</script>
than i have this div:
<div class="slider">
<img id="1" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="2" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="3" src="images/pic1.jpg" border="0" alt="Image"/>
</div>
I also have onload in body to do jquery function when body loads:
<body onload="Slider()">
But nothing happens, what will be the error?
I have this code, to do a basic slide show
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider()
{
$(".slider#1").show("fade",500);
}
</script>
than i have this div:
<div class="slider">
<img id="1" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="2" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="3" src="images/pic1.jpg" border="0" alt="Image"/>
</div>
I also have onload in body to do jquery function when body loads:
<body onload="Slider()">
But nothing happens, what will be the error?
Share edited Dec 13, 2013 at 17:54 Roman Holzner 5,9382 gold badges24 silver badges32 bronze badges asked Dec 13, 2013 at 17:29 OzzCOzzC 8214 gold badges20 silver badges37 bronze badges 04 Answers
Reset to default 8CSS IDs can't start with numbers
You can't start a CSS ID with a number, see here: http://css-tricks./ids-cannot-start-with-a-number/
You are selecting the child element
You are selecting the child element of .slider, so you need .slider #i1, see here: http://api.jquery./descendant-selector/
$(document).ready
It's better to use $(document).ready(function(){}); instead of <body onload="Slider()">, see here: Difference between onload() and $.ready?
Your code
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
function Slider()
{
$(".slider #i1").show("fade",500);
}
$(document).ready(function(){
Slider();
});
</script>
<div class="slider">
<img id="i1" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="i2" src="images/pic1.jpg" border="0" alt="Image"/>
<img id="i3" src="images/pic1.jpg" border="0" alt="Image"/>
</div>
Try $(".slider #1").show("fade",500);
So there's a space now between .slider and #1, meaning: look for an element with id '1' inside an element with class 'slider', which is what you want. What you had was: look for an element with id 'id' and class slider.
Fixing the error
There is an error in your selector. You need a space between the class and the id. Also like Copy Devil said in his answer, you can't begin a css id with a number, so...
$(".slider #i1").show("fade",500);
Good practices
Instead of adding a onload tag to your body, it's considered good practice to do this instead.
$(document).ready(function(){
$(".slider #i1").show("fade",500);
});
This is known as unobtrusive javascript. It avoids mixing HTML and javascript together.
It's just the space missing. As others answered before,
".slider#1"
//something that has class=slider AND id=1
vs
".slider #1"
//something that has id=1 and IS INSIDE OF something with class=slider
Others suggested $(document).ready but body onload will do, you won't have to change that. (However it's better their way.)