Jump to content

jQuery color picker


Imoddedu

Recommended Posts

I've checked to see that all the files are in the right places, everything I can think of the color picker isn't working.I have this in the header

<!-- CSS & JavaScript --><style type="text/css">@import url("style.css");</style><style type="text/css">@import url("includes/css/smoothness/jquery-ui-1.8.2.custom.css");</style> <link href="blue.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="includes/js/jquery.js"></script><script type="text/javascript" src="includes/js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="includes/js/jquery-ui-1.8.2.custom.min.js"></script><script type="text/javascript" src="includes/js/calendar.js"></script><script type="text/javascript" src="includes/js/jsapi.js"></script>

then this is the html for the color picker

<div id="colorchanger">   <a class="colorbox colorblue" href="?theme=blue" title="Blue Theme"></a>   <a class="colorbox colorgreen" href="?theme=green" title="Green Theme"></a>   <a class="colorbox colororange" href="?theme=orange" title="Orange Theme"></a>   <a class="colorbox colorred" href="?theme=red" title="Red Theme"></a></div>

then this is colorpicker.js

google.load("jquery", "1.4.2");google.setOnLoadCallback(function(){   // Color changer   $(".colorblue").click(function(){	  $("link").attr("href", "blue.css");	  return false;   });      $(".colorgreen").click(function(){	  $("link").attr("href", "green.css");	  return false;   });      $(".colororange").click(function(){	  $("link").attr("href", "orange.css");	  return false;   });      $(".colorred").click(function(){	  $("link").attr("href", "red.css");	  return false;   }); });

Link to comment
Share on other sites

Hi!I Think Here Are Mistakes!

<!-- U Are Using Multiple Classes "colorbox colorblue" In Class --!><a class="colorbox colorblue" href="?theme=blue" title="Blue Theme"></a><!-- Either U Are Calling Class ".colorblue" By Class Name, My Be It's Conflicting With Multiple Classes Name --!>$(".colorblue").click(function(){      $("link").attr("href", "blue.css");      return false;});<!-- U Can Use Assign By ID Too, TRY This Method Too --!><a id="colorblue" class="colorbox colorblue" href="?theme=blue" title="Blue Theme"></a>$("#colorblue").click(function(){      $("link").attr("href", "blue.css");      return false;});<!-- So Plz Test & Inform, I Don't Have Ur JS Files For Testing Myself :S --!>

Link to comment
Share on other sites

Use Firebug, and check the net tab to make sure that all of the files are found, and keep an eye on the console tab for error messages. Maybe also put an alert into the function to make sure it's actually being executed when the page loads.

Link to comment
Share on other sites

Hi!Can U Plz Set Download Link Here Of Your Code?Or Your JQuery Color Picker Download Link.I'll Have To Compile It Myself.
TBH, you don't need it, :) you can just make a replica with the code I posted. It should be the most important part.
Link to comment
Share on other sites

It will help you to get Firebug set up. The browser will tell you if there's a problem with the code, and it will tell you what the problem is. That's the only way to debug code (other than posting questions on a forum and waiting for someone else to tell you the answer, which is probably not something to put on your resume), you need to pay attention to what the browser is telling you. Like I mentioned, the net tab in Firebug will also point out any files are not found. You should be able to start Firefox and go to getfirebug.com to install the plugin, then click on the bug icon in the lower right or use the Tools menu to open and enable it. The first time you start it you'll probably also need to enable the console and net tabs, I think they start disabled by default.

Link to comment
Share on other sites

If you have Chrome or Safari, you can use the Webkit Inspector instead of Firebug.P.S. it is valid to have multiple class names in the class attribute.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...