CODEWITHSUNDEEP
jqueryjquery-pluginsruby-on-rails-3.1jpicker
user1014473
user1014473

Reputation: 33

How to get and show Jpicker Alpha value

I am using Jpicker for quite some time, before today my requirement was to get only 6 digit or rgb values, and store them. However, now i would like to use the Alpha/transparency value too. So now my text box should contain 8 digit not six. To enable Alpha support i did change this line in Jpicker-1.1.6,js in $.fn.jPicker.defaults 

     alphaSupport:true // at line# 1748

The reason for doing this, Alpha was not showing although i did enable it from the .erb file too. My code from the .erb file look like this

     $('Alpha').jPicker({
         window:{
                expandable:true
            },
            color:{
          //to enable Alpha support
                alphaSupport:true,
                active:new $.jPicker.Color({ ahex:'#ffcc00ff' })
            },
            position:{ x:$(this).offset.left + $(this).width(), y:($(this).offset.top - $(window).scrollTop()) + $(this).height() }

        },
        function (color, context) {
            var all = color.val('all');
                alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none') + ' - alpha: ' + (all && all.a + '%' || 'none'));

            if (all.a != null)
            {
              var b =   Math.precision((all.a * 100) / 255, 0);
                alert(b);
            }

            $('#Commit').css(
                    {
                        backgroundColor:all && '#' + all.hex || 'transparent'
                    }); // prevent IE from throwing exception if hex is empty
        },
         // For testing purpose
        function (color, context) {
            if (context == LiveCallbackButton.get(0)) alert('Color set from button');
            var hex = color.val('hex');
            LiveCallbackElement.css(
                    {
                        backgroundColor:hex && '#' + hex || 'transparent'
                    }); // prevent IE from throwing exception if hex is empty
        },
        function (color, context) {
            alert('"Cancel" Button Clicked');
        });

Well, in rendered Jpicker instance i can see an enabled Alpha section and small text box next to the 6 digit hex. Also in the alert i am getting a value back for all parts. However, my main concern is that how can i show the whole 8 digits and i also i want to store them as i am already storing the 6 digites.

That is my Text field generated HTML. 

    <input id="app_setting_nav_background_color" class="colorInput Alpha" type="text" 
    value="000000" size="45" name="app_setting[nav_background_color]" maxlength="45" 
    style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">

So in short i would like to get Alpha/transparency of each element with existing RGB color, something like "#000000f"

Upvotes: 0

Views: 1163

Answers (3)

RaSergiy
RaSergiy

Reputation: 165

You have to write: 

window:{
     alphaSupport:true,
     expandable:true,
     position:{ x:$(this).offset.left + $(this).width(), y:($(this).offset.top - $(window).scrollTop()) + $(this).height() }
 },
 color:{
     active:new $.jPicker.Color({ ahex:'#ffcc00ff' })
 },

Upvotes: 1

Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

An easier way is explained in jPicker Documentation.

http://www.digitalmagicpro.com/jPicker/#Live

function (color, context) {
    // If single colorpicker is used then the index would be 0
    // Else jPicker maintains a list and appropriate index should be used for that
    alert($.jPicker.List[0].color.active.val('ahex'));
});

Upvotes: 0

user1014473
user1014473

Reputation: 33

I have solved it by myself, so In case anyone having problem with getting Alpha value from Jpicker 1.1.6. Can do the following, although it's a nice tool but for me the settings given on Jpicker site were not working, so have to fork the plugin default functions. in my erb file, i did the following.

     $('.Alpha').jPicker({


            window:{
                expandable:true
            },
            color:{
                alphaSupport:true,
                active:new $.jPicker.Color({ ahex:'#ffcc00ff' })
            },
            position:{ x:$(this).offset.left + $(this).width(), y:($(this).offset.top - $(window).scrollTop()) + $(this).height() }

        },
        function (color, context) {
            var all = color.val('all');
            if (all.a != null) {
                var c = calc_in_to_hex(all.a);
                 //embedding hex of Alpha with the original string of rgb Hex
                $(this).val($(this).val() + c);
            }


        });

// function to convert int to Hex and return it back
function calc_in_to_hex(color) {
    var result = (color | 0).toString(16);
    if (result.length == 1) result = ('0' + result);
    return result.toLowerCase();
}

Although most of it is taken from the original plugin code snippet.

Upvotes: 0

Related Questions