CODEWITHSUNDEEP
jquery
Brad
Brad

Reputation: 59

simple jQuery variable event

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.

Upvotes: 2

Views: 548

Answers (1)

DinoMyte
DinoMyte

Reputation: 8868

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/

Upvotes: 3

Related Questions