[JS] select box aanpassen

[ILUsion]

Ik ben al enkele dagen op zoek naar een oplossing voor dit probleem, maar spijtiggenoeg is mijn JavaScript en DOM-kennis heel beperkt.

Momenteel heb ik op mijn site een scriptje dat mijn CSS-stylesheet kan aanpassen door een stylesheet te selecteren in een select-element ("styleselect") in een form ("styleform"). Dat gedeelte gaat allemaal goed, dit wordt allemaal in een cookie weggeschreven zodat die instelling bewaard blijft. Het probleem is nu dat bij het forced refreshen of het veranderen van pagina de optie in die select box ook weer verandert naar de standaardwaarde zodat de stylesheet anders is dan de titel in de select box aangeeft. Concreet heb ik dus een stukje script nodig dat aan die select box wijsmaakt dat optie X geselecteerd is.

Hieronder staat de relevante code van die site, mocht je hieraan niet genoeg hebben, staat de volledige site op http://student.vub.ac.be/~egeerard/

HTML:

<link rel="stylesheet" type="text/css" href="css/dark1.css" media="screen, tv, projection" title="Dark"/>
 <link rel="alternate stylesheet" type="text/css" href="css/compactdark1.css" media="screen, tv, projection" title="Dark Compact"/>
 <link rel="alternate stylesheet" type="text/css" href="css/dark2.css" media="screen, tv, projection" title="Dark Alternate"/>
 <link rel="alternate stylesheet" type="text/css" href="css/light1.css" media="screen, tv, projection" title="Light" />
 <link rel="alternate stylesheet" type="text/css" href="css/oldterminal.css" media="screen, tv, projection, tty" title="Old Terminal" />
 <link rel="alternate stylesheet" type="text/css" href="css/badboy.css" media="screen, tv, projection" title="Bad Design" />
 <link rel="stylesheet" type="text/css" href="css/print.css" media="print" title="Printer"/>

<!-- ... -->

<div id="stylebox">
  <form id="styleform" style="text-align:left;">
Select CSS style:
  <select name="styleselect" size="1" id="styleselect"  onChange="setActiveStyleSheet(this.options[this.selectedIndex].value)">
<option value="Dark">Dark (default)</option>
<option value="Dark Alternate">Dark 2</option>
<option value="Light">Light</option>
<option value="Dark Compact">Dark Compact</option>
<option value="Old Terminal">Old Terminal</option>
<option value="Bad Design">Bad Design</option>
</select>
</form>
 </div>

JavaScript:

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getPreferredStyleSheet() {
  var i, a;
  if ((screen.width<=800) && (screen.height<=600))
  {
     return "Dark Compact"; 
  }
  else
  {
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

De extra code moet dus ook bij window.onload komen (of als function) en die select in de XHTML aanspreken zodat de browser in dat venstertje de juiste naam weergeeft bij de stylesheet. Ik hoop dat iemand me hierbij kan helpen (als wat ik wil mogelijk is, in ieder geval).

[Alex)]

JavaScript:

document.getElementById('styleselect').value = title;

Is dit niet genoeg?

[ILUsion]

Alex) schreef op donderdag 30 november 2006 @ 20:21:

JavaScript:

document.getElementById('styleselect').value = title;

Is dit niet genoeg?

Dat werkt inderdaad :-) Hartelijk bedankt ! (Zoals ik al zei ben ik echt geen held met JavaScript).

[frickY]

Je kunt met getElementById het select-form benaderen vanuit een javascript functie, welke je bijvoorbeeld op de window.onload laat lopen.
In de selectform.childNodes vind je alle opties van dat selectform. Hier kun je doorheen loopen met een for() loopje.
Per option kun je controleren of je hem wel of niet wilt aanzetten, door de option.selected op true te zetten.

Dus iets als

JavaScript:

window.onload = checkStyleselect;

function checkStyleselect() {
  var styleselect = document.getElementById('styleselect');
  var options = styleselect.childNodes;
  for(i = 0; i < options.length; i++) {
    option = options[i];
    option.selected = (option.value == readCookie("style"));
  }
}

//Edit
Een select-element heeft geen value. Dat dit door sommige browsers wel werkt zou je moeten zien als bug. Ik raad een constructie als bovenstaande aan om te garanderen dat het in meer browsers dan, en latere versies van, Internet Explorer ook werkt.

[ Voor 15% gewijzigd door frickY op 30-11-2006 20:37 ]

[ILUsion]

frickY schreef op donderdag 30 november 2006 @ 20:36:
Je kunt met getElementById het select-form benaderen vanuit een javascript functie, welke je bijvoorbeeld op de window.onload laat lopen.
In de selectform.childNodes vind je alle opties van dat selectform. Hier kun je doorheen loopen met een for() loopje.
Per option kun je controleren of je hem wel of niet wilt aanzetten, door de option.selected op true te zetten.

Dus iets als

JavaScript:

window.onload = checkStyleselect;

function checkStyleselect() {
  var styleselect = document.getElementById('styleselect');
  var options = styleselect.childNodes;
  for(i = 0; i < options.length; i++) {
    option = options[i];
    option.selected = (option.value == readCookie("style"));
  }
}

