CODEWITHSUNDEEP
javascriptjqueryhtmlcsscolor-picker
Shairyar
Shairyar

Reputation: 3356

display jquery color picker on top rather than bottom

I am using this Color Picker plugin, it seems to be appearing alright but all i want is to make it appear on top of field rather than bottom. This is what it looks like

enter image description here

This is my html field 

<input type="text" name="slide_background" class="form-control" placeholder="Choose background color" id="picker">

and this is my JavaScript

<script>
    $(function ($) {
        $('#picker').colpick({
            layout:'hex',
            submit:0,
            colorScheme:'dark',
            onChange:function(hsb,hex,rgb,el,bySetColor) {
                $(el).css('border-color','#'+hex);
                if(!bySetColor) $(el).val(hex);
            }
        }).keyup(function(){
            $(this).colpickSetColor(this.value);
        });
    });

</script>

I will really appreciate if anyone can assist me in this.

UPDATE

Following css fixed it for me

.colpick_hex { 
margin-top: -235px !important;
}

Upvotes: 2

Views: 1356

Answers (2)

Manu M
Manu M

Reputation: 1064

Try this script,

$(function ($) {
        $('#picker').colpick({
            layout:'hex',
            submit:0,
            colorScheme:'dark',
            onBeforeShow:function() {
                 var top = $('.colpick_dark').position().top - 200;
                 $('.colpick_dark').css({top:top+'px'});
            },
            onChange:function(hsb,hex,rgb,el,bySetColor) {
                $(el).css('border-color','#'+hex);
                if(!bySetColor) $(el).val(hex);
            }
        }).keyup(function(){
            $(this).colpickSetColor(this.value);
        });
    });

Adjust the top of the picker by adjusting the 200 in the code. Check onBeforeShow function while initializing.

Upvotes: 3

box86rowh
box86rowh

Reputation: 3415

You will just need to place it using css, if you use your inspector you can see the id of the picker is colpick_abs - so...

    #colpick_abs{
        top: -300px;
        bottom: 300px;
    }

This should slide it up 300 pixels, and you can adjust that number until you like it.

Upvotes: 1

Related Questions