Hi all, how, using asp, can i make a form menu change the style sheet loaded, when it is clicked on, then refresh and page, and create a cookie which tells the browser which style sheet to load for that user when they next enter the website?

Thanks,

Max.

Recommended Answers

All 13 Replies

Put something like this in the head of every page: (note: you only really need the bold part in the code of the page with the form/that changes the cookie)

<%
var style = new String(Request.Cookies('style'));
if(style==null || style=='undefined'){
  [B]style = new String(Request.Forms('style'));
  if(style==null || [/B][B]style=='undefined'){[/B]
   style="default";
  [B]}else{
   Response.Cookies('style') = style;
  }[/B]
}
%>
<link rel="stylesheet" type="text/css" href="/styles/style_<%Response.write(style)%>.css"/>

I can't really test that atall; I can't run ASP anywhere.

The principle will work but some of the keywords words might be wrong... (is it Form or Forms?/Cookie or Cookies?) Also; it's not very secure or input-safe. A better way would be to use a keyword/enumeration in the cookie and form, and set the style variable to one of a list of the only allowable values.

For that code to work you'll need to set Javascript as the script language.
(put this line before the code)

<%@ LANGUAGE="JAVASCRIPT" %>

It'd almost be the same with VBScript; although I don't know how you'd test for a null string...

wow brilliant thanks! most people just put waffly replies with no real direction or instructions for newbies but urs was perfect! :D and thanks for the fast response! :cheesy: ill test it tomrrow its kidna late now so if any problems come up ill give u a buzz :D thanks a lot,

Max Mumford.

Hi, I have just tested it and there is one error. im not entirely sure what it is so go here to see the script in action.

http://grafax.co.uk/switch/

Below is the script for the page.

