Solved

Real-time transparency slider

Posted on 2013-10-27
6
504 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 109

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The goal of this is to tech the user how to export photos out of Lightroom and the different options they have. Select which photos you want to export : Select where you want to export and with which options : Export :
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

861 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