css selector

[yhubu]

Hey there, I would like to build something that functions much like the colour and txt size options on [a href=\"http://www.thefloatingfrog.co.uk/\" target=\"_blank\"]http://www.thefloatingfrog.co.uk/[/a]

I started with :

/*** CSS Colour Selector ***/
if (!$cselected) {
$css = $_GET[colour];
if(!strcmp($css, 'blue')) { $cur_colour="<link href=\"blue.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
else if(!strcmp($css, 'orange')) { $cur_colour="<link href=\"orange.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
$cselected=1;
}

/*** CSS Text Size Selector ***/
if (!$tselected) {
$txt = $_GET[textsize];
if(!strcmp($txt, 'small')) { $cur_txt="<link href=\"small.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
else if(!strcmp($txt, 'large')) { $cur_txt="<link href=\"large.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
else { $cur_txt="<link href=\"medium.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
$tselected=1;
}

but as I am sure you see it does not work correctly... any ideas on how to fix this?

[yhubu]

I found that the below works.. does anyone see anything here that could be improved?

/*** CSS Colour Selector ***/
if($css = $_GET[colour]) {
if(!strcmp($css, 'blue')) { $cur_colour="<link href=\"blue.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
else if(!strcmp($css, 'orange')) { $cur_colour="<link href=\"orange.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
else { $cur_colour="<link href=\"orange.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
$_SESSION['cselected']=$cur_colour;
}
else {
$cur_colour="<link href=\"blue.css\" rel=\"stylesheet\" type=\"text/css\" />";
$_SESSION['cselected']=$cur_colour;
}

/*** CSS Text Size Selector ***/

if ($txt = $_GET[textsize]) {
if(!strcmp($txt, 'small')) { $cur_txt="<link href=\"small.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
else if(!strcmp($txt, 'large')) { $cur_txt="<link href=\"large.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
else { $cur_txt="<link href=\"medium.css\" rel=\"stylesheet\" type=\"text/css\" />"; }
$_SESSION['tselected']=$cur_txt;
}
else {
$cur_txt="<link href=\"medium.css\" rel=\"stylesheet\" type=\"text/css\" />";
$_SESSION['tselected']=$cur_txt;
}

[kenrbnsn]

Yes. You can replace all of the if-else-if statements with switch statements and you can delimit your strings with single quotes to eliminate the escaped double quotes:
[code]<?php
/*** CSS Colour Selector ***/
$selected_color = 'blue';  // default if $_GET['colour'] not set
if (isset($_GET['colour'])) {
    switch ($_GET['colour']) {
         case 'blue':
         case 'orange':
                $selected_color = $_GET['colour'];
                break;
         default:
                $selected_color = 'orange';
     }
}
$cur_colour = '<link href="' . $selected_color . '.css" rel="stylesheet" type="text/css" />';
$_SESSION['cselected']=$cur_colour;

/*** CSS Text Size Selector ***/

$text_size = 'medium'; // default text size if $_GET['textsize'] is not set
if(isset($_GET[textsize])) {
    switch ($_GET['textsize']) {
        case 'small':
        case 'medium':
        case 'large':
               $text_size = $_GET['textsize'];
               break;
         default:
                $text_size = 'medium';
    }
}
$cur_txt='<link href="' . $text_size . '.css" rel="stylesheet" type="text/css" />';
$_SESSION['tselected']=$cur_txt;
?>[/code]
Much cleaner, simpler, and easier to maintain. For example, if you want to add a new valid color (or colour), just add it the the list of case statements.

Ken

[yhubu]

Thanx, but this does not seem to work the same way as what I posted.

If I pick Orange, and then pick a large txt size I end up losing the orange selection and am presented with Blue + Large txt

[kenrbnsn]

Can you post the rest of the code you're using as a test? And the css files.

Ken

[yhubu]

<?php
session_start();

/*** Get Todays Date ***/
$today = date("n-j-Y");

/*** CSS Colour Selector ***/
$selected_color = 'blue'; // default if $_GET['colour'] not set
if (isset($_GET['colour'])) {
switch ($_GET['colour']) {
case 'blue':
case 'orange':
$selected_color = $_GET['colour'];
break;
default:
$selected_color = 'orange';
}
}
$cur_colour = '<link href="' . $selected_color . '.css" rel="stylesheet" type="text/css" />';
$_SESSION['cselected']=$cur_colour;

/*** CSS Text Size Selector ***/

$text_size = 'medium'; // default text size if $_GET['textsize'] is not set
if(isset($_GET[textsize])) {
switch ($_GET['textsize']) {
case 'small':
case 'medium':
case 'large':
$text_size = $_GET['textsize'];
break;
default:
$text_size = 'medium';
}
}
$cur_txt='<link href="' . $text_size . '.css" rel="stylesheet" type="text/css" />';
$_SESSION['tselected']=$cur_txt;

/*** For Use With MAIL ***/
$to = '[email protected]';
$subject = $_GET[subject];
$message = $_GET[msg];
$headers = 'From: [email protected]' . "\r\n" .
'Reply-To: [email protected]' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="main.css" rel="stylesheet" type="text/css" media="all" />
<?php echo $cur_colour; ?>
<?php echo $cur_txt ?>
<link rel="stylesheet" type="text/css" media="all" title="User Defined Style" href="fixed.css" />
</head>
<body id="home">
<div class="hidden"><a href="#content" title="Skip to content">Skip to content</a></div>
<div id="outerwrapper">
<div id="innerwrapper">
<h1><a href="/index.php" title="">The Floating Frog</a></h1>
<div id="frog"><p></p></div>
<div id="headerwrapper">
<div id="mainLinks">
<div class="headermsg">
Main Navigation and user layout options below
</div>
<ul>
<li class="homeLi"><a href="index.php" title="Homepage overview section">HOME</a></li>
<li class="aboutLi"><a href="about.php" title="All about ">ABOUT</a></li>
<li class="workLi"><a href="services.php" title="Websites, >SERVICES</a></li>
<li class="showcaseLi"><a href="showcase.php" title="A selection ">SHOWCASE</a></li>
<li class="contactLi"><a href="contact.php" title="Contact us">CONTACT</a></li>

<li class="blueLi"><a href="index.php?colour=blue" title="Blue colour theme">Blue colour theme</a></li>
<li class="orangeLi"><a href="index.php?colour=orange" title="Orange colour theme">Orange colour theme</a></li>
<li class="redLi"><a href="index.php?colour=red" title="Red colour theme">Red colour theme</a></li>

<li class="smallLi"><a href="index.php?textsize=small" title="Small text">Small text</a></li>
<li class="mediumLi"><a href="index.php?textsize=medium" title="Medium text">Medium text</a></li>
<li class="largeLi"><a href="index.php?textsize=large" title="Large text">Large text</a></li>
</ul>
</div>
</div>
<div id="contentwrapper">
<div id="content">

<form name="contact_form" action="/contact.php" method="post">
<fieldset>
<legend>Personal Details</legend>
<p><label for="contact_name">Name:</label><input type="text" name="contact_name" id="contact_name" value=""/></p>
<p><label for="contact_email">Email:</label><input type="text" name="contact_email" id="contact_email" value=""/></p>
<p><label for="contact_telephone">Telephone:</label><input type="text" name="contact_telephone" id="contact_telephone" value=""/></p>
<p><label for="contact_query">Query/Comments:</label><textarea name="contact_query" id="contact_query" rows="7" cols="40"></textarea></p>
<p style="margin-left: 161px;">
<input class="formbutton" type="submit" name="submit" value="Send Form" />
<input class="formbutton" type="reset" name="reset" value="Clear form" />
</p>
</fieldset>
</form>
</div>
<div id="rightcolumnwrapper">
<div id="rightcolumn">
<h4>How To Reach Us</h4>
<h4>Phone</h4>

<h4>E-Mail</h4>

</div>
</div>
</div>
<div id="footerwrapper">
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank" title="XHTML complient">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/" target="_blank" title="Valid CSS">CSS</a> &copy;2006 The Floating Frog</p>
</div>
</div>
</div>
</body>
</html>

:: Blue :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

/* ---------------------------------- */
/* DEFAULT STYLES */
/* ---------------------------------- */
html, body { border-top: 3px solid #88cbf0; }
a:visited { color: #88cbf0; }
div.headermsg {
background: url(msg_change_blue.gif) no-repeat center center;
position: absolute;
top: 40px;
left: 325px;
height: 50px;
width: 200px;
overflow: hidden;
text-indent: -3000px;
font-size: 1px;
}

/* ---------------------------------- */
/* TITLE ELEMENTS */
/* ---------------------------------- */

h1 a { background: url(logo_ffrog_blue.gif) no-repeat center center; }
h2, h3, h4, h5 { color: #444; }

/* ---------------------------------- */
/* NAVIGATION STYLES */
/* ---------------------------------- */


/* Homepage link */

#mainLinks ul li.homeLi a:hover { background: url(tab_home_blue_selected.gif) no-repeat; }
body#home div#mainLinks ul li.homeLi a { background: url(tab_home_blue_selected.gif) no-repeat; }
#mainLinks li.blueLi a { background: url(tab_colour_blue_selected.gif) no-repeat; }

/* Selected state */

body#about #mainLinks li.aboutLi,
body#work #mainLinks li.workLi,
body#showcase #mainLinks li.showcaseLi,
body#contact #mainLinks li.contactLi {
background: url(tab_left_blue.gif) no-repeat left bottom;
}

body#about #mainLinks li.aboutLi a,
body#work #mainLinks li.workLi a,
body#showcase #mainLinks li.showcaseLi a,
body#contact #mainLinks li.contactLi a {
background: url(tab_right_blue.gif) no-repeat right bottom;
}

body#about #mainLinks li.aboutLi a:hover,
body#work #mainLinks li.workLi a:hover,
body#showcase #mainLinks li.showcaseLi a:hover,
body#contact #mainLinks li.contactLi a:hover {
color: #fff;
}


/* PORTFOLIO MAIN LINKS STYLES */
body#showcase #showcaseUL ul li.selected a { background: #88cbf0; }

/* ---------------------------------- */
/* FOOTER STYLES */
/* ---------------------------------- */

#footerwrapper a { color: #88cbf0; }

:: Orange :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

/* ---------------------------------- */
/* DEFAULT STYLES */
/* ---------------------------------- */
html, body { border-top: 3px solid #dc9b22; }
a:visited { color: #dc9b22; }
div.headermsg {
background: url(msg_change_orange.gif) no-repeat center center;
position: absolute;
top: 40px;
left: 325px;
height: 50px;
width: 200px;
overflow: hidden;
text-indent: -3000px;
font-size: 1px;
}

/* ---------------------------------- */
/* TITLE ELEMENTS */
/* ---------------------------------- */

h1 a { background: url(logo_ffrog_orange.gif) no-repeat center center; }
h2, h3, h4, h5 { color: #dc9b22; }

/* ---------------------------------- */
/* NAVIGATION STYLES */
/* ---------------------------------- */

/* Homepage link */

#mainLinks ul li.homeLi a:hover { background: url(tab_home_orange_selected.gif) no-repeat; }
body#home div#mainLinks ul li.homeLi a { background: url(tab_home_orange_selected.gif) no-repeat; }
#mainLinks li.orangeLi a { background: url(tab_colour_orange_selected.gif) no-repeat bottom; }

/* Selected state */

body#about #mainLinks li.aboutLi,
body#work #mainLinks li.workLi,
body#showcase #mainLinks li.showcaseLi,
body#contact #mainLinks li.contactLi { background: url(tab_left_orange.gif) no-repeat left bottom; }

body#about #mainLinks li.aboutLi a,
body#work #mainLinks li.workLi a,
body#showcase #mainLinks li.showcaseLi a,
body#contact #mainLinks li.contactLi a { background: url(tab_right_orange.gif) no-repeat right bottom; }

body#about #mainLinks li.aboutLi a:hover,
body#work #mainLinks li.workLi a:hover,
body#showcase #mainLinks li.showcaseLi a:hover,
body#contact #mainLinks li.contactLi a:hover { color: #fff; }

/* PORTFOLIO MAIN LINKS STYLES */

body#showcase #showcaseUL ul li.selected a { background: #dc9b22; }

/* ---------------------------------- */
/* FOOTER STYLES */
/* ---------------------------------- */

#footerwrapper a { color: #dc9b22; }

::Medium::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
/* ---------------------------------- */
/* DEFAULT STYLES */
/* ---------------------------------- */

html, body {
font: 12px/1.3em helvetica, arial, verdana, geneva, Trebuchet MS, Lucida Grande, Lucida Sans Unicode, sans-serif;
line-height: 1.5em;
}
#showcaseUL li a {
height: 15px;
padding: 10px 30px;
}
#mainLinks li.mediumLi a { background: url(tab_txt_m_selected.gif) no-repeat bottom; }

::Small::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

/* ---------------------------------- */
/* DEFAULT STYLES */
/* ---------------------------------- */
html, body {
font: 10px/1.3em helvetica, arial, verdana, geneva, Trebuchet MS, Lucida Grande, Lucida Sans Unicode, sans-serif;
line-height: 1.5em;
}
#showcaseUL li a {
height: 15px;
padding: 12px 30px 8px 30px;
}
#mainLinks li.smallLi a { background: url(tab_txt_s_selected.gif) no-repeat bottom; }






[size=4]Thanx for your help, it is much appreciated!

[kenrbnsn]

You're loosing one of the selections because, even though the selections are stored in session variables, they are not used. If the code is modified slightly to use the session variables, it should work as you intended.
[code]<?php
$selected_color = (isset($_SESSION'[cselected']))?$_SESSION['cselected']:'blue'; // default if $_GET['colour'] not set
// ...
$_SESSION['cselected']=$selected_color;
//
// and
//
$text_size = (isset($_SESSION['tselected']))?$_SESSION['tselected']:'medium'; // default text size if $_GET['textsize'] is not set
//...
$_SESSION['tselected']=$text_size;
//
?>[/code]

Ken

[yhubu]

Like this?

/*** CSS Colour Selector ***/
$selected_color = (isset($_SESSION'[cselected']))?$_SESSION['cselected']:'blue'; // default if $_GET['colour'] not set
if (isset($_GET['colour'])) {
switch ($_GET['colour']) {
case 'blue':
case 'orange':
$selected_color = $_GET['colour'];
break;
default:
$selected_color = 'orange';
}
}
$cur_colour = '<link href="' . $selected_color . '.css" rel="stylesheet" type="text/css" />';
$_SESSION['cselected']=$selected_color;

[kenrbnsn]

Yes

[yhubu]

Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ',' or ')' in f:\web\intranet\operations\bram\new folder\frog\index.php on line 8

Atleast I'm getting close :D

[kenrbnsn]

My mistake... swapped single quote and left square bracket. Fixed line:
[code]<?php $selected_color = (isset($_SESSION['cselected']))?$_SESSION['cselected']:'blue'; //?>[/code]

Ken (sorry)

[yhubu]

Ken, thank you very very much.. your way is cleaner and clearer!