How to dynamically change classes when DIV width changes?

Question

I know how to change classes with Jquery when the window size is changed, but I need it to be based on the width of a DIV and change dynamically when the DIV's width changes.

$(window).resize(function() {

   var wrapWidth = $('.info-wrap').width();

    if (wrapWidth >= 500) {

      $('#partOne').addClass('big');
      $('#partTwo').addClass('big');

    } else {

      $('#partOne').removeClass('big');
      $('#partTwo').removeClass('big');
    }
});

This works when the window size changes. But, what can I use insead of $(window).resize to get the width of the DIV as it changes?

If DIV's width changes only on window resize, what is the issue here? — A. Wolff, Jul 17 '13 at 20:42
What's calling the resize? An existing plugin? or does it have CSS3 `resize:both` enabled? If it is bound by CSS3, check here -> [How to detect CSS3 resize events](http://stackoverflow.com/questions/8082729/how-to-detect-css3-resize-events) — Ohgodwhy, Jul 17 '13 at 20:43
http://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed — Yandong Liu, Jul 17 '13 at 20:45
Could not help myself: you can rewrite this as $('#partOne, #partTwo').toggleClass('big', wrapWidth >= 500) — Artem Latyshev, Jul 17 '13 at 20:55
On newer browsers use `MutationObserver` on older you will need to look at `Mutation Events` — Xotic750, Jul 17 '13 at 21:19
It also depends on how the width is set `width="100px"`, `style="width: 100px;"`, or by `class="widthClass1"` on the element (or possibly some other). — Xotic750, Jul 17 '13 at 21:28
There is another DIV on the page that changes width based on another event and thus changes the width of this DIV. So using (window) will not work because the window size doesn't change in this case. — Cake, Jul 17 '13 at 21:55
See: [Can you have a javascript hook trigger after a DOM element's style object changes?](http://stackoverflow.com/questions/10868104/can-you-have-a-javascript-hook-trigger-after-a-dom-elements-style-object-change) — Xotic750, Jul 18 '13 at 02:40

score 3 · Answer 1 · answered Jul 17 '13 at 21:44

Here is an example of observing the elements attributes.

See: MutationObserver and Mutation Events

CSS

#watch {
    border: 1px solid;
}

HTML

<button id="button">Click me</button>
<div id="watch" style="width: 100px; height: 50px;"></div>

Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/* global global */

(function (global) {
    "use strict";

    if (typeof global.MutationObserver !== "function") {
        global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver;
    }

    var watch = document.getElementById("watch");

    function whenClicked() {
        watch.style.width = "200px";
    }

    document.getElementById("button").addEventListener("click", whenClicked, false);

    if (typeof global.MutationObserver !== "function") {
        // chrome doesn't despatch an event for "DOMAttrModified"
        watch.addEventListener("DOMAttrModified", function (evt) {
            console.log("Attribute changed", evt.target);
        }, false);
    } else {
        var observer = new global.MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.type === 'attributes') {
                    console.log("Attribute changed", mutation);
                }
            });
        });

        observer.observe(watch, {
            attributes: true,
            childList: true,
            characterData: true,
            subtree: true
        });
    }
}(window));

On jsfiddle

score 2 · Answer 2 · answered Jul 17 '13 at 20:55

I wrote a plugin sometime back for attrchange listener which basically adds a listener function on attribute change. This seems to come in handy for scenario that you had mentioned where you need a handler to check the width and height.

DEMO: http://jsfiddle.net/CKTk3/1/

    var prevWidth = $('#test').width(),
        prevHeight = $('#test').height();

    $('#test').attrchange({
        callback: function (e) {
            var curWidth = $(this).width(),
                curHeight = $(this).height();            
            if (prevWidth !== curWidth ||
                prevHeight !== curHeight) {
                console.log('resized: width - ' + prevWidth + ' : ' + curWidth + ' height - ' + prevHeight + ' : ' + curHeight);

                prevWidth = curWidth;
                prevHeight = curHeight;
            }            
        }
    }).resizable();

Plugin page: http://meetselva.github.io/attrchange/

+1, like the tracking fix for MutationObserver. Much better than the polling solution. — Xotic750, Jul 18 '13 at 02:37

score 0 · Accepted Answer · answered Jul 17 '13 at 20:40

0

I think you'll need to use a plugin for JQuery, such Ben Alman's plugin.

I don't think there exists something that detects when a div gets resize, only the window.

answered Jul 17 '13 at 20:40

SharkofMirkwood

11,483
2
17
25

Note: This plugin uses polling. – Xotic750 Jul 18 '13 at 02:30

score 0 · Answer 4 · answered Jul 17 '13 at 20:44

0

You can get div width by div class or id. ex: $("#div-id").width();

answered Jul 17 '13 at 20:44

ujjwal

29
3

How to dynamically change classes when DIV width changes?

4 Answers4

Linked