PDA

View Full Version : StylesheetSwitcher help required



pollewops
06-11-2010, 06:26 PM
1) Script Title: StylesheetSwitcher

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

3) Describe problem:
I use the http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.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
<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.


<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
<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:


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


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


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
}

pollewops
06-14-2010, 02:19 PM
No that didn't work...check yourselves at http://demo.pollewops.nl

pollewops
06-16-2010, 06:58 PM
Hi Vic,

Thanks for all your help. I put a document write within the JS file and noticed that the ´none´ template is named ´undefined´ and not ´none´.
I change that as displayed below in the code and now it all works.
Wauw..THANKS !:)


}
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==undefined){
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
}

pollewops
06-21-2010, 07:14 AM
Hi Vic,

Another question for you (or someone else )

I found out that averything works fine, nice and fast if a cookie is already defined.
If it is the first time you access my website, there is no cookie created yet and the 'undifined' stylesheet is selected. Is it possible to modify the JS file so that when no cookie is defined, that then a random alternate stylesheet is selected ?

Hope to hear from you soon....

vwphillips
06-21-2010, 10:12 AM
try


/***********************************************
* 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 parameter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
if (altsheets[randomnumber].title==undefined){
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
}

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');
}
else if (getCookie('mysheet')){
setStylesheet(getCookie('mysheet'));
}
else {
setStylesheet('', 'random');
}

pollewops
06-21-2010, 10:33 AM
Great !
That works !!