Detect when iframe & elements are completely rendered, not just html is loaded - javascript

So i have an embedded iframe and i need to detect when the elements are completely rendered. The jquery load() and ready() events only detect when the html is loaded and fire immediately without waiting for the iframe contents to render.
i need to change the size & position of some elements via jquery, but jquery isn't accessing them.
I think the reason it can't access the elements in the iframe is because when the jquery file is ran, the elements aren't rendered yet.

window.onload=function(){
var iframe=document.getElementById('iframeWrapper');
iframe.onload=function(){
console.log('laod the iframe')
};
};

Related

How to detect whether all element's content has been loaded?

I'm wondering how can I detect whether all content inside dynamically appended HTML element is loaded. The element's content might be both text and images, maybe videos. I need to detect it to get a correct element's height value.
I believe that MutationObserver is not right solution for that as this only detects whether node has been changed or its attributes. I have to detect when element's content has been loaded.
Delegating load events to parent doesn't change anything.
Any suggestions?
You can do this by using a callback function on your AJAX call. Off the top of my head I can't remember how that works in vanilla javascript, but in jquery it would look like this:
$.ajax({
url: 'my-url'
}).done(function(){
// This only fires once the AJAX request / response has complete
populateElement();
fixElementHeight();
});
By doing it this way you ensure you have all the content before updating your element. Once the element has been updated, you are then able to measure its height. If part of the new content is an image, or some other content type which needs to be fetched, then I would do the fetching in the populateElement function:
var contentImage = new Image(imgWidth, imgHeight);
$(contentImage).click(function(event){
...
});
contentImage.src = 'source of image';
You will most likely need a javascript that has a constant setTimeout checking for the length of an element. (an element that is not loaded usually has a length of 0 or is invalid)
This is something we encountered awhile back and probably applies to your situation as well. It's for a youtube thing for detecting when certain elements have finished loading, but seeing your question, the concept applies as well.
http://www.gambit.ph/how-to-use-the-javascript-youtube-api-across-multiple-plugins/
I decided to use Javascript promises to handle images load events. I'm creating a new promise for each image and updating my app after all images are loaded.
So there's no other way round to make delegation on parent to detect whether all images were loaded.

Fire event when browser parses/renders a DOM element

Assume that we know that an element (or a very specific selector) is going to appear on a page. Is it possible to set up beforehand, via JS or jQuery, an event that goes off when the browser gets to that element and parses it? This is NOT content loaded through AJAX but is present in the primary page's source.
The reason for this need is that I'm working with a hosted system that greatly limits where and when I can inject code to fix problems with the page. I can pretty much only place my code at the start and end of what is a really long page. Right now, the page has to load completely before it can inject any desired changes (yuck!). Plus, I cannot make the pages shorter in content.
This is basically the process I would like to happen:
Page begins loading
Listener set up to watch for .specialClass elements
...
.specialClass element gets parsed/added to DOM
Listener triggers function on that element
...
.specialClass element gets parsed/added to DOM
Repeat as before
...
Page finishes rendering
So, is this possible at all? Thanks in advance.

Make document.ready not wait for specific DOM elements to finish loading

I found myself in a following situation. I need to somehow not include <div class="article-meta-social"></div> element and all its contents into my document.ready function. The reason is, it has links to apis from facebook, twitter, g+ etc... and Multiplied by several posts it results in a little delay before contents within document.ready function are fired off.
Therefore, what can I change in order for this
$(document).ready(function(){
});
To not wait until .article-meta-social and its contents are ready?
$(document).ready relies on the native DOMContentLoaded event, which does exactly what it says - fires when the entire DOM has been parsed. So to achieve what you want, insert the contents of .article-meta-social dynamically inside your ready handler. This way it won't hold up the main rendering of your page.

Animate something that doesn't exist on page load

Ajax sets up a scenario and jQuery then plays it out. The element does not exist before the page is loaded. I need a way to Animate something that was dynamically added to the page.
Something like:
$(document).on("animate", "div", function (){});
Does anything like this exist?
Okay, there seems to be some confusion, I am using queue() this isn't the issue creating it or doing something after I have the ajax return. After the Ajax the program builds and inserts imgs with specific IDs into the page. I need to reload the dom or something so that I can then animate the objects that were inserted into the page.
I have tested the animated on JSfiddle and they work fine, so my only assumption is that because these objects are not part of the initial dom they will not animate and thus I need the DOM to reload.
All you have to do is animate it with the proper function, like:
$("#nonexistent-element").animate({
right: '10%'
});
and it will animate once #nonexistent-element exists, regardless of whether it existed at page load. You only need to use on() when you want to bind an event to an element that does not exist on page load.
Working jsfiddle: http://jsfiddle.net/emFpw/26/
When the content is loaded via Ajax, we need to bind the events for them to work or we can use the live/on methods of jQuery which will bind the events to either parent/document depending on what we want.
Either of the two techniques ie binding when the content is loaded or using live/on should result in the event being triggered.
For ex: Once the content in inserted we can do as suggested by Lrdwhyt in the above answer.
Or we bind the element before its loaded like
$("#non-existing-elem").live("click",function(){
$(this).animate({right:'10'});
})

Gallery slider bug while loading content via AJAX in jQuery

I'm using a jQuery plugin (link) to pull external pages into a div on my homepage, and each one of the external pages contains a jQuery-based horizontal gallery slider.
Example: http://www.iamtimothylong.com/example
You'll notice that when the external pages are loaded through the AJAX request (by clicking 'book one' or 'book two'), the horizontal slider within those external pages stops functioning.
However, the horizontal slider does work if statically placed in the div (just so it's clear that it's not a problem with the slider itself).
Anyone know a solution/workaround? One guy said
"You need to rebind the slider to the new elements after the XHR request has completed. Inside the success handler of your AJAX request, perform the mScrollBar() binding."
Unfortunately, I'm a programming ignoramus and I need it spelled out in laymen's terms. :)
And the AJAX loader source is located here: /js/menu.js
I would say it is a classic case of replacing the event that is not firing with .live('event')
Basically when the javascript is fired and attaches event handlers when the page is loaded (or whenever they are called), it attaches them to currently existing elements that exist on the page at that time, so when you load in new content (via AJAX) those events are not attached to the new content events that have just been loaded and match the selector.
To fix this jQuery has a .live() event that matches any currently existing DOM elements AND future ones added dyamically.

Categories