Hide the text from input field #39

Activity

1. PitPik commented on Dec 15, 2015

   

   PitPik

   on Dec 15, 2015

   Owner

   More actions

   Well, that's simple: Just don't use an input field but some <div>.
   So in your $('.color').colorPicker({... ) the selector .color is not an input field but something different. You still need to send the value from an input field,... so you need a <input type="hidden" ...> and put the value of it in the renderCallback.
   To find this hidden input field in your callback you need to put it as a sibling of the other element and go like:

   renderCallback: function($elm, toggled) {
       if (toggled === true) { // simple, lightweight check
           // ... like an open callback
       } else if (toggled === false) {
           var $input = $elm.parent().find('input');
           var inputName = $input.attr('name');
           var inputValue = $elm.val();
   
           $input.val(inputValue);
           ...
       }
   }

   ...You need to update the colorPicker again to make this work because I modified the fix from yesterday a bit.
   This is like the colored gray boxes underneath the input fields in the demo...
   Good luck
2. sticilface commented on Dec 16, 2015

   

   sticilface

   on Dec 16, 2015

   Author

   More actions

   Thanks for that. Will try tomorrow. Might get more complicated than that though. As the css is all done by jquerymobile and I've got the ui-field-contain option. So just using a div would take the whole line and not have the label.

   As a short cut interim measure can u set the text colour to be the same as the background?
3. PitPik commented on Dec 17, 2015

   

   PitPik

   on Dec 17, 2015

   Owner

   More actions

   OK, then just do your stuff first and then make the color transparent:

   renderCallback: function($elm, toggled) {
       if (toggled === true) { // simple, lightweight check
           // ... like an open callback
       } else if (toggled === false) {
           var $input = $elm.parent().find('input');
           var inputName = $input.attr('name');
           var inputValue = $elm.val();
           ...
           $.post("data.esp", JSON.stringify(data);
           $elm.css({'color': 'transparent'}); // won't see a thing ;o)
           ...
       }
   }

   Maybe a bit of a hack, but I hope it helps you...
4. sticilface commented on Dec 18, 2015

   

   sticilface

   on Dec 18, 2015

   Author

   More actions

   That didn't quite work for me but close

                   renderCallback: function($elm, toggled) {
                       if (toggled === true) { // simple, lightweight check
                           // ... like an open callback
                       } else if (toggled === false) {
   
                           // ... like a close callback
                           //var nameof = $(this).attr("name"); 
                           var $form = $(this).closest('input');
   
                           console.log($form.attr('name'));
                           var colors = this.color.colors,
                               rgb = colors.RND.rgb;
                           console.log(rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + colors.alpha);
   
                           var $form = $elm.closest('form');
                           var inputName = $elm.attr('name');
                           var inputValue = $elm.attr('value');
   
                           var data = {
                               color: {
                                   name: inputName,
                                   R: rgb.r,
                                   G: rgb.g,
                                   B: rgb.b,
                               }
                           };
                           console.log(JSON.stringify(data));
                           $.post("data.esp", JSON.stringify(data),
                               function(data) {
                                   console.log(data);
                               }
                           );
                           $elm.css('color', "rgb(" + colors.RND.rgb.r + "," + colors.RND.rgb.g + "," + colors.RND.rgb.b + ")"  );
                           $elm.css('text-shadow', 'none'); 
                           //SendColor(); 
                       }
                   },
   

   This however, doesn't stop it when it is first constructed. Close enough for now though. Thanks for the help
5. PitPik commented on May 19, 2016

   

   PitPik

   on May 19, 2016

   Owner

   More actions

   Hi @sticilface,
   I just introduced a new callback function that can help with your issue. It's called positionCallback and is called when the colorPicker is triggered or when you scroll right before it shows. This is good for many things like positioning more flexible, even inside custom containers, or in your case, to show numbers in the input field only when the colorPicker is active:

   $('.color').colorPicker({
       positionCallback: function($elm) {
           // ...
           $(this.$oldElm).css({'color': 'transparent'});
           this.$oldElm = $elm;
           $elm.css({'color': ''});
       },
       renderCallback: function($elm, toggled) {
           if (toggled === false) {
               $elm.css({'color': 'transparent'});
           }
       }
   }).css({'color': 'transparent'});

   You can also look it up in the ./demo/index.js (uncommented parts 1 to 3).

   Let me know if this works for you
6. PitPik commented on May 19, 2016

   

   PitPik

   on May 19, 2016

   Owner

   More actions

   There is also a new method inside color that can return a string used in css (like 'rgba(123,234,12,1)' called .toString().
   So, instead of

   $elm.css('color', "rgb(" + colors.RND.rgb.r + "," + colors.RND.rgb.g + "," + colors.RND.rgb.b + ")"  );

   you can now write

   $elm.css('color', this.color.toString(null, false));

   or

   $elm.css('color', this.color.toString());

   if alpha (opacity) doesn't matter...
7. PitPik commented on May 19, 2016

   

   PitPik

   on May 19, 2016

   Owner

   More actions

   Hi @sticilface again,
   I just found out that you don't even need the new callback:

   $('.color').colorPicker({
       renderCallback: function($elm, toggled) {
           if (toggled === false) {
               $elm.css({'color': 'transparent'});
           } else if (toggled === true) {
               $(this.$oldElm).css({'color': 'transparent'});
               this.$oldElm = $elm;
               $elm.css({'color': colors.RGBLuminance > 0.22 ? '#222' : '#ddd'});
           }
   }).css({'color': 'transparent'});

   This will also work for you...
8. sticilface commented on May 19, 2016

   

   sticilface

   on May 19, 2016

   Author

   More actions

   wow, cheers! I'm stuck in the middle of some toolchain issues.. and need to delve back into this project to fix it... I'll get back to you in a few days if that is ok?