Jump to content

css selector


yhubu

Recommended Posts

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?
Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

<?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 = 'matok.wdd@gmail.com';
$subject = $_GET[subject];
$message = $_GET[msg];
$headers = 'From: contact-form@matokwdd.com' . "\r\n" .
'Reply-To: matok.wdd@gmail.com' . "\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!
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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;
Link to comment
Share on other sites

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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.