CODEWITHSUNDEEP
javascriptjquery
Chris Parker
Chris Parker

Reputation: 33

jQuery show() and hide() aren't working

I'm working on sliding old questions to the left and new questions in from the right. You can see what I'm doing in this jsFiddle:

jsFiddle

$(document).ready(function () {
    //$('ul').roundabout();
    $("#question2").hide();
    $("#question3").hide();

    var x = 1;
    $("input[type='radio']").change(function () {
        var selection = $(this).val();
        //alert("Radio button selection changed. Selected: " + selection);
        $("#question" + x).hide("slide", {
            direction: "left"
        }, 800);
        x++;
        $("#question" + x).show("slide", {
            direction: "right"
        }, 800);
    });
});

But when I'm working outside of jsFiddle (mostly because it won't load the roundabout.js file from GitHub correctly) I can't seem to get the show() and hide() to work correctly. I have the exact same code (with a reference to roundabout.js uncommented), and it will completely ignore the first hide and show references, then skip the next hide command and show the next question.

Any ideas on why it wouldn't be firing the hide() and show() functions in the click event?

EDIT: Editted with most current jsFiddle. It works there, but not outside of that environment.

Upvotes: 1

Views: 159

Answers (2)

aleksblago
aleksblago

Reputation: 323

This approach doesn't use jQuery UI and is also different than yours, but you'll still get the same end result. Note that the HTML/CSS are also different in this approach.

Working example: JSFiddle.

$(document).ready(function () {

    var x = 1,
        distance = $('.container').width(),
        qNumber  = $('.question').length;

    $('.questionList').width(distance*qNumber);

    $("input[type='radio']").change(function () {

        alert( "Radio button selection changed. Selected: " + $(this).val() );
        $('.questionList').animate({'margin-left':'-='+distance+'px'}, 500);

    });

});

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

Bind the event inside the DOM ready event

If you inspect the source in jsFiddle, you see all your code enclosed in the DOM ready event . So it looks like it works here and not on your local version.

$(document).ready(function () {
    //$('ul').roundabout();
    $("#question2").hide();
    $("#question3").hide();

    var x = 1;
    $("input[type='radio']").change(function () {
        var selection = $(this).val();
        //alert("Radio button selection changed. Selected: " + selection);
        $("#question" + x).hide("slide", {
            direction: "left"
        }, 800);
        x++;
        $("#question" + x).show("slide", {
            direction: "right"
        }, 800);
    });

});

Upvotes: 4

Related Questions