Reputation: 10550
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
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
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