Archief - Javascript: clientHeight in Firefox ?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
S

Spiderken

Legacy Member
Hoi allen,

ik heb een klein probleempje.
Ik zou dus via javascript een html pagina dynamisch willen aanpassen. Ik wil dus de hoogte van een bepaalde DIV (met vb id="div1") verkrijgen. Deze DIV heeft nog geen vooropgestelde CSS eigenschappen van height.

window.getElementById("div1").style.height; ==> geeft de waarde null weer omdat deze nog geen eigenschappen heeft.

In theorie als ik dus meer tekst toevoeg aan deze div, dan zal de hoogte moeten vergroten. window.getElementById("div1").style.height; ==> geeft nog steeds null weer.

Nu als ik het volgende doe:

var hoogte = div1.clientHeight; ==> dus hoogte = een bepaalde pixelwaarde

En het is deze waarde die ik nodig heb in mijn website. Allemaal goed en wel in IE maar FF wilt weeral niet mee :).

Indien iemand een oplossing heeft voor mijn probleem zou deze van harte welkom zijn.

Al op voorhand bedankt ;)
D

DarkBone

Legacy Member
FF wilt maar al te graag mee...

Zeker dat je niet het volgende getypt had?
var hoogte = div1.style.clientHeight;
D

DarkBone

Legacy Member
Onderstaande code werkt perfect in FireFox, in Internet Explorer werkt ze ook... alleen geeft de clientHeight 0 terug in plaats van de 38 die het zou moeten zijn initieel.

PHP: 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>JavaScript: clientHeight</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<style type="text/css">
	<!--
		html, body
		{
			height: 100%;
		}

		body
		{
			margin: 0px;
			padding: 30px;

			background-color: #FAFAFA;
		}

		#container
		{
			font-size: 12px;
			font-family: "Trebuchet MS";

			background-color: #eee;

			padding: 10px;
		}
	-->
	</style>

	<script type="text/javascript">
	<!--
		function enlargeMe(id)
		{
			var element		= document.getElementById(id);
			var height		= element.clientHeight;

			alert('clientHeight: ' + height);

			var maxHeight	= 400;
			var step		= 40;

			while (height < maxHeight)
			{
				height += step;
				element.style.height = height + 'px';
				element.innerHTML += '<br />&nbsp;&nbsp;<i>' + height + 'px</i>';
			};
		}
	-->
	</script>
</head>
<body>

	<div id="container">
		Klik <a href="#" onclick="enlargeMe('container');" title="Klik mij">hier</a> om mij te vergroten!
	</div>

</body>

</html>
L

Lashknife

Legacy Member
document.getElementById("id").offsetHeight

(analoog ook offsetWidth, offsetTop & offsetLeft) geeft zowel in ie, ff als opera het gewenste resultaat.
D

DarkBone

Legacy Member
Ik geloof niet dat offsetHeight hetzelfde is als clientHeight? Zou nogal redudant zijn anders twee dezelfde 'dingen' met een andere naam.
S

Spiderken

Legacy Member
Hey, bedankt voor de reply's maar kheb het vandemorgen gevonden:), twas zoals Darbone het zei, khad dus in mijn javascript effectief hoogte = content.clientHeight; gezet wat dus in IE wel werkt en in FF niet. Kdacht dat ik dat gisteren ook gedaan had maar blijkbaar niet. Twas dus gewoon: hoogte = window.document.getElementById("div1").clientHeight;

:s beetje verstrooid geweest zeker.

Het werkt nu goed. De bedoeling was om mijn portfolio site die volledig in CSS gemaakt is volledig mee te laten rekken naarmate er meer inhoud in de div komt te staan. En ik moest het op deze manier zeker vinden omdat ik niet zo voor (dan wel meerekkende) tabellen ben.

Toch bedankt voor de moeite.

mvg Spiderken

ps: de link dus ==> http://users.pandora.be/spiderken/portfolio
S

Spiderken

Legacy Member
Ik heb nog een probleempje waar ik niet aan uit geraak. Met het centreren van een site. Als de html code begint met:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
...

dan gaat de site centreren als ik in de css bij de hoofdkader(vb <div id="main">...al de rest...</div>) zet: margin:auto;

maar het probleem ontstaat hier als ik de site wil valideren op de W3C site. Hij geeft dan een probleem dat de encoding type niet teruggevonden wordt. Hij valideert de site wel maar niet "officieel". "Validates Tentatevly" ofzo iets in die aard :), heb er niet veel aandacht aan besteed aangezien ik het liever gewoon "Validated" zie.

Nu als ik <?xml version="1.0" encoding="iso-8859-1"?> boven de doctype zet dan zal de validator deze pagina goedkeuren MAAR dan wordt de site niet meer gecentreerd.

Als hier iemand een oplossing voor weet dan is deze van harte welkom. Het is niet echt een groot probleem maar zie het liever opgelost. Alleen uit nieuwsgierigheid alleen al :).

Thx every1...

Spiderken
L

Lashknife

Legacy Member
DarkBone zei:
Ik geloof niet dat offsetHeight hetzelfde is als clientHeight? Zou nogal redudant zijn anders twee dezelfde 'dingen' met een andere naam.
Klik om te vergroten...
Het werkt voor hem omdat een division zonder overflow en width/height properties automatisch mee uitrekt en er geen verschil is tussen client en offset.

Tussen beiden is weldegelijk een verschil (maar nogmaals voor zijn probleem hier lost de offsetHeight heel eenvoudig zijn compatibiliteitsprobleem op waar clientHeight het niet doet, dus waar zeuren we over, semantiek? zet het er dan in comments bij "ik ben eigenlijk slecht bezig, sorry" :unsure: )
offsetHeight = Retrieves the height of the object relative to the layout or coordinate parent, as specified by the offsetParent property.

clientHeight = Retrieves the height of the object including padding, but not including margin, border, or scroll bar.

het verschil zit hem dat offsetHeight de visual size weergeeft, niet de inhoudelijke size.
Beste voorbeeld hiervoor is een textarea waar scrollekes in steken.
offsetHeight geeft de grootte van de box die je ziet.
clientHeight geeft de inhoudelijke grootte.

praktisch: http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/offsetHeight.htm

tis maar waar ge welk voor nodig hebt.
S

Spiderken

Legacy Member
Wel clientHeight werkte voor mij, dat was hetgeen ik nodig had hoor (voor IE en FF). En ik wist het verschil tussen clientHeight en offsetHeight, khad het ook al op die site gezien waar je de link naartoe wijst.

Weet er echt niemand de oplossing van het andere probleem met de doctype en de encoding ?

greetz...
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan