Dynamically Changing Style with jQuery

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 […]

By in Playground on

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

DEMO

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.

chadking

Chadking is an absolute geek that rarely leaves the comfort of his 3-screen desk. He is a self taught programmer and is addicted to all possible legal drugs.

Exploring Playful Context-Aware Animations for Fixed Elements

Recreating a Dave Whyte Animation in React-Three-Fiber

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 7

Comments are closed.

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

  2. Pingback: uberVU - social comments

  3. Pingback: jQuery Style Slider | Webappsdepot

  5. hi i am php coder.i have no idea in smarty(IDE).so pls give me smarty introduction (tutorial) web site.

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

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