CODEWITHSUNDEEP
javascriptif-statement
Slit
Slit

Reputation: 501

When div resize in JavaScript call function

I am learnig JavaScript and I notice that I don't know how to trigger change in my test web site when div resize.

Here is code: 

<!DOCTYPE html>
<html>
<head>
<script>
var  expanded = document.getElementById('Proba').style.width='100%';
function Expand() {
document.getElementById('Proba').style.width='100%';
document.getElementById('Proba').style.height='100%'
document.getElementById('Proba').style.position='absolute';
document.getElementById('Proba').style.left='0px';
document.getElementById('Proba').style.top='0px';
document.getElementById('Proba').style.opacity='0.68';
document.getElementById('Proba').style.zIndex='1';
}
</script>
<style>
#Proba
{
background-color:#b0c4de;
width: 100px;
height: 100px;
}
</style>
</head>

<body id="Body">

<script>
if (expanded=true) {
document.write('You did it!')}
</script>
<div id="Proba" onclick="Expand()"><div>

</body>
</html>

Obviously, if statement doesn't give me what I want.

Upvotes: 2

Views: 2801

Answers (6)

Louis Ricci
Louis Ricci

Reputation: 21086

There is no onResize event for DIVs but that doesn't mean you can make your own.

http://jsfiddle.net/pJ8yH/

(function() {
    var resizeObjects = [];
    window.setInterval(function() {
        for(var i=0; i<resizeObjects.length; i++) {
            var ro = resizeObjects[i];
            if(ro.element.parentNode == null) {
                // node is not part of the DOM right now
                continue;
            } else if(ro.element.offsetHeight != ro.height || ro.element.offsetWidth != ro.width) {
                ro.height = ro.element.offsetHeight;
                ro.width = ro.element.offsetWidth;
                for(var j=0; j<ro.callbacks.length; j++) {
                    ro.callbacks[j].apply(ro.element);
                }
            }
        }
    }, 100);
    HTMLElement.prototype.resize = function(callback) {
        if(arguments.length == 1 && typeof(callback) == "function") {
            // add a new callback function
            var obj = null;
            for(var i=0; i<resizeObjects.length; i++) {
                if(resizeObjects[i].element == this) {
                    obj = resizeObjects[i];
                    break;
                }
            }
            if(obj) {
                obj.callbacks.push(callback);
            } else {
                resizeObjects.push({
                    "element": this,
                    "callbacks": [callback],
                    "height": this.offsetHeight,
                    "width": this.offsetWidth
                });
            }
        } else if(arguments.length == 0) {
            // trigger resize callback functions
            for(var i=0; i<resizeObjects.length; i++) {
                var ro = resizeObjects[i];
                if(ro.element == this) {
                    for(var j=0; j<ro.callbacks.length; j++) {
                        ro.callbacks[j].apply(this);
                    }
                    break;
                }
            }
        }
    };
})();

Test it out

var counter=0;
document.getElementById("demo1").resize(function() {
    this.innerHTML = (++counter);
});
document.getElementById("demo2").resize(function() {
    this.innerHTML = (++counter);
});

Upvotes: 2

Daniel Gimenez
Daniel Gimenez

Reputation: 20494

Seems like you want to create your own expanded event. Here's some code below that creates an expanded event for your object. You can create your own event framework using this code, or just use jQuery.

At the top of the code a create the event, which is reused when the event is fired. At the end of the expand() function, I call fireEvent(). fireEvent() will trigger the callbacks added in subscribe().

A few notes:

  • It was a waste to call getElementById() for each line in expand(). Better to just assign the value to variable.
  • I'm pretty sure IE 9+ uses dispatchEvent(), and addEventListener(), so you don't need the conditional statements unless you plan to support IE8. createEvent() is not in IE.

Code

var exapndEvent = createEvent('expanded');

function expand() {
    var elem = document.getElementById('Proba');

    elem.style.width = '100%';
    elem.style.height = '100%'
    elem.style.position = 'absolute';
    elem.style.left = '0px';
    elem.style.top = '0px';
    elem.style.opacity = '0.68';
    elem.style.zIndex = '1';

    fireEvent(elem, exapndEvent);
}

function createEvent(name) {
    var event;

    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(name, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = name;
    }

    return event;
}

function fireEvent(elem, event) {
    if (document.createEvent) {
        elem.dispatchEvent(event);
    } else {
        elem.fireEvent("on" + event.eventType, event);
    }
}

// subscribe to elemenet event
function subscribe(elem, eventName, callback) {
    if (elem.addEventListener) {
        elem.addEventListener(eventName, callback, false);
    } else if (elem.attachEvent) {
        elem.attachEvent(eventName, callback);
    }
}

// subscribe to expanded event
subscribe(document.getElementById('Proba'), 'expanded', function () {
    this.innerHTML = 'You did It!';
});

jsFiddle

Upvotes: 1

shortstuffsushi
shortstuffsushi

Reputation: 2330

Part of the problem here is that javascript isn't inherently 'stateful' as you're using it. That if statement you added isn't re-evaluated each time you click, it's only evaluated the when the initial HTML is evaluated.

Instead, you might want to have something in your expand function that either shows the "you did it" text itself, or calls another function that does it. You could also add listeners/events to your page/script, but that's a bit more complex.

The third problem is your equality checks. expanded=true is an assignment, setting expanded to true every time. Your initial assignment, var expanded = ...width='100%' is also setting that width to 100%, and I'm not sure what expanded will be set to, probably true because that statement isn't really 'falsey' or undefined because the assignment is a void action.

Upvotes: 1

Alex
Alex

Reputation: 1304

Not sure what are you up to, but take a look at w3c tutorial about resize

http://www.w3schools.com/jsref/event_onresize.asp

Upvotes: -1

peshkira
peshkira

Reputation: 6229

Take a look at this jsfiddle

http://jsfiddle.net/Auawr/

As Juhana stated there is an issue with the execution order due to the way you have written your scripts.

The check whether the div is expanded should be within the expand function or in a separate function that is called after expand. Also note that using one equal sign (=) is an assignment and not an equality check

...
var  expanded = document.getElementById('Proba').style.width == '100%';
if (expanded==true) {
 alert("You did it!");    
}

...

Upvotes: 0

tdlive aw&#39;sum
tdlive aw&#39;sum

Reputation: 400

You can use jQuery's .resize() function for this. In your code, this would be:

$("#div-id").resize(function(){ alert("You did it!"); });

Upvotes: -2

Related Questions