Hide the text from input field

[sticilface]

Me again... How can i hide the text from the field, once it has been rendered.

I'd like just a black box. most likely a cssadon, but i can't find an example.

[PitPik]

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

[sticilface]

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?

[PitPik]

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...

[sticilface]

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

[PitPik]

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

[PitPik]

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...

[PitPik]

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...

[sticilface]

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?