[JavaScript] Toggle-script

Door Peter Somhorst, 16 jaar geleden, 4.990x bekeken

Er zijn veel mensen op zoek naar een makkelijk script om layers (div, span, etc) te verbergen of weer te laten zien. Daarnaast is er nog verschil tussen display en visibility. Met dit script kun je zowel de visibility als de siaply aanpassen.

Om het script aan te roepen doe je simpelweg (bijv):
onClick="toggle('layer','kind','task')"

Layer is de ID van de te verbergen/showen layer.
Kind is ofwel 'visibility' ofwel 'display', je geeft dus aan welke van de twee je aan wil passen.
Task is ofwel 'show' (= je laat hem zien), 'hide' (= verbergt hem) of '' (= als hij is verborgen, laat je hem zien en andersom).

That's all fokes!

Voorbeeld: http://peter.somhorst.net/toggle.php

Gesponsorde koppelingen

PHP script bestanden

  1. javascript-togglescript

 

Er zijn 17 reacties op 'Javascript togglescript'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Harmen
Harmen
16 jaar geleden
 
0 +1 -0 -1
ziet er goed uit!

btw:
code tag's en inspringen zou wel overzichtelijker zijn!
Bas Kreleger
Bas Kreleger
16 jaar geleden
 
0 +1 -0 -1
Nice script. Misschien ook leuk om de HTML code erachter erbij te vermelden :).
Peter Somhorst
Peter Somhorst
16 jaar geleden
 
0 +1 -0 -1
@harmen:
inspringen zit er ook in...?? code tags = ??

@bas:
aangezien er niet één toepassing is voor dit script zijn is er een legio aan html-voorbeelden te bedenken. Daarom heb ik in de uitleg maar even iets gemaakt waarmee je 'et zelf maar uit moet zoeken ;-) maar hier is de html-code van het voorbeeld:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<div style="background-color:blue;display:none;border:2px solid black;position:absolute;top:10px;left:150px;width:100px;height:100px;" id="vlak1"></div>
<span style="display:block;" onClick="toggle('vlak1','display','show')"><a href="#">Laat de div zien!</a></span>
<span style="display:block;" onClick="toggle('vlak1','display','hide')"><a href="#">Haal div weg!</a></span>
<span style="display:block;" onClick="toggle('vlak1','display','')"><a href="#">Let's toggle!</a></span>
<br><br><br>
<span>Even grappig! </span>
<span id="tekst1" style="font-size:20px;color:red;"> - Tekst - </span>
<span>En gewoon weer verder!</span>
<span style="display:block;" onClick="toggle('tekst1','visibility','show')"><a href="#">Laat de tekst zien!</span>
<span style="display:block;" onClick="toggle('tekst1','visibility','hide')"><a href="#">Haal de tekst weg!</span>
<span style="display:block;" onClick="toggle('tekst1','visibility','')"><a href="#">Let's toggle</span>


16 jaar geleden
 
0 +1 -0 -1
dat is best wel handig, en kan ik waarschijnlijk we gebruiken eens zien waar ik het kan invoegen maar goed werk hoor :D


16 jaar geleden
 
0 +1 -0 -1
Dit is inderdaad zeer handig... Kan ik bv ook bij me phpforum zo forums kunnen laten weghalen wanneer mensen die bv die niet willen zien... zoals bij GOT :)
Vincent
Vincent
16 jaar geleden
 
0 +1 -0 -1
Kan je het ook zo maken dat je met je muis over een link gaat en dat hij dan verdwijnt over veschijnt? Mouseover dacht ik ofzo?
Zero Dead
Zero Dead
16 jaar geleden
 
0 +1 -0 -1
@vincent:

onMouseOver="toggle('layer','kind','task')" onMouseOut="toggle('layer','kind','task')"

Die combinatie;)
Vincent
Vincent
16 jaar geleden
 
0 +1 -0 -1
ok dankje;)
Katjan
katjan
16 jaar geleden
 
0 +1 -0 -1
Edit:
voortaan beter lezen..;) sorry!
K i p
K i p
16 jaar geleden
 
0 +1 -0 -1
Ik vind het een beetje overdreven. zoiets vind ik makkelijker.

Of is er een verschil tussen visibility en display? Laat de een het opschuiven en de ander niet ofzo? Wat is er aan de code die je hebt gemaakt handiger?
Jelmer -
Jelmer -
16 jaar geleden
 
