login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Toggle script voor meerdere pagina's gebruiken

Offline Ijspegel - 01/04/2008 09:31
Avatar van IjspegelNieuw lid Ik heb een vragen gedeelte op mijn website. Op elke vraag kunnen de bezoekers een antwoord geven. Nu zijn alleen de vragen zichtbaar en staat er bij elke vraag een link naar het antwoordformulier. Deze wordt dan getoond zonder een reload van de pagina. (toggle script dus).

Nu zit er in dit scriptje ook een klein stukje wat ervoor zorgt dat de linktekst anders wordt zodra het formulier zichtbaar is (Antwoordformulier verbergen in plaats van Antwoordformulier weergeven). Dat werkt voor die vraag en antwoord pagina dus goed. Nu wil ik dit scriptje echter ook gaan gebruiken voor een ander deel van die website, alleen daar wil ik andere linknamen hebben. Aangezien het scriptje dus gewoon helemaal hetzelfde moet zijn (op de linknamen na), lijkt het mij toch dat ik dit scriptje op de een of andere manier weer moet kunnen gebruiken toch? Of zie ik dat verkeerd? Zou iemand mij misschien kunnen vertellen hoe ik dit dan het beste kan doen nu?

Dit is het script:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function toggleDiv(divid, e)
  2. {
  3.     if(divopen == false)
  4.     {
  5.         if(document.getElementById(divid).style.display == 'none')
  6.         {
  7.             document.getElementById(divid).style.display = 'block';
  8.             document.getElementById('link'+divid).innerHTML = 'Antwoordformulier verbergen';
  9.             divopen = true;
  10.             opendiv = divid;
  11.         }
  12.     }
  13.     else
  14.     {
  15.         if(document.getElementById(divid).style.display == 'none')
  16.         {
  17.             document.getElementById(divid).style.display = 'block';
  18.             document.getElementById(opendiv).style.display = 'none';
  19.             document.getElementById('link'+opendiv).innerHTML = 'Antwoordformulier weergeven';
  20.             document.getElementById('link'+divid).innerHTML = 'Antwoordformulier verbergen';
  21.             divopen = true;
  22.             opendiv = divid;
  23.         }
  24.         else
  25.         {
  26.             document.getElementById(divid).style.display = 'none';
  27.             document.getElementById(opendiv).style.display = 'none';
  28.             document.getElementById('link'+divid).innerHTML = 'Antwoordformulier weergeven';
  29.             divopen = false;
  30.         }
  31.     }
  32.     if (e.preventDefault)
  33.     {
  34.         e.preventDefault();
  35.         return e.returnValue = false;
  36.     }
  37.     else
  38.     {
  39.         e.returnValue = false;
  40.     }
  41. }

11 antwoorden

Gesponsorde links
Offline Martijn - 01/04/2008 12:04
Avatar van Martijn Crew PHP gewoon opslaan in een eigen bestand, en dan overal waar je m nodig hebt includen(of hoe t mag heten in javascript)?
Offline Ijspegel - 01/04/2008 12:10
Avatar van Ijspegel Nieuw lid Hmm, volgens mij begrijp je mij verkeerd. Ik gebruik deze functie om een antwoord formulier te tonen. Ik gebruik in deze functie ook het volgende:

document.getElementById('link'+divid).innerHTML = 'Antwoordformulier verbergen';
document.getElementById('link'+divid).innerHTML = 'Antwoordformulier verbergen'

Nu wil ik deze functie ergens anders ook gaan gebruiken, maar dan niet met de linknamen zoals hierboven. Ik kan uiteraard gewoon de hele functie kopieeren en hernoemen en dan de innerHTML aanpassen, maar dit lijkt mij niet de beste oplossing. Daarom vraag ik me af of iemand anders weet wat hier de beste oplossing is. Snap je?  
Offline Ultimatum - 01/04/2008 12:51
Avatar van Ultimatum PHP expert Wat je kan doen is om een extra parameter aan je functie toe te voegen. En via die parameter verander je de tekst.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function toggleDiv(divid, e, tekst)
  2. {
  3.     if(divopen == false)
  4.     {
  5.         if(document.getElementById(divid).style.display == 'none')
  6.         {
  7.             document.getElementById(divid).style.display = 'block';
  8.             document.getElementById('link'+divid).innerHTML = tekst +' verbergen';
  9.             divopen = true;
  10.             opendiv = divid;
  11.         }
  12.     }
  13.     else
  14.     {
  15.         if(document.getElementById(divid).style.display == 'none')
  16.         {
  17.             document.getElementById(divid).style.display = 'block';
  18.             document.getElementById(opendiv).style.display = 'none';
  19.             document.getElementById('link'+opendiv).innerHTML = tekst +' weergeven';
  20.             document.getElementById('link'+divid).innerHTML = tekst +' verbergen';
  21.             divopen = true;
  22.             opendiv = divid;
  23.         }
  24.         else
  25.         {
  26.             document.getElementById(divid).style.display = 'none';
  27.             document.getElementById(opendiv).style.display = 'none';
  28.             document.getElementById('link'+divid).innerHTML = tekst +' weergeven';
  29.             divopen = false;
  30.         }
  31.     }
  32.     if (e.preventDefault)
  33.     {
  34.         e.preventDefault();
  35.         return e.returnValue = false;
  36.     }
  37.     else
  38.     {
  39.         e.returnValue = false;
  40.     }
  41. }


