Implementation of the Slider as CSS Input - AJAX

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):

<form>

<table>

<tr>

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

</tr>

<tr>

<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>

</tr>

<tr>

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

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

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

</tr>

<tr>

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

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

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

</tr>

</table>

</form>

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]/,'');

if(r/1>255)r=255;

if(g/1>255)g=255;

if(b/1>255)b=255;

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.