CODEWITHSUNDEEP
javascriptjqueryhtmlajaxjquery-ui
Tony
Tony

Reputation: 3638

JqueryUI (Ajax) Hide() works, Show() does not

I'm very new to JQuery/Ajax and I haven't done any HTML for a long time, so please do forgive me if this is a dumb question. I've done a fair amount of reading, and I'm at a loss.

In a nutshell, on completion of a FlipClock.js countdown timer, the clock should slide off the page to the right, which works. However, on starting the timer, I'd like the div to slide onto the page from the right, but I cannot get the div to move. Here's my code:

function showTimer() {
$(".clock").show("slide", {direction: "left"}, 2000); //Does nothing, seemingly
timerRunning= true;
var clock = $('.clock').FlipClock(3, {
    countdown: true,
    clockFace: 'MinuteCounter',
    callbacks: {
        stop: function() {
            timerStopped();
        }
    }

});
}

function timerStopped() {
        console.log("Test function on clock stop!");
        $('.clock').hide('slide',{direction:'right'},1000);

        }

I've not set up any CSS for the clock div, so I'm not sure if I need to position it off screen to begin with, but hide works, so I'm a little confused.

Any input or advice would be greatly appreciated.

Thanks

Upvotes: 0

Views: 67

Answers (2)

Nathan
Nathan

Reputation: 1371

After a long time of debugging, I have found a solution. Please try it out in jsfiddle here: https://jsfiddle.net/mLkfyrd8/1/

Things that may have gone wrong:

  1. Forgot to wrap in $(document).ready()
  2. Forgot to include jQuery/jQuery UI library
  3. Forgot to call $(".clock").hide()

UPDATE: There seems to be an issue with the clock moving up/down. See this new fiddle for the fixed version (added padding.)

Demo:

$(document).ready(function() {

    $(".container").hide();

    function showTimer() {

        $('.clock').FlipClock(3, {
            countdown: true,
            clockFace: 'MinuteCounter',
            callbacks: {
                stop: function() {
                    timerStopped();
                }
            }

        });

        $(".container").show("slide", {direction: "left"}, 2000);

    }


    function timerStopped() {
        console.log("Test function on clock stop!");
        $('.container').hide('slide',{direction:'right'},1000);
    }

    showTimer();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.css">
<script src="https://cdn.rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.min.js"></script>

<div class="container" style="padding: 20px;"><div class="clock"></div></div>

Upvotes: 1

Ben
Ben

Reputation: 683

You should set dimensions and position to your clock div. Look it up with e.g. firebug (hit F12) and search your clock div. There you should see where the div is and it might be outside of your viewport. And do you get the console log output?

Upvotes: 1

Related Questions