Cookie + querystring

[Motabobo]

Hi !

Take a look at the dhtml menu here :
DHTML menu v.4 (http://webfx.eae.net/dhtml/dhtmlmenu4/iemenustructure.html)

My question is javascript related. How could i store which skin the user has chosen within a cookie.

Also, how could i get the drop-down to refresh itself accordingly to what the user has chosen ??? Right-now it stays always at Windows Classic.

Thanks !

[Jona]

You can use onChange="location.href=location.href+'?style=Windows_Classic" and parse it via JavaScript...

Jona

[Motabobo]

In plain english ?? :confused:

Also wouldn't i have to attach it to the submit event ???

[Jona]

Yes, you would probably have to do that onSubmit of the form. Basically what you want to do is change the current location to add a query string to be parsed by the Javascript. Then you want to extract the variable "style" and get its value (Windows_Classic in this case). Then you want to run a certain function, depending on which selection was made. You would execute this function onload because your are using a form and a query string (which, when changed, reloads the page).

Jona

[Motabobo]

Yes.

The value of the skin is already in the querystring (because the page reloads itself), all i want is using the onload tag, change the value of the select (drop-down) depending on what is in the querystring.

How do i do that + i'd like to write that value in a cookie !

[Jona]

Why not use server-side to set a cookie and Javascript to read it?

Originally posed by rouxjean
...using the onload tag...

You mean onload event of the body tag? ;)

Jona

[Motabobo]

I tried ASP but for some reasons there is a timing conflict between the time the browser reads the cookie, set the correct css and then draw the menubar :(

So i figured out that it'd be "easier" to do it in javascript (lol)

Any idea ?

[Jona]

Yes. The query string should actually just have a number after it so that we can simply get the index of the right option to select.


if(location.href.indexOf("?") != -1){
var result = location.href.split("?");
document.forms[0].selectBoxName.options[document.forms[0].selectBoxName.options[result]].selected = true;
}else{return;}
}


The above function should be onload of the BODY tag. And you should use the following onChange in your select tag:


onChange="location.href+='?'+this.options[this.options.selectedIndex].index;"


Jona

[Jona]

I've taken better look at the code, and I think you can just add this in the getQueryString() function right before the line: return a[1];


var zbinxki;
switch(a[1]){
case "windowsClassic.css": zbinxki = 0;
case "windowsXP.css": zbinxki = 1;
//continue to add casses until you have all of the CSS files there
document.getElementById("cssSelect").selectedIndex = zbinxki;


Jona

[Motabobo]

I'll give it a try at work and tell you if that works :-)

[Motabobo]

That doesn't work :(

It says it needs a "}" on line 56...(it is not even in the getQueryString() function ! The line is where i write the css :

document.write("<link type=\"text/css\" rel=\"StyleSheet\" href=\"" + cssFile + "\" />" );

Then it says that the variable cssFile is undefined and now i cannot write my menubar anymore.

Any idea ?

The complete code i was using is :
<script type="text/javascript">
function getQueryString( sProp ) {
var re = new RegExp( sProp + "=([^\\&]*)", "i" );
var a = re.exec( document.location.search );
if ( a == null )
return "";
var zbinxki;
switch(a[1]){
case "winclassic.css": zbinxki = 3;
case "winxp.css": zbinxki = 1;
case "office.css": zbinxki = 2;
case "officexp.css": zbinxki = 0;
case "qnx.css": zbinxki = 4;
//continue to add casses until you have all of the CSS files there
document.getElementById("cssSelect").selectedIndex = zbinxki;

return a[1];
};
function changeCssFile( sCssFile ) {
var loc = String(document.location);
var search = document.location.search;
if ( search != "" )
loc = loc.replace( search, "" );
loc = loc + "?css=" + sCssFile;
document.location.replace( loc );
}
var cssFile = getQueryString( "css" );
if ( cssFile == "" )
cssFile = "skins/officexp.css";

document.write("<link type=\"text/css\" rel=\"StyleSheet\" href=\"" + cssFile + "\" />" );

I even tried writing the onload function and changing the onsubmit script but that doesn't work either, it gives the same kind of errors.

Thanks !

[Jona]

At the end of the function, your last bracket has a semi-colon on it. Take that off and try again. Then update your online link so I can see what you have.

Jona