Real-time transparency slider

I need to take an existing image and set the transparency in real-time, with a slider.  Assistance is greatly appreciated.
frugalmuleAsked:
Who is Participating?
 
RobConnect With a Mentor Owner (Aidellio)Commented:
seeing as you posted this in the jquery and web topics:

http://jsbin.com/EGiwotir/1/

move the slider to change the opacity of the EE image.

Use the 3 sliders below that to change the background colour.
0
 
Ray PaseurCommented:
You can do this easily in Photoshop.  If that's not what you're looking for, please tell us a little more about the application needs, thanks.
0
 
frugalmuleAuthor Commented:
I'm trying to choose a background color for a webpage and need the code format that would work best for that.
0
 
Kyle HamiltonData ScientistCommented:
it's not clear what you are asking.

Are you building an application that allows people to pick colors from an image that they dynamically set transparency on? Javascript/CSS?

or,

Are you just trying to find a "good" background color for your website based on some image you have? Do you have photoshop? You can get the HEX code for the color by right clicking in the photoshop file.
0
 
RobOwner (Aidellio)Commented:
For reference, given the jsbin may not always be accessible:

html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
  <div style='background-color: blue' class="swatch">
  <img id='myimage' src="http://experts.cachefly.net/0/images/experts-exchange/experts-exchange-logo.png" alt="">
    </div>
  <p></p>
  <div id="slider"></div>
  
  <div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
 
<div id="swatch" class="swatch ui-widget-content ui-corner-all"></div>
  <div style="margin-top:30px;">
  <p><span>Opacity: </span><span id='opacity'>1</span></p>
  <p><span>Colour: #</span><span id='colour'></span></p>
    </div>
</body>
</html>

Open in new window


css:
#red, #green, #blue {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
  }
  #swatch {
    width: 120px;
    height: 100px;
    margin-top: 18px;
    margin-left: 350px;
    background-image: none;
  }
  #red .ui-slider-range { background: #ef2929; }
  #red .ui-slider-handle { border-color: #ef2929; }
  #green .ui-slider-range { background: #8ae234; }
  #green .ui-slider-handle { border-color: #8ae234; }
  #blue .ui-slider-range { background: #729fcf; }
  #blue .ui-slider-handle { border-color: #729fcf; }

Open in new window


javascript:
 $(function() {
   $( "#slider" ).slider({
     min: 0,
     max: 1,
     step: 0.1,
     slide: function( event, ui ) {
       var opc = 1-ui.value;
        $( "#myimage" ).css( "opacity",opc );
       $("#opacity").text(opc);
      }
   });
  });

function hexFromRGB(r, g, b) {
    var hex = [
      r.toString( 16 ),
      g.toString( 16 ),
      b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
      if ( val.length === 1 ) {
        hex[ nr ] = "0" + val;
      }
    });
    return hex.join( "" ).toUpperCase();
  }
  function refreshSwatch() {
    var red = $( "#red" ).slider( "value" ),
      green = $( "#green" ).slider( "value" ),
      blue = $( "#blue" ).slider( "value" ),
      hex = hexFromRGB( red, green, blue );
    $("#colour").text(hex);
    $( ".swatch" ).css( "background-color", "#" + hex );
  }
  $(function() {
    $( "#red, #green, #blue" ).slider({
      orientation: "horizontal",
      range: "min",
      max: 255,
      value: 127,
      slide: refreshSwatch,
      change: refreshSwatch
    });
    $( "#red" ).slider( "value", 255 );
    $( "#green" ).slider( "value", 140 );
    $( "#blue" ).slider( "value", 60 );
  });

Open in new window

0
All Courses

From novice to tech pro — start learning today.