Hoogte van div
Ik probeer de hoogte van een div te krijgen maar deze geeft niet de juiste hoogte weer, ik ben erachter gekomen dat dit door een afbeelding komt die er in staat.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div class="rectangle">
<img src="/image.png" alt="Afbeelding" draggable="false">
</div>
<script type="text/javascript">
alert(jQuery('.rectangle').height());
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div class="rectangle">
<img src="/image.png" alt="Afbeelding" draggable="false">
</div>
<script type="text/javascript">
alert(jQuery('.rectangle').height());
</script>
Bovenstaande script geeft als hoogte '0' weer terwijl de afbeelding 73 pixels hoog is en de div dus ook 73 pixels hoog zou moeten zijn.
Hoe los ik dit probleem op?
Alvast bedankt!
Gewijzigd op 19/03/2013 23:12:03 door Lord Gaga
Gewijzigd op 20/03/2013 00:18:30 door Joey Drieling
Ik meen me trouwens te herinneren dat het wel werkt als je de afbeelding een hoogte (en breedte volgens mij) meegeeft in de CSS, dus dan hou ik het daar maar bij..
Hertog Jan op 20/03/2013 10:08:38:
Heb je een online voorbeeld, zodat we even kunnen kijken? Dit kan verschillende oorzaken hebben door bv CSS. Als je afbeelding bv een float heeft, groeit de div niet mee.
Ik heb hier zo geen voorbeeld bij de hand, maar het probleem doet zich ook voor zonder dat er CSS wordt gebruikt.
De div groeit trouwens wel mee, het ziet er dus gewoon uit zoals het eruit hoort te zien, alleen de goede hoogte wordt niet weergegeven
Tim Slootweg op 20/03/2013 15:04:10:
Ik heb zelf ook problemen gehad met .height, gaf soms wel een verschil van 100px. Misschien is .height gewoon niet zo betrouwbaar. Werkt het wel als je geen afbeelding in de div hebt maar alleen wat tekst?
Ja, dat werkt wel gewoon, als ik een divje heb die vol zit met afbeeldingen en tekst dan krijg ik de hoogte van de div - de hoogte van alle afbeeldingen..
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div class="rectangle">
<img src="testsmall.jpg" alt="Afbeelding" draggable="false">
</div>
<script type="text/javascript">
alert(jQuery('.rectangle').height());
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div class="rectangle">
<img src="testsmall.jpg" alt="Afbeelding" draggable="false">
</div>
<script type="text/javascript">
alert(jQuery('.rectangle').height());
</script>
</body>
</html>
Toevoeging op 20/03/2013 19:28:15:
als ik de jquery <script> tags in de header plaats, zoals gebruikelijk dan krijg ik in chrome ook 0 als div hoogte. Maar plaats ik dan de alert in de window.onload = function() {} dan werkt het wel correct.
Daarna nog even getest met $(document).ready maar daar krijg je dan nog steeds 0.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
window.onload = function() {
alert('window.onload function: ' + jQuery('.rectangle').height());
}
$(document).ready(function() {
alert('$(document).ready function: ' + jQuery('.rectangle').height());
});
</script>
</head>
<body>
<div class="rectangle">
<img src="testsmall.jpg" alt="Afbeelding" draggable="false">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
window.onload = function() {
alert('window.onload function: ' + jQuery('.rectangle').height());
}
$(document).ready(function() {
alert('$(document).ready function: ' + jQuery('.rectangle').height());
});
</script>
</head>
<body>
<div class="rectangle">
<img src="testsmall.jpg" alt="Afbeelding" draggable="false">
</div>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Heel erg bedankt allemaal!