We Keep Coding

show div after 5 seconds and then refresh the div every 1 min

I have created a div into my page which i wanted to get load after 5 seconds the page get load. Then I wanted to refresh the div without refreshing the page after every 1 min. How can I achieve this functionality with the use of J query. My code look like this
$(document).ready(
function () {
setInterval(function() {
$('#newsletter').show();
}, 100000);
});
This upper block of code is only refreshing the div after 1 min. But on page load , i want the div to be shown to the user after 5 seconds and then this block of code should executed.

$(document).ready(function()
{
setTimeout(function()
{
// Perform actions you need to
setInterval(function()
{
// Perform them again every minute
}, 60000);
}, 5000);
});
I think what you were looking for is setTimeout

Try it:
$(function(){
setTimeout(function(){
$('#newsletter').show(); // to show div after 5 sec of page load
// To reshow on every one minute
setInterval(function() {
$('#newsletter').show();
}, 60000);
}, 5000);
});

You've already got the base functionality there, so all you'll need to do is add a message to appear after 5 seconds. Something like this should work.
$(document).ready(function()
{
setTimeout(function() {
// show message
},5000);
setInterval(function() {
$('#newsletter').show();
}, 60000);
});

Here is a jQuery solution:
$(document).ready(function () {
var $newsletter = $('#newsletter')
.delay(5000)
.show(function() {
setInterval(function() {
// update the newsletter, e.g. set new text
$newsletter.text(new Date());
}, 60000);
});
});

how to animate using jquery after a function has finished - make the second function wait?

I have a simple jQuery code which swaps two images by hiding one and displaying the other, I'm seeking to swap the images using a fade in fade out effect, but since the two images aren't lying on top of each other I cant simply fade the top image resulting on showing the bottom one,
I want to fade the first image then set the css display property to none then show the second image with 0 opacity and gradually set the second images opacity to 100. But when I add the code which fades the images, it doesn't work and the display none doesn't wait for the fade to finish. How can I make the functions wait for the one before to finish?
$('.thumbs').hover(
function() {
console.info('in');
$(this).children('.first').css('display','none');
$(this).children('.second').css('display','block')
},
function() {
console.info('out');
$(this).children('.second').css('display','none');
$(this).children('.first').css('display','block')
}
);
HTML Code:
<div class='thumbs'>
<div class='first'><?php the_post_thumbnail()?></div>
<div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>
</div>

1) delay() method allows us to delay the execution of functions that follow it in the queue.
http://api.jquery.com/delay/
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
2) use callbacks
$("#divId1").animate({opacity:.1},1000,function(){
$("#divId2").animate({opacity:.1},1000);
});​

Like so:
setTimeout(function() {
console.log('out');
$(this).children('.second').css('display', 'none');
$(this).children('.first').css('display', 'block');
}, 1000);

I have not tested but this should do the job:
$('.thumbs').hover(
function(){
var $that = $(this);
$(this).children('.first').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.second').fadeIn(500);
});
}
,
function(){
var $that = $(this);
$(this).children('.second').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.first').fadeIn(500);
});
}
);

Try
$('.thumbs').hover(
function() {
var second = $(this).children('.second');
$(this).children('.first').fadeOut(1000, function(){
second.fadeIn(1000,function(){});
});
},
function() {
var first= $(this).children('.first');
$(this).children('.second').fadeOut(1000, function(){
first.fadeIn(1000,function(){});
});
}
);
Working Fiddle

JQuery Fancybox open delay

I have a fancybox for displaying photos and descriptions of them.
Now it opens fancybox on mouseenter event. It works perfectly with this code:
$('.fancy_link').live('mouseenter', mouseEnter);
function mouseEnter()
{
jQuery(this).fancybox().trigger('click');
return false;
}
But i need to set delay for opening fancybox. How it should work: User moves cursor over a link, after 1 second fancybox should open and display content. If user moves mouse away before waiting 1 second, fancybox should not open.
I have tried JQuery delay() and setTimeout() but both of them are not working properly.
One sec. delay just ignored by both methods.

use setTimeout/clearTimeout...
//binding code...
$('.fancy_link').on('mouseenter',mouseEnter);
$('.fancy_link').on('mouseleave', mouseLeave);
//run when the mouse hovers over the item
function mouseEnter() {
//clear any previous timer
clearTimeout($(this).data('h_hover'));
//get a reference to the current item, for the setTimeout callback
var that = this;
//set a timer, and save the reference to g_hover
var h_hover = setTimeout(function(){
//timer timed out - click the item being hovered
$(that).click();
}, 1000);
//save the reference - attached to the item - for clearing
// data is a generic "store", it isn't saved to the tag in the dom.
// note: if you have a data-* attribute it is readable via data()
$(this).data('h_hover',h_hover)
}
//handler for when the mouse leaves the item
function mouseLeave() {
//clear the previously set timeout
clearTimeout($(this).data('h_hover'));
}

this could help you
function openFancybox() {
setTimeout( function() {$('#fancy_link').trigger('click'); },1000);
}

I imagine you will need to use setTimeout and clearTimeout
Something along these lines:
var timer;
$('.fancy_link').mouseenter(function(){
var $this = $(this);
timer = setTimeout(function(){
$this.fancybox().trigger('click');
}, 1000);
}).mouseleave(function(){
clearTimeout(timer);
});

