CODEWITHSUNDEEP
jqueryresponsive-design
Ross Edman
Ross Edman

Reputation: 823

jQuery Resize Div Responsive

I am trying to make a script that will complete an equal height function above a certain resolution.

Once below that resolution I would like the script to turn off as the equal height columns go away on the mobile version of the site.

I would like this to execute on resize as well. Here is my code so far. This doesn't work at all.

The stretch function does and has been tested outside of the check Width function.

Here is my Code :

Original Stretch Function

$(document).ready(function () {
    var $stretch = $(".eq");
    $stretch.animate({ height: $stretch.parent().height() }, 300 );
});

Resize Function That Does Not Work

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $stretch = $("#narrow")
    var $stretch2 = $(".eq")

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $stretch.animate({ height: $stretch.parent().height() }, 800 );
            $stretch.animate({ height: $stretch2.parent().height() }, 300 );                
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

How can I do this?

Upvotes: 4

Views: 7674

Answers (2)

Huangism
Huangism

Reputation: 16448

For the jquery part 

$(window).resize(function() {
    // do your stuff here

    checkWidth();
});

If you use media queries with combination of the js, keep in mind that the media query width and the $(window).width() are different due to scrollbar.

Upvotes: 3

yves amsellem
yves amsellem

Reputation: 7244

I would highly recommend to use CSS instead of jQuery for such a thing. Responsive UI can be handled by media query like these:

@media screen and (max-width: 1200px) {
    body{ width:1000px; }
}

@media screen and (max-width: 440px) {
    body{ width:440px; }
}

There is lot of great tools to simplify you this, one of the most popular is Twitter Bootstrap.

Upvotes: 3

Related Questions