I love this plugin:
http://jquery.malsup.com/block/#demos
The iPhoto (ish) one works beautifully on my site so far. I click a button, the block appears and the new page loads.
However, I'd like to set the setTimeout value to be when the next page has completed loading. So once the page fully loads, the block disappears.
How do I achieve this?
Thank you
I think you must be using ajax to reload the content.
You could do:
$('#TheLastElementThatYouReload').ready(function () {
// set timeout / hide block
});
I'm unsure why you need a timeout, but this way you won't need it.
If you load the new page via ajax, in this page:
http://jquery.malsup.com/block/#overview
there is this:
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
which sort of binds itself to every ajax load. I guess instead of setTimeout you should put an event to the end of loading a page since setTimeout works only with time and "guessing" a page's loading time does not make much sense
Hope this helps
I don't know how you are loading the pages but if you can send a function when the page does load, do something like this:
function page_loaded(){
$.blockUI({
message: 'page loaded!'
});
}
Related
I'm running a front-end script for this to test out some images, and timing is funky, which makes this unique.
I need a way using Javascript to catch an img when the request to the endpoint is made to load the image. I know the image endpoint ( say www.domain.com/directory/number.jpg ), and I want to change that and point to a different endpoint ( say www.differentdomain.com/directory/number_2.jpg ).
I've tried finding the element and changing the src attribute, yet the element seems to be loading onto the page after Document Ready, so there is a long interval of polling the page to find the element.
This is all front-end, to run as the page loads and after, waiting for a user action.
Please note, a setInterval that continuously runs doesn't catch this as precisely as I'd like and it adds a lot of resources to the page for it to run long enough. What other options are there?
I've tried using jquery and polling for the selector in a setInterval, yet this adds a lot of resources to the page to poll every 10 ms and catch this. The problem becomes assigning the event listening to an element that's not yet on the page.
I've just come across Javascript Promises - and am curious if there's a way that would work, though I'm open to ideas.
Thanks!
Did you try to change the src attribute with an IIFE function instead of Document Ready? As much as I understood you are having problems with the slow load of the image element. With IIFE your code executes immediately without document is ready.
Here is JSFiddle example with Document Ready
$(document).ready(function(){
//some code
}
Here is JSFiddle example with IIFE
!function (){
//some code
}();
P.S I'm sorry if i misunderstood your question.
I'm having a master page in ASP.Net, which downloads various files via AJAX and does some initialization work for a library, that I'm using, after that. I'm using jQuery's $.when().then syntax for that.
My individual page requires all those settings to be made before executing it's code. Right now, I'm using the $(function () {}) syntax on my page. The problem with this is, that it executes right after the page has rendered, but long before my when.then construct has finished.
Is there way to wait for that construct? Can I somehow fire a custom event from my master page code after initialization, and attach my content page function to that? Or are there even better solutions?
PS: To make it clear, we're talking about client-side-only code here!
Do not wrap in the document ready $(function () {}) but instead in a custom event.
$(document).on('mycustom',function () {});
THEN trigger that in the then
$.when().then(something).then(function(){$(document).trigger("mycustom");});
In the master page you can set the when/then chain to a variable and continue to chain it in the detail page. They are, after all, one page client-side. So as long as the initial chain comes first, you can append to it all you like.
So you might set the first chain to a variable:
var eventChain = $.when(/.../).then(/.../);
Then in the detail page:
eventChain.then(/.../);
So the detail page is really just picking up where the master page left off.
I'm pretty sure this was somewhere discussed, but I cant seem to find it anywhere. I would really appreciate if anyone could point me to the right direction.
I have setup a dialog which opens and closes just fine. I need to load dynamic content in it and so Im using this:
$('#dialog').load("somepage.php?document=1");
This load up correctly and everything works pretty much fine except the fact that once I close the dialog and then open it with some different query string (e.g. with document=2) I can see that there are still contents of document=1 loaded in DOM.
This causes issue when there is javascript function in the Loaded page because than it gets executed twice. (well the number of times I load documents so its pretty much unusable).
I have tried clearing the dialog:
$('#dialog').html("")
But that didnt help much.
Does anyone have any idea what could help?
Instead of just closing the dialog, destroy it:
$('#dialog').dialog("destroy");
That should clear the dialog back to its initial state:
https://api.jqueryui.com/dialog/#method-destroy
If you want to just load part of a page, you can always do the following: Let's say I want a specific div only.
$('#dialog').load("somepage.php?document=1 #myDiv");
Furthermore, I don't know what you're closing your #dialog with, but if it was something with an id of myButton, you'd do:
$(document).on("click", "#myButton", function(e) {
// To keep div within DOM and empty
$("#dialog").empty();
// To get rid of div (you would have to re-append #dialog every time)
$("#dialog").remove();
});
All this being said, .load() doesn't actually execute any scripts from your loaded page. If you were to use $.post() or $.get(), you could strip out the <script> tags yourself.
Best of luck!
I'm experiencing an issue (which I still need to fix) where my entire page does not load. It gets cut off in the middle of an element.
Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
I was thinking of just putting <div id="end_of_page"></div> at the bottom of the page, and checking if that was rendered, if not, i'll know something went wrong and can reload to try again.
thanks!!
Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
You can do that, yes. Put this in the head after including jQuery:
<script>
jQuery(function($) {
if (!$("#end_of_page")[0]) {
// Something went wrong, load again
location.reload();
}
});
</script>
You'll enter the body of the loop (and so, force a reload) if the end_of_page element doesn't exist as of when the jQuery ready event fires (which is meant to be when the page is done loading).
But: Better by far to figure out why your page is getting cut off half-way through and solve that. This sort of workaround is not a solution.
You can use
$(document).ready(function(){
// code here
});
that code will only run when the page has loaded. A convenient shorthand is:
$(function(){
// code here
});
assuming your jQuery object is $. To finish your requirement, you can have a variable that is set within the load function, then use a timer set at the start of the page to check for it. If it's not there, reload.
Personally, I think you should invest some time into figuring out why your pages only half-way (Firebug or the Chrome Inspector may help you do this, it might be a resource in your page that is causing it to hang, and since most HTTP requests are only made 2 at a time per hostname, it might be waiting for that to return before fetching the rest).
Might be a server-side issue OR some script or library is stealing your fish $ (AKA: 'Dollar').
I'll rather suggest you to debug your code instead of refreshing the page trying to fix issues.
Make sure your scripts are in the head of your document, and jQuery + your jQ functions right before the closing </body> tag wrapped in:
(function($){ /*your functions*/ })(jQuery);
Consider the following script:
$(".workSnippet").click(function () {
//set variable portfolioCount based on index
portfolioCount = $(".workSnippet").index(this);
//load content based on portfolioCount
$('#work #cycle' + portfolioCount).load("ajax-content/ajax-content.php #portfolioImage" + portfolioCount);
// when loaded, run animation functions
$("#work").ajaxComplete(function(){
//help required here
setTimeout(invokeMultipleCycle, 200);
showWork();
});
On my page, there are multiple 'thumbnails' called .workSnippet. When you click one of these, I want it to load content via ajax. It selects what content to load in conjunction with the index function. I have this working absolutely fine.
The problem is, it's a little messy. When you click .workSnippet it runs an animation, however the high quality image loads slowly whilst the animation is taking place.
What I want to do:
Wait for the ajax request to complete before loading the functions invokeMultipleCycle and showWork.
Before the animation occurs, add an ajax loading animation absolutely positioned above .workContent.
Please bear in mind two things:
There are multiple .workSnippets on the page.
The content is not loaded in workSnippet, but another div called #work.
You will see I have already tried to attempt this uses the ajaxComplete function. However, it does not seem to work. Perhaps this is because the ajax request completes but the image still needs to 'load'?
Your help will be most appreciated.
Thanks,
Steve
Perhaps this is because the ajax
request completes but the image still
needs to 'load'?
Yes. You have to do the animation after the images load. I can't think of a way to do that off the top of my head; I think looking into something similar to document.ready() is the solution.