vast

Status
Niet open voor verdere reacties.
J

jeel2008

Gebruiker
Lid geworden
30 okt 2008
Berichten
839
hallo, ik zit weer eens vast in een javascriptje...

ik wil dat een element met een id=BIG altijd 500px hoog is

verder dan dit kom ik niet:

Code: 
<script type="text/javascript">
function Vergroten()

{

var height = document.getElementById('BIG').style.height; 

...................
      // set height to 500px


	}
	

</script>

is deze opzet goed of slaat dit nergens op?

en dan in de code een div of een imgtag met ID="BIG"

iets zal er op die stippellijntjes moeten vermoed ik, maar wat
 
Het is toevallig ook settable:

[js]document.getElementById('BIG').style.height = '500px';[/js]


:thumb:
 
oh, dat is mooi. bedankt.

heb het ff uitgeprobeerd, dus dit script in de header gezet


Code: 
 function Vergroten()

{	document.getElementById('BIG').style.height = '500px';

      // set height to 500px

	}
	
	
</script>

en in de body een image gezet met de id = big

Code: 
 <img id='BIG' src="tweehonderdhoog.jpg"  />

maar dat werkte niet. omdat ik geen js-held ben, en niet zeker wist of dat zo kon, in een image-tag, ook maar even zo geprobeerd

Code: 
 <div id='BIG'>
<img src="tweehonderdhoog.jpg"  /></div>

maar ook dat gaf zero resultaat.
wat gaat hier fout?
 
Laatst bewerkt:
Het script wordt eerder uitgevoerd dan dat de body geladen is (het gaat van boven naar beneden - net zoals je leest).



-> de script-tag net voor de </body> zetten.
 
hallo that guy

hij doet het , jippieyayongtajee

hij deed het achteraf ook met het script in de head...

ik was nl vergeten de ID 'Big' aan te maken :confused:

toch bedankt...

------------
even later, nee, wacht eens even.
ik hoef helemaal geen id big meer aan te maken, want dat zou dat javascriptje nu moeten doen, toch?
hmm, dan werkt het dus op een of andere manier toch niet
of zie ik iets over het hoofd?
 
Laatst bewerkt:
Eh, wat bedoel je precies?


Op het moment dat je de regel
[js]document.getElementById('BIG').style.height = '500px';[/js]
neerzet, zal Javascript het volgende doen:

  1. zoek het element met het ID BIG op in de DOM; indien niet gevonden, geef een error
  2. van het gevonden element zet je de stijl height op de waarde '500px'.

Als 'ie het element met het id BIG niet vind (omdat het niet bestaat of omdat het nog niet bestaat*) dan geeft het dus een error. Deze kan je in de meeste normale browsers** zien door op ctrl+shift+J te drukken.


Ohja, en volgens mij zijn id's hoofdlettergevoelig. Dus BIG is niet hetzelfde als Big. Zowiezo is het, om verwarring tegen te gaan, wel handig om altijd kleine letters te gebruiken.





* het bestaat nog niet omdat de code VOOR het betreffende element staat, dus Javascript kan er niet bij.
** Chrom(e|ium), Firefox, etc.
 
Laatst bewerkt:
big

nou, ik bedoel dat hier
document.getElementById("big2").height = '500px';
toch wordt verteld dat ie 500 hoog wordt?
daar hoef je toch geen aparte css-stijl meer voor aan te maken?

Code: 
<!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>Naamloos document</title>

</head>

<body>

<img id="big2" src="tweehonderdhoog.jpg"  /></div>

<script type="text/javascript">
function Vergroten()

{	document.getElementById("big2").height = '500px'; // hier wordt toch verteld maak m 500 pixels hoog?
// dat hoeft toch niet meer in een stijl? 
// dus zou dat image nu 500 hoog moeten worden , maar ehh...dat doet ie dus niet


	}
	
</script>
</body>
</html>
 
Oh, op die manier.



Nou, ten eerste is het een stom idee. CSS is bedoelt als opmaak; daar ben je mee bezig. Daarnaast kan je het, als je echt geen CSS wilt gebruiken, in de HTML zetten via de height property:
HTML: 
<img height='500' ... />

Daarnaast werkt het niet omdat je vergeten bent om de height-property van style te gebruiken. Dus niet
[JS]document.getElementById("big2").height = '500px';[/JS]
maar dit moet het zijn
[JS]document.getElementById("big2").style.height = '500px';[/JS]

op het moment pas je de height van de HTML aan (zoals in het HTML-voorbeeld hierboven). Volgens mij werkt dat ook wel. Als je dat doet moet je de px weglaten, dus alleen '500'.




Oh, trouwens, als je het met Javascript doet omdat je het interactief wilt maken (bijvoorbeeld ergens op klikken -> plaatje vergroten) dan is het geen stom idee.



:thumb:
 
Laatst bewerkt:
werkt niet

hallo that guy,
nee, dan begrijp ik dat het een stom idee is. het is alleen om te oefenen.
dit had ik natuurlijk gewoon met css kunnen doen.

maar nogmaals, ik heb nu precies gedaan wat je zegt maar het plaatje weigert 500px hoog te worden. probeer het maar eens uit in bv dreamweaver.
voor de 'zekerheid' heb ik m zowel in de head als onderaan gezet.
en met div en niet met div er rond. en zonder en met px
maar het blijft lauw loene.

Code: 
<!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>


<script type="text/javascript">
function Vergroten()

{	document.getElementById("big2").style.height = '500px';

      // set height to 500px

	}
	
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>



</head>

<body>


<div id="big2"><img src="tweehonderdhoog.jpg"  /></div>
<img id="big2" src="tweehonderdhoog.jpg"  />



<script type="text/javascript">
function Vergroten()

{	document.getElementById("big2").style.height = '500px';

      // set height to 500px

	}
	
</script>

<script type="text/javascript">
function Vergroten()

{	document.getElementById("big2").style.height = '500';

      // set height to 500px

	}
	
</script>
</body>
</html>
 
aha, ik heb het al
je moet het dus 'activeren' door OnClick te doen of iets dergelijks
ik dacht dat ie gewoon alles afliep wat een id big2 had en dat dan 500px groot zou maken
maar zo werkt dat dus blijkbaar niet.
 
Ah, ja, dat is wel een belangrijk onderdeel van Javascript (of eigenlijk programmeren in het algmeen): functies worden alleen uitgevoerd als je ze aanroept, niet vanzelf. Vandaar dat ik al zei dat het geen 'stom' idee is als je het doet om het interactief te maken.



:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan