How to change CSS color values in real-time off a javascript slider?


Tags: php,javascript,css,variables

Problem :

I'm making a page where the user gets a javascript slider that goes from 0 to 100 and can use it to set the opacity of a div on the page.

I want the opacity of that div to change in real-time as they work the slider. I've not done this before. What's the best approach?

There cursor in the slider displays the slider's current value as you move it. It seems to be that I just need to find a way to display that value in any arbitrary other place on the page so I can display it in the style settings for the div.

The .js file that generates the slider has a line that (I think) is setting the current value in the cursor:

$(this).children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));

TO get this changing number to display somewhere else at the same time, do I just need to add a div somewhere and then add a line like this?

$("#newDivId").children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));

That seems like it would give me the number showing up in a div. How then would I get it into a form I could put into the style settings for a div?

If this was a php variable, I would do something like this,

style="opacity:<?php print $value ?>;"

What would be the .js equivalent?



Solution :

The jQuery UI Documentation has an example of a colorpicker with the slider widget. You should be able to grok it and adapt it for opacity.

Here is a working example that I threw together using the color picker example as a base: http://jsfiddle.net/6VgzT/


    CSS Howto..

    How to get css values in IE7 when “auto” is returned

    How can I target a element inside h2

    If contains 'string' - set css “visibility:hidden;” - how to?

    How can I set -webkit-mask-box-image through javascript?

    How to make a dynamic layout only by CSS

    how to modify height of a div when hover it and with transition (priority of CSS without Javascript)

    How to customize twitter/bootstrap more deeply? [closed]

    How to make text on the same line different font without using extra divs?

    How can I make my form autoscale correctly?

    How to spin an image horizontally with CSS

    How to make full window canvas in GWT?

    How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

    How to CSS a two column list of items?

    How to change navbar background color after page has scrolled down

    How to put a button inside of a text entry field in a form on a website using javascript, css, html

    Why jQuery.css does not apply a property if it is not supported and how is this being checked?

    How can I code CSS to make Table like?

    How to pause css animation at orginal state

    How to create css classes which are “stronger” that elements?

    How to find everything that is not matching a regular expression

    How to select lowest level ul in nested ul in Javascript/ css

    How to control element position when changing window size for parallax purpose

    Content property in CSS - how to put content into several paragraphs

    How to refere a stylesheet in phonegap?

    How to make the jQuery datePicker popup opaque and always in the foreground?

    How do you work on your HTML and CSS in PLay! + intellij idea? [closed]

    How to make this html code and css be in mobile app?

    how to make
  • add css class active after refreshing page?
  • How to make div scalable by using percentage in CSS

    How to centre my CSS menu?