Solved

Report values from jqueryui slider colorpicker to html input text fields

Posted on 2013-11-18
5
320 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
You are welcome
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This video will show you how to get GIT to work in Eclipse.   It will walk you through how to install the EGit plugin in eclipse and how to checkout an existing repository.

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now