Hoogte van div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Lord Gaga

Lord Gaga

19/03/2013 23:11:53
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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
 
PHP hulp

PHP hulp

03/12/2024 22:59:34
 
Joey Drieling

Joey Drieling

20/03/2013 00:08:43
Quote Anchor link
Volgens mij vraagt hij nu de gezete hoogte die dus niet gezet is en dus nul is. Je zult denk een andere functie moeten hebben.
Gewijzigd op 20/03/2013 00:18:30 door Joey Drieling
 
Tim S

Tim S

20/03/2013 01:44:23
Quote Anchor link
.height zou volgens mij gewoon moeten werken, zie voorbeeld: http://api.jquery.com/height/
 
Lord Gaga

Lord Gaga

20/03/2013 08:23:51
Quote Anchor link
De afbeelding is 73 pixels hoog, in Chrome geeft hij 0px weer, in IE9 geeft hij 77px weer en in Firefox geeft hij gewoon 73px aan..

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..
 
Joey Drieling

Joey Drieling

20/03/2013 09:40:14
Quote Anchor link
Dat was ook wat ik bedoelde height zet wel in elke browser correct, alleen opvragen verchilt per browser.
 
Joakim Broden

Joakim Broden

20/03/2013 10:08:38
Quote Anchor link
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.
 
Lord Gaga

Lord Gaga

20/03/2013 12:14:09
Quote Anchor link
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 S

Tim S

20/03/2013 15:04:10
Quote Anchor link
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?
 
Lord Gaga

Lord Gaga

20/03/2013 18:25:05
Quote Anchor link
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..
 
Joey Drieling

Joey Drieling

20/03/2013 18:32:09
Quote Anchor link
En als je nou je script in een onload functie zet heb Zo idee dat hij de plaatjes niet mee rekent aangezien ze niet geladen zijn
 
Lord Gaga

Lord Gaga

20/03/2013 18:50:01
Quote Anchor link
Ik heb geprobeerd de hoogte weer te gaven na $(document).ready() en zelfs na $('afbeelding waar het om gaat').ready() maar zelfs dan wordt de afbeelding niet meegeteld.. :/
 
Joey Drieling

Joey Drieling

20/03/2013 18:52:54
Quote Anchor link
Okay jha dan weet ik het verder ook niet.
 
Tim S

Tim S

20/03/2013 18:55:06
Quote Anchor link
Je kan voor de grap de img even een id geven en daar de hoogte van opvragen. Anders gewoon even hoogte geven in css zoals je zei.
 
Lord Gaga

Lord Gaga

20/03/2013 19:01:20
Quote Anchor link
Ik merk net dat als je de pagina verlaat en dan op 'vorige' klikt de juiste hoogte wél gewoon wordt weergegeven, maar ik ga inderdaad gewoon al mijn afbeeldingen een hoogte opgeven in CSS :-)
 
Frank Nietbelangrijk

Frank Nietbelangrijk

20/03/2013 19:16:59
Quote Anchor link
Bij mij werkt het gewoon. Ik had jouw code uit de eerste post tussen de standaard html tags geplaatst die ik al krijg als ik een nieuwe html file wil aanmaken met mijn editor. Na even googlen werd ook duidelijk gezegd dat je wel even het juiste document type moet opgeven. dus hier mijn volledige code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
 
Joey Drieling

Joey Drieling

20/03/2013 20:14:35
Quote Anchor link
@frank tog wel jha dacht dat het met onload wel zou moeten werken. Maar ik heb zelf niks getest denkte mee uit blooten hoofd en had niet aan het doc type gedacht, maar je zou eigenlijk altijd juiste doc type gebruiken want IE vindt dat ook leuker.
 
Lord Gaga

Lord Gaga

20/03/2013 22:35:31
Quote Anchor link
Moet het puur dat doctype zijn want ik maak gebruik van HTML5
 
Jan Koehoorn

Jan Koehoorn

20/03/2013 22:43:23
Quote Anchor link
Als je $(document).ready gebruikt, kan het plaatje nog niet geladen zijn. Gebruik $(window).load
 
Frank Nietbelangrijk

Frank Nietbelangrijk

20/03/2013 22:45:48
Quote Anchor link
doctype voor html 5:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Lord Gaga

Lord Gaga

20/03/2013 22:57:40
Quote Anchor link
Ik heb uiteindelijk toch maar gekozen voor window load en het probleem is verholpen.

Heel erg bedankt allemaal!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.