Probleem bij visible en hidden div in firefox
Ik ben een site aan het maken met div's. Ik ben bezig met een fuivenkalender voor die site en als ik op 1 fuif klikt wil ik dat er een hidden divje te voorschijn komt. Dit lukt in IE en Opera maar niet in Firefox. weet iemand wat ik moet doen?
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
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
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
// dit staat in mijn index
<style type="text/css">
div#fuifoverzicht
{
position:static;
z-index: 10;
}
div.toonfuifmouse
{
background-color:#663366;
text-align:left;
height:65px;
_height:65px;
width: 540px;
min-width:540px;
margin:5px 5px 10px 5px;
padding:5px 5px 5px 5px;
z-index: 10;
}
div.toonfuifnomouse
{
background-color:#333366;
text-align:left;
height:65px;
_height:65px;
width: 540px;
min-width:540px;
margin:5px 5px 10px 5px;
padding:5px 5px 5px 5px;
z-index: 10;
}
div#toonfuifvolledig
{
background-color:#333366;
text-align:right;
min-height: 120px;
height:120px;
_height:120px;
width: 540px;
min-width:540px;
margin: auto;
margin-top:200px;
padding:5px 5px 5px 5px;
visibility:hidden;
z-index: 1000;
}
div#toonfuifvolledigcontainer
{
background-color:#666666;
visibility:hidden;
position: absolute;
width:888px;
min-height:800px;
height:800px;
left: 0;
top:0;
z-index: 1000;
}
</style>
<script type="text/javascript">
function visible(target)
{
toonfuifvolledig.style.visibility='visible';
toonfuifvolledigcontainer.style.visibility='visible';
}
function hidden(target)
{
toonfuifvolledig.style.visibility='hidden';
toonfuifvolledigcontainer.style.visibility='hidden';
}
</script>
// dit staat in men fuiven.php
<div id="fuifoverzicht">
<div class="toonfuifnomouse" onmouseover="this.className=\'toonfuifmouse\'" onmouseout="this.className=\'toonfuifnomouse\'" onclick="visible(); return false;">
Hier de fuif die er automatisch op komt in het klein
</div>
</div>
<div id="toonfuifvolledigcontainer">
<div id="toonfuifvolledig">
<a href="#"onclick="hidden(); return false;" class="link">close</a>
Hier de fuif vergroot
</div>
</div>
<style type="text/css">
div#fuifoverzicht
{
position:static;
z-index: 10;
}
div.toonfuifmouse
{
background-color:#663366;
text-align:left;
height:65px;
_height:65px;
width: 540px;
min-width:540px;
margin:5px 5px 10px 5px;
padding:5px 5px 5px 5px;
z-index: 10;
}
div.toonfuifnomouse
{
background-color:#333366;
text-align:left;
height:65px;
_height:65px;
width: 540px;
min-width:540px;
margin:5px 5px 10px 5px;
padding:5px 5px 5px 5px;
z-index: 10;
}
div#toonfuifvolledig
{
background-color:#333366;
text-align:right;
min-height: 120px;
height:120px;
_height:120px;
width: 540px;
min-width:540px;
margin: auto;
margin-top:200px;
padding:5px 5px 5px 5px;
visibility:hidden;
z-index: 1000;
}
div#toonfuifvolledigcontainer
{
background-color:#666666;
visibility:hidden;
position: absolute;
width:888px;
min-height:800px;
height:800px;
left: 0;
top:0;
z-index: 1000;
}
</style>
<script type="text/javascript">
function visible(target)
{
toonfuifvolledig.style.visibility='visible';
toonfuifvolledigcontainer.style.visibility='visible';
}
function hidden(target)
{
toonfuifvolledig.style.visibility='hidden';
toonfuifvolledigcontainer.style.visibility='hidden';
}
</script>
// dit staat in men fuiven.php
<div id="fuifoverzicht">
<div class="toonfuifnomouse" onmouseover="this.className=\'toonfuifmouse\'" onmouseout="this.className=\'toonfuifnomouse\'" onclick="visible(); return false;">
Hier de fuif die er automatisch op komt in het klein
</div>
</div>
<div id="toonfuifvolledigcontainer">
<div id="toonfuifvolledig">
<a href="#"onclick="hidden(); return false;" class="link">close</a>
Hier de fuif vergroot
</div>
</div>
Kan er mij iemand helpen?
Mvg Pieter
Gewijzigd op 01/01/1970 01:00:00 door Pieter Boussaer
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script language="javascript">
function showHide( ele ) {
var div = document.getElementById (ele);
if (div.style.display == 'none') {
div.style.display = 'block';
}
else if (div.style.display =='block') {
div.style.display = 'none';
}
else {
div.style.display = 'none';
}
}
</script>
function showHide( ele ) {
var div = document.getElementById (ele);
if (div.style.display == 'none') {
div.style.display = 'block';
}
else if (div.style.display =='block') {
div.style.display = 'none';
}
else {
div.style.display = 'none';
}
}
</script>
vervolgens roep je hem zo aan:
Code (php)
1
2
3
2
3
<a href="#" onclick="showHide('fuif1');" >Home</a><br />
<div id="fuif1">Hier info over fuif1</div>
<div id="fuif1">Hier info over fuif1</div>
Je moet wel even in je CSS display: none aangeven. Als je alles dynamisch genreert lijkt het me handig om dit dmv het style attribuut te doen.
Je kan proberen om
display: none;
en
display: block;
te gebruiken.
Edit:
Ah, een spuit 11 situatie.
Gewijzigd op 01/01/1970 01:00:00 door Bo az
En 2 verschillende div's in 1 onclick?
Dit werkt ook niet zo goed. Ik moet 2 keer klikken om de div te laten zien. Hoe komt dit?
Gewijzigd op 01/01/1970 01:00:00 door Pieter Boussaer
Post anders even een stuk code zodat we kunnen kijken wat je hebt gedaan.
Ik had style="display: none;" in mijn style sheet gezet. Maar als ik ze dan rechtreeks in de div tag zet gaat het van de eerste keer.
Op de rest zal ik wel nog wat zoeken.
Het eerste is gewoon de functie van u omdraaien.
Maar om 2 div's tegelijk te laten zien is wat moeilijker denk ik.
daarmee is het gelukt.
thanks iedereen
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
<?php
//query gedoe
while($row = mysql_fetch_assoc($query))
{
echo '<a href="#" onclick="showHide(\'div'.$row['id'].'\')">klik</a> ';
echo '<div id="div'.$row['id'].'" style="display: none;"> '.$row['info'].'</div>
';
}
?>
//query gedoe
while($row = mysql_fetch_assoc($query))
{
echo '<a href="#" onclick="showHide(\'div'.$row['id'].'\')">klik</a> ';
echo '<div id="div'.$row['id'].'" style="display: none;"> '.$row['info'].'</div>
';
}
?>