Solved

Real-time transparency slider

Posted on 2013-10-27
6
506 Views
Last Modified: 2013-11-09
I need to take an existing image and set the transparency in real-time, with a slider.  Assistance is greatly appreciated.
0
Comment
Question by:frugalmule
6 Comments
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39605832
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
 

Author Comment

by:frugalmule
ID: 39635183
I'm trying to choose a background color for a webpage and need the code format that would work best for that.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39635700
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
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 39636069
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
 
LVL 43

Expert Comment

by:Rob
ID: 39636217
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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use email signature images to promote corporate certifications and industry awards.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The goal of the tutorial is to teach the user how to use import presets downloaded from the internet into Adobe Lightroom. Once you downloaded the presets go into the preset folder and press import then import your preset and your set it to go.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

680 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question