I am unable to make jQuery Work. What am I missing?

Question

I am attempting to hide, show, shift images but I am unable to do anything. I see the buttons but nothing is happening. Is the link for jQuery wrong or is it something else? Nothing I've done seems to work. Not sure what to do at this point...

<html lang="en-us">

<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery.css"/>

            <script type="text/javascript">
        $(document).ready(function() {
        $("img").addClass("wrappedElement");


        $("#Hide All Images").click(function(){
        $("img").hide("fast");  
        });

        $("#Show All Images").click(function(){
        $("img").show("fast");  
        });

        $("#Show Even Images").click(function() {
        if ($("img:even").is(':visible') && $("img:odd").is(':visible')) {
            $("img:odd").toggle("fast");
        }else{
            $("img:even").show("fast");
        }   
        });

        $("#Show Odd Images").click(function(){
        if ($("img:odd").is(':visible') && $("img:even").is(':visible')) { 
            $("img:even").toggle("fast");
        }else{
            $("img:odd").show("fast");
        }
        });

        $("#Right Shift").click(function(){
        $("img").slideRight();
        });

        $("#Left Shift").click(function(){  
        $("img").slideLeft();

        });
        });

    </script>

<body>


    <div id="header">
        <button id="Hide All Images">Hide All Images</button>
        <button id="Show Even Images">Show Even Images</button>
        <button id="Show Odd Images">Show Odd Images</button>
        <button id="Right Shift">Right Shift</button>
        <button id="Left Shift">Left Shift</button>
    </div>

    <div id ="content">
    <img  class="photo" src="photo_one.jpg" alt="one">
    <img  class="photo" src="photo_two.jpg" alt="two">
    <img  class="photo" src="photo_three.jpg" alt="three">
    <img  class="photo" src="photo_four.jpg" alt="four">
    <img  class="photo" src="photo_five.jpg" alt="five">
    </div>


</body>

oh by not working I take it you mean the click events are being triggered by mouseOvers? — Rooster, Feb 17 '14 at 23:47
@TravisJ Not required. Using a protocol-less URI is recommended — Phil, Feb 17 '14 at 23:47
@Phil - Interesting, thanks for the information I hadn't heard of protocol-less URI's. — Travis J, Feb 17 '14 at 23:49
[*The (id attribute) value must not contain any space characters.*](http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute) — Phil, Feb 17 '14 at 23:50
@TravisJ Provided the URI is available over HTTP **and** HTTPS, it saves you having to figure out which scheme to use based on the parent document — Phil, Feb 17 '14 at 23:52
@Rooster, I mean by clicking the buttons, nothing is happening. — user3321167, Feb 17 '14 at 23:52

score 6 · Answer 1 · answered Feb 17 '14 at 23:47

6

Remove the spaces from your classes and ids, replace them with underscores (or hyphens, or whatever you want).

For example:

<button id="Hide_All_Images">Hide All Images</button>

And:

$("#Hide_All_Images").click(function(){

Spaces actually mean something when using the $ function. $("#Hide All Images") means find me an <Images> tag inside an <All> tag inside something with id Hide.

answered Feb 17 '14 at 23:47

Damien Black

5,579
18
24

...or just about any other non-whitespace character – Phil Feb 17 '14 at 23:48
2

Don't forget to change them on the jQuery selectors too! – Lunfel Feb 17 '14 at 23:49
Phil, no luck with the changes... I wonder if maybe I "miscoded" something. I'd be happy if one worked. I'd be able to pinpoint where I went wrong at least. – user3321167 Feb 17 '14 at 23:56
Did you change the whitespaces in your Ids and selectors? – Damien Black Feb 18 '14 at 00:00
@DamienBlack, yes. I think the problem may be with the jQuery link. I chose the CDN for google but now I will use the downloaded version to see if there's any change. – user3321167 Feb 18 '14 at 00:02
@user3321167 Post your new code. – Damien Black Feb 18 '14 at 15:21

score 0 · Answer 2 · answered Feb 18 '14 at 00:02

0

You need to close your image elements

<img class="photo" src="photo_one.jpg" alt="one" />

Element names should not contain spaces

<button id="Hide-All-Images">Hide All Images</button>

$('#Hide-All-Images').click(function(){
  $("img").hide("fast");  
});

Fixed here

answered Feb 18 '14 at 00:02

Tim

1
1

Nice! Thank you for that. I was able to make it work on JSFiddle as well but it's still doesn't work on my page. – user3321167 Feb 18 '14 at 00:08
I was able to fix it on my page by updating the jQuery from google's version to the static version. How do I get get the photos to shift left or right? – user3321167 Feb 18 '14 at 00:11
Not sure I understand what you are trying to accomplish by shifting them. Are you looking for something like this? http://stackoverflow.com/questions/4229422/jquery-slideright-effect – Tim Feb 18 '14 at 00:32
I just want it to shift over one. Every time, I press the shift left button, the last image will go back to the beginning of the right side and every time I press the shift right button, it will do the opposite. It's almost like a carousel except that nothing is hidden. – user3321167 Feb 18 '14 at 00:43
I was able to figure it out!!! You have to use .detach() and .insertBefore() or .insertAfter() for first and last image. Thank you so very much for your help!! – user3321167 Feb 18 '14 at 00:49
Got ya! Glad you have it working now. – Tim Feb 18 '14 at 01:18

I am unable to make jQuery Work. What am I missing?

2 Answers2