We Keep Coding

Adding a delay to to a form scroller

I am using http://tympanus.net/codrops/2014/07/30/fullscreen-form-interface/ to build a form - I want a delay before the page scrolls down after the click event.
I've been trying to achieve this using setTimeout but have been struggling.
For example I thought this would work:
// show next field
setTimeout(function() {
this.ctrlContinue.addEventListener( 'click', function() {
self._nextField();
} );
}, 1000);
You can see the full code at https://github.com/codrops/FullscreenForm/blob/master/js/fullscreenForm.js
Thanks

This should work, you should set timeout after click event not before.
this.ctrlContinue.addEventListener( 'click', function() {
setTimeout(function() {
self._nextField();
}, 1000);
});

jQuery Animate - No animation when the page refreshes

I am having an issue with jQuery animate on an iPad Mini (Safari).
I run the following animation when a button is clicked:
$('body').on('click', '#submitBtn', function () {
$('#loadBar').animate({ width: '95%' }, 8000);
});
This button sends a request that makes the page reload. As it is starting to reload I want the loadBar to animate.
This does not happen as no animation is fired.
It works if you add return false; and stop the page reload from occurring.
Are there any ways around this. I have tried CSS3 animations and get the same issue.
The animation must occur at the same time as the submit event.
Thanks!

You can reload the page in js after the animation completes
$('body').on('click', '#submitBtn', function () {
$('#loadBar').animate({ width: '95%' }, 8000, function(){
window.location.reload();
});
return false;
});

Maybe something like this is what you're looking for:
http://plnkr.co/edit/2v0s6oIw8jNn8BmoTemi?p=preview
$(function(){
$('body').on('click', '#submitBtn', function (e) {
e.preventDefault();
$('#loadbar').animate({ width: '95%' }, 8000);
setTimeout(function(){ //remove this line
$("#form").submit();
}, 5000); //simulate slow loading page. remove this line
});
});
The idea here is that you prevent the default behavior of the browser, force it to animate, and then continue the submit.

Assuming its a submit form with id "myform":
$('body').on('click', '#submitBtn', function(e) {
e.preventDefault();
$('#loadBar').animate({ width: '95%' }, 8000, function() {
$( "#myform" ).submit();
});
});
EDIT :
Check beforeunload() in http://www.w3schools.com/jsref/event_onbeforeunload.asp
$(window).on('beforeunload', function(){
$('#loadBar').animate({ width: '95%' }, 8000);
});

set timer on jquery pop up

I am opening a jquery popUp div using
$("#saveDialogSingleFeature").dialog();
I only want the div to appear for 3 seconds then close automatically
tried this using $("#saveDialogSingleFeature").dialog('close')}, 3000);
but this doesnt do anything....shouldnt it close?
$(function () {
$("#saveDialogSingleFeature").dialog();
$("#saveDialogSingleFeature").dialog('close')}, 3000);
});

$(function () {
$("#saveDialogSingleFeature").dialog();
setTimeout(function(){
$("#saveDialogSingleFeature").dialog('close')
}, 3000);
});

$(document).on('popupafteropen', '.ui-popup', function() {
setTimeout(function () {
$(this).popup('close');
}, 3000);
});
Plz Let me know this works for you or not

You can do it in "open" section with use of setTimeout:
$("#saveDialogSingleFeature").dialog({
open: function() {
var a = $(this);
setTimeout(function() {
a.dialog('close');
}, 3000);
}
});

Timing fancybox popup

I have a popup window using fancybox which I would like to add some timings to, show after 1 second maybe and disappear after 5. I cant figure out where to add any delays in the code i am using, please can anyone help?
<script type="text/javascript">
jQuery(document).ready(function ($popup) {
$popup("#hidden_link").fancybox({
onComplete: function () {
$popup("#fancybox-img").wrap($popup("<a />", {
href: "mylink.html",
target: "_blank",
// delay: 9000 would like a delay ideally
}));
}
}).trigger("click");
});
</script>
<a id="hidden_link" href="images/myimage.jpg" style="visibility:hidden;"></a>

You can use $.fancybox.open(), see details here - Can you explain $.fancybox.open( [group], [options] ) params and if I can add youtube link as href?, and $.fancybox.close().
setTimeout(function(){
$.fancybox.open(...)
}, 1000);
setTimeout(function(){
$.fancybox.close(...)
}, 5000);

If your link is not going to be visible, you may rather open fancybox programmatically using the $.fancybox.open() method and close it using the $.fancybox.close() method.
As pointed out, you could use setTimeout() to delay the execution of either those methods like :
jQuery(document).ready(function ($popup) {
// open with delay
setTimeout(function () {
$popup.fancybox({
href: 'images/image01.jpg',
onComplete: function () {
$popup("#fancybox-img").wrap($popup("<a />", {
href: "mylink.html",
target: "_blank"
}));
// close with delay
setTimeout(function () {
$popup.fancybox.close();
}, 9000); // setTimeout close
}
});
}, 2000); // setTimeout open
}); // ready
See JSFIDDLE
Note: this is for fancybox v1.3.4.

jQuery mmenu: Scroll after menu close

in an project I do use mmenu first time. It works as expected but there is one thing I would love to have working, but it still isn't :/
Here's the URL: http://1pager.gut-entwickelt.de/
What I would love to see: After selecting an menu-point, it shouldn't scroll within milliseconds. It should wait till the menu is closed, then start scrolling.
Thatfor I added this script-part:
Me.mobileMenu.mmenu({
zposition: "front",
onClick: {
preventDefault: true,
setSelected : false
}
});
Me.mobileMenu
.find('a')
.on(
'click',
function() {
var href = $(this).attr('href');
if (Me.mobileMenu.hasClass('mm-opened')) {
Me.mobileMenu
.off('closed.mm')
.one(
'closed.mm',
function() {
setTimeout(
function(){
$('html, body').animate({
scrollTop: $(href).offset().top
});
},
1000
);
return false;
}
);
} else {
setTimeout(
function(){
$('html, body').animate({
scrollTop: $(href).offset().top
});
},
1000
);
}
return false;
}
);
This seems to work here: http://mmenu.frebsite.nl/examples/responsive/index.html
But on that page it don't... any ideas?
Regards,
Oliver Lippert

The "closed" event is triggered when the menu finished closing, so you shouldn't need an extra timeout.
Have a look at this example, it's a bit more straightforward:
http://mmenu.frebsite.nl/mmenu/demo/onepage.html

Extended to Fred's reply I had another JS-code for doing the scroll. After disabling it, now the menu closes first, and the Scroll starts later.