Home arrow AJAX & Prototype arrow Page 3 - Create a User-Defined CSS Website with PHP

Implementation of the Slider as CSS Input - AJAX

PHP as a server side scripting language can be used to customize CSS. This can make your website more readable and useful to your visitors. In this article, you'll learn what you can do to let them adjust your site so it looks good to them. This is the first part of a two-part series.

  1. Create a User-Defined CSS Website with PHP
  2. The Use of Sliders to Customize Colors
  3. Implementation of the Slider
  4. The AJAX HTML Form (Hidden)
By: Codex-M
Rating: starstarstarstarstar / 2
October 01, 2009

print this article



In order to get a glimpse of what we are going to accomplish, we will be using the “Text Box slider” from http://www.dhtmlgoodies.com/ as HTML input to communicate with the AJAX/PHP environment, which will then output the requested HTML style revisions (for font and background color) in real time without reloading the page.

Let’s make it easy to use, with black as the default font color and white as the background. We'll put some meaningful text below it as a sample. It should look like the screen shot below:

As to what you can see in the screen shot, the RGB color panel is used for both background and font colors. Next to the sliders is the color preview which the user can see before submitting the form inputs to AJAX/PHP. Submitting these RGB settings is done by clicking the “Customize webpage color” submit button.

Finally, using your favorite PHP editor, create a new blank PHP file, copy the script of “form_widget_amount_slider.html” to this new file, and let’s save it as customcss1.php.

How are these colors being generated?

The color preview and color choices (example: #775900) are purely generated by a JavaScript function and not in the PHP environment. Also, this application does not use a MySQL database at all.

Looking at the source code for the newly- renamed PHP file customcss1.php, http://www.dhtmlgoodies.com/ created a function called “color_functions.js.” This is a color function created in JavaScript. Another JavaScript file, “dhtmlgoodies_slider.js,” is responsible for the controls of the slider. A detailed discussion of how these scripts work is beyond the scope of this article.

The slider input form looks like this (for the background color panel):




<td colspan="3"><b>Background color panel</td>



<td width="100">Red:</td>

<td id="slider_target4"></td>

<td><input type="text" name="r" size="3" value="255" onchange="setColorByRGB()"></td>

<td rowspan="3" id="colorPreview2" width="100" style="text-align:center;border:1px solid #000"><span id="colorCode2" style="padding:2px;font-size:11px;line-height:60px;vertical-align:middle;background-color:#FFF;border:1px solid #000"></span></td>



<td width="100">Green:</td>

<td id="slider_target5"></td>

<td><input type="text" name="g" size="3" value="255" onchange="setColorByRGB()"></td>



<td width="100">Blue:</td>

<td id="slider_target6"></td>

<td><input type="text" name="b" size="3" value="255" onchange="setColorByRGB()"></td>




Important IDs should match the JavaScript function, so for example the id=”colorPreview2” is responsible for displaying the previews of the selected colors to the user. The id="colorCode2” is responsible for displaying the color code.

The JavaScript function to work with the form inputs above is this:

function setColorByRGB()


var formObj = document.forms[0];

var r = formObj.r.value.replace(/[^d]/,'');

var g = formObj.g.value.replace(/[^d]/,'');

var b = formObj.b.value.replace(/[^d]/,'');




r = baseConverter(r,10,16) + '';

g = baseConverter(g,10,16) + '';

b = baseConverter(b,10,16) + '';

if(r.length==1)r = '0' + r;

if(g.length==1)g = '0' + g;

if(b.length==1)b = '0' + b;

self.status = '#' + r + '' + g + '' + b;

document.getElementById('colorPreview2').style.backgroundColor = '#' + r + g + b;

document.getElementById('colorCode2').innerHTML = '#' + r + g + b;


This JavaScript and the input HTML was written by http://www.dhtmlgoodies.com/. The most important line in the above script is this:

document.getElementById('colorCode2').innerHTML = '#' + r + g + b;

This line contains the user input, which is the color code. We can manipulate this value to work with AJAX and PHP later.

>>> More AJAX & Prototype Articles          >>> More By Codex-M

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates


Dev Shed Tutorial Topics: