Part of my goal was to simplify how I handled the code while creating minimal load on the server. While I could use PHP to simply dump the entire session variable and have it be handled by JavaScript I felt that as far as I've advanced with JavaScript I wasn't particularly thrilled at coding out more then likely the dozens of lines of code to do what PHP could do in just a few. Plus it may slightly diminish browser support. I also had a suggestion from one of our community gurus here to have PHP generate all of the input fields with the values in place. I felt this would generate unnecessary load on the server for something that a day or two's worth of JavaScript could handle.
Tested JavaScript compatibility...
Gecko 1.0-1.9
IE 4: No
IE 5-8: Yes
Opera 3.62: No
Opera 4.0-9.5
The JavaScript code has no noticeable impact on the page's load time.
Any way I've added a full blown custom theme to be split instead of using a session variable (just easier for testing) but it works fine locally for me any way with the session.
I'm open to any constructive criticism and thoughts.
Code: Select all
<?php session_name("member"); session_start();
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>REGEX - Standalone Test Page</title>
<html>
<head>
<script type="text/javascript">
//<![CDATA[
<?php
$css = '#welcome, #content div.border, #content div.bordernorc, #prompts div.scroll, #prompts #promptstabs div.current {background-color: #001; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#body, #prompts {background-color: #002; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}body, html {background-color: #003; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#content div.border div.border div.border, #head, #prompts #promptsbuttons, #prompts #promptstabs, #prompts #promptstabs div, #side div.inset, #side h2, #side form, div.footer, div.header, table tfoot, table thead, table tbody tr {background-color: #004; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#bottom, #top {background-color: #005; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}h1 {background-color: #006; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#prompts h2, h2, h3, h4, h5, h6 {background-color: #007; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#content a:link, #side a:link, #promptsajax div.scroll a:link, #promptsajax div.noscroll a:link {background-color: #008; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#content a:link:hover, #side a:link:hover, #promptsajax div.scroll a:link:hover, #promptsajax div.noscroll a:hover, #side div.inset div.scroll a:hover, #content a:link:focus, #side a:link:focus, #promptsajax div.scroll a:link:focus, #promptsajax div.noscroll a:focus, #side div.inset div.scroll a:focus {background-color: #009; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#content a:link:visited, #side a:link:visited, #promptsajax div.scroll a:link:visited, #promptsajax div.noscroll a:visited, #side div.inset div.scroll a:visited {background-color: #010; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#menua1, #menua2, #menua3, #menua4, #menua5, #menua6, #menua7, #menua8, #menua9, a.menuaa, a.tools, #toola1, #toola2, div.list div, #sidetoggle a, #sidetoggle div, #prompts #promptsbuttons div a, #prompts #promptstabs div a {background-color: #011; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#menua1 a:hover, #menua2 a:hover, #menua3 a:hover, #menua4 a:hover, #menua5 a:hover, #menua6 a:hover, #menua7 a:hover, #menua8 a:hover, #menua9 a:hover, #menua1 a:focus, #menua2 a:focus, #menua3 a:focus, #menua4 a:focus, #menua5 a:focus, #menua6 a:focus, #menua7 a:focus, #menua8 a:focus, #menua9 a:focus, a.menuaa:hover, a.tools:hover, #toola1:hover, #toola2:hover, div.list div:hover, #sidetoggle a:hover, #sidetoggle div:hover, a.menuaa:focus, a.tools:focus, #toola1:focus, #toola2:focus, div.list div:focus, #sidetoggle a:focus, #sidetoggle div:focus, #prompts #promptsbuttons a:focus, #prompts #promptsbuttons a:hover {background-color: #012; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#menua1:visited, #menua2:visited, #menua3:visited, #menua4:visited, #menua5:visited, #menua6:visited, #menua7:visited, #menua8:visited, #menua9:visited, a.menuaa:visited, a.tools:visited, #toola1:visited, #toola2:visited, div.list div:visited, #sidetoggle a:visited, #sidetoggle div:visited, #prompts #promptsbuttons div a:visited, #prompts #promptstabs div a:visited {background-color: #013; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#bottom div a {background-color: #014; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#bottom div a:hover, #bottom div a:focus {background-color: #015; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form {background-color: #016; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form fieldset input.button, form fieldset input.text, form fieldset input.url, select, form fieldset textarea {background-color: #017; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form fieldset input.button:hover, form fieldset input.text:hover, form fieldset input.url:hover, select:hover, form fieldset textarea:hover, form fieldset input.button:focus, form fieldset input.text:focus, form fieldset input.url:focus, select:focus, form fieldset textarea {background-color: #018; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form fieldset label {background-color: #019; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}ol, ul {background-color: #020; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}code {background-color: #021; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#head #location a:link, #head #location a:visited, .color1 {background-color: #022; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#content span.subtitle, .color2 {background-color: #023; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}p, p.noindent, ol li span, ul li span, .color3 {background-color: #024; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}.color4 {background-color: #025; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}.color5 {background-color: #026; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}';
$pieces = explode('}', $css);
//$pieces = explode('}', $_SESSION['css']);
$number = '0';
foreach($pieces as $key=>$value)
{
$my_var1 = explode(' {', $value);
// Echo selector as JavaScript ID.
echo "window['ii".$key."0'] = '".$my_var1[0]."';";
// Echo selector's array of properties and values.
echo "\nwindow['ii".$key."1'] = '".$my_var1[1]."';\n";
}
?>
function insert_variables_exec(selector, set)
{
//bg-color
if (set.indexOf('#') == '18') {var temp_var_bgc = set.split('#'); document.getElementById('ce' + selector + '1').value = temp_var_bgc[1];}
//bg-img
else if (set.indexOf('url(general/') == '19') {var temp_var_bg_img_1 = set.split('url(general/'); var temp_var_bg_img_2 = temp_var_bg_img_1[1].split('.gif)'); document.getElementById('ce' + selector + '2').value = temp_var_bg_img_2[0];}
//border-color
else if (set.indexOf('#') == '15') {var temp_var_bc = set.split('#'); document.getElementById('ce' + selector + '3').value = temp_var_bc[1];}
//color
else if (set.indexOf('#') == '8') {var temp_var_c = set.split('#'); document.getElementById('ce' + selector + '4').value = temp_var_c[1];}
else {alert('eh nothing?' + set);}
}
function insert_variables(selector)
{
var the_id1 = 'ii' + selector + '1';
var the_id2 = this[the_id1];
var property_sets=the_id2.split(';');
insert_variables_exec(selector, property_sets[0]);
insert_variables_exec(selector, property_sets[1]);
insert_variables_exec(selector, property_sets[2]);
insert_variables_exec(selector, property_sets[3]);
}
function color_editor_selectors()
{
for (var i=0; i<document.getElementById('step_one').length; i++)
{
document.getElementById('ce' + i+ + '0').value = document.getElementById('step_one').options[i].value;
}
}
function insert_variables_trigger()
{
for (var i=0; i<26; i++) //26
{
insert_variables(i);
}
}
function start() {
color_editor_selectors();
insert_variables_trigger();
}
window.onload = start;
//]]>
</script>
<style type="text/css">
/*form {height: 300px; overflow: auto; width: 80%;}*/
</style>
</head>
<body>
<form>
<fieldset>
<select id="step_one" tabindex="3">
<option value="#welcome, #content div.border, #content div.bordernorc, #prompts div.scroll, #prompts #promptstabs div.current">Primary Set 1 (Content, Prompt Content)</option>
<option value="#body, #prompts">Primary Set 2 (Body ID, Prompt Base)</option>
<option value="body, html">Primary Set 3 (Body Element)</option>
<option value="#content div.border div.border div.border, #head, #prompts #promptsbuttons, #prompts #promptstabs, #prompts #promptstabs div, #side div.inset, #side h2, #side form, div.footer, div.header, table tfoot, table thead, table tbody tr">Secondary Set</option>
<option value="#bottom, #top">Frame (Bottom, Top)</option>
<option value="h1">Header (Primary)</option>
<option value="#prompts h2, h2, h3, h4, h5, h6">Header (Subheaders)</option>
<option value="#content a:link, #side a:link, #promptsajax div.scroll a:link, #promptsajax div.noscroll a:link">Links</option>
<option value="#content a:link:hover, #side a:link:hover, #promptsajax div.scroll a:link:hover, #promptsajax div.noscroll a:hover, #side div.inset div.scroll a:hover, #content a:link:focus, #side a:link:focus, #promptsajax div.scroll a:link:focus, #promptsajax div.noscroll a:focus, #side div.inset div.scroll a:focus">Links (Focus, Hover)</option>
<option value="#content a:link:visited, #side a:link:visited, #promptsajax div.scroll a:link:visited, #promptsajax div.noscroll a:visited, #side div.inset div.scroll a:visited">Links (Visited)</option>
<option value="#menua1, #menua2, #menua3, #menua4, #menua5, #menua6, #menua7, #menua8, #menua9, a.menuaa, a.tools, #toola1, #toola2, div.list div, #sidetoggle a, #sidetoggle div, #prompts #promptsbuttons div a, #prompts #promptstabs div a">Menus</option>
<option value="#menua1 a:hover, #menua2 a:hover, #menua3 a:hover, #menua4 a:hover, #menua5 a:hover, #menua6 a:hover, #menua7 a:hover, #menua8 a:hover, #menua9 a:hover, #menua1 a:focus, #menua2 a:focus, #menua3 a:focus, #menua4 a:focus, #menua5 a:focus, #menua6 a:focus, #menua7 a:focus, #menua8 a:focus, #menua9 a:focus, a.menuaa:hover, a.tools:hover, #toola1:hover, #toola2:hover, div.list div:hover, #sidetoggle a:hover, #sidetoggle div:hover, a.menuaa:focus, a.tools:focus, #toola1:focus, #toola2:focus, div.list div:focus, #sidetoggle a:focus, #sidetoggle div:focus, #prompts #promptsbuttons a:focus, #prompts #promptsbuttons a:hover">Menus (Focus, Hover)</option>
<option value="#menua1:visited, #menua2:visited, #menua3:visited, #menua4:visited, #menua5:visited, #menua6:visited, #menua7:visited, #menua8:visited, #menua9:visited, a.menuaa:visited, a.tools:visited, #toola1:visited, #toola2:visited, div.list div:visited, #sidetoggle a:visited, #sidetoggle div:visited, #prompts #promptsbuttons div a:visited, #prompts #promptstabs div a:visited">Menus (Visited)</option>
<option value="#bottom div a">Music Player</option>
<option value="#bottom div a:hover, #bottom div a:focus">Music Player (Hover, Focus)</option>
<option value="form">Forms</option>
<option value="form fieldset input.button, form fieldset input.text, form fieldset input.url, select, form fieldset textarea">Forms Fields (Buttons, Text)</option>
<option value="form fieldset input.button:hover, form fieldset input.text:hover, form fieldset input.url:hover, select:hover, form fieldset textarea:hover, form fieldset input.button:focus, form fieldset input.text:focus, form fieldset input.url:focus, select:focus, form fieldset textarea">Forms Fields (Focus, Hover)</option>
<option value="form fieldset label">Form Labels</option>
<option value="ol, ul">Lists (Ordered, Unordered)</option>
<option value="code">Code (Computer Code)</option>
<option value="#head #location a:link, #head #location a:visited, .color1">Color 1 (Location)</option>
<option value="#content span.subtitle, .color2">Color 2 (Subtitle)</option>
<option value="p, p.noindent, ol li span, ul li span, .color3">Color 3 (Lists, Paragraph, Span)</option>
<option value=".color4">Color 4 (Dashes)</option>
<option value=".color5">Color 5 (Parenthesis, Quotes)</option>
</select>
<br style="clear: both;" />
<input id="ce00" name="ce00" type="text" value="" />
<input id="ce01" name="ce01" type="text" value="" />
<input id="ce02" name="ce02" type="text" value="" />
<input id="ce03" name="ce03" type="text" value="" />
<input id="ce04" name="ce04" type="text" value="" />
<br />
<input id="ce10" name="ce10" type="text" value="" />
<input id="ce11" name="ce11" type="text" value="" />
<input id="ce12" name="ce12" type="text" value="" />
<input id="ce13" name="ce13" type="text" value="" />
<input id="ce14" name="ce14" type="text" value="" />
<br />
<input id="ce20" name="ce20" type="text" value="" />
<input id="ce21" name="ce21" type="text" value="" />
<input id="ce22" name="ce22" type="text" value="" />
<input id="ce23" name="ce23" type="text" value="" />
<input id="ce24" name="ce24" type="text" value="" />
<br />
<input id="ce30" name="ce30" type="text" value="" />
<input id="ce31" name="ce31" type="text" value="" />
<input id="ce32" name="ce32" type="text" value="" />
<input id="ce33" name="ce33" type="text" value="" />
<input id="ce34" name="ce34" type="text" value="" />
<br />
<input id="ce40" name="ce40" type="text" value="" />
<input id="ce41" name="ce41" type="text" value="" />
<input id="ce42" name="ce42" type="text" value="" />
<input id="ce43" name="ce43" type="text" value="" />
<input id="ce44" name="ce44" type="text" value="" />
<br />
<input id="ce50" name="ce50" type="text" value="" />
<input id="ce51" name="ce51" type="text" value="" />
<input id="ce52" name="ce52" type="text" value="" />
<input id="ce53" name="ce53" type="text" value="" />
<input id="ce54" name="ce54" type="text" value="" />
<br />
<input id="ce60" name="ce60" type="text" value="" />
<input id="ce61" name="ce61" type="text" value="" />
<input id="ce62" name="ce62" type="text" value="" />
<input id="ce63" name="ce63" type="text" value="" />
<input id="ce64" name="ce64" type="text" value="" />
<br />
<input id="ce70" name="ce70" type="text" value="" />
<input id="ce71" name="ce71" type="text" value="" />
<input id="ce72" name="ce72" type="text" value="" />
<input id="ce73" name="ce73" type="text" value="" />
<input id="ce74" name="ce74" type="text" value="" />
<br />
<input id="ce80" name="ce80" type="text" value="" />
<input id="ce81" name="ce81" type="text" value="" />
<input id="ce82" name="ce82" type="text" value="" />
<input id="ce83" name="ce83" type="text" value="" />
<input id="ce84" name="ce84" type="text" value="" />
<br />
<input id="ce90" name="ce90" type="text" value="" />
<input id="ce91" name="ce91" type="text" value="" />
<input id="ce92" name="ce92" type="text" value="" />
<input id="ce93" name="ce93" type="text" value="" />
<input id="ce94" name="ce94" type="text" value="" />
<br />
<input id="ce100" name="ce100" type="text" value="" />
<input id="ce101" name="ce101" type="text" value="" />
<input id="ce102" name="ce102" type="text" value="" />
<input id="ce103" name="ce103" type="text" value="" />
<input id="ce104" name="ce104" type="text" value="" />
<br />
<input id="ce110" name="ce110" type="text" value="" />
<input id="ce111" name="ce111" type="text" value="" />
<input id="ce112" name="ce112" type="text" value="" />
<input id="ce113" name="ce113" type="text" value="" />
<input id="ce114" name="ce114" type="text" value="" />
<br />
<input id="ce120" name="ce120" type="text" value="" />
<input id="ce121" name="ce121" type="text" value="" />
<input id="ce122" name="ce122" type="text" value="" />
<input id="ce123" name="ce123" type="text" value="" />
<input id="ce124" name="ce124" type="text" value="" />
<br />
<input id="ce130" name="ce130" type="text" value="" />
<input id="ce131" name="ce131" type="text" value="" />
<input id="ce132" name="ce132" type="text" value="" />
<input id="ce133" name="ce133" type="text" value="" />
<input id="ce134" name="ce134" type="text" value="" />
<br />
<input id="ce140" name="ce140" type="text" value="" />
<input id="ce141" name="ce141" type="text" value="" />
<input id="ce142" name="ce142" type="text" value="" />
<input id="ce143" name="ce143" type="text" value="" />
<input id="ce144" name="ce144" type="text" value="" />
<br />
<input id="ce150" name="ce150" type="text" value="" />
<input id="ce151" name="ce151" type="text" value="" />
<input id="ce152" name="ce152" type="text" value="" />
<input id="ce153" name="ce153" type="text" value="" />
<input id="ce154" name="ce154" type="text" value="" />
<br />
<input id="ce160" name="ce160" type="text" value="" />
<input id="ce161" name="ce161" type="text" value="" />
<input id="ce162" name="ce162" type="text" value="" />
<input id="ce163" name="ce163" type="text" value="" />
<input id="ce164" name="ce164" type="text" value="" />
<br />
<input id="ce170" name="ce170" type="text" value="" />
<input id="ce171" name="ce171" type="text" value="" />
<input id="ce172" name="ce172" type="text" value="" />
<input id="ce173" name="ce173" type="text" value="" />
<input id="ce174" name="ce174" type="text" value="" />
<br />
<input id="ce180" name="ce180" type="text" value="" />
<input id="ce181" name="ce181" type="text" value="" />
<input id="ce182" name="ce182" type="text" value="" />
<input id="ce183" name="ce183" type="text" value="" />
<input id="ce184" name="ce184" type="text" value="" />
<br />
<input id="ce190" name="ce190" type="text" value="" />
<input id="ce191" name="ce191" type="text" value="" />
<input id="ce192" name="ce192" type="text" value="" />
<input id="ce193" name="ce193" type="text" value="" />
<input id="ce194" name="ce194" type="text" value="" />
<br />
<input id="ce200" name="ce200" type="text" value="" />
<input id="ce201" name="ce201" type="text" value="" />
<input id="ce202" name="ce202" type="text" value="" />
<input id="ce203" name="ce203" type="text" value="" />
<input id="ce204" name="ce204" type="text" value="" />
<br />
<input id="ce210" name="ce210" type="text" value="" />
<input id="ce211" name="ce211" type="text" value="" />
<input id="ce212" name="ce212" type="text" value="" />
<input id="ce213" name="ce213" type="text" value="" />
<input id="ce214" name="ce214" type="text" value="" />
<br />
<input id="ce220" name="ce220" type="text" value="" />
<input id="ce221" name="ce221" type="text" value="" />
<input id="ce222" name="ce222" type="text" value="" />
<input id="ce223" name="ce223" type="text" value="" />
<input id="ce224" name="ce224" type="text" value="" />
<br />
<input id="ce230" name="ce230" type="text" value="" />
<input id="ce231" name="ce231" type="text" value="" />
<input id="ce232" name="ce232" type="text" value="" />
<input id="ce233" name="ce233" type="text" value="" />
<input id="ce234" name="ce234" type="text" value="" />
<br />
<input id="ce240" name="ce240" type="text" value="" />
<input id="ce241" name="ce241" type="text" value="" />
<input id="ce242" name="ce242" type="text" value="" />
<input id="ce243" name="ce243" type="text" value="" />
<input id="ce244" name="ce244" type="text" value="" />
<br />
<input id="ce250" name="ce250" type="text" value="" />
<input id="ce251" name="ce251" type="text" value="" />
<input id="ce252" name="ce252" type="text" value="" />
<input id="ce253" name="ce253" type="text" value="" />
<input id="ce254" name="ce254" type="text" value="" />
</fieldset>
</form>
</body>
</html>