FCD Styles
Login is required

Join the forum, it's quick and easy

FCD Styles
Login is required
FCD Styles
Would you like to react to this message? Create an account in a few clicks or log in to continue.
FCD Styles

my design and notes studio...

HTML 5 color picker

FCD Styles :: Helpful Things :: Styles-Codes

Go down

#1

HTML 5 color picker Empty HTML 5 color picker

Post by FaerieJewels Sun Nov 19, 2023 8:52 am

create a new java script / all pages

Code:
/*
* -- SCEditor HTML5 Color Picker --
* Version: 1.3 EN (2018-05-17)
* Author: Wecoc
* Description: Implements the default HTML5 Color Picker on the SCEditor
*/
 
$(document).ready(function() {
  if ($.sceditor && window.toolbar) {
    // Create SCEditor color buttons
    $.sceditor.command.set('color_h', {
      exec : drawColorHolder,
      txtExec : drawColorHolder
    });
    $.sceditor.command.set('color_p', {
      exec : callColorHolder,
      txtExec : callColorHolder
    });
    toolbar = toolbar.replace(/color/, 'color_h,color_p');
    setTimeout(setColorHTML5Picker, 5);
 
    // Set CSS propierties on SCEditor buttons
    $('head').append('<style type="text/css">' +
        '.sceditor-button-color_h div {' +
            'background-image:url(https://i.servimg.com/u/f62/14/49/87/10/color_11.png) !important;' +
        '}' +
        '.sceditor-button-color_p div {' +
            'background-image:url(https://i.servimg.com/u/f62/14/49/87/10/color_11.png) !important;' +
            'background-position: 0 -16px;' +
        '}' +
        '.sceditor-button-color_h {' +
            'padding-right: 2px !important;' +
            'border-radius: 3px 0px 0px 3px !important;' +
            'margin-right: -1px;' +
        '}' +
        '.sceditor-button-color_p {' +
            'padding-left: 2px !important;' +
            'border-radius: 0px 3px 3px 0px  !important;' +
            'width: 4px !important;' +
        '}' +
        '.color_holder {' +
            'position: absolute;' +
            'filter: alpha(opacity=0);' +
            'opacity: 0;' +
        '}' +
    '</style>');
  }
});
 
function setColorHTML5Picker() {
  // Get the color from last time if defined
  var start_color = startColorHolder();
  // Create HTML5 Color picker (hidden)
  var holder = $('<input type="color" class="color_holder" />')[0];
  $(holder).addClass('color_holder');
  holder.addEventListener("change", updateColorHolder);
  holder.value = start_color;
  // Define buttons "Current Color" & "New Color"
  var holder_button = document.querySelector('.sceditor-button-color_h div');
  var picker_button = document.querySelector('.sceditor-button-color_p div');
  // Set HTML5 button position
  var picker = document.querySelector('.sceditor-button-color_p');
  $(picker).after(holder);
  $('head').append('<style type="text/css">' +
      '.color_holder {' +
          'top: ' + picker.offsetTop + 'px;' +
          'left: ' + picker.offsetLeft + 'px;' +
          'width: ' + picker.offsetWidth + 'px;' +
          'height: ' + picker.offsetHeight + 'px;' +
      '}' +
  '</style>');
  // Set button tooltips
  holder_button.title = "Current Color";
  picker_button.title = "New Color";
  // Set button inner HTML (color line)
  holder_button.innerHTML = '<div class="color_line" style="position:relative;height:2px;top:12px;" />';
  refreshColorHolder(start_color);
  // Double hover effect
  var h = $(holder_button.parentElement), p = $(picker_button.parentElement);
  h.hover(function(){ p.addClass("hover") }, function(){ p.removeClass("hover") });
  p.hover(function(){ h.addClass("hover") }, function(){ h.removeClass("hover") });
  holder.addEventListener("mouseover", function(){ p.addClass("hover"); h.addClass("hover"); });
  holder.addEventListener("mouseout", function(){ p.removeClass("hover"); h.removeClass("hover"); });
};
 
function startColorHolder() {
  if (!localStorage.colorHolder) return "#ff0000";
  return localStorage.colorHolder;
};
 
function drawColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  this.insert("[color=" + holder.value + "]", "[/color]", true, true, true);
};
 
function callColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  holder.click();
};
 
function refreshColorHolder(value) {
  var line = document.querySelector('.color_line'); if (!line) return;
  line.style.background = value;
  localStorage.colorHolder = value;
};
 
function updateColorHolder() {
  var holder = document.querySelector('input.color_holder'); if (!holder) return;
  refreshColorHolder(holder.value);
};
FaerieJewels
FaerieJewels

The FaerieQueen
     

Posts : 48
MAGICAL STARS : 1604
MAGICAL FLOWERS MAGICAL FLOWERS : 5
Location : Scenic Wyoming

http://faeriecharmdesigns.com

Back to top Go down

Back to top

FCD Styles :: Helpful Things :: Styles-Codes

 
Permissions in this forum:
You cannot reply to topics in this forum