2

I know this is a basic question, but these are the ones that get me.

I define a variable:

var img_w = $('#image').width();

Then I do this:

$(document).ready(function() {
    if (img_w > 100) {
        //do stuff
    }
});

My image is loaded from a separate html, styled with jQuery, and then fits the >100 criteria, but it's too late. So I try:

$(window).load(function()
$(window).on('load' function()
$(window).onload(function()
$(window).ready(function()

And so on an so forth... But to no avail, because of the order of events.

So the simple solution is to make an event for when img_w is greater than 100. But for some reason I can't figure out the best way to do this. I'm sure there's a simple solution I'm missing. Any help will be much appreciated. :)

edit: To expand on you questions about what's going on; A div is to have it's width set to img_w. The image that img_w get's it's value from is loaded from an external html file. The jQuery to set the div width, and where the variable is made, is in the external html file.

Brad
  • 59
  • 7
  • Sounds like what you are looking for is a mutation event, but mutation events are kind of shady and not well supported. You said you use jQuery to style it.. so add a call to `someCallbackFunction()` to pop whatever you want at the same place where you change the width. If this is not possible for you, then alt would be to wrap your logic in a `setTimeout` to keep looking for a change every n milliseconds. – CrayonViolent Dec 29 '15 at 20:07
  • It helps if you first explain the problem, what are you trying to do? – JonH Dec 29 '15 at 20:07
  • I just want to make something that fires after all the stuff I had going. – Brad Dec 29 '15 at 20:08
  • @Brad put width() code inside doc ready block. If it is outside it will get executed when `#image` element is not even initialized. – pratikpawar Dec 29 '15 at 20:08
  • How are you loading your external image? The clue is in there. I assume you are using ajax? In that case you should add the `//do stuff` part to the success callback of that. – Mosselman Dec 29 '15 at 20:08
  • What does that mean? The ready event fires once (unless you have some async postback / update panel scenerio). What triggers the chagning of the width? Wherever it changes is your callback function where you //do stuff. – JonH Dec 29 '15 at 20:08
  • @pratikwebdev Sorry for that being unclear, the bit where I define the variable is in doc ready. – Brad Dec 29 '15 at 20:18
  • @CrayonViolent What would the setTimeout solution look like? – Brad Dec 29 '15 at 20:26
  • try to put the variable value setting part inside the ready function above the if sentence. – Rumplin Dec 29 '15 at 20:36
  • @Brad `#image` element will get loaded first which will have some width based on structure of page. Second once you load an image in it it may change width of an element. All this happens on page load. Once it is done `document.ready()` gets called. If you are initializing `img_w` outside of doc ready as part of JS and if it is being loaded before HTML / body it wont hold a value since `#image` element is not yet loaded. I hope it helps. Try putting it inside doc ready. Check the value before and after. – pratikpawar Dec 29 '15 at 20:53
  • @Brad `siteTimeout` solution would [look like this](https://jsfiddle.net/9vnftcnh/), but the accepted answer is the custom event binder/trigger is the `someCallbackFunction()` method I mentioned as the preferred solution, so go with that – CrayonViolent Dec 29 '15 at 21:11

1 Answers1

3

You can make use of DOMSubtreeModified event which gets executed anytime there is a change in the property of the element.

$('#image').bind("DOMSubtreeModified", CheckHeight);

Here's an example : https://jsfiddle.net/DinoMyte/6d5ry9br/

UPDATE : Since DOMSubtreeModified is depreciated and may no longer be compatible with all browsers, the other possible option is to delegate an event handler to the element and manually invoke the change event during an external event invokation:

$('#image').bind("DOMModified", CheckHeight);
$("#image").triggerHandler('DOMModified');

Here's an example : https://jsfiddle.net/DinoMyte/6d5ry9br/1/

DinoMyte
  • 8,737
  • 1
  • 19
  • 26