CODEWITHSUNDEEP
javascriptjquerycss
aln447
aln447

Reputation: 1011

Selector finds proper value only inside setTimeout

I have a script which requires the height of a certain div.

The problem is the .height() method in jQuery does not return the proper value, unless it is places inside a setTimeout function, even with the values of 0. So this:

console.log("1:" + $(slides[0]).find('.slide__inner').height());
setTimeout(function(){console.log( 
    "2:" + $(slides[0]).find('.slide__inner').height());}
, 0);

Results in this

1: 0

2: 399 //expected value

Now I am aware of the browser multi threading thing, and that elements inside timer elements run in their own....dimensions, but I need to make this selector print the correct values without using setTimeout, or any timer functions.

Additional info:

The target div is position absolute, the function itself is meant to fire-up specifically after the inside content (and the height) is all set.

Edit

This is not a duplicate of When should I use jQuery's document.ready function? . I specifically said I dont wan't to use setTimeout....

Edit2

The mentioned afterLoad function is a part of the Fancybox3 js plugin. Reading from the source found here :

afterLoad : $.noop, // When the content of a slide is done loading

I am not allowed to show too much of the code due to work restrictions, but the block itself is place within a resize() declared inside afterLoad, which gets called by the end of the afterLoad block

Upvotes: 0

Views: 49

Answers (1)

Matt Diamond
Matt Diamond

Reputation: 11696

Based on the documentation of the plugin you're using and your comments on your original question, it looks like your problem could be solved by using the afterShow callback instead of afterLoad. This callback will fire once the open animation is complete, which is when height queries would be appropriate.

Upvotes: 1

Related Questions