Custom Background Color Input/Dialog in Twenty Ten

[hakre]

I'm running into a UI/UX issue when I want to modify the background image and color.

If the background preview is that height that the page needs scrolling, the background color selector does not work any longer.

It's hidden in part and scrolling does not work for scrolling further down because if you want to scroll the element looses the focus and closes, so the scrollbar shortens again.

Screenshot of the problem

Screenshot of the problem:

From my UI coding: elements that have not enough room to bottom / right can move more to the top / left to be available fully on screen.

This patch chechs the document height and if the colorpicker would expand it - moves it up

We should be able to improve this a bit:

• Pass $ to the function, preventing us from using jQuery internally.
• Don't set up window_height if you don't need it.
• Initialize colorpicker_offset with var.
• I imagine this makes it jump/flicker, by showing then moving. Any way we can prevent that?
• Any way we can also calculate the height of the color wheel, rather than magic numbers?

Just a first glance.

Thanks for the input :) As for your remarks:

• This doesn't seem to work - Chrome does OK with it, but Firefox throws errors
• I need it, it's used 4 lines later - the reason for getting the document height >before< showing the color picker, is that if the color picker expands lower than the current document, the document height increases and we can't determine how much. IMHO this one should stay this way
• Good call, thanks
• No, actually - it doesn't. A normal procedure for positioning an element is unsetting its display value from "none" and setting the position with the same command set. However, commands in JavaScript are not executed one after another but in parallel, so since we do almost no operations between showing the element and setting its position, the delay should be lower than the rendering time (and from my observations, it is)
• fixed. there is still the +2/+10 thing, but it can't be fixed, because it's just visual styling - we don't want to have the colorpicker fit the input border

how is the new patch?

Actually, the old color picker is specific to Twenty Ten and Twenty Eleven.

Fixed in 3.5 with the change from farbtastic to Iris color picker, see r22030.