0

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

Community
  • 1
  • 1
aln447
  • 981
  • 2
  • 15
  • 44
  • 2
    Did you try wrapping your code in document.ready or placing the script tag at the bottom of the page? If the element contains images or other content that actually needs to load, you have to wrap the code in `window.onload` instead – adeneo Oct 15 '17 at 22:16
  • `$(document).ready(function() { console.log("1:" + $(slides[0]).find('.slide__inner').height()); });` – roberrrt-s Oct 15 '17 at 22:17
  • Same effect. The whole act is played inside fancyboxes `afterLoad` function which kicks in after the whole content is loaded – aln447 Oct 15 '17 at 22:19
  • @ScottMarcus are you sure that this is the exact issue? – roberrrt-s Oct 15 '17 at 22:19
  • @ScottMarcus This is not a duplicate. I have edited the question. Please remove the marking, if possible – aln447 Oct 15 '17 at 22:23
  • *I specifically said I dont wan't to use setTimeout* does not mean that your issue isn't that you haven't properly set up document.ready. Please show more of your code or inform us as to whether you are using document.ready or where this code is located in your overall page. – Scott Marcus Oct 15 '17 at 22:25
  • @ScottMarcus OP has explained that the code is running in a plugin's `afterLoad` function, so I doubt this is a document.ready issue – Matt Diamond Oct 15 '17 at 22:25
  • OP, could you link to the plugin you're using? And documentation on the `afterLoad` function? – Matt Diamond Oct 15 '17 at 22:26
  • @MattDiamond All that does is make me question whether the plug-in is being accessed or is working correctly. Not using the plug in and instead trying document.ready would diagnose that. – Scott Marcus Oct 15 '17 at 22:26
  • OP, could you consider using the `afterShow` callback instead of `afterLoad`? Assuming this is what you're using: http://fancyapps.com/fancybox/#docs – Matt Diamond Oct 15 '17 at 22:27

1 Answers1

1

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.

Matt Diamond
  • 11,646
  • 5
  • 29
  • 36
  • Reasons unknown to me the project does not have the `afterShow` function in fancybox, so there must be another way. Thanks for the idea tho – aln447 Oct 15 '17 at 22:47