vak geselecteerd houden bij volgende datum
Ik heb het versimpeld in onderstaande code samengevat:
<html>
<head>
<script type="text/javascript">
function CngClass(obj) {
var vakken = getElementsByClassName('vak'); // wegens IE > 9 ... geen documents.getElementsByClassName, maar een custom functie
for(var i=0; i<vakken.length; i++) {
if(vakken == obj) {
// het geklikte object
if(hasClass(obj, 'deselected')) {
removeClass(obj, 'deselected');
}
if(!hasClass(obj, 'selected')) {
addClass(obj, 'selected');
}
}
else {
// al de rest
if(hasClass(vakken, 'selected')) {
removeClass(vakken, 'selected');
}
if(!hasClass(vakken, 'deselected')) {
addClass(vakken, 'deselected');
}
}
}
}
/**
* IE < 9 kent document.getElementsByClassName blijkbaar niet. Dan maar een custom functie
* @see http://stackoverflow.com/questions/4404154/getelementsbyclassname-ie-resolution-issue
*/
function getElementsByClassName(findClass, parent) {
parent = parent || document;
var elements = parent.getElementsByTagName('*');
var matching = [];
for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
if ((' ' + elements.className + ' ').indexOf(findClass) > -1) {
matching.push(elements);
}
}
return matching;
}
/**
* @see http://www.avoid.org/?p=78
*/
function hasClass(el, name) {
return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
}
function addClass(el, name) {
if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
}
function removeClass(el, name) {
if (hasClass(el, name)) {
el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
}
}
</script>
<style type="text/css">
.knop{
width:20px;
height:100px;
float:left;
}
#datumvak{
width:200px;
height:100px;
background-color:#09F;
float:left;
margin-left:5px;
margin-right:5px;
margin-bottom:0px;
}
.vak{
width:80px;
height:80px;
border:1px solid black;
margin:2px;
padding:10px;
float:left;
}
.selected{
background-color:#FFF;
color:#000;
}
.deselected{
background-color:#F3F;
color:#FFF;
}
</style>
Code (php)
</head>
<body>
<a href="test3.php?datum="><input type="button" class="knop" value="<" /></a>
<div id="datumvak">
</div>
<a href="test3.php?datum="><input type="button" class="knop" value=">" /></a>
<div class="vak selected" onclick="CngClass(this)";>vak 1</div>
<div class="vak deselected" onclick="CngClass(this)";>vak 2</div>
</body>
</html>
Ik zal je het zelfde principe voorstellen als dit hier:
http://www.phphulp.nl/php/forum/topic/run-functies-op-pagina-loadrefresh/87080/
Je herkent de gelijkaardige vraag.
Meer uitleg over het principe vind je daar ook
---
In jouw geval: de href van de links "previous" en "next" krijgen een extra stukje url, met een # en daar een extra variabele rechts van. De inhoud daarvan is de index (0 ofwel 1) van het geselecteerde vak.
Bij het laden van de pagina wordt die index gelezen uit de url en wordt CngClass() aangeroepen.
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
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
<html>
<head>
<script type="text/javascript">
function CngClass(obj) {
var vakken = getElementsByClassName('vak'); // wegens IE > 9 ... geen documents.getElementsByClassName, maar een custom functie
for(var i=0; i<vakken.length; i++) {
if(vakken[i] == obj) {
// het geklikte object
if(hasClass(obj, 'deselected')) {
removeClass(obj, 'deselected');
}
if(!hasClass(obj, 'selected')) {
addClass(obj, 'selected');
// nu gaan we ook de links 'previous' / 'next' aanpassen, zodat ze deze keuze meenemen naar de andere pagina
addHash2Links (i);
}
}
else {
// al de rest
if(hasClass(vakken[i], 'selected')) {
removeClass(vakken[i], 'selected');
}
if(!hasClass(vakken[i], 'deselected')) {
addClass(vakken[i], 'deselected');
}
}
}
}
/**
* IE < 9 kent document.getElementsByClassName blijkbaar niet. Dan maar een custom functie
* @see http://stackoverflow.com/questions/4404154/getelementsbyclassname-ie-resolution-issue
*/
function getElementsByClassName(findClass, parent) {
parent = parent || document;
var elements = parent.getElementsByTagName('*');
var matching = [];
for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) {
matching.push(elements[i]);
}
}
return matching;
}
/**
* Deze functie geeft past de link aan; ...
*/
function addHash2Links (index) {
var prev = document.getElementById('prev_link');
var next = document.getElementById('next_link');
var prev_link = prev.href.split('#');
var next_link = next.href.split('#');
prev.href = prev_link[0] + '#' + index;
next.href = next_link[0] + '#' + index;
}
function readHash() {
var url = window.location.toString().split('#');
if (typeof url[1] != 'undefined' && Number(url[1]) > 0) {
// Er staat in de url iets na het # teken
var vakken = getElementsByClassName('vak');
CngClass(vakken[Number(url[1])]);
}
}
/**
* @see http://www.avoid.org/?p=78
*/
function hasClass(el, name) {
return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
}
function addClass(el, name) {
if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
}
function removeClass(el, name) {
if (hasClass(el, name)) {
el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
}
}
</script>
...
<body onload="readHash();">
<a href="?datum=<?php echo $terug; ?>" id="prev_link"><input type="button" class="knop" value="<" /></a>
<div id="datumvak">
<?php
echo "de datum is $datum";
?>
</div>
<a href="?datum=<?php echo $vooruit; ?>" id="next_link"><input type="button" class="knop" value=">" /></a>
<div class="vak selected" onclick="CngClass(this)";>vak 1</div>
<div class="vak deselected" onclick="CngClass(this)";>vak 2</div>
</body>
</html>
<head>
<script type="text/javascript">
function CngClass(obj) {
var vakken = getElementsByClassName('vak'); // wegens IE > 9 ... geen documents.getElementsByClassName, maar een custom functie
for(var i=0; i<vakken.length; i++) {
if(vakken[i] == obj) {
// het geklikte object
if(hasClass(obj, 'deselected')) {
removeClass(obj, 'deselected');
}
if(!hasClass(obj, 'selected')) {
addClass(obj, 'selected');
// nu gaan we ook de links 'previous' / 'next' aanpassen, zodat ze deze keuze meenemen naar de andere pagina
addHash2Links (i);
}
}
else {
// al de rest
if(hasClass(vakken[i], 'selected')) {
removeClass(vakken[i], 'selected');
}
if(!hasClass(vakken[i], 'deselected')) {
addClass(vakken[i], 'deselected');
}
}
}
}
/**
* IE < 9 kent document.getElementsByClassName blijkbaar niet. Dan maar een custom functie
* @see http://stackoverflow.com/questions/4404154/getelementsbyclassname-ie-resolution-issue
*/
function getElementsByClassName(findClass, parent) {
parent = parent || document;
var elements = parent.getElementsByTagName('*');
var matching = [];
for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) {
matching.push(elements[i]);
}
}
return matching;
}
/**
* Deze functie geeft past de link aan; ...
*/
function addHash2Links (index) {
var prev = document.getElementById('prev_link');
var next = document.getElementById('next_link');
var prev_link = prev.href.split('#');
var next_link = next.href.split('#');
prev.href = prev_link[0] + '#' + index;
next.href = next_link[0] + '#' + index;
}
function readHash() {
var url = window.location.toString().split('#');
if (typeof url[1] != 'undefined' && Number(url[1]) > 0) {
// Er staat in de url iets na het # teken
var vakken = getElementsByClassName('vak');
CngClass(vakken[Number(url[1])]);
}
}
/**
* @see http://www.avoid.org/?p=78
*/
function hasClass(el, name) {
return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
}
function addClass(el, name) {
if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
}
function removeClass(el, name) {
if (hasClass(el, name)) {
el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
}
}
</script>
...
<body onload="readHash();">
<a href="?datum=<?php echo $terug; ?>" id="prev_link"><input type="button" class="knop" value="<" /></a>
<div id="datumvak">
<?php
echo "de datum is $datum";
?>
</div>
<a href="?datum=<?php echo $vooruit; ?>" id="next_link"><input type="button" class="knop" value=">" /></a>
<div class="vak selected" onclick="CngClass(this)";>vak 1</div>
<div class="vak deselected" onclick="CngClass(this)";>vak 2</div>
</body>
</html>
Toevoeging op 15/10/2012 12:04:11:
Kris Peeters op 15/10/2012 12:02:48:
Hey,
Ik zal je het zelfde principe voorstellen als dit hier:
http://www.phphulp.nl/php/forum/topic/run-functies-op-pagina-loadrefresh/87080/
Je herkent de gelijkaardige vraag.
Meer uitleg over het principe vind je daar ook
---
In jouw geval: de href van de links "previous" en "next" krijgen een extra stukje url, met een # en daar een extra variabele rechts van. De inhoud daarvan is de index (0 ofwel 1) van het geselecteerde vak.
Bij het laden van de pagina ( <body onload="readHash();"> )wordt die index gelezen uit de url en wordt CngClass() aangeroepen (met het juiste object).
Ik zal je het zelfde principe voorstellen als dit hier:
http://www.phphulp.nl/php/forum/topic/run-functies-op-pagina-loadrefresh/87080/
Je herkent de gelijkaardige vraag.
Meer uitleg over het principe vind je daar ook
---
In jouw geval: de href van de links "previous" en "next" krijgen een extra stukje url, met een # en daar een extra variabele rechts van. De inhoud daarvan is de index (0 ofwel 1) van het geselecteerde vak.
Bij het laden van de pagina ( <body onload="readHash();"> )wordt die index gelezen uit de url en wordt CngClass() aangeroepen (met het juiste object).
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
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
<html>
<head>
<script type="text/javascript">
function CngClass(obj) {
var vakken = getElementsByClassName('vak'); // wegens IE > 9 ... geen documents.getElementsByClassName, maar een custom functie
for(var i=0; i<vakken.length; i++) {
if(vakken[i] == obj) {
// het geklikte object
if(hasClass(obj, 'deselected')) {
removeClass(obj, 'deselected');
}
if(!hasClass(obj, 'selected')) {
addClass(obj, 'selected');
// nu gaan we ook de links 'previous' / 'next' aanpassen, zodat ze deze keuze meenemen naar de andere pagina
addHash2Links (i);
}
}
else {
// al de rest
if(hasClass(vakken[i], 'selected')) {
removeClass(vakken[i], 'selected');
}
if(!hasClass(vakken[i], 'deselected')) {
addClass(vakken[i], 'deselected');
}
}
}
}
/**
* IE < 9 kent document.getElementsByClassName blijkbaar niet. Dan maar een custom functie
* @see http://stackoverflow.com/questions/4404154/getelementsbyclassname-ie-resolution-issue
*/
function getElementsByClassName(findClass, parent) {
parent = parent || document;
var elements = parent.getElementsByTagName('*');
var matching = [];
for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) {
matching.push(elements[i]);
}
}
return matching;
}
/**
* Deze functie geeft past de link aan; ...
*/
function addHash2Links (index) {
var prev = document.getElementById('prev_link');
var next = document.getElementById('next_link');
var prev_link = prev.href.split('#');
var next_link = next.href.split('#');
prev.href = prev_link[0] + '#' + index;
next.href = next_link[0] + '#' + index;
}
function readHash() {
var url = window.location.toString().split('#');
if (typeof url[1] != 'undefined' && Number(url[1]) > 0) {
// Er staat in de url iets na het # teken
var vakken = getElementsByClassName('vak');
CngClass(vakken[Number(url[1])]);
}
}
/**
* @see http://www.avoid.org/?p=78
*/
function hasClass(el, name) {
return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
}
function addClass(el, name) {
if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
}
function removeClass(el, name) {
if (hasClass(el, name)) {
el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
}
}
</script>
...
<body onload="readHash();">
<a href="?datum=<?php echo $terug; ?>" id="prev_link"><input type="button" class="knop" value="<" /></a>
<div id="datumvak">
<?php
echo "de datum is $datum";
?>
</div>
<a href="?datum=<?php echo $vooruit; ?>" id="next_link"><input type="button" class="knop" value=">" /></a>
<div class="vak selected" onclick="CngClass(this)";>vak 1</div>
<div class="vak deselected" onclick="CngClass(this)";>vak 2</div>
</body>
</html>
<head>
<script type="text/javascript">
function CngClass(obj) {
var vakken = getElementsByClassName('vak'); // wegens IE > 9 ... geen documents.getElementsByClassName, maar een custom functie
for(var i=0; i<vakken.length; i++) {
if(vakken[i] == obj) {
// het geklikte object
if(hasClass(obj, 'deselected')) {
removeClass(obj, 'deselected');
}
if(!hasClass(obj, 'selected')) {
addClass(obj, 'selected');
// nu gaan we ook de links 'previous' / 'next' aanpassen, zodat ze deze keuze meenemen naar de andere pagina
addHash2Links (i);
}
}
else {
// al de rest
if(hasClass(vakken[i], 'selected')) {
removeClass(vakken[i], 'selected');
}
if(!hasClass(vakken[i], 'deselected')) {
addClass(vakken[i], 'deselected');
}
}
}
}
/**
* IE < 9 kent document.getElementsByClassName blijkbaar niet. Dan maar een custom functie
* @see http://stackoverflow.com/questions/4404154/getelementsbyclassname-ie-resolution-issue
*/
function getElementsByClassName(findClass, parent) {
parent = parent || document;
var elements = parent.getElementsByTagName('*');
var matching = [];
for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) {
matching.push(elements[i]);
}
}
return matching;
}
/**
* Deze functie geeft past de link aan; ...
*/
function addHash2Links (index) {
var prev = document.getElementById('prev_link');
var next = document.getElementById('next_link');
var prev_link = prev.href.split('#');
var next_link = next.href.split('#');
prev.href = prev_link[0] + '#' + index;
next.href = next_link[0] + '#' + index;
}
function readHash() {
var url = window.location.toString().split('#');
if (typeof url[1] != 'undefined' && Number(url[1]) > 0) {
// Er staat in de url iets na het # teken
var vakken = getElementsByClassName('vak');
CngClass(vakken[Number(url[1])]);
}
}
/**
* @see http://www.avoid.org/?p=78
*/
function hasClass(el, name) {
return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
}
function addClass(el, name) {
if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
}
function removeClass(el, name) {
if (hasClass(el, name)) {
el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
}
}
</script>
...
<body onload="readHash();">
<a href="?datum=<?php echo $terug; ?>" id="prev_link"><input type="button" class="knop" value="<" /></a>
<div id="datumvak">
<?php
echo "de datum is $datum";
?>
</div>
<a href="?datum=<?php echo $vooruit; ?>" id="next_link"><input type="button" class="knop" value=">" /></a>
<div class="vak selected" onclick="CngClass(this)";>vak 1</div>
<div class="vak deselected" onclick="CngClass(this)";>vak 2</div>
</body>
</html>
Ik heb dit geprobeerd door in de vakken een link op te nemen welke een variabele voor het betreffende vak in de url toevoegt. Op deze manier kan ik de variabele uit de url halen en de juiste grafiek weergeven. Ik heb dit in de vereenvoudigde weergave als tekst in het blauwe vak opgenomen. Er komt hier te staan welk vak geselecteerd is. Dit werkt goed maar de kleur en dus de class van de selectievakken 1 en 2 springen weer terug naar vak 1 geselecteerd. Is dit wel de juiste manier of kan ik met Javascript een variabele toekennen aan het klikken op het vak? (ik ben meer bekend met php dan met javascript)
Dit heb ik er nu van gemaakt:
<html>
<head>
<script type="text/javascript">
function CngClass(obj) {
var vakken = getElementsByClassName('vak'); // wegens IE > 9 ... geen documents.getElementsByClassName, maar een custom functie
for(var i=0; i<vakken.length; i++) {
if(vakken == obj) {
// het geklikte object
if(hasClass(obj, 'deselected')) {
removeClass(obj, 'deselected');
}
if(!hasClass(obj, 'selected')) {
addClass(obj, 'selected');
// nu gaan we ook de links 'previous' / 'next' aanpassen, zodat ze deze keuze meenemen naar de andere pagina
addHash2Links (i);
}
}
else {
// al de rest
if(hasClass(vakken, 'selected')) {
removeClass(vakken, 'selected');
}
if(!hasClass(vakken, 'deselected')) {
addClass(vakken, 'deselected');
}
}
}
}
/**
* IE < 9 kent document.getElementsByClassName blijkbaar niet. Dan maar een custom functie
* @see http://stackoverflow.com/questions/4404154/getelementsbyclassname-ie-resolution-issue
*/
function getElementsByClassName(findClass, parent) {
parent = parent || document;
var elements = parent.getElementsByTagName('*');
var matching = [];
for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
if ((' ' + elements.className + ' ').indexOf(findClass) > -1) {
matching.push(elements);
}
}
return matching;
}
/**
* Deze functie geeft past de link aan; ...
*/
function addHash2Links (index) {
var prev = document.getElementById('prev_link');
var next = document.getElementById('next_link');
var prev_link = prev.href.split('#');
var next_link = next.href.split('#');
prev.href = prev_link[0] + '#' + index;
next.href = next_link[0] + '#' + index;
}
function readHash() {
var url = window.location.toString().split('#');
if (typeof url[1] != 'undefined' && Number(url[1]) > 0) {
// Er staat in de url iets na het # teken
var vakken = getElementsByClassName('vak');
CngClass(vakken[Number(url[1])]);
}
}
/**
* @see http://www.avoid.org/?p=78
*/
function hasClass(el, name) {
return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
}
function addClass(el, name) {
if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
}
function removeClass(el, name) {
if (hasClass(el, name)) {
el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
}
}
</script>
<style type="text/css">
.knop{
width:20px;
height:100px;
float:left;
}
#datumvak{
width:200px;
height:100px;
background-color:#09F;
float:left;
margin-left:5px;
margin-right:5px;
margin-bottom:0px;
}
.vak{
width:80px;
height:80px;
border:1px solid black;
margin:2px;
float:left;
}
.selected{
background-color:#FFF;
color:#000;
}
.deselected{
background-color:#F3F;
color:#FFF;
}
.link{
display:block;
padding:30px 10px 30px 20px;
}
a{
text-decoration:none;
}
</style>
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
<?php
if (isset($_GET['datum'])) {//variabele datum in URL
$datum = $_GET['datum'];
}
else{
$datum = date("Y-m-d",time());
}
if (isset($_GET['vak'])) {//variabele vak in URL
$vak = $_GET['vak'];
}
else{
$vak = 1;
}
$terug = date("Y-m-d",(strtotime($datum)-86400));
$vooruit = date("Y-m-d",(strtotime($datum)+86400));
?>
if (isset($_GET['datum'])) {//variabele datum in URL
$datum = $_GET['datum'];
}
else{
$datum = date("Y-m-d",time());
}
if (isset($_GET['vak'])) {//variabele vak in URL
$vak = $_GET['vak'];
}
else{
$vak = 1;
}
$terug = date("Y-m-d",(strtotime($datum)-86400));
$vooruit = date("Y-m-d",(strtotime($datum)+86400));
?>
</head>
<body onLoad="readHash();">
<a href="test4.php?datum=" id="prev_link"><input type="button" class="knop" value="<" /></a>
<div id="datumvak">
Code (php)
</div>
<a href="test4.php?datum=" id="next_link"><input type="button" class="knop" value=">" /></a>
<div class="vak selected" onClick="CngClass(this)";><a class="link" href="test4.php?datum=">vak 1</a></div>
<div class="vak deselected" onClick="CngClass(this)";><a class="link" href="test4.php?datum=">vak 2</a></div>
</body>
</html>