I like DHTML, as you may have guessed looking at so of the toys I have created in the past, Original CSS Creator and CSS Layout Generator
After a bit of playing around and experimentation I have come up with a Dynamic User Preference Script.
The script that can easily be added to any site and most likely will be added to this one sometime over the next couple off weeks.
For now the Dynamic User Preference Script is available for testing use and comment.
It would be especially useful to here which browsers it actually works in and any comment or suggestion on how to improve it.
So far I have tested it in:
IE6 windows - works
Firefox 1.0 linux - works
Epiphany 1.4.4 - works
Mozilla 1.7.3 linux - works
Opera 7.54 Linux - degrades correctly ( no controls show)
konqueror 3.3.1 - displays controls but fails to apply styles( may be able to work on this).
In theory it should work in IE4 and greater on windows and Mac.
I have no idea about Safari at this stage.
So if you have access to one of the that I haven't been able to test in give it a try and let us know the results.
Dynamic User Preference Script
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.
Dynamic User Preference Script
Thanks Hugo,
I shall look into the defaults options.
Glad you could get it working without any trouble.
version1.1
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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
Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:
margin-top: 3.5em !important; margin-top: 2em
So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.
Hugo.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
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
Dynamic User Preference Script
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.
Dynamic User Preference Script
Tony,
Thankyou for sorting this little glitch out so quickly.
=D> =D> =D> =D> =D>
Dynamic User Preference Script
Yep Tonys no slouch
User Pref CSS question
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
Dynamic User Preference Script
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
code
Ah!
Okay, I see what I need to do -- thanks a ton
King Snake
Dynamic User Preference Script
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!
Dynamic User Preference Script
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
/* on page load read and set the cookie styles */
window.onload=iceCookie('userpref', '|');
/* 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.
Dynamic User Preference Script
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
Dynamic User Preference Script
Hi Robert,
Thanks for the update.
Glad we could get rid of the error.
Safari?
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)
Dynamic User Preference Script
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.
Dynamic User Preference Script
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?
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Dynamic User Preference Script
Hi darrylo,
"<a href=\"#\" onclick=\"addstyle('body', 'background-color:#00A', '')\">Blue</a>"+
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
Dynamic User Preference Script
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.
Dynamic User Preference Script
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.
Stick this in the CSS:
img {border: 0; }
Dynamic User Preference Script
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> "+ "<a href=\"#\" onclick=\"addstyle('#main,#text_breadcrumbs', 'font-size:1.25em', '')\"><img src=\"/images/change_font_medium.gif\" height=\"20\" width=\"20\" /></a> "+ "<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
Dynamic User Preference Script
Could be a cookie issue.
Dynamic User Preference Script
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!!
Dynamic User Preference Script
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:
ssheet=(document.styleSheets.length==0)? document.createStyleSheet(): document.styleSheets[0];
and change it so that it picks up the active style sheet.
Dynamic User Preference Script
Thanks will give that a try.
Loading dealy when using prefences.js
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)
Dynamic User Preference Script
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
Dynamic User Preference Script
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.
Seems a long time since somebody has bothered you about the script
Dynamic User Preference 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.
Dynamic User Preference Script
Thanks Hugo,
I will do so and give a "shout" when it's ready for your review.
Dynamic User Preference Script
Thanks Hugo
:?
Dynamic User Preference Script
:oops:
Sorry about the name!!!
I have the preferences.js built into the site again:
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?
Dynamic User Preference Script
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.
Dynamic User Preference Script
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!
Dynamic User Preference Script
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!
Dynamic User Preference Script
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.
Dynamic User Preference Script
I have at least 3 cookies
userpref, AWSESSION_ID and AWSUSER_ID
Have a look in firefox under edit > preferences >privacy >cookies > view cookies