Expandable Animated Card Slider on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/AGh-Ffeo8Yw Contact Us: https://www.fiverr.com/s/1qgzx59 #cardslider, #squarespace, #jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode

-
Image
Expandable Animated Card Slider on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/AGh-Ffeo8Yw Contact Us: https://www.fiverr.com/s/1qgzx59 #cardslider , #squarespace , #jishaansinghal , #css , #html , #js , #jquery , #squarespacewebsite , #customcode
Post a Comment

How to add Colorpicker jquery UI on your own website by jishaansinghal

-

How to add Colorpicker jquery UI on your own website




In this video, I'm going to show you how to use Colorpicker jquery UI on your own website



Code:
<!doctype html>
<html lang="en">
<head>
  <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.13.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
  <style>
  body{
 background-image: radial-gradient(circle, #051937, #004d7a, #008793, #00bf72, #a8eb12) !important;
  }

  #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-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script>
  $( 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 );
    }
 
    $( "#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>
<center>
<body class="ui-widget-content" style="border:0;">
 

 
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
 
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
</center>
 
 
</body>
</html>





 Connect/Contact with me here


Fiverr       : https://www.fiverr.com/jishaansinghal

Youtube    : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQ

Facebook  : https://www.facebook.com/jishaan.singhal

FB Group :https://www.facebook.com/groups/457165385377074

FB Group :https://www.facebook.com/groups/freegigpromotewithjishaansinghal

FB Page    :https://www.facebook.com/promoteyourgig

Twitter      : twitter.com/jishaan_singhal

Instagram : https://www.instagram.com/jishaansinghal

Linkedin    : https://www.linkedin.com/in/jishaan-singhal-1b77b2203

Blogger      : https://jishaansinghal.blogspot.com

Email         : jishaanwm21@gmail.com


keywords:
colorpicker jquery ui
color picker jquery codepen
color picker jquery plugin
color picker jquery bootstrap
color picker jquery plugin example
color picker jquery code
color picker jquery free
color picker jquery jsfiddle
colorpicker jquery plugin
color picker jquery example
jquery(...).colorpicker is not a function
jquery color picker bootstrap 4
jquery bootstrap colorpicker
best jquery color picker
jquery color picker change background
jquery.colorpicker.bygiro.js
jquery colorpicker cdn
jquery color picker change onclick
jquery color picker cmyk
jquery ui color picker codepen
jquery style switcher color picker codepen
color picker jquery
color picker jquery ui
jquery colorpicker drupal 8
jquery_colorpicker drupal download
color picker dropdown jquery
jquery color picker drop down list
color picker in jquery demo
dynamic color picker jquery
jquery ui color picker demo
jquery default color picker
jquery color picker example code
jquery color picker events
jquery ui color picker example
jquery simple color picker example
jquery easy color picker
colorpicker jquery event
jquery color picker from image
jquery color picker input field
jquery font color picker
jquery colorpicker get value
jquery gradient color picker
color picker html jquery
jquery color picker hex
jquery-hex-color picker.css
jquery-hex-color picker.min.js
color picker html input jquery
html5 color picker jquery
jquery-hex-color picker get value
colorpicker in jquery
jquery.colorpicker.js
jquery.colorpicker.js download
color picker js jquery
jquery.colorpicker.min.js
colorpicker-master/jquery.colorpicker.js
jquery.simple-color-picker.js
kendo color picker jquery
jquery colorpicker library
module jquery color picker
multiple color picker jquery
jquery mobile color picker
jquery mini color picker
mvc jquery color picker
jquery color picker not working
jquery colorpicker onchange
jquery color picker plugin free download
jquery color picker predefined colors
jquery-colorpicker-rails
jquery color picker rgba
jquery color picker rgb
jquery remove colorpicker
jquery ral color picker
color picker jquery script
jquery colorpicker set color
colorpicker select jquery
jquery color picker slider
jquery color picker spectrum
jquery color picker set value
jquery color picker simple
simple color picker jquery
color picker tool jquery
jquery color picker textbox
jquery color picker with transparency
tiny color picker jquery
colorpicker using jquery
kendo ui jquery color picker
color picker value jquery
jquery colorpicker value
jquery color picker w3schools
color picker without jquery
jquery wheel color picker
jquery colorpicker
jquery color picker drupal 8

Comments

Post a Comment

Popular posts from this blog

how to add a button as a circle button on the Squarespace by jishaansinghal

-
Image
  In this video, I'm showing you how to add a button as a circle button on the Squarespace button with custom CSS Code!    How To Install: Once a button has been added and saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box. This plugin uses a CSS editor and works with Squarespace 7.1, 7.0 to add an active effect on Button on Squarespace 7.1,7.0 by jishaansinghal. This code uses a CSS editor and works with Squarespace 7.1, 7.0 templates. This code uses CSS editor Copy and pastes the code below into the editor box. -------------------------------------------------------------------------------------------------------- // Circle Button Style o squarespace // .sqs-block-button-element--medium { padding : 100px 45px !important ; -webkit-border-radius : 50% !important ; -moz-border-radius : 50% !important ; border-radius : 50% !important ; } Customize: You do not need to change the transform or tra...
Read more

How to add Vector Scrolling GSAP animation Effects on your Squarespace Website in 2022 with full source code by jishaansinghal

-
Image
How to add GSAP animation Effects on your Squarespace Website in 2022 with full source code by jishaansinghal Source Code: Paste this code on Header code injection: <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel='stylesheet' type='text/css'> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <script src="https://www.jqueryscript.net/demo/performant-scroll-gsap-vector/jquery.vs.min.js"></script> Paste this code on Footer code injection: <script> // And so concludes the new VectorScr...
Read more

How to install and use owl carousel mousewheel animation slider with full source code by jishaansinghal 2022

-
Image
How to install and use owl carousel mouse wheel animation slider with full source code by jishaansinghal 2022 Source Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/> <style> body{ background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); height: 70vh; } img{ width: 100%; height: 250px; } </style> </head> <body> <div class="owl-carousel owl-theme" style=...
Read more