I realize that there are tons of posts on this website that ask about how to delay JavaScript. I have tried numerous ways, but since I am not knowledgeable on JavaScript, I have no idea how to do it.
I am trying to delay the following JavaScript code for 3 seconds. It launches a Bootstrap modal upon page load.
$(window).load(function(){
$('#leave').modal({
show : true,
backdrop : 'static'
});
});
I have tried the following things, but they seem to either break the code, or do not work.
setTimeout(function() {
$(window).load(function(){
$('#leave').modal({
show : true,
backdrop : 'static'
});
});
},"3000");
(breaks it)
$(window).load(function(){
$('#leave').delay(3000).modal({
show : true,
backdrop : 'static'
});
});
(doesn't delay it)
$(window).delay(3000).load(function(){
$('#leave').modal({
show : true,
backdrop : 'static'
});
});
(doesn't delay it)
If anyone could help me figure out how to delay the code for 3 seconds, I would much appreciate it, thanks.
Try this,
$(window).load(function(){
setTimeout(function() {
$('#leave').modal({
show : true,
backdrop : 'static'
});
},3000);
});
.delay() only delays execution of subsequent items in the queue ( animation ).
Related
This is how I open up an ajax modal:
// MODAL AJAX
$('body').on('hidden.bs.modal', '.modal', function() {
$(this).removeData('bs.modal');
});
$('.remote-click').click(function(){
var dataContent = $(this).attr("data-content");
$('.spinner').show();
setTimeout(function(){
$('#remote').modal({remote: 'ajax.php?' + dataContent, backdrop: 'static', show: true});
}, 1000);
setTimeout(function(){
$('.spinner').hide();
}, 2000);
});
After opening a modal this way the bootstrap dropdown function on the site doesnt work. It only works if I refresh the whole page.
Also I have the problem that you'll see the old ajax modal content for some seconds using this code, before the new one loads. But the loading indicator will be shown first. I couldn't figure out how to solve this.
Appreciate any suggestions on both issues!
javascript is completely new to me. I am a relatively inexperienced rails developer. I have implemented something in a rails 3 app called joyride, which is a jquery plugin and pops messages up for users giving them a "tour of the page". This is the script that runs the tour nicely when the page is loaded
:javascript
$(window).load(function() {
$('#joyRideTipContent').joyride({
modal:true,
expose: true
});
});
That works perfectly. My problem is that I need it to run when a button is clicked rather than on loading of the page.
So I started with a simple button on the HAML page
%button#myBtn
Lauch tour
That gives me my button. Then I wrote a function (forgive me its my first) to fire the code when the button is pushed.
:javascript
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', function(event) {
$("#joyRideTipContent").joyride({
modal:true,
expose: true
});
});
This is where it gets strange. The code works - on the SECOND click. Clearly something is being passed in the first time, and then executed the second time, but I am way out of my depth, can anyone help!
thanks
EDIT:
changed the code to this on advice, but same problem exists...
$(function() {
$("#myBtn").click( function()
{
$("#joyRideTipContent").joyride({
modal:true,
expose: true
});
}
);
});
EDIT: added a jsfiddle for anyone with time to have a look at http://jsfiddle.net/garethburrows/beonc06z/
Try
$('#myBtn').on('click', function(event) {
$("#joyRideTipContent").joyride({
modal:true,
expose: true,
autoStart: true
});
});
you're mixing jquery and classic js - not good.
It seems that when I add an afterClose callback to my fancybox I'm getting this error:
Uncaught RangeError: Maximum call stack size exceeded
This is the code I am using:
$("a.termsLink").fancybox({
type : 'iframe',
fitToView : false,
width : 450,
height : 600,
afterClose : function(){
$('#regForm').click();
}
});
What is supposed to happen is when the termsLink box closes, the regForm is supposed to open. I've expiremented with differnt callbacks, but the issue that I am running into seems to be unaffected by this.
The solution appears to be as follows:
afterClose : function(){
setTimeout(function(){$('#regForm').click();}, 1);
}
However that feels like a very hacky method to me, the issue seems to be that the fancybox code trys to call the new box while the animation for the other box is still running, which causes this issue. Is this a documented issue with FancyBox? Or is this a function of the way jQuery animation event work? Is there a more elegant solution to this issue?
If you're using Twitter Bootstrap < 2.3.1, it's known to cause this exact issue (I just experienced it, and upgrading bootstrap solved the problem)
More details here: https://github.com/fancyapps/fancyBox/issues/519
Try
$("a.termsLink").fancybox({
type : 'iframe',
fitToView : false,
width : 450,
height : 600,
afterClose : function(){
$('#regForm').focus();
}
});
although what you have should work you're right. Unsure but check the script doesn't close all fancybox's open. if the #regForm is being opened into a fancybox hence why you'd need the timeout.
Looking into the fancybox script they use this function
function _cleanup() {
overlay.fadeOut('fast');
title.empty().hide();
wrap.hide();
$.event.trigger('fancybox-cleanup');
content.empty();
currentOpts.onClosed(currentArray, currentIndex, currentOpts);
currentArray = selectedOpts = [];
currentIndex = selectedIndex = 0;
currentOpts = selectedOpts = {};
busy = false;
}
This basically confirms what I was saying before. All the instances of fancybox are cleared after this function is run. So even though you've got one opening straight after it's being cleared before really being shown. The solution you've come up with seems to be the better solution unless you want to fiddle with the fancybox script yourself :)
Are you sure the problem is related to the click function?
I found the same problem including, by mistake, two jQuery versions
(jquery-1.2.6.pack.js and jquery-1.4.4.min.js)
Removing the last one solved the problem.
I checked this because of this topic loading jquery twice causes an error?.
You could try to check it.
I'm using jquerynewsticker to reveal 100,000 digits of the number π in a news ticker fashion.
If i have my Chrome inspector open, i can see that the page loads from top to bottom, but the after the number, as well all the JS behind it, is rendered black for a few seconds, and only then becomes coloured as per default. However, the script already starts running as you can see on the test page here: http://marckremers.com/pi/ticker/
It seems to run, but without rendering.
If i reduce the size of the number, it works.
So it's clearly an issue where the loading isnt complete.
How can I force the script to only play once everything has 100% loaded?
Looking at your website I see the you load the ticker plugin and you execute your own code:
jQuery(document).ready(function($) {
$(function () {
$('#js-news').ticker({
speed: 0.05,
fadeInSpeed: 0,
titleText: '',
controls: false,
});
});
});
There 2 issues in this code:
1) Unnecessary nesting. you execute your code on document ready and then you call again a document ready handler ($(function(){...});
Keep in mind that writing $(document).ready( function(){} ) or $(function(){}) serves exactly the same purpose. For this reason you can remove the second event listener (useless):
jQuery(document).ready(function($) {
$('#js-news').ticker({
speed: 0.05,
fadeInSpeed: 0,
titleText: '',
controls: false,
});
});
with document.ready registration your code will run after the DOM has been completely built.
2) Another issue I see is that your selector #js-news does not resolve! I see no element in the page with ID=js-news... am I missing something ?
You can put your code as above to wait for the dom to be fully loaded.
$(function() {
// Your code
});
If it's not enough, if you want to wait for everything to be loaded (images, css, ...), you can put your code as above :
$(function()
{
$(window).bind('load', function()
{
// Your code
});
});
I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.
My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.
Any thoughts? Anyone experienced similar behaviour?
UPDATE : Some Code..
I have a databound repeater with a fancybox on each repeating item.
They are instanciated by (outside the repeater)
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
The anchor tag is repeated..
href="#watchvideo_<%#Eval("VideoId")%>"
As is a div with
id="watchvideo_<%#Eval("VideoId") %>
As is a script element that instanciates the flash movies
Yes the VideoIds are being output the the page.
UPDATE : It's not a problem with the flash..
It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.
UPDATE : I wonder if it is the updatepanel.
Rebinding events in jQuery after Ajax update (updatepanel)
-- lee
The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.
function pageLoad(sender, args) {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
see this answer for more info
Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?
It was the Update panel as described
here.. Rebinding events in jQuery after Ajax update (updatepanel)
As suggested I simply replaced
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
}
and it worked!
-- Lee
This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:
$('body form:first').append( ... );
I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.
I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.
I solved the issue replacing this:
<script>
$(document).ready(function () {
$("a.small").fancybox();
});
</script>
with this:
<script>
function pageLoad(sender, args) {
$("a.small").fancybox();
};
</script>