Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Trying to add a timer to this bit code

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #32332
    Rugg
    Participant

    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");
    });
    });
    #51525
    Johnnyb
    Member

    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?

    #51419
    stefanbar
    Member
    var tmr = setInterval(function () { $('#test').trigger('click'); }, 10000);
    #51038
    jamygolden
    Member
                    jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.delay(1000).animate({opacity: 'toggle'}, speed, easing, callback);
    };
    #51011
    stefanbar
    Member

    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);
    #50988
    stefanbar
    Member

    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.

    #50989
    stefanbar
    Member

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

    @import url('first.css');
    @import url('second.css');
    #50992
    stefanbar
    Member

    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);
    });
    #50995
    stefanbar
    Member

    Sorry about that, so basically you want to add a loader div and then remove it after a set duration.

    $(document).ready(function() {

    // add loader div
    $('body').prepend('
    ').append('
    ');

    // set timer for 10 seconds
    var bodyTmr = setTimeout(function() {
    clearTimeout(bodyTmr );
    // fade out loader div and remove from page
    $('#one').fadeOut('fast').remove();
    }, 10000);
    });
    #50958
    stefanbar
    Member

    Hi NSR

    Just tested the following code below and it works as expected. Just made the #one div completely black instead of a loader image in the center. Maybe you are doing something in your js code?




    test







    #50960
    stefanbar
    Member

    lol. So is it working now?

    #50962
    stefanbar
    Member

    sure just remove the timer above. (The code i sent you)

    #50964
    stefanbar
    Member

    No problem.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.