Archief - Hulp nodig bij website voor school

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

SiM0

Legacy Member
Ik moet voor school een website maken maar ik zit met een klein probleempje.

Ik wil buttons op de pagina zetten waar je op kan klikken, en als je daar op klikt, schuift er een stuk tekst naar beneden. Als je dan op een andere button klikt, moet het vorige weer omhoog schuiven en het volgende naar beneden schuiven. Weet iemand ten eerste al in welke taal dit het beste kan? En weet misschien ook iemand een kant-en-klaar script? Het gaat namelijk vooral over de informatie die op de website staat, hoe ik de website maak, doet er niet toe.

Als iemand me zou kunnen helpen? Alvast bedankt. ^^
T

The 3vil Genius

Legacy Member
als je joomla gebruikt kan je dit simpelweg met 1 van de vele extensies doen.
S

SiM0

Legacy Member
Zoiets zoals Zero liet zien wil ik ja, alleen dan zoals ik in de beginpost uitlegde. Weet iemand misschien hoe ik dit kan omschrijven in google wat ik heb me echt al suf gezocht.
J

Jonathan

Legacy Member
jquery ...

Code: 
$('.uwe_knop').click(function(){

     var soeplepel = $('#uw_div_met_tekst_in');
     soeplepel.hide(500, function(){
          soeplepel.empty();
          soeplepel.append('<p>Uwen tekst</p>');
          soeplepel.show(500);
     });
});

Tzal zoiets zijn da nodig ebt, pas op kheb dit gewoon snel neergeschreven uit het hoofd, tkan zijn er één of andere fout in zit, maar het zou u toch op weg moeten helpen.

Neem er gelijk de jQuery documentatie op hun officiele site eens bij.
S

SiM0

Legacy Member
Ik schaam me dat ik dit moet zeggen, maar ik begrijp echt niets van Jonathan zijn code. Ik kan op dit moment alleen nog maar HTML/CSS dus een kant-en-klare code zou veel makkelijker zijn want ik ga ervan uit dat er nog aanpassingen nodig zijn aan die code? Zoals die 'soeplepel'? Sorry dat ik zo 'noob' overkom maar ik heb jullie hulp nodig. :p
s

scipicore

Legacy Member
Aangezien je volgens uw uitleg meerdere 'vakken' met verschillende tekst hebt die naar beneden en naar boven gaan lijkt mij het voorbeeld van Jonathan niet uw beste optie, want dat zorgt ervoor dat je tekst aangelengd wordt. Zijn scriptje doet het volgende:
Code: 
toon div met "uwen tekst" - Klik - div weg - klik - toon div met "uwen tekst uwen tekst" - Klik - div weg - klik - toon div met "uwen tekst uwen tekst uwent tekst" - Klik - div weg - klik - ...

mijn voorstel is: -in jQuery-
Code: 
$('.uwe_knop').click(function(){

     var teller = 1
     $(".divmettekst#" + teller-1).slideUp(slow, function(){
          $(".divmettekst#" + teller).slideDown(slow, function() {
               teller+=1;
          });
     });
});
Dan moet je divs maken met de klasse "divmettekst" en als id "1", "2", ..., dat is dus de nummer van de div die je toont.
In je CSS moet je zeker hetvolgende hebben: div.divmettekst{display:none}

Wat deze code dan doet is het volgende:
Code: 
klik - eerste div schuift naar beneden - klik - eerste div schuift naar boven, wanneer dat klaar is schuift div 2 naar beneden - klik 2de div schuif naar boven, wanneer dat klaar is schuift div 3 naar beneden - ...

Als je nog vragen hebt stel gerust.

*edit*
Heb je tekst nog eens herlezen en heb gemerkt dat je meerdere knoppen gaat hebben. Dan denk ik dat het volgende het beste is voor jou:

Code: 
$('.knop').click(function(){
     $("div.zichtbaar").slideUp(slow, function() {
          $("div#tekst" + $(this).attr('id');).slideDown(slow, function(){
               $("div#tekst" + $(this).attr('id');.toggleClass('zichtbaar');
          });
     });
});
Met deze code moet je de je links zo opstellen: <div class="knop" id="1 of 2 of 3 of ..."></div>
De id van je knop komt dan overeen met de id van je div dus <div class="knop" id="1"> komt overeen met <div class="divmettekst" id="tekst1">.

Wat er gebeurt in de code: wanneer je op een knop klikt, verdwijnt de div met klasse 'zichtbaar', initieel is er zo nog geen. Daarna gaat de div met id #tekst1of2of3.. verschijnen en krijgt die de klasse 'zichtbaar' toegekend, waardoor ze bij de volgende klik op een knop zal verdwijnen.

Ik hoop dat ik iets heb getypt dat nuttig is voor jou :')
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