Aanpassen hoogte pagina

[Cyroq]

Hallo iedereen,

Ik heb een vraag/probleem. Mijn website is gebaseerd op het laten zien en invisible maken van divs. Mijn webpagina past zich aan aan de hoogte van de hoogste div, maar de invisible divs worden ook gerekend. Het resultaat is veel lege vlakken onderaan pagina's die niet zo veel inhoud hebben.
Is er een manier om de paginahoogte aan te passen aan de hoogste zichtbare div? En dit zonder de hele pagina te vernieuwen, want er zijn ook flashelementen die anders opnieuw gestart zouden worden.
Ik hoop dat er een makkelijke oplossing voor is, ik heb weinig zin de hele constructie van de website opnieuw te bouwen.
Alvast bedankt!

 

[That Guy]

Is er een manier om de paginahoogte aan te passen aan de hoogste zichtbare div?

err, ik denk het wel. Met Javascript kan je gewoon door alle div's heen loopen, en dan de grootste vinden.
[JS]var divs = document.getElementsByTagName('div'); //alle divs
var hh = 0; //onthoud grootste div
var r = 0; //index grootste div

for(var i=0;i<divs.length;i++)
{
var h = divs.height || divs.style.height; //oid.

if(h > hh)
{
r = i; //save
hh = h; //save
}
}

if(r == 0)
{
alert('geen grootste div gevonden! (omgwtf probleem met script)');
}else{
alert('de div met de grooste hoogte heeft index ' + r);
}

//nu kan je dus iets doen, de div die het grootste is is divs[r], en zn hooggte is hh.
//je kan natuurlijk ook het hele 'r' gedeelte weghalen en alleen 'hh' onthouden/[/JS]


:thumb:

 

[Johantrax]

maar de invisible divs worden ook gerekend

Dat is niet langer het geval als je ook hun display-property aanpast naar none (tegenover de standaardwaarde van block)

 

[Cyroq]

De grootste div zoeken lukt nu, maar hoe kan ik de hoogte van de pagina zelf aanpassen hier aan? Is daar een simpel scriptje voor?
Het veranderen naar none werkt trouwens niet, dan worden ze niet meer invisible.

 

[That Guy]

maar hoe kan ik de hoogte van de pagina zelf aanpassen hier aan?

welke 'pagina' bedoel je precies? De hoogte van je browser-scherm?

 

[Cyroq]

De situatie is als volgt. Ik heb meerdere divs in een html-pagina staan, en in het menu kun je dus items aanklikken waarbij de bijbehorende div zichtbaar wordt en de andere divs onzichtbaar (hidden) worden. Dit heb ik zo gedaan omdat er ook flash-elementen op de pagina zitten en de pagina dus niet ververst mag worden (anders herstart het flashelement).

Met pagina bedoelde ik dus inderdaad de browser. Nu is de hoogte van de browser de hoogte van de grootste div. Deze is dan wel onzichtbaar maar toch past de browser zich hieraan aan. Het resultaat is een groot leeg vlak onderaan je pagina.

 

[Cyroq]

Ik heb er weer even mee lopen spelen maar ik loop nog steeds vast. Ik kan nu dus de hoogte van de op dat moment zichtbare div opvragen, maar hoe zorg ik dat het venster (en scrollbalk) zich hieraan aanpassen zodat de lege vlakken onder weg zijn?
Wat ik me hierbij ook afvraag, is dit mogelijk zonder de pagina te refreshen?

 

[That Guy]

Ja, natuurlijk kan dit zonder refresh. Tegenwoordig kan alles zonder refresh.

Mijn website is gebaseerd op het laten zien en invisible maken van divs

ik denk dat je je even moet beseffen welke css je moet gebruiken:

display: none haalt m weg, ook qua hoogte en breedte
visibility: hidden maakt m alleen onzichtbaar, dus breedte/hoogte blijft
​

:thumb:

 

[Cyroq]

Dat heb ik inderdaad nodig! Ik neem aan dat ik dus overal visibility='visible' moet veranderen in display='block' en visibility='hidden' moet veranderen in display='none'.

