From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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.
Have fun!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Hi, it looks great.
i complete have no idea how this styling can be used on a page. for instance i a registration page. how do i connect to this or how do i incorporate this to my pages? thanku
Pingback: uberVU - social comments
Pingback: jQuery Style Slider | Webappsdepot
Great idea this, i like it. I thought I would leave my first comment
Follow me on Twitter
hi i am php coder.i have no idea in smarty(IDE).so pls give me smarty introduction (tutorial) web site.
This is really cool! Thank you! Should be a fun element for the website I’m building for special ed students – give them a more interactive experience on the site.
Nice one but any idea how to add a reset to this?
I observed that the changed settings remain intact even on a page refresh.
Can someone help adding a settings reset to the original state?