Ajax tooltip position problem

[Danny Carson]

Hi guys,

I have been using an ajax tooltip, which has been working fine until I started using struts tiles.

In my mainLayout.jsp (Defines layout for all tiled pages)I also have a scrollable pane (scrollabletable.js).

The problem is that when the page loads the first 2 tooltips show fine until I scroll down then I cant see the other tooltips because its like the page has not refreshed the position of the tooltips to match the scrolling.

Can anyone help me out with this?

Thanks

[Eric Pascarello]

Sounds like your code does not account for scrollTop and scrollLeft.

Eric

[Danny Carson]

could you elaborate some more on that?

thanks for the reply

[Eric Pascarello]

Without seeing the tooltip code. No...

Eric

[Danny Carson]

think this is main part of interest.

/* Custom variables */
 
/* Offset position of tooltip */
var x_offset_tooltip = 5; // was 5
var y_offset_tooltip = 0; // was 0
 
/* Don't change anything below here */
 

var ajax_tooltipObj = false;
var ajax_tooltipObj_iframe = false;
 
var ajax_tooltip_MSIE = false;
if(navigator.userAgent.indexOf('MSIE')>=0)ajax_tooltip_MSIE=true;
 

function ajax_showTooltip(externalFile,inputObj)
{
if(!ajax_tooltipObj)/* Tooltip div not created yet ? */
{
ajax_tooltipObj = document.createElement('DIV');
ajax_tooltipObj.style.position = 'absolute';
ajax_tooltipObj.id = 'ajax_tooltipObj';
document.body.appendChild(ajax_tooltipObj);
 

var leftDiv = document.createElement('DIV');/* Create arrow div */
leftDiv.className='ajax_tooltip_arrow';
leftDiv.id = 'ajax_tooltip_arrow';
ajax_tooltipObj.appendChild(leftDiv);

var contentDiv = document.createElement('DIV'); /* Create tooltip content div */
contentDiv.className = 'ajax_tooltip_content';
ajax_tooltipObj.appendChild(contentDiv);
contentDiv.id = 'ajax_tooltip_content';

if(ajax_tooltip_MSIE){/* Create iframe object for MSIE in order to make the tooltip cover select boxes */
ajax_tooltipObj_iframe = document.createElement('<IFRAME frameborder="0">');
ajax_tooltipObj_iframe.style.position = 'absolute';
ajax_tooltipObj_iframe.border='0';
ajax_tooltipObj_iframe.frameborder=0;
ajax_tooltipObj_iframe.style.backgroundColor='#FFF';
ajax_tooltipObj_iframe.src = 'about:blank';
contentDiv.appendChild(ajax_tooltipObj_iframe);
ajax_tooltipObj_iframe.style.left = '0px';
ajax_tooltipObj_iframe.style.top = '0px';
}
 

}
// Find position of tooltip
ajax_tooltipObj.style.display='block';
ajax_loadContent('ajax_tooltip_content',externalFile);
if(ajax_tooltip_MSIE){
//        ajax_tooltipObj_iframe.style.width = 300;
//        ajax_tooltipObj_iframe.style.height = 300;
ajax_tooltipObj_iframe.style.width = ajax_tooltipObj.clientWidth + 'px';
ajax_tooltipObj_iframe.style.height = ajax_tooltipObj.clientHeight + 'px';
}
 
ajax_positionTooltip(inputObj);
}
 
function ajax_positionTooltip(inputObj)
{
//    var leftPos = 950;
//    var topPos = 300;
var leftPos = (ajaxTooltip_getLeftPos(inputObj) + inputObj.offsetWidth);
var topPos = ajaxTooltip_getTopPos(inputObj);

/*
var rightedge=ajax_tooltip_MSIE? document.body.clientWidth-leftPos : window.innerWidth-leftPos
var bottomedge=ajax_tooltip_MSIE? document.body.clientHeight-topPos : window.innerHeight-topPos
*/
var tooltipWidth = document.getElementById('ajax_tooltip_content').offsetWidth +  document.getElementById('ajax_tooltip_arrow').offsetWidth; 
// Dropping this reposition for now because of flickering
//var offset = tooltipWidth - rightedge; 
//if(offset>0)leftPos = Math.max(0,leftPos - offset - 5);

ajax_tooltipObj.style.left = leftPos + 'px';
ajax_tooltipObj.style.top = topPos + 'px';


}
function ajax_hideTooltip()
{
ajax_tooltipObj.style.display='none';
}
 
function ajaxTooltip_getTopPos(inputObj)
{
  var returnValue = inputObj.offsetTop;
  while((inputObj = inputObj.offsetParent) != null){
  if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
  }
  return returnValue;
}
 
function ajaxTooltip_getLeftPos(inputObj)
{
  var returnValue = inputObj.offsetLeft;
  while((inputObj = inputObj.offsetParent) != null){
  if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
  }
  return returnValue;
}

[Danny Carson]

can anyone offer any suggestions?

[Jason Edgewalker]

Despite the fact that, on the face of it, this shouldn't be a big deal, the problem of calculating offset can be messy. Not surprisingly, the solution varies between browsers.

There's a great section in one of O'Reilly's DHTML books that talks about this. Here's a snippet that might be helpful, because it deals with scroll offset, which has to be taken into account for IE.

Hopefully it's helpful.

function getPageEventCoords(evt) {
var coords = {left:0, top:0};
if (evt.pageX) {
coords.left = evt.pageX;
coords.top = evt.pageY;
} else if (evt.clientX) {
coords.left =
evt.clientX + document.body.scrollLeft - document.body.clientLeft;
coords.top =
evt.clientY + document.body.scrollTop - document.body.clientTop;
// include html element space, if applicable
if (document.body.parentElement && document.body.parentElement.clientLeft) {
var bodParent = document.body.parentElement;
coords.left += bodParent.scrollLeft - bodParent.clientLeft;
coords.top += bodParent.scrollTop - bodParent.clientTop;
}
}
return coords;
}

[Danny Carson]

Hey

Thanks for the reply. I ended up scrapping the scroll table in the end.
But I will keep the book in mind for the future.

Cheers