I use var targetHeight = jQuery('.acc-content-inner').eq(currIndex).outerHeight(); to take hight of an element. But if the div.acc-content-inner has a table in it, it doesn't add the height from the tabele to the targetHeight
The height may not be calculated right not because of the table, but because of the images. If you run your code on document.ready. My guess is that jQuery calculates it before the images get downloaded. A similar effect can be seen here: http://jsfiddle.net/z2eounmt/1/ (notice it disappears on page refreshing if cache is not cleared). The first time the output is 40, so the height of the image is not included.
To solve this issue, either use imagesLoaded, or change your function to be run on window.load. or change the way your accordion works.
I have this very simple function to resize a div according to an element on the page.
Because of the static navigation bar on top of the page, I need to control the empty space underneath it, for the first div with content to appear on the right place (below the navigation bar), specially because when the screen is smaller, the navigation bar gets larger (height is bigger).
My question is: why does it not always work? It works fine most of the times, but sometimes I need to refresh the page for it to work.
Here is the dummy HTML:
<div id="menu-fixed-top"></div>
<div id="empty-space"></div>
<div id="content"></div>
where the #empty-space is the div I want to control the height.
I used the document.ready and the window.resize to control it.
The JQuery function is:
$(document).ready(function() {
var height = $("#menu-fixed-top").innerHeight();
$("#empty-space").height( height );
$(window).resize(function() {
$("#empty-space").height( height );
});
});
Is there any way to get it working 100% of the time? Or the only way is to be sure is to use media queries?
Thanks
document.ready will trigger when the whole DOM has loaded and is ready for javascript to execute. This is to avoid any problems with javascript being ready to go but the whole DOM hasn't finished loading.
http://learn.jquery.com/using-jquery-core/document-ready/
I would first check to see that the DOM has finished loading without document.ready being triggered before drawing the conclusion that jquery isn't kicking it off.
You may also want to look at window.load if you're wanting to calculate heights and such as the DOM != the fully rendered page
The demo page referenced can be found here.
I'm trying to determine a way that on the click of a parent category (ex: Stone Tiles, Stone Sinks), that the JScrollPane would re-determine the current height and adjust as needed. Unfortunately, my attempts to do so have not worked yet.
I referenced the example here which provided the following function (to do a refresh)...
api.reinitialise();
I've tried to setup this function to be triggered by the category parents like so...
var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;
$("li.expandable.parent").click(function() {
api.reinitialise();
});
Unfortunately, while I was able to verify the click is being rendered, the function (api.reinitialize) doesn't appear to be working. I'm hoping that a fresh pair of eyes could point me in the right direction. :-)
Thanks!
The problem is that api.reinitialise executes immediately after the click, and the li element will not have expanded yet so when jscroll pane goes to to recalculate the height it gets it wrong. You can try adding a delay but the best solution would be to bind api.reinitialise() to an event that's triggered once the your list has finished expanding. I'm not sure how you're expanding the div within the li but if for instance it's using .animate, you could bind the api.reinitialise to the animation complete event.
Also noted that not all the parent li's have the class parent associated it to them. I would expect you would want the pane to reinitialize on the expansion and collapsing of all the main li elements.
Hope that helps !
Cheers :)
What you can do is have your inner divs expanded by default, and then close them with jquery, rather than in the CSS directly.
So instead of doing this:
.mydiv.closed {display:none}
do this in your jquery after the elements are drawn to the page:
$('.mydiv.closed').hide();
This will load the jscrollpane at the necessary height, and then collapse what you want to be initially hidden.
I'm trying to use lazyload to only load images that are visible (because my site is responsive and some content is hidden with display:none to clients on a smaller screen).
Basically, lazyload works, but ONLY after I scroll the page a little.
This is the lazy load settings I'm using, and even after setting the threshold to 2000px (more than the entire page height) it still only loads images after the user scrolls the page (even 1 px).
This bug only appears in webkit browsers.
$(document).ready(function () {
$("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});
I think it could be some misbehavior of threshold parameter, but still you can manually fire the loading according to this page:
<script type="text/javascript">
$(document).ready(function () {
$("img")
.lazyload({
event: "lazyload",
effect: "fadeIn",
effectspeed: 2000
})
.trigger("lazyload");
});
</script>
but if you want to load all images on ready, why need lazyload at all? You could just use $.animate.
Just add this after .lazyload() and it will trigger scroll and show images
$(window).trigger('scroll');
You need to set width and height for you images.
If width and height are not set jQuery will report images invisible in Webkit browsers on document.load event. When skip_invisible is true Lazy Load will ignore the images, meaning it wont try to figure out whether image should be loaded or not. They will load first time you scroll.
If you set skip_invisible is false plugin will try to figure out should images be loaded. However since you do not have width and height set all images will be size of 0x0 or 1x1. Because of this all images are in viewport (because of their size) when plugin kicks in. Because images are in viewport Lazy Load will instruct to load them all.
In short: Add width and height to images. Lazy Load wont work properly without them.
I'm not sure when this got added, but you can manually fire the 'appear' event to some or all (depending on the css selector) appear:
$("img.lazy").trigger('appear');
Got this from here: http://yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/
I had the same issue. They are in a scrolling div, but would only load after an initial scroll.
Using 'appear' will show them all, unless you limit it. In my case, I only wanted to show the first 3 on load. The rest of them lazy load as usual.
$("img.lazy:lt(3)").trigger('appear');
Try to pass additional parameter.
skip_invisible : false
This parameter is true by default, so it seems your images are not visible when plugin starts it's job. It could happens when you are using any preloader on your website.
I had the same problem, and found a solution for this.
Please note that my images were placed inside of a div that is populated via an ajax call.
Just change a line of code inside the lazyload sources (lines 147-150) of version 1.8.4:
/* Force initial check if images should appear. */
$(document).ready(function() {
update();
});
instead of
/* Force initial check if images should appear. */
$(window).load(function() {
update();
});
Or eventually add the call to "update()" to any other needed event.
I had a similar issue where the images wouldn't load after a ajax call until I scrolled (even if I just scrolled 1px it would load). I found I needed to add a height and width to my images like Mika Tuupola said. My images were loaded dynamically, were different image sizes and loaded from a foreach loop. I added generic width and height attribute to the image tag then after the lazyload loads the image I removed the attributes so it would show the correct image size.
<img class="lazy" src="img/placeholder.gif" data-original="img/image.gif" width="1000" height="600">
$('img.lazy').lazyload({
skip_invisible: false
}).removeClass('lazy').removeAttr('width').removeAttr('height');
I had the same problem with hidden elements, is a simple workaround but it works. When I click on the page, I triggering scroll event to force lazyload script. You can do the same thing with the event resize
$(document).ready(function () {
$("img").lazyload({
event: "lazyload",
effect: "fadeIn",
effectspeed: 2000
});
$(window).resize(function () {
$(this).trigger("scroll");
});
});
In short: Add width and height to images. Lazy Load wont work properly without them.
You should be loaded in advance placeholder;Like this：
<img src="./images/grey.gif" alt="" style="display:none">
And then
$("img.lazy").lazyload({placeholder : "images/grey.gif"});
If you set the width of the image to 100%,this will provide a width and height.
This solved my problem.
This is working solution, but in is not very good for some reason:
$("img").lazyload({
/* Image loaded callback function */
load: function() {
$(window).trigger('scroll');
}
});
Every time lazyload plugin load the picture, this function will be called and window trigger 'scroll' will be emulated, so it is a solution for me
Increase the failure_limit.
After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.
Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold.
I was dealing with the same issue and I noticed that this problem only occurs when images are placed inside a div that is initially hidden (ie. display: none;)
I'm writing some JavaScript that changes the size of some content. To do this I need to know the size of a div within my content. If I have the following html:
<div id="wrapper">
... other stuff ...
<div id="inner" style="height:400px">Some text in here</div>
... other stuff ...
</div>
And the following JavaScript:
$('#inner').height('auto');
var height = $("#wrapper").height();
In FireFox and Chrome the height variable increases as the inner div expands to fit all the text. In IE this stays the same. I guess it doesn't redraw the div straight away. Anybody know how to get the new correct height in IE?
Cheers
It the problem is that the element doesn't redraw right away, then you need to measure the height asynchronously - set a 0-millisecond timeout to measure it and continue execution.
Try it this way:
$(function() {
$('#inner').height('auto');
var height = $("#wrapper").height();
});
Wrapping it in $(function() { }); makes it wait for the DOM to render before running the script. It's probably a good idea to put anything that needs access to the DOM immediately after render inside that function.