I'm using this code: LINK - it indicates reading position in a horizontal way.
I want to adapt this script to get not whole document height, but only one of my div's height. This is the original function:
var getMax = function(){
return $(document).height() - $(window).height();
}
I try to replace above code with this:
var getMax = function(){
var content = $("#content");
return content.height();
}
Eveything in Firefox works fine, but in Chrome my horizonal bar fills immediately. How can I fix this?
You can fix this changing your $(document).ready(fn) in $(window).load(fn) event.
ready is fired when the DOM is fully loaded, in this case your element in Chrome could not be ready or not fully loaded yet
load ,instead, assure you that all the assets in the page are loaded so you can safetly do operation on elements (in your case calculate the height).
This demo works in Firefox and Chrome.
From documentation:
The load event is sent to an element when it and all sub-elements have
been completely loaded. This event can be sent to any element
associated with a URL: images, scripts, frames, iframes, and the
window object.
Here an article that explain a little more in depth the difference between ready and load event.
Related
I'm using this jquery function to scroll into a div coming from a link at the index; when I execute the action (clicking on the link to go to the secondary page) and the scroll is executed, it works but not with the right 'scrollTop' measurement.
I realize that it works correctly until I reload the page. I do not know if I'm using the correct function.
var locationString = window.location.hash;
var headerHeight = -70;
$(document).ready(function(){
var divLoc = $(locationString).offset();
console.log(locationString, divLoc.top , divLoc.top + headerHeight);
$('html, body').animate({scrollTop: divLoc.top + headerHeight}, "slow");
});
The most common cause is the miss understanding of two event related to the page load: $(document).ready() (all elements of the DOM are ready to query/modify or whatever) and $(window).load() (all the images and related css are ready and the page will be rendered and will be fully displayed by the browser).
If you use $(document).ready() to apply actions that need all the page to be loaded for correctly display all the sizing, it will fail, because the images are not loaded yet so the vertical offsets (as in your case) may not be correctly computed.
So you need to use $(window).load() instead, so when you scroll to the element you will ensure that the page is fully rendered an all the elements will be placed as they should be.
Hope it helps.
A lot of the time we load an image via jQuery in the background before appending it to the DOM like so
var image = $('<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />');
image.load(function(){
//the image is now loaded and can be appended
});
Although stated in the docs that there are caveats to this method (that ultimately it is not 100% reliable), it is a good method for what we need.
Taking this principle, I want to load an iframe and wait for it to be loaded before proceeding
//method does not fire
var iframe = $('<iframe src="http://example.com"></iframe>');
iframe.load(function(){
//the iframe is now loaded and can be appended
});
However, it appears to be so that the iframe needs to be in the DOM before that load event is called, in contrast to the loading of the image:
//method now fires
var iframe = $('<iframe src="http://example.com"></iframe>');
$("body").append(iframe);
iframe.load(function(){
//the iframe is now loaded and can be appended
});
What is the reason for this? I cannot seem to find it documented anywhere. I know in practice it'd be easy enough to set the style to display none then manipulate it once it's loaded, but I'm more interested in the why as opposed to the how. Thanks!
I am looking for a solution to show a progress indicator when an iframe page changes, but prior to the iframe loading completely.
There are 100's of pages on Stack Overflow going over the differences between jQuery ready(), JavaScript window.load, document.load, DOMContentReady, on('pageinit'...) and after reading the differences on all these various techniques I'm now a bit stuck on how to accomplish trapping the event within the iframe.
So far I have only succeeded in capturing when the iframe has changed once the DOM is built. I would like to be able to detect when a page is about to load so I could have some sort of indicator/spinner in my header.
This is what I have so far (capturing the iframe change on the onload):
.....
<iframe id="rssID" src="http://feeds.reuters.com/reuters/oddlyEnoughNews"
onload="blerg()" style="width: 800px; height:600px"/>
......
$(document).on('pageinit','#index', function(){
alert('pageinit'); //gets called on first load
});
$(document).on('pageinit','#rssID', function(){
alert('pageinit rssFeed'); //nothing happens.
});
function blerg() {
var myIframe = document.getElementById("rssID");
myIframe.onload = func;
};
function func() {
alert("changed");
}
http://jsfiddle.net/Gdxvs/
It would appear that pageinit is the correct path but I have no idea on how to trap that within an iframe. I would prefer not using jQuery, but I'm not sure that is possible without huge amounts of code.
One final: Do I need to use a die("pageinit");
I have div with vertical scroll bar. Div is being updated dynamically via ajax and html is inserted using jQuery's .html method.
After div is updated scroll bar returns to top and I am trying to keep it in the previous position.
This is how I'm trying it:
var scrollPos = $('div#some_id').scrollTop(); //remember scroll pos
$.ajax({...
success: function(data) {
$('div#some_id').html(data.html_content); //insert html content
$('div#some_id').scrollTop(scrollPos); //restore scroll pos
}
});
This fails. My best guess is that it is failing due to inserted html not rendered (ie. no scroll).
For example this works.
setTimeout(function(){
$('div#some_id').scrollTop(scrollPos);
}, 200);
But this is dirty hack in my opinion. I have no way of knowing that some browsers won't take more then these 200ms to render inserted content.
Is there a way to wait for browser to finish rendering inserted html before continuing ?
It's still a hack, and there really is no callback available for when the HTML is actually inserted and ready, but you could check if the elements in html_content is inserted every 200ms to make sure they really are ready etc.
Check the last element in the HTML from the ajax call:
var timer = setInterval(function(){
if ($("#lastElementFromAjaxID").length) {
$('div#some_id').scrollTop(scrollPos);
clearInterval(timer);
}
}, 200);
For a more advanced option you could probably do something like this without the interval, and bind it to DOMnodeInserted, and check if the last element is inserted.
I will just like to point out one difference here: One thing, is when the .html() have completed loading, but the browser actually render the content is something different. If the loaded content is somewhat complex, like tables, divs, css styling, images, etc - the rendering will complete somewhat later than all the dom ellements are present on the page. To check if everything is there, does not mean the rendering is complete. I have been looking for an answer to this by myself, as now I use the setTimeout function.
Such callback does not exists because .html() always works synchronously
If you are waiting for images loading, there's one approach https://github.com/desandro/imagesloaded
I am trying to obtain an element width using the following code just before the </body>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var diff = $('div.canvas img.photo').get(1).width;
console.log(diff);
});
</script>
but it logs undefined. However, if I run $('div.canvas img.photo').get(1).width directly in the Chrome/Firebug console, it returns the correct width. The image is not being loaded with Javascript, so should be in place when the document ready fires. What am I doing wrong?
No, it shouldn't. document.ready fires when all HTML has been loaded, but not the images. If you want to wait until all images are loaded, use window.load.
Example:
$(window).load(function(){
var diff = $('div.canvas img.photo').get(1).width;
console.log(diff);
});
Also, as some people have pointed out, you were attempting to get the property ".width" twice.
If at all possible, set a width on the imagetags in CSS. That way, you can safely use document.ready for your code. Using window.load will naturally delay the execution of your script, could be a second, could be ten, depending on the speed of the clients connection, and the amount of content on your page. This could cause unwanted jumps and jitters if you're performing any styling.
img isn't being loaded on DOM ready. docs:
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
change to this:
$(window).load(function(){
var diff = $('div.canvas img.photo').get(1).width;
console.log(diff.width);
});
Image's width would only be available when its loaded completely.
jQuery supports onload event on every images too.
You can use,
$('div.canvas img.photo').load(function(){
// here the image (or all images which match selector) has been loaded.
}
The problem is that your image is not loaded yet when you try to get its dimentions. To make it work wrap your code into $(window).load. Or another option. If you know the sizes of the image you can provide width and height attributes, then it's going to work even inside DOMContentLoaded. Sometimes it's preferable because onload event takes longer to fire then 'DOMContentLoaded'.
Otherwise you would need to use $(window).load, see #Andreas Carlbom answer.