Popup_InfoBalloon - Adjust its top position to avoid scrollbars

By Eduardo Luís on 26 Oct 2012
Sometime ago i notice that ween a Popup_InfoBalloon is called in the botton of the page it cause the appearence of a vertical scrollbar (or a change in its size if already present). This reduces the usability because the user must set the mouse pointer inside the popup and then scrool down.

A good idea to solve this is the popup adjust its position accordingly with the page. See the images below for an example.





In attach i send a file with the Popup_InfoBalloon javascript. It includes the changes made to allow the behavior shown above. This changes are surrounded with the comments "CHANGE_START" and "CHANGE_END". It's just one way to get the job done, and probably, not even the best one. Feel free to improve it.


Regards 
Eduardo Luís



 Popup_InfoBallon.js
Rebecca Hall26 Oct 2012
Is there also a way to apply this to the calendar popup?  The Calendar popup has a set position, but doesn't relocate if it passes the bottom of a popup box.
Eduardo Luís4 Nov 2012
Probably it's possible, you have to dive in the Calendar's js.

The calendar already has a parameter called 'Align'. See it's description:

"A 2-characters string used to set the vertical & horizontal alignment of the calendar.
 
The first character is the vertical alignment and can take one of the following values:
    T - completely above the reference element (bottom margin of the calendar aligned to the top margin of the element).
    t - above the element but may overlap it (bottom margin of the calendar aligned to the bottom margin of the element).
    c - the calendar displays vertically centered to the reference element. It might overlap it (that depends on the horizontal alignment). 
    b - below the element but may overlap it (top margin of the calendar aligned to the top margin of the element).
    B - completely below the element (top margin of the calendar aligned to the bottom margin of the element).
 
The second character is the horizontal alignment and can take one of the following values:
    L - completely to the left of the reference element (right margin of the calendar aligned to the left margin of the element).
    l - to the left of the element but may overlap it (left margin of the calendar aligned to the left margin of the element).
    c - horizontally centered to the element. Might overlap it, depending on the vertical alignment.
    r - to the right of the element but may overlap it (right margin of the calendar aligned to the right margin of the element).
    R - completely to the right of the element (left margin of the calendar aligned to the right margin of the element)."

The default vertical alignment option is 'b'. Probably the best way is to add a 'auto' option, and apply this method to it.