Jquery div height resizer
INNER AUTOMATIKUS NÖVELÉSE JQUERY-VEL
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
Az oldal sticky-footer-es
Az oldal első betöltésénél lekérdezzük mindannak magasságát amivel számolni fogunk.
Először is az ablakunk méretét, azt a divet amit növelni szeretnénk (#inner) (ennek eltároljuk az eredeti méretét is) és az
e felett és alatt lévő diveket (#header, #footer, .top_push /ha van/ ). Ha ezek nem nőhetnek akkor elég ha megnézzük a magasságukat és összeadjuk őket.
Az #inner-nek adunk egy minimum magasságot, hogy ablak összehúzáskor ne legyen kisebb mint az eredeti mérete.
--------------------------------------------------------------------------------------------------
var windowHeight = $(window).height();
var innerHeight = $("#inner").height();
var originalinnerHeight = innerHeight;
var targetHeight = (windowHeight - 751); // az ablak magasságából kivonjuk az inner-en kívül lévő divek magasságának összegét
var allHeight = (originalinnerHeight + 751); // az egész oldal magassága
$("#inner").css("min-height", originalinnerHeight + "px"); // az inner eredeti magassága lesz az inner minimum magassága
--------------------------------------------------------------------------------------------------
Majd megvizsgáljuk hogy az egész oldalunk magassága nagyobb-e mint az ablak magassága. Ha nagyobb akkor az #inner-nek beállítjuk az eredeti magasságát.
Ha viszont kisebb akkor megkapja a targetHeight-ot így pont kitölti a számára fennmaradó helyet.
--------------------------------------------------------------------------------------------------
if (allHeight > windowHeight) {
$("#inner").css("height", originalinnerHeight + "px");
} else {
$("#inner").css("height", targetHeight + "px");
}
--------------------------------------------------------------------------------------------------
Ablak átméretezésekor a vizsgálat ugyan az. A lekérdezések is, de az #inner magasságát most nem tároljuk el egy másik változóba, mert akkor minden
ablakátméretezéskor új eredeti magasságunk lenne.
--------------------------------------------------------------------------------------------------
$(window).resize(function () {
var windowHeight = $(window).height();
var innerHeight = $("#inner").height();
var targetHeight = (windowHeight - 751);
var allHeight = (originalinnerHeight + 751);
$("#inner").css("min-height", originalinnerHeight + "px");
if (allHeight > windowHeight) {
$("#inner").css("height", originalinnerHeight + "px");
} else {
$("#inner").css("height", targetHeight + "px");
}
});
--------------------------------------------------------------------------------------------------
$(document).ready(function () {
var windowHeight = $(window).height();
var innerHeight = $("#inner").height();
var originalinnerHeight = innerHeight;
var targetHeight = (windowHeight - 751);
var allHeight = (originalinnerHeight + 751);
$("#inner").css("min-height", originalinnerHeight + "px");
if (allHeight > windowHeight) {
$("#inner").css("height", originalinnerHeight + "px");
} else {
$("#inner").css("height", targetHeight + "px");
}
$(window).resize(function () {
var windowHeight = $(window).height();
var innerHeight = $("#inner").height();
var targetHeight = (windowHeight - 751);
var allHeight = (originalinnerHeight + 751);
if (allHeight > windowHeight) {
$("inner").css("height", originalinnerHeight + "px");
} else {
$("#inner").css("height", targetHeight + "px");
}
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
AZ INNER ÉS A HEADER EGYÜTTES NÖVELÉSE JQUERY-VEL, HA AZ INNER AKKORA MINT AZ ABLAK
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
Az oldalunkból szedjük ki a sticky-footer-t.
Mint az első példában itt is lekérdezzük a divek és az ablak magasságát. De most az allHeight nem kell mivel az #innerünk pontosan akkora,
mint az ablak mérete vagy nagyobb. Az #inner-nek és a #header-nek állítsuk be a minimum magasságát amit a originalheaderHeight ad.
--------------------------------------------------------------------------------------------------
var windowHeight = $(window).height();
var innerHeight = $("#inner").height();
var originalinnerHeight = innerHeight;
var headerHeight = $("#header").height();
var originalheaderHeight = headerHeight;
var targetHeight = (windowHeight - 100); // az ablak magasságából kivonjuk a header-en kívül lévő divek magasságának összegét (#footer, .top_push)
$("#header").css("min-height", originalheaderHeight + "px");
$("#inner").css("min-height", (originalheaderHeight + 100) + "px"); // az #inner pontos méretéhez hozzá kell adnunk (jelen esetben) a #footer magasságát
--------------------------------------------------------------------------------------------------
Megnézzük, hogy az #inner-ünk eredetileg kisebb-e, mint az ablak mérete, ha igaz, akkor az #inner magassága megegyezik az ablak magasságával és a #header
pedig a targetHeight-al. Ha viszont nagyobb, akkor az #inner magassága marad az eredeti magasság, a #header magassága, pedig akkora, mint az
#inner és a #footer magasságának különbsége.
--------------------------------------------------------------------------------------------------
if (originalinnerHeight < windowHeight) {
$("#header").css('height', targetHeight + 'px');
$("#inner").css('height', windowHeight + 'px');
} else {
$("#inner").css('height', originalinnerHeight + 'px');
$("#header").css('height', (originalinnerHeight - 100) + 'px');
}
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
$(window).resize(function () {
var windowHeight = $(window).height();
var innerHeight = $("#inner").height();
var headerHeight = $("#header").height();
var targetHeight = (windowHeight - 100);
if (originalinnerHeight < windowHeight) {
$("#header").css('height', targetHeight + 'px');
$("#inner").css('height', windowHeight + 'px');
} else {
$("#inner").css('height', originalinnerHeight + 'px');
$("#header").css('height', (originalinnerHeight - 100) + 'px');
}
--------------------------------------------------------------------------------------------------
$(document).ready(function () {
var windowHeight = $(window).height();
var innerHeight = $("#inner").height();
var originalinnerHeight = innerHeight;
var headerHeight = $("#header").height();
var originalheaderHeight = headerHeight;
var targetHeight = (windowHeight - 100);
$("#header").css("min-height", originalheaderHeight + "px");
$("#inner").css("min-height", (originalheaderHeight + 100) + "px");
if (originalinnerHeight < windowHeight) {
$("#header").css('height', targetHeight + 'px');
$("#inner").css('height', windowHeight + 'px');
} else {
$("#inner").css('height', originalinnerHeight + 'px');
$("#header").css('height', (originalinnerHeight - 100) + 'px');
}
$(window).resize(function () {
var windowHeight = $(window).height();
var innerHeight = $("#inner").height();
var headerHeight = $("#header").height();
var targetHeight = (windowHeight - 100);
if (originalinnerHeight < windowHeight) {
$("#header").css('height', targetHeight + 'px');
$("#inner").css('height', windowHeight + 'px');
} else {
$("#inner").css('height', originalinnerHeight + 'px');
$("#header").css('height', (originalinnerHeight - 100) + 'px');
}
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
AZ INNER ÉS A HEADER EGYÜTTES NÖVELÉSE JQUERY-VEL, HA AZ INNER AKKORA MINT A HEADER
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
var windowHeight = $(window).height();
var headerHeight = $("#header").height();
var innerHeight = $("#inner").height();
var innerOriginalHeight = innerHeight;
var targetHeight = (windowHeight - 100);
$("#header").css("min-height", originalheaderHeight + "px");
$("#inner").css("min-height", (originalheaderHeight + 100) + "px");
if ((innerOriginalHeight + 100) > windowHeight){
$("#header").css("height", innerOriginalHeight + "px");
$("#inner").css("height", innerOriginalHeight + "px");
} else {
$("#header").css("height", targetHeight + "px");
$("#inner").css("height", targetHeight + "px");
}
$(window).resize(function () {
var windowHeight = $(window).height();
var headerHeight = $("#header").height();
var innerHeight = $("#inner").height();
var targetHeight = (windowHeight - 185);
if ((innerOriginalHeight + 100) > windowHeight){
$("#header").css("height", innerOriginalHeight + "px");
$("#inner").css("height", innerOriginalHeight + "px");
} else {
$("#header").css("height", targetHeight + "px");
$("#inner").css("height", targetHeight + "px");
}
});
annaxmalina
germansingergirl
2087
janainaart