Solved

Report values from jqueryui slider colorpicker to html input text fields

Posted on 2013-11-18
5
332 Views
Last Modified: 2013-12-03
I am using the jqueryui colorpicker and I would like to echo the values for each of the sliders and the aggregate swatch to html text input fields.

Can anybody help me.

Thank you

John
0
Comment
Question by:johnecollins
  • 3
  • 2
5 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 39658707
Here

Main changes are

      $("#red").find(".ui-slider-handle").html('<span class="but">'+red+'</span>');
      $("#green").find(".ui-slider-handle").html('<span class="but">'+green+'</span>');
      $("#blue").find(".ui-slider-handle").html('<span class="but">'+blue+'</span>');

      $("#hexVal").val("#"+hex);

Open in new window




<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Slider - Colorpicker</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>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #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;
  }
  .but { font-size:xx-small;}
  #hexVal { border:none; padding-left:40px;}
  a.ui-slider-handle { text-decoration: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; }
  </style>
  <script>
  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 );
      $( "#swatch" ).css( "background-color", "#" + hex );
      $("#red").find(".ui-slider-handle").html('<span class="but">'+red+'</span>');
      $("#green").find(".ui-slider-handle").html('<span class="but">'+green+'</span>');
      $("#blue").find(".ui-slider-handle").html('<span class="but">'+blue+'</span>');

      $("#hexVal").val("#"+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 );
  });
  </script>
</head>
<body class="ui-widget-content" style="border: 0;">
 
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding: 4px;">
  <span class="ui-icon ui-icon-pencil" style="float: left; margin: -2px 5px 0 0;"></span>
  Simple Colorpicker
</p>
 
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
 
<div id="swatch" class="ui-widget-content ui-corner-all"></div><input type="text" id="hexVal" value="" />
 
 
</body>
</html>

Open in new window

0
 

Author Comment

by:johnecollins
ID: 39667462
Hi mplungjan,

Thank you very much for responding, I am sorry that it has taken so long to respond.

I was not aware you had answered, but I am working through your solution  and I have come across a bit of grief with the 1.10.3 css and js files but I am working through the issues no problem.

I will be in touch very soon

Thank you very much

John
0
 

Author Comment

by:johnecollins
ID: 39682463
Hi mplungjan,

I have installed Visual Studio 2012 on a laptop and tried to add wampserver, but can't get wampserver to run successfully and end up with an orange W in the tray.

I am considering removing VS 2012 and trying to install wampserver again and I am hoping to run your solution then.

I will get this done by Sunday

Thanks for your patience

John
0
 

Author Closing Comment

by:johnecollins
ID: 39693974
Hi mplungjan

Thank you very much for your solution it works just fine and does what I want.

Once again Thank you

John
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39694790
You are welcome
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem to App 4 120
Problem to refer to value 8 82
Create a script to move users to their pertaining AD group based on their province 5 70
Awk : two files math 8 29
Go is an acronym of golang, is a programming language developed Google in 2007. Go is a new language that is mostly in the C family, with significant input from Pascal/Modula/Oberon family. Hence Go arisen as low-level language with fast compilation…
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to user default arguments when defining functions. This method of defining functions will be contrasted with the non-default-argument of defining functions.

726 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