Apply styling with javascript if a div overflows

Do you see the typo in your script?

 var columsheight = $('.colums').height();

should, according to your markup, be:

 var columsheight = $('.columns').height();

Oh. Ouch. Even more to the point... your whole jQ window resize function is in bad shape. Your resize() function is closing out before it's completed the rest of its processing:

 $(window).resize(function(){
     $('.container').css('height', $(window).height() - 200);
     var columsheight = $('.columns').height();
     var containerheight = $('.container').height();
     if (containerheight < columsheight){
         $('.container').css("box-shadow","inset 0px -13px 8px -10px #868686");
     };
}).resize();

Better yet, to clarify what you're doing, and to reduce the chances that your first resize() isn't missed, you should probably do something like this.

function resizeContainers(){
     $('.container').css('height', $(window).height() - 200);
     var columsheight = $('.columns').height();
     // open your browser's console, and watch as your code executes
     // you should see a line written every time it goes through this function
     console.log(".columns height is: " + columsheight);
     var containerheight = $('.container').height();
     console.log("containerheight height is: " + containerheight);
     if (containerheight < columsheight) {
         $('.container').css("box-shadow","inset 0px -13px 8px -10px #868686");
     }
}

$(window).resize(resizeContainers);

resizeContainers();

This way you can call the function independently if you need to, without having to trigger a full window resize() event. The window.resize() event is especially sensitive... it gets triggered by a lot of different things, and gets worse if you use it on a mobile device, as some mobile browsers interpret orientation changes as a window.resize().

Ok... now that the waters have now been muddied, I've put together a working example:

$(function () {
    // create your method for checking the resize
    function resizeContainers() {
        // get a reference to the .container element and the .columns element
        var $container = $('.container');
        var $cols = $('.columns');
        // set the height on $container
        $container.css('height', $(window).height() - 200);
        // THis is just here so you can see, as you resize the frame, 
        // that this is testing the sizes 
        $("#output").html("$cols.height() : " + $cols.height() + "\n$container.height() : " + $container.height());
        // Now compare the height of the $cols item to the $container height
        if ($cols.height() > $container.height()) {
            $container.css("box-shadow", "inset 0px -13px 8px -10px #868686");
        } else {
            // this will remove the box shadow when the content does not exceed
            // the container height
            $container.css("box-shadow","");   
        }
    }

    // Now, tell the window object to listen for resize events and call resizeContainers
    $(window).resize(resizeContainers);
    // Call it manually once
    resizeContainers();
});

You can see this in practice at http://jsfiddle.net/mori57/wV7Vt/

Watch the output div and drag the frame bar around the output window to watch the values change.

• ccolumsheight should be columsheight. Or even better, columsheight should be columnsheight.

• class:"container" should be class="container"

• $('.colums') should be $('.columns')

You gotta watch out for typos and console errors!