Dynamic User Preference Script

Just thought I'd say, nice script , just slotted it into a page I was working on nice and simple to install, well documented only a shame that the page I used already had some form elements in it and fieldset styling which mucked up the layout of the 'preference controls' but it seemed to work flawlessly otherwise.
It would be nice if the script were able to detect the original style defaults and set them in the 'options' to allow switching back to defaults rather than clearing the cookies, a minor point though and probably not possible.

Must try it out in IE5 and see how it performs. Excellent piece of work.

Hugo.

Thanks Hugo,
I shall look into the defaults options.

Glad you could get it working without any trouble.

Hi Hugo
I have modified the script to revert back to the original styles, if you select default from the select box.
It works by removing the last rule in the stylesheet that matches the selector and property. Then it removes it from the cookie and reloads from browser cache to show the changes.

It took less then an hour to get it working in Firefox and the rest of the day to get IE toeing the line. :roll:
It should still work in the same browsers as before.

How typical, read the hour in FF and thought " oh that wasn't much trouble then" and read on to see the rest of your day destroyed By IE :roll:
Pangs of guilt swept across me :oops:

Works though; much better to have the option to be able to switch back individual changes rather than have to clear all through cookies .

Hope it was worth the time spent, once again nice piece of script maestro

Hugo.

Yes it was worth the effort, the changes improve the script quite a bit.
The part that took the most time was finding a way to compare the rule in the stylesheet with the one to be removed. Like I mentioned before IE was being difficult.
Looking at it now, I could have saved much time, if I knew I would need to reload the page. All I needed to do was remove the style from the cookie and reload the page. So much simpler and very effective.

I'm going camping tonight and will fix up the script when I return.

Couple of observations Tony,

Came across a problem when running the script on an old style sheet that I hadn't set an overall font size in the body with and was just declaring fixed pixel widths as and where needed , the 'Controlled Choices' options would only adjust the font size where it had not been declared, the declared px on elements were overriding.

I thought to try the the universal selector to take control instead of writing it to the body selector but the only way I could get it to effect change on all elements was by writing

html body div * {font-size:x-large;}
and even then where I had set a font size on a class it wouldn't pick it up, specificity I guess.

I've found no problems where font-size is set in the body with % and ems or % used through the elements, as would be expected.

