CODEWITHSUNDEEP
jquery
user2441996
user2441996

Reputation: 117

JQuery: how to update variable as browser resizes?

<script>
    $(document).ready ( function () {
        var footerheight = $('#footer').height();
        $('#footer').css('height', footerheight);
        $('#footer').css('marginTop', - footerheight);
        $('#nonfooterinner').css('paddingBottom', footerheight);
    });
    $(window).bind("resize", function () {
        var footerheight = $('#footer').height();
        $('#footer').css('height', footerheight);
        $('#footer').css('marginTop', - footerheight);
        $('#nonfooterinner').css('paddingBottom', footerheight);
    });
</script>

Is this the proper/preferred way to set the variable "footerheight" to update as the browser resizes? The top half of the script obviously determines the variable when the document loads but I'm not sure if the bottom half is scripted properly to update that variable as the window expands/contracts.

Upvotes: 1

Views: 5727

Answers (4)

Gustavo Ferraz
Gustavo Ferraz

Reputation: 1

<script type="text/javascript">
        $(window).resize(function(){
            var heightBody = $(window).height();
            $(".content_cards").height(heightBody - 135);
        });$(window).resize();
    </script>

Upvotes: 0

Vixed
Vixed

Reputation: 3509

<script type="text/javascript">
    $(function(){
        var pageFoot = $('#footer');
        function updateFoot(){
            var footerheight=pageFoot.height();
            pageFoot.css('marginTop',-footerheight+'px'); // Doesn't have any sense to set the css height here like you do in your function.
            $('#nonfooterinner').css('paddingBottom',footerheight+'px');
        };
        $(window).on('resize', updateFoot);
        updateFoot();
    });
</script>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can

$(function(){
    $(window).resize(function () {
        var footerheight = $('#footer').height();
        $('#footer').css('height', footerheight);
        $('#footer').css('marginTop', - footerheight);
        $('#nonfooterinner').css('paddingBottom', footerheight);
    }).resize();
})

Upvotes: 2

apaul
apaul

Reputation: 16170

You could condense it a little by using a variable, like:

var f = (function () {
       var footerheight = $('#footer').height();
       $('#footer').css('height', footerheight);
       $('#footer').css('marginTop', -footerheight);
       $('#nonfooterinner').css('paddingBottom', footerheight);
   });

$(document).ready(f);
$(window).resize(f);

For resizing alone use .resize() like this:

$(window).resize(function () {
    var footerheight = $('#footer').height();
    $('#footer').css('height', footerheight);
    $('#footer').css('marginTop', - footerheight);
    $('#nonfooterinner').css('paddingBottom', footerheight);
});

Upvotes: 5

Related Questions