Seong Lee
Seong Lee

Reputation: 10550

Dynamic height based on viewport height

I have the following code which resizes the height of a targeted element but it only works with resize event, not when the page is loaded. What could be the flaw here that doesn't set the height dynamically with the page load?

I'd also like to know how I can make the iterated codes into a modular structure in this scenario.

$(window).resize(function() {
    var viewportHeight = $(window).height();
    var search = $(#something).outerHeight();
    $(".k-grid-content").height(viewportHeight - (400 - search));
});

$(function () {
    var viewportHeight = $(window).height();
    var search = $("#something").outerHeight();
    $(".k-grid-content").height(viewportHeight - (400 - search));
});

Upvotes: 1

Views: 150

Answers (2)

Rebecca Abriam
Rebecca Abriam

Reputation: 560

How about something like this:

var resizeGrid = function() {
    var viewportHeight = $(window).height();
    var search = $("#something").outerHeight();
    $(".k-grid-content").height(viewportHeight - (400 - search));
};
$(window).resize(function() {
    resizeGrid();
});

$(document).ready(function () {
    $(window).trigger("resize");
});

Upvotes: 1

chopper
chopper

Reputation: 6709

Use document.ready:

$( document ).ready(function() {
       var viewportHeight = $(window).height();
       var search = $("#something").outerHeight();
       $(".k-grid-content").height(viewportHeight - (400 - search));
});

Upvotes: 0

Related Questions