Visibility toggle
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
function show()
{
alert(document.getElementById('text').style.visibility);
el = document.getElementById('text');
if(el.style.visibility == "visible")
{
el.style.visibility = "hidden";
}
else
{
el.style.visibility = "visible";
}
}
</script>
function show()
{
alert(document.getElementById('text').style.visibility);
el = document.getElementById('text');
if(el.style.visibility == "visible")
{
el.style.visibility = "hidden";
}
else
{
el.style.visibility = "visible";
}
}
</script>
Dit leek te kloppen volgens mij, alleen als de pagina open werkt het niet, het visible wel alleen de hidden niet...
kan iemand helpen
Gewijzigd op 01/01/1970 01:00:00 door Jan Veenstra
Dat heb ik namelijk wel in dit script (misschien kun je er wat meer mee)
Code (php)
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
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
<html>
<head>
<title> hidden </title>
<script language="javascript">
function Toggle(item)
{
obj = document.getElementById(item);
visible = (obj.style.display!="none");
if(visible)
{
obj.style.display="none";
}
else
{
obj.style.display="block";
}
}
</script>
</head>
<body onload="Toggle('show_div');">
<a href="javascript:Toggle('show_div')">tekst</A><br/>
<div id="show_div">
Hier komt de hidden stuff te staan
</div>
</body>
</html>
<head>
<title> hidden </title>
<script language="javascript">
function Toggle(item)
{
obj = document.getElementById(item);
visible = (obj.style.display!="none");
if(visible)
{
obj.style.display="none";
}
else
{
obj.style.display="block";
}
}
</script>
</head>
<body onload="Toggle('show_div');">
<a href="javascript:Toggle('show_div')">tekst</A><br/>
<div id="show_div">
Hier komt de hidden stuff te staan
</div>
</body>
</html>
nee dit is zowizo anders omdat ik geen display wil gebruiken...
Ik denk dat jouw pagina opnieuw laadt als je op die hyperlink klikt, klopt dat?
mijn manier is toch ook goed?
Als jouw code goed is, waarom open je er dan een topic over?
omdat hij niet werkt;) ik bedoel het idee;)
Natuurlijk is die code wat overdreven, hij werkt met Mootools wat voor zoiets kleins helemaal niet nodig is. Maar als je al Mootools gebruikt, is dit wel heel handig. Als je geen Mootools gebruikt zou jou code goed genoeg moeten zijn, ik heb nog geen idee waarom die niet werkt... Als je even duidelijk zegt waar ik zou moeten klikken op jouw website om die action the triggeren, kan ik wel wat gaan proberen...
Gewijzigd op 01/01/1970 01:00:00 door Jan Veenstra
Ik zie overigens dat je PrototypeJS gebruikt, dan kun je toch ook zo doen:?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function toggle(el)
{
el = $(el);
if(el.getStyle('visibility') == "visible")
{
el.setStyle({visibility: 'hidden'});
}
else
{
el.setStyle({visibility: 'visible'});
}
}
{
el = $(el);
if(el.getStyle('visibility') == "visible")
{
el.setStyle({visibility: 'hidden'});
}
else
{
el.setStyle({visibility: 'visible'});
}
}
Gewijzigd op 01/01/1970 01:00:00 door Douwe
huh? bij mij wel... IE7
In FF NIet! wate piep
Douwe M schreef op 05.08.2008 20:01:
Natuurlijk is die code wat overdreven, hij werkt met Mootools wat voor zoiets kleins helemaal niet nodig is.
Ja, als dit het enige zou zijn op je hele site wat je nodig hebt aan JavaScript, dan is het onnodige overhead. Maar je kunt het ook zo bekijken: gecomprimeerd is Mootools 63 KB, de grootte van een gemiddelde jpg. In verhouding tot wat je daarvoor krijgt aan (crossbrowser!) JavaScript functionaliteit vind ik dat zeer aanvaardbaar.
De reden dat jouw script niet werkt heeft te maken met een bug in sommige browsers. Als de style visibility nog niet expliciet toegekend is, reageert bijvoorbeeld IE6 niet. Je moet hem dan dus eerst bij de onload zelf op visible zetten en daarna pas je toggle script toepassen.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Jan; Natuurlijk :) Zoals ik ook zei: Als je Mootools alleen hiervoor installeert is het een beetje zinloos, maar als je het al gebruikt (wat je eigenlijk altijd zou moeten doen als je een beetje met JS wilt gaan doen) is het een goede optie :)
display werkt ook niet...
Hmmmm... Mijn codetje al geprobeerd?
is er ist op mijn pagina waar hij een conflict mee kan hebben?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
window.addEvent ('domready', function () {
$('toggle').addEvent ('click', function (e) {
$('container').setStyle ('visibility', ($('container').getStyle ('visibility') == 'visible') ? ('hidden') : ('visible'));
});
});
</script>
window.addEvent ('domready', function () {
$('toggle').addEvent ('click', function (e) {
$('container').setStyle ('visibility', ($('container').getStyle ('visibility') == 'visible') ? ('hidden') : ('visible'));
});
});
</script>
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn