We Keep Coding

How to make FancyBox auto start on page load and auto hide after 15 seconds?

I'm using FancyBox 2.1.5.
I need a fullscreen ad (html) to be shown on homepage after it loads and closing this ad with 2 options: standard with user' click and auto hiding if no action during 15 seconds.
First task is not a problem with:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
But how to set a counter and autohide?
I'm thinking of following:
$(document).ready(function() {
$('.fancybox').fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
$('.fancybox').fancybox({
afterShow: function(){
setTimeout( function() {$.fancybox.close(); },15000);
},
afterClose: function(){
clearTimeout( );
},
});
});
Is this correct?
Thanks in advance for your help!

I think you should rather do
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
},
afterClose: function () {
clearTimeout();
}
});
});
See JSFIDDLE
EDIT :
As properly pointed out by djdavid98, clearing time out on afterClose callback is redundant.
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
}
});
});
See updated JSFIDDLE

You can use the delay and click function together on page load to exe.c and then fadeout after 15 seconds

How unbind then bind again?

$('.imgc').hover(
function(e) {
$(this).effect("bounce", { times:5 }, "slow");
},
function(e) {
$(this).unbind('mouseenter');
});
I need to set an effect on the image. But I need this effect to work only at once. But then I need to bind again on mouseout. But it does not work.
('.imgc').bind('mouseenter', e);
How can I do this?

Try like
$('.imgc').on('hover', function(e) {
$(this).one(function () {
$(this).effect("bounce", { times:5 }, "slow");
});
$(this).off('mouseenter');
},
function(e) {
$(this).on('mouseenter');
});

You should try this,
$(".imgc").on({
mouseenter:function(){
$(this).effect("bounce", { times:5 }, "slow");
},
mouseleave:function(){
}
});
hover is basically a pseudoevent, which maps to mouseenter and mouseleave.

wrapper function bracketing

I'm quite new to javascript and I'm having a difficult time with this multi function call
This bit is running fine
$('.pages').live("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
}
});
and I'd like to add
(document).scrollTop(0);
so that a user will be taken to the top of long pages as the menu opens... any help would be appreciated....

You should be able to use something like this to perform your scroll:
$("html, body").animate({ scrollTop: 0 }, "slow");
So if you wanted to add this to your current function as shown: (you can place it wherever you would like it to occur)
$('.pages').on("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
additionally, this could should also work (as mentioned by Jan):
$('document').on("swiperight",".pages", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});

Disable Animation if In Progress

How do I make this script disable animation if it's already animating?
<script type="text/javascript">
$(document).ready(function() {
$("#nav").hover(
function() {
$("#header-wrapper").animate({height:140},500);
$("#dropdown").animate({height:100},500);
},
function() {
$("#header-wrapper").animate({height:40},500);
$("#dropdown").animate({height:0},500);
}
);
});
</script>
I'm really new to jQuery and what I've found through searching hasn't really helped.

Use .stop()
$("#nav").hover(
function() {
$("#header-wrapper").stop(true,false).animate({height:140},500);
$("#dropdown").stop(true,false).animate({height:100},500);
},
function() {
$("#header-wrapper").stop(true,false).animate({height:40},500);
$("#dropdown").stop(true,false).animate({height:0},500);
}
);

Use the .stop() jQuery function
$("#dropdown").stop().animate({height:0},500);

try this:
$("#nav").hover(function() {
if (!$("#header-wrapper").is(':animated')) {
$("#header-wrapper").animate({
height: 140
},
500);
$("#dropdown").animate({
height: 100
},
500);
} else {
$("#header-wrapper").stop(true, false).css('height', $("#header-wrapper").height());
$("#dropdown").stop(true, false).css('height', $('#dropdown').height());
}
},
function() {
if (!$("#header-wrapper").is(':animated')) {
$("#header-wrapper").animate({
height: 40
},
500);
$("#dropdown").animate({
height: 0
},
500);
} else {
$("#header-wrapper").stop(true, false).css('height', $("#header-wrapper").height());
$("#dropdown").stop(true, false).css('height', $("#dropdown").height());
}
});

Why do I get a jQuery syntax error with .post and hide("slide")?

After I do the .post thing, I want to hide the first div with a left slide, then show the second with a right slide. My right-slide was working fine and then I went and tried to put in the left slide and I broke it all.
if(hasError == false) {
$.post("/process-email-signups",{email_address: email_addressVal},
function(data){
$("#email_signup_form").hide("slide", { direction: "left" }, 1000);
function() {
$("#thank_you_message").show("slide", { direction: "right" }, 1000);
});
}
);
}

You've got an extraneous function block in there. Try this instead:
function(data){
$("#email_signup_form").hide("slide", { direction: "left" }, 1000);
$("#thank_you_message").show("slide", { direction: "right" }, 1000);
}
);

I'm not sure what the extra function() is doing, maybe try removing that?
if(hasError == false) {
$.post("/process-email-signups",{email_address: email_addressVal},
function(data){
$("#email_signup_form").hide("slide", { direction: "left" }, 1000);
$("#thank_you_message").show("slide", { direction: "right" }, 1000);
}
);
}

if(hasError == false) {
$.post("/process-email-signups", {email_address: email_addressVal},
function(data){
$("#email_signup_form").hide("slide", { direction: "left" }, 1000);
$("#thank_you_message").show("slide", { direction: "right" }, 1000);
}
);
}