2

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?

0

4 Answers 4

8

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

4
  • 4
    CSS IDs can't start with numbers: css-tricks.com/ids-cannot-start-with-a-number See my answer Dec 13, 2013 at 17:35
  • Just tried and that worked fine with jQuery in Chrome (did $('<div id="1">hello</div>').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, 2013 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, 2013 at 17:39
  • @Jochem ya but not in CSS, e.g: #1{color:red;}
    – A. Wolff
    Dec 13, 2013 at 17:39
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.

3
  • I mean "correct" as "good practice". Both work fine, but the .ready is considered better since it's unobtrusive. Dec 13, 2013 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, 2013 at 17:36
  • Yeah, my bad. I thought about that after posting. That's what I get for going for speed instead of correctness. Dec 13, 2013 at 17:39
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.