jQuery - Hoogte en Breedte van venster, pagina en elementen


Met behulp van de onderstaande codes wordt er gekeken naar hoe breed en hoe hoog een venster is en op basis hiervan wordt een bepaalde classnaam toegevoegd, op een vergelijkbare manier kan de breedte en hoogte van een element worden opgevraagd.

Breedte venster

In de eerste code hieronder wordt er gekeken naar de breedte van het venster. De code bestaat uit twee gedeeltes, het eerste gedeelte checkt de breedte (1024px) van het venster op het moment van laden van de pagina, het tweede gedeelte blijft de breedte in de gaten houden in het geval dat het venster wordt geschaald. Als de gebruiker het venster gaat schalen en het venster wordt minder breed dan wordt er een andere class toegepast.

Het kijken naar de breedte van het venster kan overigens ook gedaan worden met CSS media queries in het geval dat er bepaalde opmaak gewijzigd moet worden, echter werkt dit dan weer niet in oudere browsers wat met het onderstaande script wel het geval is.

$(document).ready(function() {
        var width=$(window).width();
        $('.element').css({'width':((width)-60)+'px'});
        if(width>=1024) {
                $("body").addClass("normal");
        } else {
                $("body").addClass("scroll");
        }
        $(window).resize(function(){
                var width=$(window).width();
                $('.element').css({'width':((width)-60)+'px'});
                if(width>=1024) {
                        $("body").removeClass("scroll");
                        $("body").addClass("normal");
                } else {
                        $("body").removeClass("normal").addClass("scroll");
                }
        });
});

Hoogte venster

Met de code hieronder wordt er gekeken naar de hoogte van een scherm en op basis hiervan wordt er onder een bepaalde waarde een classnaam toegevoegd aan de body.

$(document).ready(function() {
        var height=$(window).height();
        $('.element').css({'height':((height)-60)+'px'});
        if(height>=1024) {
                $("body").addClass("normal");
        } else {
                $("body").addClass("scroll");
        }
        $(window).resize(function(){
                var height=$(window).height();
                $('.element').css({'height':((height)-60)+'px'});
                if(height>=1260) {
                        $("body").removeClass("scroll");
                        $("body").addClass("normal");
                } else {
                        $("body").removeClass("normal").addClass("scroll");
                }
        });
});

Hoogte pagina

Met de bovenstaande code wordt er gekeken naar de hoogte en breedte van het venster maar in werkelijkheid kan een pagina natuurlijk hoger zijn dan een venster. Met de onderstaande code vraag je de hoogte van een pagina op en kun je hier iets mee doen.

$(document).ready(function() {
        var documentHeight = $(document).height();
        alert(documentHeight);
});

Breedte en hoogte elementen

Vraag met de onderstaande code de breedte op van bijvoorbeeld een afbeelding of van een element zoals een div. Wat belangrijk is om rekening mee te houden is dat er verschil kan zitten in de breedte door toegepaste padding middels CSS. Met 'width' zoals in het eerste voorbeeld pak je de breedte van een element zonder padding en met outerWidth pak je de breedte inclusief de toegepaste padding zoals in het tweede voorbeeld is te zien.

$(document).ready(function() {
        var imageWidth = $('.image').width();
        alert(imageWidth);

        var elementWidth = $('#main').outerWidth();
        alert(elementWidth);

        var elementHeight = $('.element').height();
        alert(elementHeight);

        var elementHeight = $('.element').outerHeight();
        alert(elementHeight);
});

Breedte elementen optellen

Aanvullende op het bovenstaande kun je ook eenvoudig waardes bij elkaar optellen, zo kun je bijvoorbeeld kijken hoeveel pixels een menu in totaal qua ruimte ineemt.

$(document).ready(function() {
        var totalMenu = 0;
        $('ul li').each(function(){
                totalMenu += $(this).width();
        });
        if(totalMenu <= 630) {
                $('.example').hide();
        }
});

100% hoogte div

Met het onderstaande voorbeeld geef je een div altijd de hoogte van het venster. De hoogte wordt automatisch aangepast op het moment dat de bezoeker het venster gaat schalen.

$(function(){
        var windowH = $(window).height();
        $('#wrapper').css({'height':($(window).height())+'px'});
        $(window).resize(function(){
                var windowH = $(window).height();
                $('#wrapper').css({'height':($(window).height())+'px'});
        })
});