Jquery dont work but i guess everything is ok

Question

I have this code, to do a basic slide show

   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/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?

score 8 · Accepted Answer · edited May 23 '17 at 11:57

CSS IDs can't start with numbers

You can't start a CSS ID with a number, see here: http://css-tricks.com/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.com/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.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/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>

score 5 · Answer 2 · answered Dec 13 '13 at 17:31

5

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.

answered Dec 13 '13 at 17:31

Jochem

2,995
16
18

4

CSS IDs can't start with numbers: http://css-tricks.com/ids-cannot-start-with-a-number/ See my answer – Roman Holzner Dec 13 '13 at 17:35
Just tried and that worked fine with jQuery in Chrome (did `$('
hello
').appendTo('body')` and `$('#1');` right into the dev console in this SO page). Seems better practice though to not use it, I agree. – Jochem Dec 13 '13 at 17:37
2

@Jochem Numerical ID's are valid in HTML(5), however not in CSS (without a little hack at least). It's always best practice to not use them. – dsgriffin Dec 13 '13 at 17:39
@Jochem ya but not in CSS, e.g: #1{color:red;} – A. Wolff Dec 13 '13 at 17:39

Breno Gazzola · Answer 3 · 2013-12-13T17:37:24.697

5

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.

edited Dec 13 '13 at 17:37

answered Dec 13 '13 at 17:31

Breno Gazzola

2,092
1
16
36

I mean "correct" as "good practice". Both work fine, but the .ready is considered better since it's unobtrusive. – Breno Gazzola Dec 13 '13 at 17:35
You edited your answer to address the problem I had with it, so I removed my comment :). I know it is a good practice, the problem is others might not. Just saying something was correct can be confusing to people if you don't explain why. – Danny Dec 13 '13 at 17:36
Yeah, my bad. I thought about that after posting. That's what I get for going for speed instead of correctness. – Breno Gazzola Dec 13 '13 at 17:39

score 1 · Answer 4 · answered Dec 13 '13 at 17:35

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.)

Jquery dont work but i guess everything is ok

4 Answers4

CSS IDs can't start with numbers

You are selecting the child element

$(document).ready

Your code