Grow your CSS skills. Land your dream job.

Trying to add a timer to this bit code

  • # April 12, 2011 at 11:14 pm

    Hello everybody!

    I am trying to add a simple timer or duration to this snip of code, but not having much luck. I am rather new with JS so please excuse my ignorance.

     $(document).ready(function(){
    jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);
    };

    $("#test").click(function() {
    $("#test").fadeToggle("slow");
    });
    });
    # April 13, 2011 at 12:07 pm

    Hey! When you say you’d like to add a timer or duration are you referring to the duration of the animation? Or using a timer to toggle every few seconds for example?

    # April 13, 2011 at 8:33 pm

    hey Johnny,

    Write now it has a “click” function for toggle purposes. I would like to keep that the way it is, but also ad a timer of say 10 seconds to allow it to fade off with out the click

    # April 14, 2011 at 8:12 am
    var tmr = setInterval(function () { $('#test').trigger('click'); }, 10000);
    # April 14, 2011 at 8:00 pm

    Hey Stefan,

    That seems to partially solve the issue. However, this bit of code causes the function to continuously cycle, instead of a occurring one time (which is how it should be)

    # April 15, 2011 at 1:19 am
                    jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.delay(1000).animate({opacity: 'toggle'}, speed, easing, callback);
    };
    # April 15, 2011 at 2:33 am

    Hey Jamy,

    Thanks for the reply. Still having some issues though. This bit of code simply determines the duration of the fade for the click function.

    Let’s say I have an image. With the current script if I click the image it fades away forever (which I want) — I would also like it to have a timer to fade away after say 10 seconds if it is not clicked immediately.

    thanks again

    # April 15, 2011 at 3:44 am

    Hi NSR

    That’s simple, this code below will only run once after 10 seconds. Hope it helps.

    var tmr = setTimeout(function() {
    clearTimeout(tmr);
    $('#test').trigger('click');
    }, 10000);
    # April 15, 2011 at 4:13 am

    Hey Stefan,

    Nice! it worked. I just placed it before this portion

     $("#test").click(function() {
    $("#test").fadeToggle("slow");

    Is that correct? or should it go after?

    Here is what I have as:

    $(document).ready(function(){
    jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);
    };

    var tmr = setTimeout(function() {
    clearTimeout(tmr);
    $('#test').trigger('click');
    }, 10000);

    $("#test").click(function() {
    $("#test").fadeToggle("slow");
    });
    });

    Thanks for your patience

    # April 15, 2011 at 4:17 am

    Also…I’m using Coda and was wondering if you know of any ways to merge multiple CSS (and JS) files into one of each? In addition I was also curious if Coda or any plugin for that matter is capable of ‘minimizing’ code itself.

    Thank You

    # April 15, 2011 at 4:44 am

    Hi NSR

    I would suggest to place it after defining the click event for the DIV#test. What do you mean with merge JS & CSS? For minimizing JS is use http://javascriptcompressor.com/ and wrote my own CSS minimizer.

    # April 15, 2011 at 4:47 am

    To merge multiple CSS files, create a merge.css:

    @import url('first.css');
    @import url('second.css');
    # April 15, 2011 at 4:54 am

    Thanks for the tip.

    For merging… Lets say I have 4 JS files and want to merge them into a single file instead of linking all 4

    # April 15, 2011 at 5:15 am

    One last question…PROMISE!

    Similar to the timer question above,

    looking at this bit of code here, I am trying to achieve the same result, however no click is needed. Just a timer.

    $(document).ready(function() {
    $('body').prepend('
    ').append('
    ');
    });

    # April 15, 2011 at 5:39 am

    Hi NSR

    No problem ask away. Regarding merging JS files:

    1. Copy and paste all the scripts into a single JS file. lol
    2. Load them dynamically with tools like ‘RequireJS’, ‘LabJS’, ‘StealJS’ or ‘Bootstrap’.

    Cons:
    Having all the scripts in one file will make it hard to debug.

    If i understand correctly you would like to append to the body after a couple of seconds?

    $(document).ready(function() {
    // appends the two divs after 10 seconds
    var bodyTmr = setTimeout(function() {
    clearTimeout(bodyTmr );
    $('body').prepend('
    ').append('
    ');
    }, 10000);
    });
Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".