Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 551
  • Last Modified:

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.
0
frugalmule
Asked:
frugalmule
1 Solution
 
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:
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
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now