Forums

Rugg

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");
                });
            });

Johnnyb

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?

Rugg

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

stefanbar

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

Rugg

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)

jamy_za

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

Rugg

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

stefanbar

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);

Rugg

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

Rugg

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

stefanbar

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.

stefanbar

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

@import url('first.css');
@import url('second.css');

Rugg

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

Rugg

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('<div id="one"></div>').append('<div id="two"></div>');
	});

stefanbar

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('<div id="one"></div>').append('<div id="two"></div>');
	 }, 10000);
});

Rugg

Hmm…so basically

<div id="one">

is a preloader…and i want it to always work for a specific amount of time anytime the page is loaded/refreshed

the above code didnt seem to work for whatever reason

stefanbar

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('<div id="one"></div>').append('<div id="two"></div>');
	
	// set timer for 10 seconds
    var bodyTmr = setTimeout(function() {
    clearTimeout(bodyTmr );
		// fade out loader div and remove from page
		$('#one').fadeOut('fast').remove();
	}, 10000);
});

Rugg

Not sure why this isnt working. The loader will occasionally trigger for less than a second but the 'set timer' fails to initiate whatsoever.

Here is my CSS also…

#one {
	position:absolute;
	top:0;
	left:0;
	z-index:9000;
	width:100%;
	height:100%;
	margin:0;
	background: url(../img/loader.gif) no-repeat center center;
}

stefanbar

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?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
        * { margin: 0; padding: 0; }
        #one {
            position:absolute;
            top:0;
            left:0;
            z-index:9000;
            width:100%;
            height:100%;
            margin:0;
            background: #000;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // add loader div
            $('body').prepend('<div id="one"></div>').append('<div id="two"></div>');

            // set timer for 10 seconds
            var bodyTmr = setTimeout(function () {
                clearTimeout(bodyTmr);
                // fade out loader div and remove from page
                $('#one').fadeOut('fast').remove();
            }, 10000);
        });
    </script>
</head>
<body>
</body>
</html>

Rugg

forgot i had this bit of code also… several line down

launch : function(){
    		
    			$('#one').hide();		// Hide loading animation
				base.$el.fadeTo('fast',1);				// Fade in background

stefanbar

lol. So is it working now?

Rugg

Yes it does. I removed this line:

  $('#one').hide();               // Hide loading animation

I am wondering though, would it be more efficient to add the timer to this instead?

(to tell the id when to hide)

stefanbar

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

Rugg

I appreciate all your help Stefan…got it working

stefanbar

No problem.

treehouse : what would you like to learn today?

Forums

Trying to add a timer to this bit code