uitscrollen als je erop klikt

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Niels Peeren

Niels Peeren

24/09/2012 15:19:37
Quote Anchor link
ik ben niet veel bezig met javascript maar ik wil het nu graag gaan leren.

nu heb ik voor wat ik wil gaan maken dus iets nodig dat als ik op een div klik dat hij dan uitscrollt als het waren dus dat de hoogte eers 100 px is en zodra er op geklikt wordt hij geanimate veranderd naar 300 px. als je dan weer klikt moet hij weer naar de 100 px.

heeft iemand hier een handige tutorial voor?

Toevoeging op 24/09/2012 15:21:15:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<fieldset>
<legend>Account Information</legend>
Name :
Surname :
</fieldset>


dit is hetgeen wat moet worden uitgerekt dat de info dus zichtbaar wordt
Gewijzigd op 24/09/2012 15:21:43 door Niels Peeren
 
PHP hulp

PHP hulp

22/12/2024 19:48:57
 
- Marco -

- Marco -

24/09/2012 16:09:39
Quote Anchor link
Ik denk dat je dit bedoelt en dit is gewoon met html5 :)
probeer het maar eens :D
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<details>
<summary>Klik hier voor de hele tabel</summary>

blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba

</details>
Gewijzigd op 24/09/2012 16:12:56 door - Marco -
 
Niels Peeren

Niels Peeren

24/09/2012 16:13:16
Quote Anchor link
ohja dat werkt idd maar is er een manier om dit geanimeert te doen dat het niet in een keer alles laat zien maar dat de hoogte zegmaar smooth veranderd?
 
- Marco -

- Marco -

24/09/2012 16:17:32
Quote Anchor link
Het in een div zetten en de div een plek en grootte geven als je dat bedoeld of wat bedoel je met animeert?
Gewijzigd op 24/09/2012 16:18:13 door - Marco -
 
Niels Peeren

Niels Peeren

24/09/2012 16:19:17
Quote Anchor link
nou als ik op de zin "klik hier voor de hele tabel" klik dan wordt in een keer alles zichtbaar. ik wil de hoogte zegmaar van de 100px naar de 300px ge transisiont hebben dat hijj bijv in 2 sec tijd van de 100 naar 300 gaat en niet instant als het waren. en ik kan het in een div zetten ja
 
- Marco -

- Marco -

24/09/2012 16:31:02
Quote Anchor link
hm ik zou niet weten hoe dat moet maar je kan natuurlijk een <details> in de detail gaan zetten zodat je maar een deel te zien krijgt en als je dan op klik hier 2 klikt tot dan alles zichtbaar is..
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
<detials>
<summary>Klik hier voor de stukje tabel</summary>

blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba

<details>
<summary>Klik hier voor de HEEEELEEE tabel</summary>

blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba
blablabablablabablablabablablabablablabablablabablablabablablaba

</details>

</details>
Gewijzigd op 24/09/2012 16:31:20 door - Marco -
 
Niels Peeren

Niels Peeren

24/09/2012 16:33:24
Quote Anchor link
het is niet helemaal wat ik zoek maar ik denk dat dit toch nog wel eens van pas gaat komen , heel erg bedankt :)
 
- Marco -

- Marco -

24/09/2012 16:35:11
Quote Anchor link
Geen probleem :)
 
Marvin H

Marvin H

24/09/2012 16:37:27
Quote Anchor link
Kijk even op de volgende twee linkjes, dit is hetgeen je volgens mij wilt bereiken

Uitleg:
http://stackoverflow.com/questions/5616823/jquery-change-height-of-div-on-button-click

Voorbeeld:
http://jsfiddle.net/jomanlk/JJh9z/1/
 
Niels Peeren

Niels Peeren

24/09/2012 17:00:10
Quote Anchor link
dat is wat ik bedoel ja. alleen als ik het op mn website plaats druk ik op die knop maar gebeurt er niets
 
Roel -

Roel -

24/09/2012 17:18:10
Quote Anchor link
Waarschijnlijk komt dat omdat in jsFiddle automatisch het jQuery-framework is ingeladen.
Als je alleen het stukje code kopieert, dan heb je natuurlijk het jQuery-framework er niet bij. Dit kun je hier vinden en downloaden: http://jquery.org

Succes!
 
Niels Peeren

Niels Peeren

24/09/2012 17:18:59
Quote Anchor link
jquery had ik al wel geimport en dan deed hij het alsnog niet
 
Wouter J

Wouter J

24/09/2012 17:26:05
Quote Anchor link
Dat komt omdat het met jQuery is gemaakt, een library met veel handige tools. Het is handiger om het eerst in normale JS te leren, dan kun je later jQuery er eens bij pakken.

Een uitgewerkt voorbeeldje met heel veel commentaar erbij: http://jsbin.com/itaziq/1/edit
 
Niels Peeren

Niels Peeren

24/09/2012 17:30:16
Quote Anchor link
dat is inderdaad duidelijk wouter daar heb ik zeker wat aan maar nog steeds als ik het op mijn website zet doet hij het niet echt raar
 



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.