FF2.0 select fields in hidden divs at load-time (tabs): width not computed correctly (with fix proposal)
| Project: | clueTip - flexible, enhanced tooltip |
| Version: | 0.9.6 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
When using clueTip on < select > fields in divs which are hidden at page load time (e.g. tabs of a tabpane), the width is = 0 in FF 2.0.0.11 and the clueTip is hiding the field instead of being at its right.
Quick solution: compute width at rendering time instead of at load time.
Good solution: move most of computation done on all clueTiped DOM-objects from load time to show-time.
Here quick-solution fix:
/***************************************
* ACTIVATION
****************************************/
//activate clueTip
var activate = function(event) {
if (!opts.onActivate($this)) {
return false;
}
isActive = true;
$cluetip.removeClass().css({width: tipInnerWidth});
if (tipAttribute == $this.attr('href')) {
$this.css('cursor', opts.cursor);
}
$this.attr('title','');
if (opts.hoverClass) {
$this.addClass(opts.hoverClass);
}
linkTop = posY = $this.offset().top;
linkLeft = $this.offset().left;
mouseX = event.pageX;
mouseY = event.pageY;
if ($this[0].tagName.toLowerCase() != 'area') {
sTop = $(document).scrollTop();
winWidth = $(window).width();
}
// position clueTip horizontally
linkWidth = $this[0].offsetWidth; //BBFIX
if (opts.positionBy == 'fixed') {
posX = linkWidth + linkLeft + lOffset;
$cluetip.css({left: posX});
} else {
posX = (linkWidth > linkLeft && linkLeft > tipWidth)
|| linkLeft + linkWidth + tipWidth + lOffset > winWidth
? linkLeft - tipWidth - lOffset
: linkWidth + linkLeft + lOffset; //BBPROBLEM IS HERE: linkWidth is = 0 if $this[0] select or input was hidden at page load time....
...
Comments
#1
You can also call the clueTip method inside a $(window).load() instead of $(document).ready()