J Query Easy Color Chooser - ideal for choosing background colors

Question

J Query Easy Color Chooser - ideal for choosing background colors

As I venture into the world of HTML coding, I am struggling to implement a jQuery simple color picker to change the background color. Despite my efforts with various color pickers, I can't seem to make the background and display box respond correctly.

Click here for more information on the jQuery UI Slider Colorpicker.

The code I have utilized from the website can be found below:

<!doctype html>
<html lang='en'>
<head>
    <!-- Source https://jqueryui.com/slider/#colorpicker, retrieved Feb 2018 
        added missing 'https:' to line 7
        removed local call to /resources/demos/style.css line 8-->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>jQuery UI Slider - Colorpicker</title>
    <link rel='stylesheet' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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;
        }
        #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 src='https://code.jquery.com/jquery-1.12.4.js'></script>
    <script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>
    <script>
       // JavaScript functions for handling color selection
    </script>

<body>
    <p>Customize your colors using the interactive sliders:</p>
    <div id='red'></div>
    <div id='green'></div>
    <div id='blue'></div> 
    <div id='swatch' class='ui-widget-content ui-corner-all'></div>




</body>
</html>

html css jquery-plugins background-color

Answer 1

Answer №1

If you want to achieve that effect, all you need to do is substitute #swatch with body within the refreshSwatch() function:

$(function() {
          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);  <-- replace this
              $('body').css('background-color', '#' + hex);     // <-- with this
          }
          $('#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);
        });

<!doctype html>
<html lang='en'>

  <head>
    <!-- Source  https://jqueryui.com/slider/#colorpicker, retrieved Feb 2018 
            added missing 'https:' to line 7
            removed local call to /resources/demos/style.css line 8-->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>jQuery UI Slider - Colorpicker</title>
    <link rel='stylesheet' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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;
      }

      #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 src='https://code.jquery.com/jquery-1.12.4.js'></script>
    <script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>

  </head>

  <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>



    </body>

</html>

Answer 2

If you want to achieve that effect, all you need to do is substitute #swatch with body within the refreshSwatch() function:

$(function() {
          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);  <-- replace this
              $('body').css('background-color', '#' + hex);     // <-- with this
          }
          $('#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);
        });

<!doctype html>
<html lang='en'>

  <head>
    <!-- Source  https://jqueryui.com/slider/#colorpicker, retrieved Feb 2018 
            added missing 'https:' to line 7
            removed local call to /resources/demos/style.css line 8-->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>jQuery UI Slider - Colorpicker</title>
    <link rel='stylesheet' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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;
      }

      #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 src='https://code.jquery.com/jquery-1.12.4.js'></script>
    <script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>

  </head>

  <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>



    </body>

</html>

J Query Easy Color Chooser - ideal for choosing background colors

Answer №1

Similar questions

A div element featuring a border with transparent edges on the top right and bottom left corners

Preserve the aspect ratio of a div even when the height changes dynamically

How to Style CSS specifically for Internet Explorer?

Return to home page

The CSS rotation effect causes the element to spin and twirl

Displaying from the left side to the right side

Displayed information on hover

Using a for-loop to read inputs from a database in PHP

Creating a List with Sublists that are displayed when hovering over the parent List is a key element of effective design

Steps for altering the primary color in PrimeNG__Changing the primary color

What is the best way to center text in the middle of a button?

Ways to apply styles to the final element containing a specific class within a nested list using CSS

identifying unused class names within an HTML codebase

ngx hierarchical dropdown

Tips for displaying a message in a concealed field with jQuery

delete local ios css style datetime input

"Enhance your website with a unique Bootstrap 5 carousel featuring multiple

The presence of an iframe disrupts the order of the

Transferring data seamlessly between AJAX and PHP

Adjust the code to enhance the functionality of web components in Sharepoint