javascript - When div resize in JavaScript call function

Question

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.

score 2 · Accepted Answer

DIV 没有 onResize 事件，但这并不意味着您可以自己制作。

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;
                }
            }
        }
    };
})();

测试一下

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

score 1 · Accepted Answer

似乎您想创建自己的扩展事件。下面是一些expanded为您的对象创建事件的代码。您可以使用此代码创建自己的事件框架，或者只使用 jQuery。

在代码的顶部创建事件，当事件被触发时会被重用。在expand()函数结束时，我调用fireEvent(). fireEvent()将触发添加的回调subscribe()。

几点注意事项：

调用getElementById()中的每一行是一种浪费expand()。最好将值分配给变量。
我很确定 IE 9+ 使用dispatchEvent(), 和addEventListener()，所以你不需要条件语句，除非你打算支持 IE8。 createEvent()不在IE中。

代码

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

score 1 · Accepted Answer

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.

score 0 · Accepted Answer

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!");    
}

...

score -1 · Accepted Answer

不知道你在做什么，但看看 w3c tutorial about resize

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

score -2 · Accepted Answer

您可以为此使用 jQuery 的.resize()功能。在您的代码中，这将是：

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

javascript - When div resize in JavaScript call function

6 回答 6

代码

jsFiddle

Related

Reference