I can't use a jQuery Color Picker widget -


i trying put jquery color picker website. the color picker, lindekleiv, isn't working. code have is:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $('input#mycolorpicker').colorpicker({       format: 'hex',       size: 100 }); </script>

the full code of page:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <link rel="stylesheet" type="text/css" href="../css/mainpage.css" media="screen" /> <link href='http://fonts.googleapis.com/css?family=open+sans|josefin+slab:400,700,700italic,400italic' rel='stylesheet' type='text/css' /> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="jquery.ui.colorpicker.min.js"></script> <script> $(function() { // wait page load     $('#mycolorpicker').colorpicker({         format: 'hex',         size: 100     }); }); </script> </head>  <body>  <div id="head"> <h1><span>welcome codetowel&copy;.</span></h1> <h1>the place code, towel!</h1> </div>  <p>snippets bits of code can download , put webpage. have seperate snippets <code>&lt;code&gt;</code>, <code>&lt;pre&gt;</code>, , <code>&lt;kbd&gt;</code> elements.</p> <p>don't colors current website? change 'em!</p> <input id="mycolorpicker" type="text" /> </body> </html>

your code has few problems stopping working... here are:

  1. the plugin requires jquery ui - need load that
  2. you not loading actual javascript file contains plugin
  3. you not loading stylesheet file
  4. you need wait page load before using .colorpicker
  5. this not important, recommend changing selector (input#mycolorpicker) #mycolorpicker

so.. here final code, after making of these changes:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"></script> <script src="jquery.ui.colorpicker.min.js"></script> <link rel="stylesheet" href="css/jquery.ui.colorpicker.css"> <script> $(function() { // wait page load     $("#mycolorpicker").colorpicker({         format: 'hex',         size:   100     }); }); </script>

then want put color picker in html, put

<input type="text" id="mycolorpicker" name="color" />

Comments

Post a Comment