anyone an idea why :: Style Sheet Switcher (v1.1) isnīt working on SAFARI since the Update 5.1 ???
other browsers are working fine...
tested versions: IE 9.0, FF 6.0, Safari 5.0, Opera 11.0
Printable View
anyone an idea why :: Style Sheet Switcher (v1.1) isnīt working on SAFARI since the Update 5.1 ???
other browsers are working fine...
tested versions: IE 9.0, FF 6.0, Safari 5.0, Opera 11.0
It appears Safari 5.1 either cannot set a stylesheet's disabled property to false once it has been set to true and/or that it doesn't follow the standard for alternate stylesheets, or that standard doesn't require it to execute this script as expected.
In any case, this update seems to fix it without harming others:
Attachment 4030
Demo:
http://home.comcast.net/~jscheuer1/side/style_switch/
Perfect! Works fine... thx :)
I'm getting reports from folks with Macs that this fix doesn't work at all for them. So far reporting in: Safari 5.1 and Safari 5.0.6.
and this be the website I'm using it on - using the randomize option.
http://www.sacredfools.org
That's right. This mod was for the non random use of the script. Using (in styleswitch.js):
as I see you have, changes things.Code:var manual_or_random="random" //"manual" or "random"
var randomsetting="eachtime" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
To fix it for that, find this line (around line #56 in the script):
Change it to:Code:altsheets[randomnumber].disabled=false
Code:setStylesheet(altsheets[randomnumber].title);
Thank you! Now to wait for m'friends with Macs to wake up and test it. :)
Hmmmm... no luck, apparently. I at first tried your change in the modified script, which just caused the whole site to hang. I then tried the change in the original script, but it had no effect for the Safari 5 folks.
It would have no effect upon the original script. However, the latest update works fine here:
http://home.comcast.net/~jscheuer1/s...m_eachtime.htm
But I see that inserting it's code into your page does in fact cause an endless loop for some reason. Probably due to other scripts on the page. But it might be something else. I'll see if I can figure it out. I'll let you know either way.
But we're in the midst of a serious hurricane here and may lose power. If we do, it may be out for some time. So it might be awhile before you see anything more from me on this.
That didn't take long. Um any reason why the page flies in the face of standards by having stylesheet links in the body?
Anyways, it's a combination of that and what the updated script does that causes the endless loop.
Unless you're willing and able to rectify that, use this version:
Code://Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm
//Unofficial Update to fix Safari 5.1 glitch re: alternate stylesheets or the disabled property in regards to them
// See: http://www.dynamicdrive.com/forums/showthread.php?p=259199 for more info
// IMPORTANT //
//This version appends to the body instead of the head and is not recommended for general use!
var manual_or_random="random" //"manual" or "random"
var randomsetting="eachtime" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
//////No need to edit beyond here//////////////
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""];
if(setStylesheet.chosen)
try{
document.body.removeChild(setStylesheet.chosen);
}catch(e){}
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title){ //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
setStylesheet.chosen = document.createElement('link');//cloneNode(false);
setStylesheet.chosen.rel = 'stylesheet';
setStylesheet.chosen.type = 'text/css';
if(cacheobj.media)
setStylesheet.chosen.media = cacheobj.media;
setStylesheet.chosen.href = cacheobj.href;
document.body.appendChild(setStylesheet.chosen);
}
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
setStylesheet((selectedtitle = altsheets[randomnumber].title));
//altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}
function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else{ //else if it's a radio button
element[i].checked=true
}
break
}
}
}
}
if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
Thank you for this! (Again, I check at night and won't know if it succeeded until tomorrow.) I really appreciate you working on this, especially since I turned out to be a special case, and ESPECIALLY in the midst of the hurricane! I hope you're taking care and all is well!
The stylesheets need to be where they are because (deep breath, this is long and boring, I don't blame you if you don't read it) I inherited a legacy website with literally hundreds of pages going back to 1999. I'm a volunteer and not a professional webmaster, and have learned slowly over the years mostly by googling for info. When I took over in 2004, the site was already five years old - and in frames. I knew no CSS, just simple HTML. About 4 1/2 years ago, we did a redesign that took the site out of frames, and as this isn't a PHP-based site, the easiest thing to do to embed the menu across the site was to add it from a single file via server-side includes. The logical place for that, of course, is in the body (though I screwed up with some of the archival pages and put it in the head, geesh - but that's okay because the archival pages don't use the style switcher). It was a long, arduous job to insert the SSI code on every page and reupload all the HTML files on the site and I'm hoping to never do it again. (Yes, a text replacer was involved, but there was still a lot of manual checking to do.)
Anyway, we just redesigned again, and the new design is fixed-width rather than relative-width. So I created a menu with a plain-vanilla default style for the archival pages, which would then need to be overwritten with another style for the new root pages. I placed the default style at the top of the new menu file, and then, in the new root pages, placed another SSI with all the root-page stylesheets and the stylesheet switcher directly after it, because of course those styles needed to follow and supercede the default. Nice 'n' easy and it seemed to work. And does, other than the havoc its played in Safari 5 for Mac!
Turns out the hurricane wasn't nearly as severe, at least not in my immediate area as the government and news were saying. But we're not out of the woods. As they begin cleanup, we may still lose power as they work on restoring it to others. That's happened before with lesser storms.
Well, the script should work. I tested it on a local mockup of the page. The only problem was that it wasn't as fast as I'd like. The best way to fix that would be to organize the page properly, with all the stylesheet links in the head followed immediately by the script tag.
But this version seems to speed things up a bit. It moves the links to the head:
Code://Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm
//Unofficial Update to fix Safari 5.1 glitch re: alternate stylesheets or the disabled property in regards to them
// See: http://www.dynamicdrive.com/forums/showthread.php?p=259199 for more info
var manual_or_random="random" //"manual" or "random"
var randomsetting="eachtime" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
//////No need to edit beyond here//////////////
;(function(){
var sheets = document.getElementsByTagName('link'), re = /stylesheet *$/i, i = 0,
head = document.getElementsByTagName('head')[0];
for(var i = 0; i < sheets.length; ++i){
if(sheets[i].parentNode !== head && re.test(sheets[i].getAttribute('rel'))){
head.appendChild(sheets[i]);
}
}
})();
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""];
if(setStylesheet.chosen)
try{
document.getElementsByTagName('head')[0].removeChild(setStylesheet.chosen);
}catch(e){}
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title){ //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
setStylesheet.chosen = document.createElement('link');//cloneNode(false);
setStylesheet.chosen.rel = 'stylesheet';
setStylesheet.chosen.type = 'text/css';
if(cacheobj.media)
setStylesheet.chosen.media = cacheobj.media;
setStylesheet.chosen.href = cacheobj.href;
document.getElementsByTagName('head')[0].appendChild(setStylesheet.chosen);
}
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
setStylesheet((selectedtitle = altsheets[randomnumber].title));
//altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}
function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else{ //else if it's a radio button
element[i].checked=true
}
break
}
}
}
}
if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
Only one person has gotten back to me (with Safari 5.0.6) and he sez it's still not working. But it does run noticeably faster in all my PC browsers now, so there's that. :)
I think unless you're really having fun working on this that we can probably let it go and just hope Safari clears up this bug themselves before too long. The site looks and works fine without the multiple styles, it's just a nice extra.
Thanks again!
That one person may be viewing the page with a previously cached version of the script.
All I can say for sure is that it wasn't working on Safari 5.1 before, and that it is working on it now.
You could have them test the script itself:
http://home.comcast.net/~jscheuer1/s...m_eachtime.htm
to see if it's the script or the page you have it on.
Just heard back from a friend with 5.1 and it's working now! I also had the opportunity to check 5.0.3 today for myself, and that worked as well.
Anyway, thanks so much! Do you have an internet tip jar anywhere? I can't give more than a few bucks, but I appreciate the time you took to solve my very specific problem!
Internet Tip Jar:
http://home.comcast.net/~jscheuer1/side/donate.htm
Ok.. this script works good on PC / Mac, in Firefox, Safari.... But for some reason in chrome it doesn't save the cookie.
Any idea?
Thanks,
Case
Yes sorry!
here you go: http://www.teamteasers.com/test_index.html
I've checked in my Chrome cookies settings and they are set to:
Allow local data to be set (recommended)
If I close it or navigate away, it just comes back to the default. (orange and blue at this time)
Thanks for looking!!
Case
Cookies for this only work live in Chrome. Or you could test it on an intranet/server sandbox. But just locally on your computer it doesn't appear to work.Quote:
Originally Posted by casenote
Live demo:
http://home.comcast.net/~jscheuer1/side/style_switch/
I got it to work on my site too. Well, at least better than it did before.
My problem is that every time I refresh the site or click a link, it goes back to the default style. It doesn't seem to keep/update the cookie.
This is the site in question alexiacob.com/photo
Thank you for the script by the way!
Silviu
later edit:
I found the cookie and these are the saved values:
name: lastvisit
content: expires+in+60+minutes
....
and it expires in 60 minutes
That's not this script's cookie. This script's cookie is named "mysheet" (for this purpose, if you're using random mode, there are other names - "mysheet_s" and "mysheet_r" depending upon the settings). And, unless you're using random mode, this:Quote:
Originally Posted by silviu6482
has no meaning, which is the case, as it's using "manual".Code:var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
The way to set the duration for manual mode is with the call(s), in this case these two links:
Those should return false BTW. But to get them to set a cookie, you need to specify the number of days there as an integer. So putting that together with the recommended return value:Code:<a href="#"onclick="chooseStyle('light')"><b>Light</b></a>/<a href="#"onclick="chooseStyle('dark')"><b>Dark</b></a
Code:<a href="#"onclick="chooseStyle('light', 3); return false;"><b>Light</b></a>/<a href="#"onclick="chooseStyle('dark', 3); return false;"><b>Dark</b></a
John, you're a life saver :)
Worked like a charm!
I'm still fiddling around with site building html/php/js... but most of the time I'm lost.
So thank you for your time and help!
Silviu
Hi there, fascinating stuff. I also came up against the Safari issue and so have been implementing this solution on a testing trial domain name.
its some quite complicated ideas i have to express, but as simply as i can say, i noticed that the alternative styles select in addition to the default style.
so lets say default style has a css margin of 20px on the an html footer element. the alternate styles would then require a margin 0px in each one for them to not have the 20px.
ok, also, another issue this causes is (check out an on older low spec computer, or Google Chrome) when you select a style, you see a flash of the default style, then the selected style applies.
the way around these issues on my previous Safari 5.1 buggy solution was to build a template css style, which consists of no graphics, a standard set of widths, margins etc for applicable to all styles, and then for only the differences from this standard css style to be declared in the alternative styles.
this also mitigates the issue in low spec machines / in Chrome, whereby, the flash you see between selecting alternate styles (most obvious with a cleared browser cache) then is a flash of white screen (in this template style even the font color is set to white), so its kind of nicer than a flash of a default style.
to see what im on about in action check out, http://www.delightwebdesign.co.uk/ for the 5.1 safari buggy implementation.
so basically, im working on implementing this solution using the same principle to avoid the issues of having to overwrite the default style quirks with css "nones" etc on the other styles as well as mitigating the default style switch flash to a white screen rather than to the default style.
so the issue i have is that i would like to know how to select a default alternate style (eg the first "corporate" one), if there is no cookie record of the user previously choosing their own.
currently, the situation can be seen on my trial testing domain http://wowb.co.uk/ whereby the default style selected is the mostly completely blank template style, until the user selects their own.
so im working on this part time, i dont have enough JavaScript expertise to know how to edit the below code to fulfil this tweak, basically, what im talking about is a default alternate style for the reasons above. if anyone could give a pointer i would be most appreciative.
Code://Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm
//Unofficial Update to fix Safari 5.1 glitch re: alternate stylesheets or the disabled property in regards to them
// See: http://www.dynamicdrive.com/forums/showthread.php?p=259199 for more info
var manual_or_random="manual" //"manual" or "random"
var randomsetting="eachtime" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
//////No need to edit beyond here//////////////
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""];
if(setStylesheet.chosen)
try{
document.getElementsByTagName('head')[0].removeChild(setStylesheet.chosen);
}catch(e){}
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title){ //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
setStylesheet.chosen = document.createElement('link');//cloneNode(false);
setStylesheet.chosen.rel = 'stylesheet';
setStylesheet.chosen.type = 'text/css';
if(cacheobj.media)
setStylesheet.chosen.media = cacheobj.media;
setStylesheet.chosen.href = cacheobj.href;
document.getElementsByTagName('head')[0].appendChild(setStylesheet.chosen);
}
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}
function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else{ //else if it's a radio button
element[i].checked=true
}
break
}
}
}
}
if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
I admit the styles are simple, but my demo doesn't have that problem in Chrome, at least not on my computer:
http://home.comcast.net/~jscheuer1/side/style_switch/
If, in your scheme there are different background images, you could preload them.
Hi John, thanks for looking at it, yes ive set up a preload (see below) which totally helps for an immediate and seamless transition in the other browsers...
you may be able to observe what im referring to opening the page www.wowb.co.uk in Chrome, first of all you will see a largely white screen because i haven't figured out how to set a default alternate style, this white screen is the template css on which the styles are based upon, so if you click the bullet points, you'll see it flash to the white between the styles, that flash of white in a usual implementation would be a flash of the default style. i can live with a flash of white only on Chrome, it's figuring out a default alternate style setting which is where im at.
JS file:
Code:var imgArray = [
'/web-design-uk/canvas/web-design-uk.png',
'/web-design-uk/classical/web-design-uk.png',
'/web-design-uk/under-the-sea/web-design-uk.png',
'/web-design-uk/space-and-stars/web-design-uk.png',
'/web-design-uk/creative-one/web-design-uk.png',
'/web-design-uk/earth/web-design-uk.png',
'/web-design-uk/canvas/document.png',
'/web-design-uk/classical/document.png',
'/web-design-uk/earth/background.jpg',
'/web-design-uk/under-the-sea/background.jpg',
'/web-design-uk/space-and-stars/document.png',
'/web-design-uk/creative-one/document.jpg',
'/web-design-uk/canvas/background.jpg',
'/web-design-uk/classical/background.jpg',
'/web-design-uk/under-the-sea/document.png',
'/web-design-uk/space-and-stars/background.jpg',
'/web-design-uk/canvas/home-graphics.png',
'/web-design-uk/under-the-sea/home-graphics.png',
'/web-design-uk/space-and-stars/home-graphics.png',
'/web-design-uk/creative-one/home-graphics.png',
'/web-design-uk/creative-two/web-design-uk.png',
'/web-design-uk/creative-two/document.jpg',
'/web-design-uk/canvas/menu-tabs.png',
'/web-design-uk/canvas/menu-tabs-on.png',
'/web-design-uk/classical/menu-tabs.png',
'/web-design-uk/classical/menu-tabs-on.png',
'/web-design-uk/earth/menu-tabs.png',
'/web-design-uk/earth/menu-tabs-on.png',
'/web-design-uk/creative-one/menu-tabs.png',
'/web-design-uk/creative-one/menu-tabs-on.png',
'/web-design-uk/creative-two/menu-tabs.png',
'/web-design-uk/creative-two/menu-tabs-on.png',
'/web-design-uk/corporate/web-design-uk.png',
'/web-design-uk/corporate/document.png',
'/web-design-uk/corporate/menu-tabs.png',
'/web-design-uk/corporate/menu-tabs-on.png'
];
MM_preloadImages.apply(this, imgArray);
HTML:
Code:<SCRIPT language="javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</SCRIPT>
<body onLoad="LoadStyles('/js/styles-code.js');">
I believe I've done it. Of course its very simple but I'm happy because any successful JavaScript is a milestone for me.
around line 90 inserting..
else
setStylesheet("corporate") //set default alternate style
}
seems to set a default alternate style.
Hi,
I have a font increase/reduce panel in my website, due to the safari 5.1 update it is not working now. can you please check & let me know where is the problem. i am also using the styleswitcher.js since i am very new to JS/JQUERY unable to solve the problem.
http://technosoftcorp.com/it/application_services.htm
appreciate your help on this!
The style switcher script you have bears little resemblance to Dynamic Drive's Style Switcher script other than it's name and its reliance upon enabling/disabling stylesheets, which as we know Safari no longer supports.Quote:
Originally Posted by designerraghav@gmail.com
You probably didn't know that, but even so - this is an old thread, you should have made a new thread and referred back to this one.
Edit: After working out the below - I just got the Safari 5.1.4 update - it also fixes the problem!
OK, that said, I've made a custom script for you out of my latest version. It tests well in IE 7 +, Opera, Safari, Firefox.
Here's what to do to implement it -
First update to jQuery version 1.7, change:
to:Code:<script type="text/javascript" src="../resources/js/jquery.min.js"></script>
Next, change this:Code:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
to:Code:<!-- Font Size Options files -->
<link rel="stylesheet" href="../resources/css/style.css" type="text/css" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/large.css" title="A++" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/medium.css" title="A+" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/small.css" title="A" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/x-small.css" title="A-" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/xx-small.css" title="A--" />
<script language="JavaScript1.2" src="../resources/js/styleswitcher.js" type="text/javascript"></script>
<!-- Font Size Options files -->
and put this script (right click and 'save as') in your resources/js/ folder:Code:<!-- Font Size Options files -->
<link rel="stylesheet" href="../resources/css/style.css" type="text/css" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/large.css" title="A++" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/medium.css" title="A+" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/small.css" title="A" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/x-small.css" title="A-" />
<link rel="alternate stylesheet" type="text/css" href="../resources/css/xx-small.css" title="A--" />
<link rel="stylesheet" type="text/css" href="../resources/css/x-small.css" title="addedorreplaced" />
<script src="../resources/js/jqstyleswitcher.js" type="text/javascript">
// jqStyleSwitcher Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// modified for use by Technosoft corporation's font size changer
// req. jQuery 1.7 or later
</script>
<!-- End Font Size Options files -->
Attachment 4403
That's it.
Notes:
If you add or remove alternate stylesheets, that's OK, just make sure to clear the cookie before testing.
The added stylesheet:
is the default stylesheet for those with no cookie yet or with no javascript.Code:<link rel="stylesheet" type="text/css" href="../resources/css/x-small.css" title="addedorreplaced" />
Any questions, feel free to ask.
One other thing I noticed working on this, with today's modern screens, the range of font sizes seems skewed too far to the small. But using larger font sizes would require at least parts of the rest of the page be redone at least dimension wise. And all modern browsers have adequate magnify/shrink utilities so this sort of feature on a page isn't really required. Just somethings to think about.