run functies op pagina load/refresh
Ik heb een vraag omtrent het volgende:
Klik
Wat deze pagina doet is duidelijk als je even wat veranderd in de form.
Nu vroeg ik mij af of ik een standaard tekst in het veld kan zetten, en de waarden die al geselecteerd zijn (standaard zijn dat: arial,zwart,zwart) ook al kan laten zien.
In sommige browsers resetten de <select>'s zich en andere (zoals firefox) niet. Deze houd dan de laatst ingevoerde waarde. Maar hij springt wel naar de standaard stijl.
Dus als ik groen heb geselecteerd (waar maakt niet uit) en ik ververs de pagina, blijft de select op groen staan, terwijl het voorbeeldvak weer naar standaard springt.
Maw, is er een manier waarop ik de functies kan uitvoeren als ik a) de pagina open en b) de pagina ververs.
(ik zal waarschijnlijk ool de onChange events moeten veranderen/uitbreiden, aangezien deze niet van toepassing zijn als ik ververs of laad.)
Andre Sep op 11/10/2012 13:45:47:
... Dus als ik groen heb geselecteerd (waar maakt niet uit) en ik ververs de pagina, blijft de select op groen staan, ...
Wel, dat verversen maakt het wat lastiger.
Mocht er een submit knop zijn, zou de gebruiker het formulier kunnen versturen, an kan je alles opvangen in php; maar die <form onsubmit="return false;"> doet me denken dat je dit niet wil.
De server heeft geen weet van wat de gebruiker doet met zijn formulieren.
En, zoals je zegt, als een pagina ververst wordt, is javascript al zijn data kwijt.
Drie mogelijkheden komen nu spontaan in me op.
1) Cookies: je zorgt er voor dat die javascript-functies cookies aanmaken. Bij het verversen van de pagina worden die cookies meegestuurd naar de server
2) Ajax: je zorgt er voor dat die javascript-functies telkens hun waarde naar de server sturen, achter de rug van de gebruiker (Asynchroon).
3) variabelen in de url, na de #:
Je zou je javascript-funcionaliteit afhankelijk kunnen maken van de url.
Stel, de gebruiker heeft in zijn url:
seppweb.nl/javascript/#Times New Roman/999/00F
Javascript kan het deel achter de # lezen; en nog belangrijker: javascript kan die waarde aanpassen zonder dat de pagina wordt ververst.
Bij het verversen blijven die waarden in de url staan. Dus als javascript bij het laden van de pagina die waarden leest en de juiste maatregelen neemt, is je probleem opgelost.
Interesse in die laatste oplossing? Of liever oplossing 2? Oplossing 1 is misschien iets minder interessant.
-----------
Update
Ik heb optie 3 eens wat uitgewerkt.
Het enige wat je in de HTML moet aanpassen, is
<body onload="readHash();">
en eventueel
<option value="'Times New Roman'">times</option>
Moeten die ' daar echt? Ik zou ze weglaten; hoewel ik denk dat er rekening mee is gehouden.
En dan
changeExample.js
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
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
// JavaScript Document
/**
* Deze functie leest de url, rechts van de #. Aan de hand van die waarden worden de juiste functies aangesproken
*/
function readHash() {
var hash = window.location.hash.substr(1);
var variables = hash.split('/'); // komt overeen met php explode
if (variables.length == 4) {
changeFF(variables[0], true);
changeFC('#' + variables[1], true);
changeBGC('#' + variables[2], true);
changeINP(variables[3], true);
}
}
function setHash() {
window.location = '#'
+ document.getElementById("FF").value + '/'
+ document.getElementById("FC").value.substr(1) + '/'
+ document.getElementById("BGC").value.substr(1) + '/'
+ escape(document.getElementById("INP").value);
// die .substr(1) kapt het #-teken weg van de kleuren. We willen dat teken niet meer in de url zien. Bij readHash worden ze terug gezet.
}
function changeINP(thisValue, calledByFunction) {
if (typeof calledByFunction != 'undefined') {
document.getElementById("INP").value = unescape(thisValue);
}
document.getElementById("Preview").innerHTML = document.getElementById("INP").value;
setHash();
}
function changeFF(thisValue, calledByFunction) {
var pre = document.getElementById('Preview');
pre.style.fontFamily = thisValue;
setHash();
if (typeof calledByFunction != 'undefined') {
document.getElementById("FF").value = thisValue;
}
}
function changeFC(thisValue, calledByFunction) {
var pre = document.getElementById('Preview');
pre.style.color = thisValue;
setHash();
if (typeof calledByFunction != 'undefined') {
document.getElementById("FC").value = thisValue;
}
}
function changeBGC(thisValue, calledByFunction) {
var pre = document.getElementById('Preview');
pre.style.backgroundColor = thisValue;
setHash();
if (typeof calledByFunction != 'undefined') {
document.getElementById("BGC").value = thisValue;
}
}
/**
* Deze functie leest de url, rechts van de #. Aan de hand van die waarden worden de juiste functies aangesproken
*/
function readHash() {
var hash = window.location.hash.substr(1);
var variables = hash.split('/'); // komt overeen met php explode
if (variables.length == 4) {
changeFF(variables[0], true);
changeFC('#' + variables[1], true);
changeBGC('#' + variables[2], true);
changeINP(variables[3], true);
}
}
function setHash() {
window.location = '#'
+ document.getElementById("FF").value + '/'
+ document.getElementById("FC").value.substr(1) + '/'
+ document.getElementById("BGC").value.substr(1) + '/'
+ escape(document.getElementById("INP").value);
// die .substr(1) kapt het #-teken weg van de kleuren. We willen dat teken niet meer in de url zien. Bij readHash worden ze terug gezet.
}
function changeINP(thisValue, calledByFunction) {
if (typeof calledByFunction != 'undefined') {
document.getElementById("INP").value = unescape(thisValue);
}
document.getElementById("Preview").innerHTML = document.getElementById("INP").value;
setHash();
}
function changeFF(thisValue, calledByFunction) {
var pre = document.getElementById('Preview');
pre.style.fontFamily = thisValue;
setHash();
if (typeof calledByFunction != 'undefined') {
document.getElementById("FF").value = thisValue;
}
}
function changeFC(thisValue, calledByFunction) {
var pre = document.getElementById('Preview');
pre.style.color = thisValue;
setHash();
if (typeof calledByFunction != 'undefined') {
document.getElementById("FC").value = thisValue;
}
}
function changeBGC(thisValue, calledByFunction) {
var pre = document.getElementById('Preview');
pre.style.backgroundColor = thisValue;
setHash();
if (typeof calledByFunction != 'undefined') {
document.getElementById("BGC").value = thisValue;
}
}
Gewijzigd op 11/10/2012 19:02:56 door Kris Peeters