Solved

Report values from jqueryui slider colorpicker to html input text fields

Posted on 2013-11-18
5
330 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Run command in each subfolder using batch file 7 67
rhino JavaScript import, load 25 92
Way to decrease size of apk file 9 86
Android development question 2 53
In this tutorial I will show you how to provide a dynamic RTF document on your website generated with data from your database. For this tutorial you will need Microsoft Word or WordPad, WhizBase and Microsoft Access. In this tutorial I will show …
In this tutorial I will show you how to make a simple HTML bar chart with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.experts-exchange.com/ARTH_5123186.html (http://www.experts-ex…
The goal of the video will be to teach the user the difference and consequence of passing data by value vs passing data by reference in C++. An example of passing data by value as well as an example of passing data by reference will be be given. Bot…
The viewer will learn additional member functions of the vector class. Specifically, the capacity and swap member functions will be introduced.

808 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