//Edit
Een select-element heeft geen value. Dat dit door sommige browsers wel werkt zou je moeten zien als bug. Ik raad een constructie als bovenstaande aan om te garanderen dat het in meer browsers dan, en latere versies van, Internet Explorer ook werkt.

Ik vertrouw er wel op dat je aanpak de meest correcte is, maar toch bots ik op een probleem. Die andere code werkt wel in IE7, Firefox 2 en Opera 9 maar jouw code werkt enkel in Firefox 2 en Opera 9, dus toch maar liever die meer simpele code. Een test op IE6 heb ik nog niet gedaan, maar die zal geen echt ander resultaat geven dan IE7 gok ik.

[Borizz]

ILUsion schreef op donderdag 30 november 2006 @ 20:58:
[...]


Ik vertrouw er wel op dat je aanpak de meest correcte is, maar toch bots ik op een probleem. Die andere code werkt wel in IE7, Firefox 2 en Opera 9 maar jouw code werkt enkel in Firefox 2 en Opera 9, dus toch maar liever die meer simpele code. Een test op IE6 heb ik nog niet gedaan, maar die zal geen echt ander resultaat geven dan IE7 gok ik.

Als je het als volgt doet moet het wel werken in IE (in ieder geval vanaf 6, de anderen heb ik het nooit in getest):

JavaScript:

function checkStyleselect() {
  var styleselect = document.getElementById('styleselect');
  var options = styleselect.options;
  for(i = 0; i < options.length; i++) {
    option = options[i];
    option.selected = (option.value == readCookie("style"));
  }
}

Ik zie bij het W3C HTML DOM Select Object trouwens dat het vanaf IE 4 hoort te werken .

[ILUsion]

Borizz schreef op donderdag 30 november 2006 @ 21:07:
[...]


Als je het als volgt doet moet het wel werken in IE (in ieder geval vanaf 6, de anderen heb ik het nooit in getest):

JavaScript:

function checkStyleselect() {
  var styleselect = document.getElementById('styleselect');
  var options = styleselect.options;
  for(i = 0; i < options.length; i++) {
    option = options[i];
    option.selected = (option.value == readCookie("style"));
  }
}

Ik zie bij het W3C HTML DOM Select Object trouwens dat het vanaf IE 4 hoort te werken .

Ja! Die werkt wel :-)

note to self: zal in het vervolg beter zoeken op W3Schools

[crisp]

Nu alleen nog een beetje aan performance denken:

JavaScript:

function checkStyleselect()
{
    var checkvalue = readCookie('style');
    var styleselect = document.getElementById('styleselect');
    var options = styleselect.options, i = options.length;
    while (i--)
    {
        if (options[i].value == checkvalue)
        {
            styleselect.selectedIndex = i;
            break;
        }
    }
}

[frickY]

nvm

@Grote prutser
Het gaat niet zozeer om het verschil tussen while en for, maar dat je nu slechts je i variabele hoeft uit te lezen, in plaats van steeds de length van je options.

[ Voor 187% gewijzigd door frickY op 30-11-2006 23:40 ]

[user109731]

@crisp: is een while nou echt merkbaar sneller dan een for, of is het meer een soort principe-kwestie? zomaar nieuwsgierig

offtopic:
leuk dat je een weblog heb nu, staan al wat interessante browserquirks op

@hierboven: heb je wel gelijk in, maar het kan ook zo dan:

JavaScript:

for(var i=options.length; i > 0; i--) { }

[ Voor 24% gewijzigd door user109731 op 30-11-2006 23:45 ]

[crisp]

Grote prutser schreef op donderdag 30 november 2006 @ 23:39:
@crisp: is een while nou echt merkbaar sneller dan een for, of is het meer een soort principe-kwestie? zomaar nieuwsgierig
[...]
@hierboven: heb je wel gelijk in, maar het kan ook zo dan:

JavaScript:

for(var i=options.length; i > 0; i--) { }

Een evaluate is sneller dan een comparison

offtopic:
leuk dat je een weblog heb nu, staan al wat interessante browserquirks op

offtopic:
een lezer \o/
ja, ik kon natuurlijk niet achterblijven en het is gewoon prettig om nu een centrale plek te hebben voor alle zaken die ik in mijn dagelijks leven tegenkom mbt webdevelopment. Expect a lot more posts very soon (voor de 'having fun with IE'-reeks heb ik sowieso voorlopig zat materiaal )

[ Voor 4% gewijzigd door crisp op 30-11-2006 23:54 ]

[sQuarecoW]

Uhm..

ik doe dit altijd zo:

PHP:

echo
'<select name="foo">
<option value="1"' , (isset($foo) && $foo== 1) : ' selected' : '' , '">1</option>
</select>';

Waarbij $foo uiteraard de waarde is die nodig is, in dit geval uit je cookie

Nix geen javascript..

[frickY]

En waar maak je uit op dat de topicstarten beschikt over PHP?
Zijn topic begint natuurlijk niet zonder reden met de [JS]-tag

[BtM909]

sQuarecoW schreef op vrijdag 01 december 2006 @ 09:37:
Uhm..

ik doe dit altijd zo:

PHP:

Waarbij $foo uiteraard de waarde is die nodig is, in dit geval uit je cookie

Nix geen javascript..

En de code van crisp doet het zo... Niks geen PHP..

Zoals je ziet, eigenlijk een drogreden