Om te gebruiken dan moet je de tekst die je wilt invoeren als 3de parameter. Op die manier kan je dit script op meerdere pagina's gebruiken. Hoop dat dit is wat je wilt.
Offline Ijspegel - 01/04/2008 15:24
Avatar van Ijspegel Nieuw lid Bedankt hiervoor, jouw manier werkt. Ik realiseer me nu echter dat het bij die andere pagina niet om een div gaat, maar om listitems (<ul> en <li> dus). Het is een lijst waarin allemaal merken staan en standaard alleen maar de eerste 10 getoond moeten worden. De andere moeten dus standaard op display:none staan. Ik neem aan dat ik deze functie dan dus toch niet meer kan gebruiken? En is het moeilijk om zoiets te maken?

Ik ben nu druk bezig met het leren van PHP en MySQL en dat lukt goed, alleen weet ik nog maar heel weinig van JS helaas. 
Offline Ibrahim - 01/04/2008 18:38 (laatste wijziging 01/04/2008 18:39)
Avatar van Ibrahim PHP expert Waarom zou dat niet kunnen ?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2.  
  3. echo '<ul>';
  4.  
  5. for ($i = 0; $i < 20; $i++) {
  6.  
  7.     $display = $i > 10 ? 'none' : 'block';
  8.     echo <<<EOT
  9.            <li style="display: {$display};">Item</li>
  10.     EOT;
  11.  
  12. }
  13.  
  14. echo '</ul>';
  15.  
  16. ?>
Offline Ijspegel - 01/04/2008 18:50 (laatste wijziging 02/04/2008 15:46)
Avatar van Ijspegel Nieuw lid Uiteraard erg bedankt voor het stukje PHP, maar deze kan ik gelukkig zelf ook maken. :-)

Maar de javascript functie is toch voor een div geschreven? Dan kan ik deze toch niet gebruiken bij een <ul> of <li>?

Weet iemand misschien het juiste antwoord?  
Offline Ibrahim - 02/04/2008 22:08
Avatar van Ibrahim PHP expert JavaScript is über cool. Het kan hem niet eens schelen welke element je gebruikt 

Voeg gewoon aan de element van keuze een Id attribuut en leave the rest to JavaScript 
Offline Koen - 03/04/2008 11:02
Avatar van Koen PHP expert hmm, dat script herken ik van ergens 
Offline Ijspegel - 03/04/2008 11:12
Avatar van Ijspegel Nieuw lid Haha klopt, daar heb jij mij aan geholpen! 

Zou je dan misschien ook zo aardig willen zijn om zo'n scriptje te geven die dan werkt voor de list items in plaats van voor een div?  
Offline Koen - 03/04/2008 11:29
Avatar van Koen PHP expert
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="#linklist1" onclick="toggleDiv('list1')" id="linklist1" name="linklist1">Uitklappen</a>
  2. <br />
  3. <li id="list1" style="display: none;">Tekst</li>
Offline Ijspegel - 03/04/2008 11:44
Avatar van Ijspegel Nieuw lid Ow oke, ik hoef daar niet een andere functie voor te gebruiken omdat het nu dus om list items gaat? Daar ging ik vanuit namelijk.

Het is overigens zo dat de eerste 10 links altijd getoond worden en de overige dus in eerste instantie niet. Ik heb het nu in PHP overigens al wel zo dat de eerste 10 display: block hebben en de overige display: none.

Ik kan dat van jou hiervoor dus gewoon gebruiken of zou het beter zijn om het scriptje toggleDiv aan te passen voor list items?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.353s