Konštantné porovnávanie jednej výšky divu s inou, obe obsahujúce dynamický obsah - jquery, dynamický, výška, postranný panel

Dobre, tak pracujem na webovej stránke. V zásade táto webová stránka (alebo aspoň stránka, na ktorej pracujem) sleduje túto základnú štruktúru:

http://img202.imageshack.us/img202/4010/d5e81039c2c1443aa2a2db9.png

Záhlavie, ľavá bočná lišta, obsah (a nezobrazené, päta)

Ľavý postranný panel a obsah musia mať rovnakú výšku(menšie rozšírenie na vyššiu výšku). Niekedy má bočný panel väčšiu výšku, niekedy aj obsah. Obsahová oblasť má šírku tekutiny, zatiaľ čo postranná lišta má statickú šírku. Obsahová oblasť používa AJAX na dynamické načítanie obsahu, keď používateľ klikne na veci.

Mám tiež vstavaný AJAX a PHP menič motívov, kde si používateľ môže vybrať rôzne farebné schémy, typy záhlavia a pevný alebo kvapalný rozvrh.

Základné nastavenie bočného panela a obsahu je:

<div id="main">
<div id="sidebar"></div>
<div id="content"></div>
</div>

#main {
position: relative;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #dddddd;
}

#sidebar {
width: 239px;
padding: 0px 0px 0px 15px;
background: #f6f6f6;
border-right: 1px solid #ddd;
position: relative;
}

#content {
position: relative;
background: #fff;
top: 1px;
margin-left: 280px;
padding-top: 10px;
}

That"s the jist of it anyway.Mimochodom, mám to tak, že bez ohľadu na to, či je vybraný štýl pevného alebo kvapalného rozloženia, všetko funguje perfektne, keď je výška bočného panela väčšia ako obsah. Keď však výška obsahu je väčšia ako výška bočného panela, výška bočného panela vyplní iba časť bočného panela (tj nevytvára smerom nadol pokiaľ ide o obsah.) Teraz to možno ľahko upraviť pridaním pozície: absolútne sekcia bočného panela, ak je výška obsahu väčšia ako výška bočného panela.

Takže v podstate musím vedieť, či je to možnévykonávať nepretržité dynamické porovnanie výšky bočnej lišty a výšky obsahu div a keď je výška obsahu div väčšia ako výška postrannej lišty, pridajte pozíciu: absolútne do bočného panela div (a odstráňte pozícia: absolútna, ak výška bočného panela sa stane vyššou ako je výška obsahu rozdelenia).

Prepáčte, ak nie som veľmi jasný, neváhajte a požiadajte ma, aby som objasnil čokoľvek, ak nerozumiete ani nemáte žiadne otázky.

Ďakujeme vám za každú pomoc, ktorú môžete poskytnúť!

V súčasnej dobe, keď výška bočného panela je väčšia ako obsah "s:

http://i.imgur.com/h6AWSdR.png (toto je dobré)

V súčasnosti, keď výška bočného panela je menšia ako obsah "s:

http://img845.imageshack.us/img845/9093/11d97de76d7d499389bc6a2.png (to je zlé - postranná pozícia potrebuje pozíciu: absolútne pridaná k tomu, aby sa opravila)

EDIT:

Vďaka Nelsonovi som zatiaľ takmer pracoval.

Práve teraz mám:

<script>
$(document).ready(function() {
if ($("#contentbody-wrapper").prop("offsetHeight") > $("#sidebar").prop("offsetHeight") ) {
$("#sidebar").css("position","absolute");
} else { $("#sidebar").css("position","relative"); }

$("#contentbody-wrapper").on("ajaxComplete", function() {
if ($("#contentbody-wrapper").prop("offsetHeight") > $("#sidebar").prop("offsetHeight") ) {
$("#sidebar").css("position","absolute");
} else { $("#sidebar").css("position","relative"); }
});
});
</script>

It works on page load, but then if you click a tlačidlo na nahradenie obsahu s načítaným obsahom ajax, ktorý funguje, ale ak kliknete na tlačidlo na vytiahnutie pôvodného obsahu, dáva ho pozíciu: relatívna, keď má byť absolútna, a potom ak kliknete na tlačidlo opäť, načíta sa ajax obsah znova, potom mu dáva pozíciu: absolútna, keď má byť relatívna. Potom, ak kliknete na tlačidlo pre opätovné načítanie pôvodného obsahu, dostanete správnu pozíciu: relatívna a dáva správnu pozíciu: absolútne, keď opäť kliknete na tlačidlo načítania obsahu ajax.

Zdá sa, že funguje každý druhý čas ...

odpovede:

1 pre odpoveď č. 1

Ako hovoríte vaše obsah div načíta svoj obsah ajax hovory, môžete počúvať pre globálna ajax udalosť ajaxComplete, čo by sa spustilo kedykoľvek, keď sa zavolal ajax vo vnútri vášho požadovaného kontajnera div, ako je vaša obsahová základňa div, a potom skontrolujte výšku.

Niečo také:

$("#content_container").on("ajaxComplete", function() {
setTimeout(function() {
if ($("#content_container").prop("offsetHeight") > $("#sidebar").prop("offsetHeight") ) {
$("#sidebar").css("position","absolute");
}
}, 300); //check for heights after 300ms of ajaxComplete event
});

UPDATE:
Aktualizované, aby sa skontrolovali výšky v malom časovom limite po dokončení ajax, aby DOM získal čas na aktualizáciu nových dimenzií.


Ponuka