How to add color pickers

  • sosidee
  • sosidee's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Web Agency Vicenza
  • Posts: 6
  • Thank you received: 1

sosidee created the topic: How to add color pickers

Hi,
I made a workaround to insert color pickers in a form.

The base idea was to get it simple, so I used "jscolor", the javascript based color picker by Odvarko.

Since I was using Joomla, to add the js script to the the form without installing extensions or changing the index.php file I embedded the form in a (two lines) article:
<script src="/path_to/jscolor.js"></script>
{BreezingForms:FOO}

In order to control the exact moment when the js script is executed, I wrapped all the code of the jscolor.js file inside a custom function:
function load_jscolor_now() {
/* [original jscolor.js code] */
}
Then I added a couple of textfield elements (named let's say color1 and color2) to the form, setting a custom Initscript at "Form Entry" (advanced properties) for both:
function ff_color1_init(element, condition)
{
    element.className += ' jscolor';
}
and
function ff_color2_init(element, condition)
{
   element.className += ' jscolor';
   load_jscolor_now();
}

Please note that the initscript of the last field contains a call to the custom js function to activate the color pickers.

That's all.



PS
If you want to hide the color code in the textboxs, in the jscolor.js file substitute the line:
this.styleElement.style.color = this.isLight() ? '#000' : '#FFF';
with the line:
this.styleElement.style.color = '#' + this.toString();
#193800
The following user(s) said Thank You: MarioPuco
  • Posts: 5958
  • Karma: 119
  • Thank you received: 554

MarioPuco replied the topic: How to add color pickers

Hello,


Thank you for sharing your solution with us :)
Maybe you could include your scripts via form advance Options > More options > Form Pieces > Before Form > Custom :

$this->execPieceByName('ff_InitLib');
echo '<script src="'.JURI::root().'/path_to/jscolor.js" type="text/javascript"></script>';

But if it works the way you presented than it's all goooood :)

Regards,
Mario

Satisfied with our Support ?
PayPal Tip
===============================================
Need to renew Pro Support?
Buy Here!
===============================================
Satisfied?
Consider a membership!
===============================================
Like us on Facebook
===============================================
#193837
  • Posts: 273
  • Karma: 1
  • Thank you received: 34

Eddy.vh replied the topic: How to add color pickers

Hello.

Looking for possibilities of color choice, I arrived on this post.

I downloaded the jscolor.js and placed it in a includes/js directory

In my form, I have a text field to which I add the necessary class (jscolor).
I add in the before form piece:
$this->execPieceByName(ff_InitLib);
'echo
<script type="text/javascript" scr="includes/js/jscolor.js"></script>
'
I check the source code, my field has the class jscolor, the path to the script appears before the form but the field does not work.

If I delete the content of before form piece and paste the code of jscolor.js into the initialization script, the field works.

Why doesn't the field work by calling the script in before forms piece?


Thank you for your help.
Regards.
#237249
Attachments:
  • Posts: 5958
  • Karma: 119
  • Thank you received: 554

MarioPuco replied the topic: How to add color pickers

Hi Eddy,

Did you by anychance look at this color-picker integration ?
crosstec.org/en/forums/15-usage/117189-h....html?start=0#203346

I think this one should work out of the box.

Regards,m
Mario

Satisfied with our Support ?
PayPal Tip
===============================================
Need to renew Pro Support?
Buy Here!
===============================================
Satisfied?
Consider a membership!
===============================================
Like us on Facebook
===============================================
#237250
The following user(s) said Thank You: Eddy.vh
  • Posts: 273
  • Karma: 1
  • Thank you received: 34

Eddy.vh replied the topic: How to add color pickers

It's perfect, I was able to experiment with this script and adapt it to a form.
I was even able, with the help of the documentation, to personalize a little bit.

That being said, I would have liked to understand why the other script didn't work... It's strange.

Thank you very much for your help.
#237251
  • Posts: 273
  • Karma: 1
  • Thank you received: 34

Eddy.vh replied the topic: How to add color pickers

Hello.

I also tested Spectrum.
It is easy to install and easy to customize.
From a simple picker to an intermediate or complete palette, the possibilities are very numerous and each of them is managed by a parameter in javascript...

See Spectrum and its documentation.
#237290
Moderators: ForumSupporttomeperica
Time to create page: 0.192 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here