<%@ LANGUAGE="JAVASCRIPT"
var style = new String(Request.Cookies('style'));
if(style==null || style=='undefined'){
  style = new String(Request.Forms('style'));
  if(style==null || style=='undefined'){
   style="default";
  }else{
   Response.Cookies('style') = style;
  }
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<link rel="stylesheet" type="text/css" href="/styles/style_<%Response.write(style)%>.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <select name="style" id="style">
    <option value="styles.css" selected="selected">1</option>
    <option value="styles2.css">2</option>
  </select>
</form>
</body>
</html>

Ah; sorry. These two blocks shouldn't be combined:

<%@ LANGUAGE="JAVASCRIPT" %>

<% var style = new String(Request.Cookies('style'));
if(style==null || style=='undefined'){
  style = new String(Request.Forms('style'));
  if(style==null || style=='undefined'){
   style="default";
  }else{
   Response.Cookies('style') = style;
  }
}
%>

You'll probably hit more errors now ^_-

The whole problem is that they won't keep things compatible.

We HAD a system where most web code was compatible. But then the elitists pounced, and decided that web code had to be more "elegant." Now we have a bifurcation between the newest browsers and the old ones.

There should be either a criminal penalty for introducing incompatibilities into a system that already works, or the person who introduced the incompatiblity should be forced to pay for the upgrade for everyone in the world.

The whole problem is that they won't keep things compatible.

We HAD a system where most web code was compatible. But then the elitists pounced, and decided that web code had to be more "elegant." Now we have a bifurcation between the newest browsers and the old ones.

There should be either a criminal penalty for introducing incompatibilities into a system that already works, or the person who introduced the incompatiblity should be forced to pay for the upgrade for everyone in the world.

Has that got absolutely anything to do with this post, or did you intend it (the reply) to go elsewhere?

But anyway, assuming this is meant here:

ASP code will always be self-compatible because it doesn't matter how old a version of ASP you have on your server. ASP spits out HTML; and it can be as up-to-date or back-in-time as you (as the developer) so choses, If you update your ASP version, you only affect yourself.

Still not working :/ i have one stylesheet called styles.css which should be the default style sheet, i have another called styles2.css which is an alternate one. Is the code ok for that? Max

(new code..)

<%@ LANGUAGE="JAVASCRIPT" %>
<% var style = new String(Request.Cookies('style'));
if(style==null || style=='undefined'){
  style = new String(Request.Forms('style'));
  if(style==null || style=='undefined'){
   style="default";
  }else{
   Response.Cookies('style') = style;
  }
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<link rel="stylesheet" type="text/css" href="/styles/style_<%Response.write(style)%>.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <select name="style" id="style">
      <option value="styles.css" selected="selected">1</option>
      <option value="styles2.css">2</option>
    </select>
</p>
  <p>
    <input type="submit" name="Submit" value="Submit" />
</p>
</form>
<p>&nbsp;</p>
<h1>test heading1 set only in style.css (origional style) </h1>
</body>
</html>

do i need anything in the form action section? at the moment i have a submit button and thats all..

href="/styles/style_<%Response.write(style)%>.css"

This bit means it will be looking in the /styles/ folder for a file called style_[X].css, where [X] is the value submitted in the field named 'style' from the form/cookie.

I think there's a problem with the null-string checking aswell; in the two places where it says style=='undefined' try: style==''; so:

if(style==null || [B]style==''[/B]){
  style = new String(Request.Forms('style'));
  if(style==null || [B]style==''[/B]){
   style="default";
  }else{
   Response.Cookies('style') = style;
  }
}

current code:

<%@ LANGUAGE="JAVASCRIPT" %>
<% var style = new String(Request.Cookies('style'));
if(style==null || style==''){
  style = new String(Request.Form('style'));
  if(style==null || style==''){
   style="default";
  }else{
   Response.Cookies('style') = style;
  }
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<link rel="stylesheet" type="text/css" href="style_<%Response.write(style)%>.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <select name="style" id="style">
      <option value="1" selected="selected">1</option>
      <option value="2">2</option>
    </select>
</p>
  <p>
    <input type="submit" name="Submit" value="Submit" />
</p>
</form>
<p>&nbsp;</p>
<h1>test heading1 set only in styles.css (origional style) </h1>
</body>
</html>

2 style sheets and page:

page: http://grafax.co.uk/switch/
style1: http://grafax.co.uk/switch/style_1.css
style2: http://grafax.co.uk/switch/style_2.css

somthing is still going wrong but im not sure. i understand a little of the asp code but not much.

Thanks for all your help by the way!

Oops; the problem is that that code is self-restricting.

Any value in the cookie overrides the value from the form; so, once you submit once, you can't submit again.

Corrected part: (ASP only)

<%@ LANGUAGE="JAVASCRIPT" %>
<% var style = new String(Request.[B]Form[/B]('style'));
if(style==null || style==''){
  style = new String(Request.[B]Cookies[/B]('style'));
  if(style==null || style==''){
   style="default";
  }
}[B]else{
   Response.Cookies('style') = style;
}[/B]
%>

Seems like a minor thing, but it'll make all the difference =P

yay it works!! the only thing is the cookie isnt working. i have added a second page to the folder and the 2 pages link to eachother so as to test the asp cookie however its not working. Also, how do you make the default style sheet be styles_1.css? Thanks,

Max

hmmm, i had a quick visit to your page (from that link) with cookies cleared and cookie notifications switched on. The first event is a request to set the style cookie to 'undefined':

This page wishes to set the cookie
   style="undefined"

This value will only be sent to documents on the server grafax.co.uk, and paths that are starting in /.

The cookie will be deleted when Opera is closed.
----------------------
Full cookie request:

style=undefined; path=/

So, that means the if(style==null || style='undefined') checks were probably correct... it's a bit weird that O_o. Go with a full test just in case:

<%@ LANGUAGE="JAVASCRIPT" %>
<% var style = new String(Request.Form('style'));
if(style==null || style=='undefined' || style==''){
  style = new String(Request.Cookies('style'));
  if(style==null || style=='undefined' || style==''){
   style="1";
  }
}else{
   Response.Cookies('style') = style;
}
%>

the line in blue is where you should define the default stylesheet's filename suffix, so a '1' will make the default sheet /styles/style_1.css.

Yay it works!

2 more things.. how do you make it so when you select a new style sheet for the pages it goes there automatically when you press it, rather than having to press the submit button?

Also, how can i make it so the selected option is the style sheet being used? for example, if style sheet 2 was being used, option 2 in the menu would be selected?


Thanks,

Max

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.