Met radio buttons links veranderen option menu
<html>
<script language="JavaScript">
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = theSelect.options[theSelect.selectedIndex].value;
theIframe.src = theUrl;
}
</script>
</head>
<body>
<form id="form1" method="post">
<label>Kies je klas: <select id="location" style="color:black;font-size:16px; width:150" size="1" onChange="setIframeSource()">
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00001.htm">eg1a</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00002.htm">eg1b</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00003.htm">ehv1c</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00004.htm">ehv1d</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00005.htm">ehv1e</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00006.htm">ehv1f</option>
</select></label>
</form>
</body>
</html>
maar nu wil ik hier naaast een
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="radio" name="group1" value="Milk">Dagrooster<br>
<input type="radio" name="group1" value="Butter" checked>Weekrooster<br>
</div>
</form>
en dan als je weekrooster selecteerd je dit krijgt:
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00001.htm">eg1a</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00002.htm">eg1b</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00003.htm">ehv1c</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00004.htm">ehv1d</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00005.htm">ehv1e</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00006.htm">ehv1f</option>
dus zeg maar een on select change radio knop maak. ik wil dat ik op de zelfde pagina blijf dus de pagina niet verlaat
Gewijzigd op 15/12/2012 13:04:49 door Keizer Webdesign
http://www.dynamicdrive.com/dynamicindex16/formdependency.htm
Maar het is de bedoeling dat de <option> wordt veranderd als je weekrooster selecteert enzo
Toevoeging op 15/12/2012 22:59:15:
ik heb dit script hard nodig bij het afmaken van mij site maar wie kan me helpen??
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
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
<html>
<head>
<script language="JavaScript">
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = theSelect.options[theSelect.selectedIndex].value;
theIframe.src = theUrl;
}
function swap_select(val) {
switch (val) {
case 'dag':
document.getElementById('location_container').innerHTML = document.getElementById('dag_opties').innerHTML;
break;
case 'week':
document.getElementById('location_container').innerHTML = document.getElementById('week_opties').innerHTML;
break;
}
}
</script>
<style>
.hidden {
display: none;
}
#myIframe {
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<iframe id="myIframe"></iframe>
<div align="center">
<input type="radio" onclick="swap_select('dag')" name="group1" value="Milk" checked="checked">Dagrooster<br>
<input type="radio" onclick="swap_select('week')" name="group1" value="Butter">Weekrooster<br>
</div>
<form id="form1" method="post">
<div id="location_container">
<label for="location">Kies je klas: </label>
<select id="location" style="color:black;font-size:16px; width:150" size="1" onChange="setIframeSource()">
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00001.htm">eg1a</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00002.htm">eg1b</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00003.htm">ehv1c</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00004.htm">ehv1d</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00005.htm">ehv1e</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00006.htm">ehv1f</option>
</select>
</div>
</form>
<div id="week_opties" class="hidden">
<label for="location">Kies je klas: </label>
<select id="location" style="color:black;font-size:16px; width:150" size="1" onChange="setIframeSource()">
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00001.htm">eg1a</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00002.htm">eg1b</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00003.htm">ehv1c</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00004.htm">ehv1d</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00005.htm">ehv1e</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00006.htm">ehv1f</option>
</select>
</div>
<div id="dag_opties" class="hidden">
<label for="location">Kies je klas: </label>
<select id="location" style="color:black;font-size:16px; width:150" size="1" onChange="setIframeSource()">
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00001.htm">eg1a</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00002.htm">eg1b</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00003.htm">ehv1c</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00004.htm">ehv1d</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00005.htm">ehv1e</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00006.htm">ehv1f</option>
</select>
</div>
</body>
</html>
<head>
<script language="JavaScript">
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = theSelect.options[theSelect.selectedIndex].value;
theIframe.src = theUrl;
}
function swap_select(val) {
switch (val) {
case 'dag':
document.getElementById('location_container').innerHTML = document.getElementById('dag_opties').innerHTML;
break;
case 'week':
document.getElementById('location_container').innerHTML = document.getElementById('week_opties').innerHTML;
break;
}
}
</script>
<style>
.hidden {
display: none;
}
#myIframe {
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<iframe id="myIframe"></iframe>
<div align="center">
<input type="radio" onclick="swap_select('dag')" name="group1" value="Milk" checked="checked">Dagrooster<br>
<input type="radio" onclick="swap_select('week')" name="group1" value="Butter">Weekrooster<br>
</div>
<form id="form1" method="post">
<div id="location_container">
<label for="location">Kies je klas: </label>
<select id="location" style="color:black;font-size:16px; width:150" size="1" onChange="setIframeSource()">
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00001.htm">eg1a</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00002.htm">eg1b</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00003.htm">ehv1c</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00004.htm">ehv1d</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00005.htm">ehv1e</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00006.htm">ehv1f</option>
</select>
</div>
</form>
<div id="week_opties" class="hidden">
<label for="location">Kies je klas: </label>
<select id="location" style="color:black;font-size:16px; width:150" size="1" onChange="setIframeSource()">
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00001.htm">eg1a</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00002.htm">eg1b</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00003.htm">ehv1c</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00004.htm">ehv1d</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00005.htm">ehv1e</option>
<option value="http://www.roostereemland.nl/weekrooster/50/c/c00006.htm">ehv1f</option>
</select>
</div>
<div id="dag_opties" class="hidden">
<label for="location">Kies je klas: </label>
<select id="location" style="color:black;font-size:16px; width:150" size="1" onChange="setIframeSource()">
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00001.htm">eg1a</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00002.htm">eg1b</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00003.htm">ehv1c</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00004.htm">ehv1d</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00005.htm">ehv1e</option>
<option value="http://www.roostereemland.nl/dagrooster/50/c/c00006.htm">ehv1f</option>
</select>
</div>
</body>
</html>
(Het kan met minder code, maar op deze manier is de logica vrij simpel. Wie het zich afvraagt waarom ik de hele select mee vervang: in IE geeft .innerHTML van een select problemen)
maar nu wil ik er een squeezeFrame in verwerken maar ik loop vast op dat stukje java:
<script language="JavaScript">
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = theSelect.options[theSelect.selectedIndex].value;
theIframe.src = theUrl;
}
function swap_select(val) {
switch (val) {
case 'dag':
document.getElementById('location_container').innerHTML = document.getElementById('dag_opties').innerHTML;
break;
case 'week':
document.getElementById('location_container').innerHTML = document.getElementById('week_opties').innerHTML;
break;
}
}
</script>
squeezeFrame:
upload squeezeFrame.js to your webserver and include in the iframe-content page that needs fixing
optionally set "myMax" with the maximum positive/negative zoom allowed, e.g. 0.25 means that the page can zoom from 75->125%. The default value is 0.05, so 95->105%
optionally set "myRedraw" to "both" (default is "width") to adjust to both width and height
set "myContainer" to the URL of the iframe container page (i.e. the page in which the iframe is created/ defined)
example code:
<script type="text/javascript" src="/path/to/squeezeFrame.js"></script>
<script type="text/javascript">
myContainer="http://url.to/container-page/";
myMax=0.25;
myRedraw="both";
</script>
dus moet ze eigenlijk samenvoegen
ik wil dat de iframe wordt aangepast aan je beeldschrem formaat dus dat t iframe 100% is maar de inhoud aangepast wordt aan de grote van je iframe. Zit ik dan goed bij deze code (http://futtta.be/squeezeFrame/).
Gewijzigd op 17/12/2012 21:42:04 door Keizer Webdesign
Het punt aan squeezeFrame:
Die code moet je niet toevoegen aan je hoofdpagina. Je moet die code toevoegen aan de source van de iframe.
Dus ... op
http://www.roostereemland.nl/weekrooster/50/c/c00001.htm (en alle andere!)
heb je
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript" src="/path/to/squeezeFrame.js"></script>
<script type="text/javascript">
myContainer="http://www.roostereemland.nl/DE_PAGINA_WAAR_DE_IFRAME_STAAT";
myMax=0.25;
myRedraw="both";
</script>
Dus, vanuit de hoofdpagina moet je absoluut niets doen; de code zal ook niet conflicteren.
Is het wel mogelijk om dat zelfde te doen maar dan vanaf de hoofdpagina