Try this solution:
var timer = null;
$('.fancy_link').on('mouseenter', function() {
timer = setTimeout(mouseEnter, 1000);
});
// clear timer when mouse leaves
$('.fancy_link').on('mouseleave', function() {
clearTimeout(timer);
});

Click Function "this" not working

I have a script that I found at http://www.red-team-design.com/cool-notification-messages-with-css3-jquery, but I'm having a problem with my code
I'm wanting to get it to 1) hide on click, and 2) hide after 15 seconds
HTML:
<div class="warning message">It is currently past 4pm. Any orders placed between now and midnight will not be placed until 4pm tomorrow.</div>
Javascript:
var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages(){
var messagesHeights = new Array(); // this array will store height for each
for (i=0; i<myMessages.length; i++){
messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
$('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
}
}
function showMessage(type){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
setTimeout(function(){
$('.'+type).animate({top: -$('.'+type).outerHeight()}, 500);
hideAllMessages();
},15000);
}
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++) {showMessage(myMessages[i]);}
// When message is clicked, hide it
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
});
This is getting executed by php, which I'm just inserting the following line into my code using php:
<script type='text/javascript'>
$(document).ready(function(){
showMessage(warning)
});
</script>​
Now for some reason the div doesn't hide when I click it, and it won't hide after the 15 seconds as specified.
I've created a JSFiddle at http://jsfiddle.net/dpdesignz/yTaRa/1/ if anyone would mind looking to see what may be going wrong? I have a feeling it's related to the part executed by the PHP echo, so does anyone know of another way to maybe do this?

You have a few errors in your code.
First warning is not defined
Which refers to the following:
$(document).ready(function(){
showMessage(warning)
});
warning is not a set variable. Perhaps you mean this to be 'warning'.
Secondly showMessage is not defined
showMessage('warning');
This is called before the showMessage() function is defined. You can fix this by moving this call into the other $(document).ready()
http://jsfiddle.net/yTaRa/5/
var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages(){
var messagesHeights = new Array(); // this array will store height for each
for (i=0; i<myMessages.length; i++){
messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
$('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
}
}
function showMessage(type){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
setTimeout(function(){
$('.'+type).animate({top: -$('.'+type).outerHeight()}, 500);
hideAllMessages();
},15000);
}
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++) {showMessage(myMessages[i]);}
// When message is clicked, hide it
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
showMessage('warning');
});
​

$(document).ready(function(){
$('.info, .warning, .error, .success').hide();
$('.info, .warning, .error, .success').slideDown(500);
$('.info, .warning, .error, .success').delay(15000).slideUp(500);
$('.info, .warning, .error, .success').on('click', function() {
$(this).hide();
});
});
Let jQuery do all the work =)
http://jsfiddle.net/yTaRa/8/
If every message type will also be classed as message we can reduce this code down even further...
$(document).ready(function(){
$('.message').hide();
$('.message').slideDown(500);
$('.message').delay(15000).slideUp(500);
$('.message').on('click', function() {
$(this).hide();
});
});
http://jsfiddle.net/yTaRa/9/
$(document).ready(function(){
setTimeout(function() { //sets a 15 second timer on each message to collapse up over .5 seconds
$('.message').slideUp(500);
}, 15000);
$('.message').hide(); //hides all elements with the class message.
$('.message').slideDown(500); //animates messages to expand down over .5 seconds
$('.message').on('click', function() { //wires up click event to hide message on click
$(this).slideUp(500);
});
});
http://jsfiddle.net/yTaRa/10/
I had to use setTimeout for the 15 seconds call of slideUp as the click slideUp would not fire with:
$('.message').delay(15000).slideUp(500);
I assume that this is because only one slideUp() call can be scheduled on the same element at one time.

Delay in show after 2 second by jquery

I want if user moved the mouse for two seconds (Keep the mouse button for two seconds) on a class, show to he hide class. how is it? ()
If you move the mouse tandem (several times) on class, You will see slideToggle done as automated, I do not want this. How can fix it?
DEMO: http://jsfiddle.net/tD8hc/
My tried:
$('.clientele-logoindex').live('mouseenter', function() {
setTimeout(function(){
$('.clientele_mess').slideToggle("slow");
}, 2000 );
}).live('mouseleave', function() {
$('.clientele_mess').slideUp("slow");
})​

Please try this below link Your Problem will solve
http://jsfiddle.net/G3dk3/1/
var s;
$('.clientele-logoindex').live('mouseenter', function() {
s = setTimeout(function(){
$('.clientele_mess').slideDown();
}, 2000 );
}).live('mouseleave', function() {
$('.clientele_mess').slideUp("slow");
clearTimeout(s)
})

Write your html like this
<div class="clientele-logoindex">Keep the mouse here
<div class="clientele_mess" style="display: none;">okkkkkkko</div></div>

Record when a timer is started and check if one exists before starting a new one:
window.timer = null;
$('.clientele-logoindex').live('mouseenter', function() {
if(!window.timer) {
window.timer = setTimeout(function(){
$('.clientele_mess').slideToggle("slow");
window.timer = null;
}, 2000 );
}
}).live('mouseleave', function() {
$('.clientele_mess').slideUp("slow");
})​

Take a look at hoverIntent is a jquery plugin to ensure hover on elements.