Also found an issue ( although it's more a css problem than the 'Preference script') with declaring a background color when grouping the html and body together

html, body {background:red;}

As both FF and IE displayed differing quirks esp with any sort of margining, wouldn't have normally occurred to me that it would be a problem until trying to change the background color to find FF/ IE arguing over how html and body exist, easily sorted by moving background to it's own body rule. it's less of a problem more of a quirky behavior and background should be declared on the body really

The font-sizing is perhaps more of an issue as it's common place to use px and to over declare them making it difficult to target them all and the controlled choices imply that an overall text size change will occur ( more fun for you perhaps )

Script appears to work fine in IE5.5 Win.

Hugo.

Hi Hugo,
I think the issue is just with specificity of the selector.
Your may be already kicking yourself for not thinking of that but I will attempt to explain for those that don't understand.

If you set the font size of an element lets say a paragraph for now to over-ride that rule you need to be more specific.
So you cant apply font-size to the body and expect it to override fonts-size set for p.
Because paragraphs are always children of body, assigning the font-size to p or a class of p would be more specific.
In the User Preference Script I chose to apply the styles to body as it's a generic element that every page has.

It's a bit like in my example where I change the background-color of the body, on my site it would work better if I applied it to divs or a subset of them.

I will try and add something about specificity to the article about the User Preference Script, which will be updated shortly.

I did understand why it was happening I was just trying to think of a way around the problem of people using px font declarations through the various elements and was thinking that maybe trying to write the control rule to something along the lines of the universal selector may work better, I for one tend to only use ems and % where it's not a problem.

Hugo.

Hi Hugo,
Oh well it's helped me improve the article.
I thought you had just overlooked specificity, it turns out I had overlooked absolute values.
You may have to add !important to the rules.

No I hadn't overlooked specificity but struggled to get a contextual order to cover all elements using the universal selector then found that it seemed impossible to include font-sizing on a class selector in that order without knowing it's name , but may have overlooked something Yes the 'important' rule may be the answer but is it that well supported ? do I not recall problems in IE with it ?

Hugo.

Hi Hugo,
Thanks for showing interest in this script.
!important seems pretty well supported in browsers after the Netscape 4 era.
Since Netscape 4 can't display the controls anyway it shouldn't be a problem.

I realise that I was being slightly thick as your script writes to the DOM and that writing to a selector wouldn't work unless it was there ?

I only mentioned the !important rule in regard to this piece

Hugo.

Hi Hugo,

I just retried the test page http://www.csscreator.com/attributes/tests/important.html which overrides color correctly.
With a little testing I found that if you apply the important to the same rule as the other style IE applies the last and ignores !important.p{color:red !important; color:blue;} In this case the paragraph text will be blue in IE and red in most other browsers.
But if you apply !important in a different rule as we are with the User Preference Script it works fine in IE.

p{color:red !important;}
p{color:blue;}

In this case the paragraph text will be red in IE and most other browsers.

Had a feeling that was the case , you had the patience to test it out

I should have done, then would have answered my own doubts :roll:

I shall trouble you no more with my inane ramblings .

Hugo.

Have implemented this on a test site (www.pecche.com), where I am attempting to convert an asp Portal (www.soopportal.org) to a tableless design ( I know, I know, should have had my head examined first ).

The switcher works beautifully and is full of possiblities, but a few of my users have noticed that an error message is generated when using IE. On checking it appears that the very same error is generated when loading a page containing the style switcher on your site here.

On surfing to your home page the following message is given

Problems with this web page may prevent it from being displayed properly...........................................

and the message refers to the following:

Line : 337
Char : 1
Error : Not implemented
Code: 0
URL : http://www.csscreator.com/

Any ideas ????

Once again a big thankyou for sharing this wonderful style switcher

Hi OLdTimer,
I found and fixed the error and have uploaded version 1.5 of the script.
The testVar function needed to check for false as well as null and undefined.

Tony,

Thankyou for sorting this little glitch out so quickly.

=D> =D> =D> =D> =D>

Yep Tonys no slouch

Hi -

so, is it possible to set more than one element with the dropdown or a selection with the User Preference script?

For Example:

"<option value= 'background-color:#00A' style='background-color:#00A; border-bottom: 1px solid #ffffff' >Blue</option>"+

where this selection would change, say, the background color of a table and the bottom border. is it possible to have more than one style or am I stuck just one style per dropdown?

Thanks!

King Snake

Hi kingsnake,
Yes it's possible, one way to do it is call a function that then sets the styles like I do here with the theme.

/* This function  simplify changing multiple styles such as a theme */  
function theme(thetheme){  
	var borcolour;  
	var bgcolour;  
	var litcolour;  
  
	switch (thetheme){  
		case 'camel':  
			borcolour='#C60';  
			bgcolour='#FC9';  
			litcolour='#FFC';  
		break;  
		case 'mint':  
			borcolour='#063';  
			bgcolour='#0C6';  
			litcolour='#9FC';  
		break;  
		case 'clear':  
			borcolour='clear';  
			bgcolour='clear';  
			litcolour='clear';  
		break;  
		  
	}  
	   
	addstyle("#rgh, .rgh, .whatsnew, .rghscroll, .rightbox, .forumline, .listdiv, .posttopic, .postfull, .postcont, .poster",  "border-color:"+borcolour+" !important");   
	addstyle("#lft, .box, .nonew, .new, .locked, .hot, .announce, .sticky, .blogging",  "border-color:"+borcolour+" !important");   
}

<label for='themea'>Theme:</label>"+  
		"<select name='themea' id='themea' "+   
		"onchange='theme(this.options[this.selectedIndex].value)'>"+  
		"<option value='clear' >Default</option>"+  
		"<option value= 'camel' style='background-color:#FC9' >Camel</option>"+  
		"<option value='mint' style='background-color:#0C6' >Mint</option>"+  
		"<option value='aqua' style='background-color:#099' >Aqua</option>"+  
		"</select>"+

Or even easier you could just add more selectors and styles to the options.

  
<label for='themea'>Theme:</label>"+  
		"<select name='themea' id='themea' "+   
		"onchange='addstyle(\"body, div, p, .anything\",this.options[this.selectedIndex].value)'>"+  
		"<option value='clear' >Default</option>"+  
		"<option value= 'width:20em; color:red; background-color:blue;'>Multi styles</option>"+	  
		"</select>"+

I left my example on the User Preference Page as simple as possible to lessen confusion.

Hope that helps

Ah!

Okay, I see what I need to do -- thanks a ton

King Snake

Hi Tony,

I use your style switcher on my personal website roberthilbe.com and I like it very much. It works almost perfect but there are still error messages in the new version when using IE 5.5 (the same messages described by OldTimer). Do you have an idea how this could be fixed?

Thanks a lot for your superb work!

Hi Robert,
IE is not easy to debug when you have JavaScript errors. :?
Specially when you have limited access to a windows box.

At the bottom of the script try changing

to:

/* on page load read and set the cookie styles */
window.onload=function(){
	iceCookie('userpref', '|');
}

Let me know how it goes and I will update the script for others.

Hi Tony,

Thanks a lot for your bug fixing. Now it works in IE 5.5 without any error warnings. What a nice way to start the day

Hi Robert,
Thanks for the update.
Glad we could get rid of the error.

Is it just on my Mac, or is there something in the latest version of Safari that stops the script from working?

No error messages - it just doesn't work.

10.3.8
Safari v1.2.4 (v125.12)

Hi snoogly,
I don't remember having any reports from other Safari users one way or the other, so It looks like it wont work in Safari.

Unfortunately I don't have Safari to test with so trying to figure out why it's not working is beyond me.

I have question about User Preference Script is that insted of going by Background, Font, Font-Size how about if u just "switch" a CSS file? like on select "Blue" call blue.css and within css file all the content and images will change automaticly with cookies system? plus if a user has no color selected let user use "Default". So, anyone can help me with this?

Hi MasumX,
Have a look at http://www.alistapart.com/articles/n4switch/ on style switching, I think it does what you want.

This script was designed to allow each property to be changed instead of switching style sheets.

Hello and thank you. I just came accross this site and forum searching for a user preference script and found this one. I love it! I have two questions about modifying. I changed the drop down to links like this:

"<a href=\"#\" onclick=\"addstyle('body', 'background-color:#00A', '')\">Blue</a>"+
        "<a href=\"#\" onclick=\"addstyle('body', 'background-color:#fff', '')\"> White</a>"+
        "<a href=\"#\" onclick=\"addstyle('body', 'background-color:clear', '')\"> default</a>"+

But instead of a text link I would like to use GIF images. Can someone show me where I can include the image within the code?

Second question is how can I get the labels (change font size, change background color, etc) to appear under each other rather than next to each other.

Hi darrylo,

Add an image tag in the link like "<a href=\"#\" onclick=\"addstyle('body', 'background-color:#00A', '')\"><img src='myimage.gif' width='10' height='10' alt='blue' /></a>"+

Hope that helps

Thank you Tony!

Perfect. I just needed to add: img border='0' and I'm wondering if there is a way to indicate the no border preference somewhere once intead of on each link specifically.

Also can you tell me how to indicate a line break on the .js file? All the choices (back ground color, font size etc) are showing accross a single line and I want them to display below each other.

Perfect. I just needed to add: img border='0' and I'm wondering if there is a way to indicate the no border preference somewhere once intead of on each link specifically.

Stick this in the CSS:

img {border: 0; }

I cut 'n pasted the code into a file with the same name as the example, called it in the header, changed the display preference to look like this:

		"<form id='userpref' name='userpref'>"+
 		"<a href=\"#\" onclick=\"addstyle('#main,#text_breadcrumbs', 'font-size:clear', '')\"><img src=\"/images/change_font_small.gif\" height=\"20\" width=\"20\" /></a>&nbsp;"+
 		"<a href=\"#\" onclick=\"addstyle('#main,#text_breadcrumbs', 'font-size:1.25em', '')\"><img src=\"/images/change_font_medium.gif\" height=\"20\" width=\"20\" /></a>&nbsp;"+
		"<a href=\"#\" onclick=\"addstyle('#main,#text_breadcrumbs', 'font-size:1.45em', '')\"><img src=\"/images/change_font_large.gif\" height=\"20\" width=\"20\" /></a>"+				
		"</form>"

I put the display code in the body, and everything is just lovely! Minus one little thing...once I make the text larger and then click on another page of the site the text goes back to the default size (yes I have the code on all pages). Did I do something in the preference control function to cause that or...? Please help.

Thank you,

Erica

Could be a cookie issue.

Hello

Love the selector thing it has provided a suitable solution to most of my target accessibility criteria.

Am encountering a slight problem though. I am using the selector alongside a style switcher script. However the selector will only apply changes to the default style sheet.

Any sugesstions?

Also, how can i edit the selector to change the display property of a div id?

Any help very appreciated!!

Hi lemonhead,
The rules are written to the end of the first style sheet, so if you switch styles you need to target a different style sheet.

Look for this line:

and change it so that it picks up the active style sheet.

Thanks will give that a try.

I am testing your solution for allowing users to change certain aspects of my website. It provided exactly what I wanted to achieve, great! During testing, I only allowed a change in font size (keep it simple). I found a few minor things:

initial creation of the page with default and than a render with the correct font-size. The delay is noticable e.g. in the form and a "screen flicker".

Do need to reload to ensure the cookie is read by al subsequent pages? This does not allows happen in my case ...

Are both these points normal or have I messed up somewhere?

Using FF 1.5 (Linux)

Hi jojedo,
It was about One and a half years ago I put this script together, so please forgive me if I don't remember the details.

The page may flicker as the style changes are applied.

You should not need to reload to get the cookies on other pages but you will need to have the script added to those pages.

Hope that helps

Tanks for the fast reply, has this "flicker" been mentioned by others? I could not find it in here :?

Seems a long time since somebody has bothered you about the script

Hi jojedo,
As the browser re-renders the page to apply the new/changed styles there may be flicker.
If you are concerned about it post a link so others can have a look and see how bad it is.

Thanks Hugo,

I will do so and give a "shout" when it's ready for your review.

:?

:oops:
Sorry about the name!!!

I have the preferences.js built into the site again:

http://www.jojedo.nl/

When testing I noted that I occasionally need to reload to ensure all pages use the font. Also the rendering is sometimes slow resulting in "flicker".

Could you please have a look, Tony?

Hi jojedo,
a couple of things could be causing problems.
The site reverts to an ip address, cookies usually are only valid for the domain. I'm not really a cookie expert but a little searching may help yo find out if this is an issue.

The preference script is applied after the page loads, on some pages there are a lot of items to load before the script can activate.

You also have other scripts writing cookies, maybe one of them is conflicting somehow.

Sorry I can't be more specific.

Tony is correct about cookies and domains, and also about how much 'stuff' is having to be processed by the poor browser with each page load. Heavy use of JS comes with a penalty - especially for those with older pooters!

Guys,

Thanks for your assistance and pointers to possible solutions. I am working on the issue with IP address and domain name - hope to have it solved in a few days (DNS problem).

As far as other cookies is concerned, my site should not create any other cookies ... strange that you did find these. AH well, I am off hunting this down as well

Keep you posted!

The problem with the domain name and IP address should solved by now ... depending on the speed of propagation of the DNS data.

I have not been able to trace the other cookies but one you saw coming from my wedsite. I have my own server and just one of the files use cookies as well: to trace web usage but I can see no conflict. If you have any suggestion, I'd be grateful

Roytheboy mentioned heavy use of JS (perhaps in general?). I use JS for tracking, the user prefs, to hide a mail address and allow the user to move a page back/forward. Certainly the latter two may be possibly be replaced by alternatives but I have not found such a solution yet. Ideas are certainly welcome!

The main problem is likely to be the many links and images even though I tried to minimise total page size (in kb) ... got to think about that when designing my next site.

I have at least 3 cookies
userpref, AWSESSION_ID and AWSUSER_ID

Have a look in firefox under edit > preferences >privacy >cookies > view cookies