div hidden/visible
alleen ik weet niet hoe ik precies in het ('div') gedeelte ook kan aangeven dat hij een id moet zien.
javascript in de header
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
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
<script language=javascript type='text/javascript'>
function showdiv(pass) {
<b>var divs = document.getElementsByTagName('div'); ,</b>
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else {
if (document.getElementById)
divs[i].style.visibility="hidden";
else
if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
}
}
}
</script>
function showdiv(pass) {
<b>var divs = document.getElementsByTagName('div'); ,</b>
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else {
if (document.getElementById)
divs[i].style.visibility="hidden";
else
if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
}
}
}
</script>
div output
Code (php)
1
2
2
echo "<td><div id=\"". $var_id ."\" style=\"position: absolute; left:10px; top:54px; background-color: #EEEEEE; border: 1px none #000000; visibility: hidden\"></td>\n";
echo "</tr>\n";
echo "</tr>\n";
maar dan heb ik nog het zelfde probleem. het gaat er mij om hoe ik dit javascript aan een specifieke div kan toewijzen.
Code (php)
1
var divs = document.getElementById(['<? . $var_id .?>']);
lukt het ook niet
Gewijzigd op 01/01/1970 01:00:00 door klaas
Code (php)
werkt als een trein.
p.s. php tags toegevoegd voor de kleurtjes!
dit gebruik ik nu : var divs = document.getElementById([$var_id]);
dit is de gehele code:
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<?
include("config.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Engelen</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />
<script language=javascript type='text/javascript'>
function showdiv(pass) {
var divs = document.getElementById([$var_id]);
// var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else {
if (document.getElementById)
divs[i].style.visibility="hidden";
else
if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
}
}
}
</script>
</head>
<body>
<div id="pagewrapper">
<div id="headerleft"></div>
<div id="headercenter"><img src="image/stuurDEF.jpg" width="400" height="170" /></div>
<div id="headerright"><img src="image/management-en-consultancy.gif" width="168" height="170" /></div>
<div id="left">
<?
include("hoofdmenu.php");
?>
</div>
<div id="center">
<h1>Opdrachtgevers</h1>
<p> </p>
<p class="inleiding">Hiernaast ziet u de logo’s van opdrachtgevers van EC&I. Klik op n van de logo’s om direct naar de bijbehorende tekst te gaan.</p>
<p> </p>
<?
$sql = "SELECT * FROM opdrachtgevers ORDER BY naamopdrachtgever ASC";
$query = mysql_query($sql);
while($rij = mysql_fetch_object($query)) {
$var_id = htmlspecialchars($rij->id);
$var_opdrachtgever = htmlspecialchars($rij->naamopdrachtgever);
$var_omschrijving = htmlspecialchars($rij->omschrijving);
$var_website = htmlspecialchars($rij->website);
// echo "<div id=\"". $var_id ."\" style=\"position: absolute; left:10px; top:54px; background-color: #EEEEEE; border: 1px //none #000000; visibility: hidden\">";
echo "</table>\n";
echo "<tr>\n";
echo "<td><div id=\"". $var_id ."\" style=\"position: absolute; left:10px; top:54px; background-color: #EEEEEE; border: 1px none #000000; visibility: hidden\"></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><p>" . $var_omschrijving . "</p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><a target=\"_blank\" href=http://" . $var_website . ">" . $var_website . "</a></td>\n";
echo "</tr>\n";
echo "</table><br/>\n";
echo " </div>\n";
}
?>
<?php /*?><?
$sql = "SELECT * FROM opdrachtgevers ORDER BY naamopdrachtgever ASC";
$query = mysql_query($sql);
while($rij = mysql_fetch_object($query)) {
$var_id = htmlspecialchars($rij->id);
$var_opdrachtgever = htmlspecialchars($rij->naamopdrachtgever);
$var_omschrijving = htmlspecialchars($rij->omschrijving);
$var_website = htmlspecialchars($rij->website);
echo "<table border=\"0\">\n";
echo "<tr>\n";
echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><p>" . $var_omschrijving . "</p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><a target=\"_blank\" href=http://" . $var_website . ">" . $var_website . "</a></td>\n";
echo "</tr>\n";
echo "</table><br/>\n";
}
?> <?php */?>
</div>
<div id="right">
<table>
<tr>
<td><img src="image/opdrachtgevers.jpg" width="97" height="19" /></td>
</tr>
</table>
<?
$sql = "SELECT * FROM opdrachtgevers ORDER BY naamopdrachtgever ASC";
$query = mysql_query($sql);
while($rij = mysql_fetch_object($query)) {
$var_id = htmlspecialchars($rij->id);
$var_opdrachtgever = htmlspecialchars($rij->naamopdrachtgever);
$var_omschrijving = htmlspecialchars($rij->omschrijving);
$var_website = htmlspecialchars($rij->website);
echo "<table border=\"0\">\n";
echo "<tr>\n";
echo "<td><img src=\"afbeelding.php?id=" . $var_id . "\"></td>\n";
echo "</tr>\n";
// echo "<tr>\n";
// echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
// echo "</tr>\n";
echo "<tr>\n";
///echo "<td><a href=\"javascript:showdiv('". $var_id ."')\">" . $var_opdrachtgever . "</a></td>\n";
echo "<td><div onclick=\"showdiv('".$var_id ."')\">" . $var_opdrachtgever . "</div></td>\n";
echo "</tr>\n";
echo "</table><br/>\n";
}
?>
</div>
</div>
</body>
</html>
include("config.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Engelen</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />
<script language=javascript type='text/javascript'>
function showdiv(pass) {
var divs = document.getElementById([$var_id]);
// var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else {
if (document.getElementById)
divs[i].style.visibility="hidden";
else
if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
}
}
}
</script>
</head>
<body>
<div id="pagewrapper">
<div id="headerleft"></div>
<div id="headercenter"><img src="image/stuurDEF.jpg" width="400" height="170" /></div>
<div id="headerright"><img src="image/management-en-consultancy.gif" width="168" height="170" /></div>
<div id="left">
<?
include("hoofdmenu.php");
?>
</div>
<div id="center">
<h1>Opdrachtgevers</h1>
<p> </p>
<p class="inleiding">Hiernaast ziet u de logo’s van opdrachtgevers van EC&I. Klik op n van de logo’s om direct naar de bijbehorende tekst te gaan.</p>
<p> </p>
<?
$sql = "SELECT * FROM opdrachtgevers ORDER BY naamopdrachtgever ASC";
$query = mysql_query($sql);
while($rij = mysql_fetch_object($query)) {
$var_id = htmlspecialchars($rij->id);
$var_opdrachtgever = htmlspecialchars($rij->naamopdrachtgever);
$var_omschrijving = htmlspecialchars($rij->omschrijving);
$var_website = htmlspecialchars($rij->website);
// echo "<div id=\"". $var_id ."\" style=\"position: absolute; left:10px; top:54px; background-color: #EEEEEE; border: 1px //none #000000; visibility: hidden\">";
echo "</table>\n";
echo "<tr>\n";
echo "<td><div id=\"". $var_id ."\" style=\"position: absolute; left:10px; top:54px; background-color: #EEEEEE; border: 1px none #000000; visibility: hidden\"></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><p>" . $var_omschrijving . "</p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><a target=\"_blank\" href=http://" . $var_website . ">" . $var_website . "</a></td>\n";
echo "</tr>\n";
echo "</table><br/>\n";
echo " </div>\n";
}
?>
<?php /*?><?
$sql = "SELECT * FROM opdrachtgevers ORDER BY naamopdrachtgever ASC";
$query = mysql_query($sql);
while($rij = mysql_fetch_object($query)) {
$var_id = htmlspecialchars($rij->id);
$var_opdrachtgever = htmlspecialchars($rij->naamopdrachtgever);
$var_omschrijving = htmlspecialchars($rij->omschrijving);
$var_website = htmlspecialchars($rij->website);
echo "<table border=\"0\">\n";
echo "<tr>\n";
echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><p>" . $var_omschrijving . "</p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><a target=\"_blank\" href=http://" . $var_website . ">" . $var_website . "</a></td>\n";
echo "</tr>\n";
echo "</table><br/>\n";
}
?> <?php */?>
</div>
<div id="right">
<table>
<tr>
<td><img src="image/opdrachtgevers.jpg" width="97" height="19" /></td>
</tr>
</table>
<?
$sql = "SELECT * FROM opdrachtgevers ORDER BY naamopdrachtgever ASC";
$query = mysql_query($sql);
while($rij = mysql_fetch_object($query)) {
$var_id = htmlspecialchars($rij->id);
$var_opdrachtgever = htmlspecialchars($rij->naamopdrachtgever);
$var_omschrijving = htmlspecialchars($rij->omschrijving);
$var_website = htmlspecialchars($rij->website);
echo "<table border=\"0\">\n";
echo "<tr>\n";
echo "<td><img src=\"afbeelding.php?id=" . $var_id . "\"></td>\n";
echo "</tr>\n";
// echo "<tr>\n";
// echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
// echo "</tr>\n";
echo "<tr>\n";
///echo "<td><a href=\"javascript:showdiv('". $var_id ."')\">" . $var_opdrachtgever . "</a></td>\n";
echo "<td><div onclick=\"showdiv('".$var_id ."')\">" . $var_opdrachtgever . "</div></td>\n";
echo "</tr>\n";
echo "</table><br/>\n";
}
?>
</div>
</div>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script language=javascript type='text/javascript'>
function showdiv() {
var main = document.getElementById('main');
var divs = main.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id) {
divs[i].style.display = (divs[i].style.display == 'none') ? 'block' : 'none'
}
}
}
</script>
function showdiv() {
var main = document.getElementById('main');
var divs = main.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id) {
divs[i].style.display = (divs[i].style.display == 'none') ? 'block' : 'none'
}
}
}
</script>
je moet een div om de andere divs heen zetten met de id main.
elke keer als je de functie aanroept, verschijnen of verdwijnen de divs met een id.
ik hoop dat dat was wat je nodig had?
hij pakt nu alleen de eerste div en niet de andere div. Zie http://engelen.vigourmedia.nl/opdrachtgevers.php. Als je op de naam van de opdrachtgever klikt moet je de div zien, is de bedoeling.
Gewijzigd op 01/01/1970 01:00:00 door klaas
Kijk hier eens rond bij deze oefeningen.
Dat zijn oefeningen van mijn avondcursus ajax.
Dit is een toffe oef : http://syntra.php-design.be/Oefeningen/les_4/oef_4/index1.php
De rest van de oefeningen staat blijkbaar niet meer online.
Aan de linkerkant krijg ik nu iedergeval de opdrachtgevers. Maar ik begrijp nog niet helemaal hoe ik de data kan tonen.
http://engelen.vigourmedia.nl/opdrachtgevers2.php
<div id="stud_leeftijd">
Leeftijd:
jaar
</div> <!-- einde div stud_leeftijd -->
Remco schreef op 11.05.2007 18:51:
ik zou het zo doen:
je moet een div om de andere divs heen zetten met de id main.
elke keer als je de functie aanroept, verschijnen of verdwijnen de divs met een id.
ik hoop dat dat was wat je nodig had?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script language=javascript type='text/javascript'>
function showdiv() {
var main = document.getElementById('main');
var divs = main.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id) {
divs[i].style.display = (divs[i].style.display == 'none') ? 'block' : 'none'
}
}
}
</script>
function showdiv() {
var main = document.getElementById('main');
var divs = main.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id) {
divs[i].style.display = (divs[i].style.display == 'none') ? 'block' : 'none'
}
}
}
</script>
je moet een div om de andere divs heen zetten met de id main.
elke keer als je de functie aanroept, verschijnen of verdwijnen de divs met een id.
ik hoop dat dat was wat je nodig had?
Op deze manier lukt het bijna, alleen krijg alleen de eerste keer iets te zien wanneer ik op ABNAMRO klik. Bij de andere zie ik de divs dan niet.
http://engelen.vigourmedia.nl/opdrachtgevers.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
echo "<div id=\"main\">";
echo "<div id=\"". $var_id ."\" style=\" left:150px; top:54px; border: 1px none #000000; visibility: hidden\">";
echo "</table>\n";
echo "<tr>\n";
echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><p>" . $var_omschrijving . "</p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><a target=\"_blank\" href=http://" . $var_website . ">" . $var_website . "</a></td>\n";
echo "</tr>\n";
echo "</table><br/>\n";
echo " </div>\n";
echo "<div id=\"". $var_id ."\" style=\" left:150px; top:54px; border: 1px none #000000; visibility: hidden\">";
echo "</table>\n";
echo "<tr>\n";
echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><p>" . $var_omschrijving . "</p></td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><a target=\"_blank\" href=http://" . $var_website . ">" . $var_website . "</a></td>\n";
echo "</tr>\n";
echo "</table><br/>\n";
echo " </div>\n";
Maar het is de bedoeling dat wanneer je op een andere bedrijfsnaam aan de rechterkant klikt de andere omschrijving verdwijnt en de nieuwe zichtbaar wordt. http://engelen.vigourmedia.nl/opdrachtgevers.php
Ik gebruik nu dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script language=javascript type='text/javascript'>
function showdiv(pass){
var t=document.getElementById(pass)
if(t.style.visibility=='hidden'){
t.style.visibility='visible';
}else{
t.style.visibility='none';
}
}
function showdiv(pass){
var t=document.getElementById(pass)
if(t.style.visibility=='hidden'){
t.style.visibility='visible';
}else{
t.style.visibility='none';
}
}
Ik probeer het door middel van een extra div die main heet met deze code, maar dan gebeurt er helemaal niks meer. Iemand de oplossing? zou super zijn :)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language=javascript type='text/javascript'>
function showdiv(pass){
var divs = main.getElementsByTagName('div');
var t=document.getElementById(pass)
document.all.divs.visibility ='hidden';
if(t.style.visibility=='hidden'){
t.style.visibility='visible';
}else{
t.style.visibility='none';
}
}
function showdiv(pass){
var divs = main.getElementsByTagName('div');
var t=document.getElementById(pass)
document.all.divs.visibility ='hidden';
if(t.style.visibility=='hidden'){
t.style.visibility='visible';
}else{
t.style.visibility='none';
}
}
Crispijn schreef op 11.05.2007 16:39:
ik gebruik altijd deze functie:
werkt als een trein.
p.s. php tags toegevoegd voor de kleurtjes!
Code (php)
werkt als een trein.
p.s. php tags toegevoegd voor de kleurtjes!
Maar dat je dan afzondelijke divs kan aansturen bijv:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="div1">Content</div>
</div>
<a href="#"onclick="doe iets voor 1">hide/show 1</a>
<div id="div1">Nog meer content.</div>
</div>
<a href="#" onclick="doe iets voor 2">hide/show 2</a>
</div>
<a href="#"onclick="doe iets voor 1">hide/show 1</a>
<div id="div1">Nog meer content.</div>
</div>
<a href="#" onclick="doe iets voor 2">hide/show 2</a>
Code (php)
1
<a href="onClick="showHide('jedivid')">toggle</a>
edit:
sorry om te toggelen heb je deze nodig, dan maakt 't ook niet uit of hij op none of block staat
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Gewijzigd op 01/01/1970 01:00:00 door Crispijn -
<script type='text/javascript'>
var previousdiv = false;
function showdiv(id) {
if (previousdiv) {
document.getElementById(previousdiv).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
previousdiv = id;
}
</script>