styler.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. $(document).ready(function () {
  2. $('.styler').click(function() {
  3. $(".styler").toggleClass("styler-active");
  4. $('.styler-show').slideToggle('slow');
  5. }); /* to show the styler */
  6. $('#colorSelector-top-bar').tipTip({content: "Change the top bar color", defaultPosition: "right"});
  7. $('#colorSelector-box-head').tipTip({content: "Change the box header color", defaultPosition: "right"});
  8. /* for the tooltips describing what each colorpicker changes */
  9. $('#colorSelector-top-bar').ColorPicker({
  10. color: '#292929',
  11. onShow: function (colpkr) {
  12. $(colpkr).fadeIn(500);
  13. return false;
  14. },
  15. onHide: function (colpkr) {
  16. $(colpkr).fadeOut(500);
  17. return false;
  18. },
  19. onChange: function (hsb, hex, rgb) {
  20. $('.top-bar, #colorSelector-top-bar').css('backgroundColor', '#' + hex);
  21. }
  22. });
  23. $('#colorSelector-box-head').ColorPicker({
  24. color: '#292929',
  25. onShow: function (colpkr) {
  26. $(colpkr).fadeIn(500);
  27. return false;
  28. },
  29. onHide: function (colpkr) {
  30. $(colpkr).fadeOut(500);
  31. return false;
  32. },
  33. onChange: function (hsb, hex, rgb) {
  34. $('.box-head, #colorSelector-box-head').css('backgroundColor', '#' + hex);
  35. }
  36. });
  37. });