Als ik dat doe, werkt mijn script niet meer... Dit is mijn oude script:

var divs = document.getElementById('content').getElementsByTagName('div'); //verander alleen divs binnen content
for(div in divs) {
	for(i=0;i<divs.length;i++){ 	
	if(divs[i].id.match(pass)){//if they are 'see' divs 
		var currentHeight = divs[i].offsetHeight; //haalt hoogte op van momenteel zichtbare div
		if(currentHeight > 500) {
		document.getElementById("Footer").style.top = 380+currentHeight+"px";
		} else {
		document.getElementById("Footer").style.top = 380+550+"px";
		}
		
		if (document.getElementById) // DOM3 = IE5, NS6 
			divs[i].style.visibility="visible";// show/hide 
		else if (document.layers) // Netscape 4 
			document.layers[divs[i]].display = 'visible'; 
		else // IE 4 
			document.all.divs[i].visibility = 'visible'; 
		} 
	else { 
		if (document.getElementById) 
			divs[i].style.visibility="hidden"; 
		else 
		if (document.layers) // Netscape 4 
			document.divs[i].visibility = 'hidden'; 
		else // IE 4 
			document.all.divs[i].visibility = 'hidden'; 
			}

Ik denk zelf dat er nog iets niet lekker zit met het wel of niet gebruiken van 'style.display'. Zoals je ziet wordt bij verschillende browsers een ander script gebruikt...

 

[That Guy]

dit zou ik er van maken (copie jouw stukje, maar met edit):[JS]var divs = document.getElementById('content').getElementsByTagName('div'); //verander alleen divs binnen content
for(div in divs) {
for(i=0;i<divs.length;i++){
if(divs.id.match(pass)){//if they are 'see' divs
var currentHeight = divs.offsetHeight; //haalt hoogte op van momenteel zichtbare div
if(currentHeight > 500) {
document.getElementById("Footer").style.top = 380+currentHeight+"px";
} else {
document.getElementById("Footer").style.top = 380+550+"px";
}

if (document.getElementById) // DOM3 = IE5, NS6
divs.style.display="block";// show/hide
else if (document.layers) // Netscape 4
document.layers[divs].display = 'block';
else // IE 4
document.all.divs.display = 'block';
}
else {
if (document.getElementById)
divs.style.display="none";
else
if (document.layers) // Netscape 4
document.divs.display = 'none';
else // IE 4
document.all.divs.display = 'none';
}[/JS]
Zowiezo zou ik het hele checken op soorten layers weg halen - de meeste mensen gebruiken tegenwoordig wel een browser welke nieuwer is dan IE4 Maargoed, als je dit maakt om echt groot publiek te bereiken, laat t lekker zo.

 

[Cyroq]

Ik dacht al dat het zo eruit moest zien, maar het werkt nog steeds niet. Je kan de volledige pagina hier vinden. De bron is een flinke lap tekst maar alle javascript staat bovenaan. Misschien dat je met behulp van de rest van de scripts ziet wat er mis gaat.
Wat ik nu zie is dat de browser wel de hoogte aanpast aan de paginahoogte, maar de pagina zelf blijft onzichtbaar.

 

[That Guy]

ja, maar dan moet je niet valsspelen:

/* css */

#werkwijze, #nieuwsbrief, #reisbegeleiders, #mensenmachine, #risicos, #groepsreizen, #faq, #infoavond, #contact, #panamericana, #p_inexclusief, #nltibet, #transafrika, #t_inexclusief, #algemeen, #boekingsformulier, #verscheping, #reisvoorwaarden, #prijzen, #verzekeringen, #disclaimer{
	position: absolute;
	width: 460px;
	height: auto;
	top: 340px;
	left: 200px;
	border: 0px;
	padding: 0px 10px 10px 10px;


	visibility: hidden;   /* <--------- */

}

er staat nogsteeds 'visibility: hidden' in je css (op 3 plekken geloof ik)

 

[Cyroq]

Geweldig, het werkt! Ik dacht al dat ik weer iets over het hoofd zag, gelukkig zijn hier slimme - wél oplettende - mensen
Thanks folks, weer een probleem de wereld uit geholpen.