0 +1 -0 -1
Verschil tussen display en visibility is dat bij display het element echt gewoon niet in de pagina te zien is, niet qua afmetingen of witruimte. Met visibility is het er wel, maar onzichtbaar. Het neemt dus wel vast zijn ruimte in.

Verschil tussen jouw scriptje en dit ding is dat deze nog support biedt voor Netscape 4... ik denk dat je die tegenwoordig niet echt meer hoeft te ondersteunen.
Peter Somhorst
Peter Somhorst
16 jaar geleden
 
0 +1 -0 -1
Ik heb dit script zo algemeen mogelijk gemaakt. Ik had eerst een script dat het deed in IE, maar in FF kuren had. Ik heb dus alle mogelijke manieren de layer te benoemen genomen en gebruikt.

@boris:
Visibility: wel ruimte in laten nemen als hij verborgen is
Display: geen ruimte in laten nemen bij verborgen
Ik heb ze allebei gebruikt om het script weer zo algemeen mogelijk te maken...
Majid Ahddin
Majid Ahddin
16 jaar geleden
 
0 +1 -0 -1
Quote:
That's all fokes!

je bedoelt folks
K i p
K i p
16 jaar geleden
 
0 +1 -0 -1
Je doet gewoon in elke link:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?
<a onclick="toggle('je_layer_die_je_wilt_laten_zien','display','show');toggle('je_layer_die_je__niet_wilt_laten_zien','display','hide');toggle('je_layer_die_je__ook_niet_wilt_laten_zien','display','hide');" >
?>
K i p
K i p
16 jaar geleden
 
0 +1 -0 -1
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>
<head>
    <title>blabla</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css" media="screen">
        div.iets {
            display: none;
        }
    </style>
<script type="text/javascript">
    function klik (did,did2,did3) {
        if (document.getElementById(did).style.display == 'none')
        {
            toggle(did,'display','show');
            toggle(did2,'display','hide');
            toggle(did3,'display','hide');
        }
        else
        {
            toggle(did,'display','hide');
            toggle(did2,'display','hide');
            toggle(did3,'display','hide');    
        }
    }


function toggle(layer,kind,task) {
    
    if (kind=="visibility"){
        if (task=="hide")
            vis_to = "hidden";
        else if (task=="show")
            vis_to = "visible";
        else {
            
            if (document.layers)
                vis_to = (document.layers[layer].visibility=="hide") ? "show" : "hide";
                
            else if (document.all)
                vis_to = (document.all[layer].style.visibility=="hidden") ? "visible" : "hidden";
                
            else if (document.getElementById)
                vis_to = (document.getElementById(layer).style.visibility=="hidden") ? "visible" : "hidden";
        }
    } else if (kind=="display"){
        if (task=="hide")
            dis_to = "none";
        else if (task=="show")
            dis_to = "block";
        else {
            if (document.layers)
                dis_to = (document.layers[layer].display=="none") ? "block" : "none";
                
            else if (document.all)
                dis_to = (document.all[layer].style.display=="none") ? "block" : "none";
                
            else if (document.getElementById)
                dis_to = (document.getElementById(layer).style.display=="none") ? "block" : "none";
        }
    }
    
    if (document.layers)
        (kind=="display") ? document.layers[layer].display = dis_to : document.layers[layer].visibility = vis_to;
        
    else if (document.all)
        (kind=="display") ? document.all[layer].style.display = dis_to : document.all[layer].style.visibility = vis_to;
        
    else if (document.getElementById)
        (kind=="display") ? document.getElementById(layer).style.display = dis_to : document.getElementById(layer).style.visibility = vis_to;
}
</script>
</head>
<body>
    <div class="links">
        <a onclick="klik('diveen','divtwee','divdrie');">1</a>
        <a onclick="klik('divtwee','diveen','divdrie');">2</a>
        <a onclick="klik('divdrie','diveen','divtwee');">3</a>
    </div>
    <div class="iets" id="diveen">
        :-)een
    </div>
    <div class="iets" id="divtwee">
        twee
    </div>
    <div class="iets" id="divdrie">
        drie
    </div>
</body>
</html>


Hier, zoals ik al zei. Test maar. Het is valid.
K i p
K i p
16 jaar geleden
 
0 +1 -0 -1
zie edit
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Arjan Schuurman
Arjan Schuurman
15 jaar geleden
 
0 +1 -0 -1
Linkje werkt niet (meer)...

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. javascript-togglescript

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

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.