From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.
The jQuery Style Slider allows you to change the style of certain html elements in real time and save the style setting to a MySQL database table using PHP. This makes the script interesting for user personalization. The script is based on the jQuery UI Slider Widget and the Sexy Vertical Sliding Panel Using jQuery And CSS3. The RGB values for colors can be set using three sliders and additionally, some elements can be sized as well.
Click on the screenshot to test the Style Slider or get the source code at the end of this article.
To change the style of an element, click on its button over the div container. Open the style slider on the left and tune the RGB values or change the size (if applicable) on the 4th slider. You can also change the background pattern of the body by clicking on one of the stripe icons. By default on launch, the body is always selected.
If you refresh the page or come back later, you will see that your changes have been saved.
Download the source code: jQuery style slider ZIP
Don’t forget to change the database details in the constants.php file in the folder styleslider/code/php.
The sql file for creating the table is in the root directory (tables.sql).
I still need to improve some details concerning the loading of the page, e.g. it flickers shortly without any style. Any suggestions are welcome! If you need any help, please comment.