Jump to content


Photo

css selector


  • Please log in to reply
11 replies to this topic

#1 yhubu

yhubu
  • Members
  • PipPip
  • Member
  • 11 posts
  • LocationToronto, Canada

Posted 02 May 2006 - 04:41 PM

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?
Apache 1.3 & MySQL on Windowz 2000 Server

"Everything should be made as simple as possible, but not simpler."

"We can't solve problems by using the same kind of thinking we used when we created them."
"A man's ethical behavior should be based effectually on sympathy, education, and social ties; no religious basis is necessary. Man would indeeded be in a poor way if he had to be restrained by fear of punishment and hope of reward after death." Albert Einstein

#2 yhubu

yhubu
  • Members
  • PipPip
  • Member
  • 11 posts
  • LocationToronto, Canada

Posted 02 May 2006 - 06:39 PM

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;
}
Apache 1.3 & MySQL on Windowz 2000 Server

"Everything should be made as simple as possible, but not simpler."

"We can't solve problems by using the same kind of thinking we used when we created them."
"A man's ethical behavior should be based effectually on sympathy, education, and social ties; no religious basis is necessary. Man would indeeded be in a poor way if he had to be restrained by fear of punishment and hope of reward after death." Albert Einstein

#3 kenrbnsn

kenrbnsn
  • Staff Alumni
  • Advanced Member
  • 8,235 posts
  • LocationHillsborough, NJ, USA

Posted 02 May 2006 - 07:06 PM

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

#4 yhubu

yhubu
  • Members
  • PipPip
  • Member
  • 11 posts
  • LocationToronto, Canada

Posted 02 May 2006 - 07:18 PM

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
Apache 1.3 & MySQL on Windowz 2000 Server

"Everything should be made as simple as possible, but not simpler."

"We can't solve problems by using the same kind of thinking we used when we created them."
"A man's ethical behavior should be based effectually on sympathy, education, and social ties; no religious basis is necessary. Man would indeeded be in a poor way if he had to be restrained by fear of punishment and hope of reward after death." Albert Einstein

#5 kenrbnsn

kenrbnsn
  • Staff Alumni
  • Advanced Member
  • 8,235 posts
  • LocationHillsborough, NJ, USA

Posted 02 May 2006 - 07:46 PM

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

Ken

#6 yhubu

yhubu
  • Members
  • PipPip
  • Member
  • 11 posts
  • LocationToronto, Canada

Posted 02 May 2006 - 07:57 PM

<?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...nsitional.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....ck?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!
Apache 1.3 & MySQL on Windowz 2000 Server

"Everything should be made as simple as possible, but not simpler."

"We can't solve problems by using the same kind of thinking we used when we created them."
"A man's ethical behavior should be based effectually on sympathy, education, and social ties; no religious basis is necessary. Man would indeeded be in a poor way if he had to be restrained by fear of punishment and hope of reward after death." Albert Einstein

#7 kenrbnsn

kenrbnsn
  • Staff Alumni
  • Advanced Member
  • 8,235 posts
  • LocationHillsborough, NJ, USA

Posted 02 May 2006 - 08:32 PM

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.
<?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;
//
?>

Ken

#8 yhubu

yhubu
  • Members
  • PipPip
  • Member
  • 11 posts
  • LocationToronto, Canada

Posted 02 May 2006 - 08:47 PM

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;
Apache 1.3 & MySQL on Windowz 2000 Server

"Everything should be made as simple as possible, but not simpler."

"We can't solve problems by using the same kind of thinking we used when we created them."
"A man's ethical behavior should be based effectually on sympathy, education, and social ties; no religious basis is necessary. Man would indeeded be in a poor way if he had to be restrained by fear of punishment and hope of reward after death." Albert Einstein

#9 kenrbnsn

kenrbnsn
  • Staff Alumni
  • Advanced Member
  • 8,235 posts
  • LocationHillsborough, NJ, USA

Posted 02 May 2006 - 09:00 PM

Yes

#10 yhubu

yhubu
  • Members
  • PipPip
  • Member
  • 11 posts
  • LocationToronto, Canada

Posted 02 May 2006 - 09:04 PM

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
Apache 1.3 & MySQL on Windowz 2000 Server

"Everything should be made as simple as possible, but not simpler."

"We can't solve problems by using the same kind of thinking we used when we created them."
"A man's ethical behavior should be based effectually on sympathy, education, and social ties; no religious basis is necessary. Man would indeeded be in a poor way if he had to be restrained by fear of punishment and hope of reward after death." Albert Einstein

#11 kenrbnsn

kenrbnsn
  • Staff Alumni
  • Advanced Member
  • 8,235 posts
  • LocationHillsborough, NJ, USA

Posted 02 May 2006 - 09:38 PM

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

Ken (sorry)

#12 yhubu

yhubu
  • Members
  • PipPip
  • Member
  • 11 posts
  • LocationToronto, Canada

Posted 03 May 2006 - 12:59 PM

Ken, thank you very very much.. your way is cleaner and clearer!
Apache 1.3 & MySQL on Windowz 2000 Server

"Everything should be made as simple as possible, but not simpler."

"We can't solve problems by using the same kind of thinking we used when we created them."
"A man's ethical behavior should be based effectually on sympathy, education, and social ties; no religious basis is necessary. Man would indeeded be in a poor way if he had to be restrained by fear of punishment and hope of reward after death." Albert Einstein




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users