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
– A. Wolff, Commented Jul 17, 2013 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 — Ohgodwhy
– Ohgodwhy, Commented Jul 17, 2013 at 20:43
Could not help myself: you can rewrite this as $('#partOne, #partTwo').toggleClass('big', wrapWidth >= 500) — Artem Latyshev
– Artem Latyshev, Commented Jul 17, 2013 at 20:55

Xotic750 · Accepted Answer · 2013-07-17 21:44:15Z

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

Selvakumar Arumugam · Accepted Answer · 2013-07-17 20:55:38Z

2

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/

answered Jul 17, 2013 at 20:55

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

2 Comments

Xotic750 Over a year ago

+1, like the tracking fix for MutationObserver. Much better than the polling solution.

Selvakumar Arumugam Over a year ago

@Xotic750 Thanks for checking out my answer.

SharkofMirkwood · Accepted Answer · 2013-07-17 20:40:54Z

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, 2013 at 20:40

SharkofMirkwood

13k2 gold badges19 silver badges25 bronze badges

1 Comment

Xotic750 Over a year ago

Note: This plugin uses polling.

ujjwal · Accepted Answer · 2013-07-17 20:44:33Z

0

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

answered Jul 17, 2013 at 20:44

ujjwal

293 bronze badges

Collectives™ on Stack Overflow

How to dynamically change classes when DIV width changes?

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related