StylesheetSwitcher help required

**pollewops** · 06-11-2010, 06:26 PM

1) Script Title: StylesheetSwitcher

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...etswitcher.htm

3) Describe problem:
I use the http://www.dynamicdrive.com/dynamici...etswitcher.htm from the DD website.

I noticed that within the stylesheet.js parameters can be set like: manual_or_random and the randomsetting value.

Will it be possible to get those params out of the script ans pass them through when accessing choosestyle(xx,yy) ?

I created a Joomla module using the stylesheet.js script file. But I want to be able to set some params using Joomla and not hardcoded in the script.

See also http://demo.pollewops.nl/
(the colored boxes are created by me to active change the color of the site)

I want to be able to modify in the administrator GUI the option to also set the random options. So not hard-coded in the JS script, but pass through then by a variable.

Is that possible ?

Maybe a new adding to the JS could be something like:
selectnewstyle(<random/manual>,<random/manual time value>,<randomvalue>). By this in the script the right functions could be addressed.

**vwphillips** · 06-12-2010, 12:55 PM

Code:

<html>
<!--<head>
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/dynamicindex9/default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href=http://www.dynamicdrive.com/dynamicindex9/"user.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="http://www.dynamicdrive.com/dynamicindex9/user2.css" />
-->
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="http://www.dynamicdrive.com/ddincludes/customstyle.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="http://www.dynamicdrive.com/ddincludes/customstyle2.css">

<script type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm

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.

//////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=[""]
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
}
}
if (randomize=="random"){ //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 (randomize=="random" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}

function chooseStyle(o){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
 if (document.getElementById){
  setStylesheet(o.Title,o.manual_or_random);
  setCookie("mysheet",o.Title,o.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
}
}

</script>
</head>

<body>
<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle({Title:this.value,Days:60});">Default style<br />
<input type="radio" name="choice" value="blue-theme" onClick="chooseStyle({Title:this.value,Days:60,manual_or_random:'random'});">Blue Theme<br />
<input type="radio" name="choice" value="brown-theme" onClick="chooseStyle({Title:this.value,Days:60});">Brown Theme
</form>
// Rest of body here
</body>
</html>

**pollewops** · 06-13-2010, 06:40 AM

Wauw ..that seems easy...
But..I tried to to configure it as you suggested, but it seems not to work. Om my site (demo.pollewops.nl) I configured the orange button to be random...didn't work :-(

I was thinking about it yesterday and was wondering if it is possible to change the 'manual_or_random' and the 'randomsetting' value also with the following command:

<script type="text/javascript" src="/modules/mod_stylecolor/js/styleswitch.js"></script>

Then I don't need to change anything else in the JS script ;-)

**pollewops** · 06-14-2010, 07:30 AM

I added this to my script and now my last request is working....so from the back end I now can force a random mode.

Code:

<script type="text/javascript">
<!--// 
  manual_or_random = '<?php echo $RandomManual; ?>';
  randomsetting = '<?php echo $RandomValue; ?>';
//-->
</script>

<script type="text/javascript" src="/modules/mod_stylecolor/js/styleswitch.js"></script>

But still the front end mode is not working, so to be able to set the random mode from within the front end as VWPHILLIPS suggested..I couldn't get that working....The part that VWPHILLIPS added seems to work, but when pressing the BLUE radio button set a random template. What I want is that when you select the BLUE radio button that then the random mode is switch on and that then during every refresh a random template is choosed.
Any tips how to create that ?

**vwphillips** · 06-14-2010, 10:15 AM

Code:

<html>
<!--<head>
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/dynamicindex9/default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href=http://www.dynamicdrive.com/dynamicindex9/"user.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="http://www.dynamicdrive.com/dynamicindex9/user2.css" />
-->
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="http://www.dynamicdrive.com/ddincludes/customstyle.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="http://www.dynamicdrive.com/ddincludes/customstyle2.css">

</head>

<body>
<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle({Title:this.value,Days:60});">Default style<br />
<input type="radio" name="choice" value="blue-theme" onClick="chooseStyle({Title:this.value,Days:60,manual_or_random:'random'});">Blue Theme<br />
<input type="radio" name="choice" value="brown-theme" onClick="chooseStyle({Title:this.value,Days:60});">Brown Theme
</form>
// Rest of body here
<script type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm

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.

//////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=[""]
 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
  }
 }
 if (randomize=="random"){ //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 (randomize=="random" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}

function chooseStyle(o){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
 if (document.getElementById){
  setStylesheet(o.Title,o.manual_or_random);
  setCookie("mysheet",o.Title,o.Days);
  setCookie("random",o.manual_or_random||'manual',o.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 (getCookie('random')=='random'){
  setStylesheet('', 'random');
 }

</script>
</body>
</html>

**pollewops** · 06-14-2010, 11:23 AM

Hi Vic,

Thanks...that works in your script, but not when I try to add it to my php sources...

I think it goes wrong with me within this part of the code:

Code:

     echo '&nbsp;<a href="index.php" value="random-theme" onclick="chooseStyle({Title:this.value,Days:60,manual_or_random:random}); return false;"><img style="margin:0 padding:0;" height=15 width=15 src="/modules/mod_stylecolor/img/random.png" alt="Random" />';

I think the random value should be passed with :´random´ instead of just :random. I think the error comes from there when you presses the coloured button at http://demo.pollewops.nl.
Any ideas how to solve this syntax ?

PS. thanks for all your help

Another issue I found out is that this kind of scripting does not work with Filezilla.....do you know a way to solve this or is it failed just because of my scripting ??

**vwphillips** · 06-14-2010, 11:45 AM

a tags do not have a value so

Code:

     echo '&nbsp;<a href="index.php" " onclick="chooseStyle({Title:'random-theme',Days:6

**pollewops** · 06-14-2010, 12:30 PM

Hi Vic,

The quotes are not allowed: 'random-theme'

**pollewops** · 06-14-2010, 01:42 PM

I got it working: using \" for the quotes instead of the ".

But now I do see another issue. In the random mode all "alternate stylesheets" are randomised including "none".
Is it possible to exclude "none" ??

check out http://demo.pollewops.nl/ to see yourself

**vwphillips** · 06-14-2010, 02:10 PM

try

Code:

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=[""]
 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
  }
 }
 if (randomize=="random"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
  var randomnumber=Math.floor(Math.random()*altsheets.length);
  if (altsheets[randomnumber].title=='none'){
   return setStylesheet(title, randomize);
  }
  altsheets[randomnumber].disabled=false
 }
return (randomize=="random" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}

Thread: StylesheetSwitcher help required

Thread Tools

Search Thread

StylesheetSwitcher help required

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions