Question

I have a jQuery jPicker colorpicker that is bound to an input text field and opens onclick of a small picker.gif icon. The problem I’m having is that (1) The colorpicker that opens does not appear to be positioned according to the x/y position of the picker.gif (it opens far away from the click point) and (2) The colorpicker does not seem to be aware of the viewport’s scroll position (the top of the colorpicker is partially hidden at the top of the window).

I’d like to use jQuery to reposition the colorpalette (1) Based on the x/y position of the input that its bound to and (2) reset it’s top position based on the viewport’s visible Y position.

Here is the script where I am creating a new jPicker and binding it to my input text fields for header and sidebar…

$('#theme_header_color').jPicker
(
    {position: { x: $(this).offset.left + $(this).width(), y: ($(this).offset.top - $(window).scrollTop()) + $(this).height() }},
    function(color) 
    { 
        $(this).val(color.get_Hex());
    },
    function(color) 
    { 
        $(this).val(color.get_Hex()); 
    }
);

$('#theme_sidebar_color').jPicker
(
    {position: { x: $(this).offset.left + $(this).width(), y: ($(this).offset.top - $(window).scrollTop()) + $(this).height() }},
    function(color) 
    { 
        $(this).val(color.get_Hex());
    },
    function(color) 
    { 
        $(this).val(color.get_Hex()); 
    }
)

Answer 1

jPicker is already setup to take x/y coordinates so you should be able to pass the offset of the opening button. You might have to adjust for the height and width of the button and any padding depending on your taste. It’s untested but adding this to the jPicker settings should do it.

position: { x: $(this).offset.left, y: $(this).offset.top }

To account for the buttons height and width.

position: { x: $(this).offset.left + $(this).width(), y: $(this).offset.top + $(this).height() }

UPDATE

To account for the vertical scroll position

position: { x: $(this).offset.left + $(this).width(), y: ($(this).offset.top - $(window).scrollTop()) + $(this).height() }