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

$('#myHeaderColor').jPicker
(
    {},
    function(color) 
    { 
        $(this).val(color.get_Hex());
    },
    function(color) 
    { 
        $(this).val(color.get_Hex()); 
    }
);

$('#mySidebarColor').jPicker
(
    {},
    function(color) 
    { 
        $(this).val(color.get_Hex());
    },
    function(color) 
    { 
        $(this).val(color.get_Hex()); 
    }
);