Javascript "Tooltip" positioning problem 1

[kylebellamy]

Backstory: I have a script running that shows and hides DIVs which I will paste in just a second. I've discovered that the process is slightly flawed in that the positioning of the DIVs is based off strange coordinates.

At first, I was using CSS inline to position them with Margins but if any content changed above the triggers on the page, the DIVs would then have to be repositioned which is a pain.

As far as inline CSS is concerned, I've tried using left and top tags set to auto with positioning set to absolute but they have no effect.

So, I want to find a way to modify the following code so that the position is from the trigger only. Then I can use the CSS positioning to place it where I like and make my days sooooooo much better.

function popUpDiv(evt, currElem) {
  popUpWin = eval("document.all." + currElem + ".style"); 
  popUpWin.top = parseInt(evt.y);
  popUpWin.left = parseInt(evt.x);
  popUpWin.visibility = "visible";
  popUpWin.status = "";    

}
 
function popDownDiv(evt,currElem) {
 eval("document.all." + currElem + ".style").visibility = "hidden";
}


var iDelay = 500
var sDisplayTimer = null, oLastItem

function getRealPos(i,which) {
  iPos = 0
  while (i!=null) {
    iPos += i["offset" + which]
    i = i.offsetParent
  }
  return iPos
}

function showDetails(sDest,itop,ileft) {
  if (document.all) {
    var i = event.srcElement
    stopTimer()
    dest = document.all[sDest]
    if ((oLastItem!=null) && (oLastItem!=dest))
      hideItem()
    if (dest) {
      if (ileft) 
        dest.style.pixelLeft = ileft
      else
        dest.style.pixelLeft = getRealPos(i,"Left") + i.offsetWidth + 160
      if (itop)
        dest.style.pixelTop = itop
      else
        dest.style.pixelTop = getRealPos(i,"Top") +200
      dest.style.display = "block"
    }
    oLastItem = dest
  }
}

function stopTimer() {
  clearTimeout(sDisplayTimer)
}

function startTimer(el) {
  if (!el.contains(event.toElement)) {
    stopTimer()
    sDisplayTimer = setTimeout("hideItem()",iDelay)
  }
}

function hideItem() {
  if (oLastItem)
    oLastItem.style.display="none"
}

Oh and as an afterthought, I can't direct you to the page to look at as it is an internal net and I would violate all sorts of security sops. Sorry, it would be so much easier if I could.

http://www.kb-design-studios.com

 

[ScottPrelewicz]

I'm not sure I exactly understand your requirement, but I think you want to get the location of the element that was clicked on (or hovered over, whatever) instead of the mouse position (where the event occurred)?

if so, instead of

  popUpWin.top = parseInt(evt.y);
  popUpWin.left = parseInt(evt.x);

use

  popUpWin.top = currElem.top + 2;  // 2 or whatever
  popUpWin.left = currElem.left;

Scott Prelewicz
Web Developer
COMAND Solutions

 

[kylebellamy]

Yeah, that is basically the gist of it. As it turns out it wasn't even showing up off the mouse position but from what I am guessing is the right hand edge of the (in this case) image map shape and the absolute top of the page. I cannot figure that one out.

So when I add text above the image that was linked on, it would be pushed down but the pop up would stay in place.

Would using the currElem.top and .left anchor the pop up to the area tag?

Thanks, you are giving me a lot to go on by the way.

http://www.kb-design-studios.com

 

[ScottPrelewicz]

it would set the top and left to be the top and left of whatever currElem is, I'm guessing you're passing this by onMouseOver(), with something like -

<area onMouseOver="popUpDiv(this)"/>

To be honest, I've never done this with image maps so I cant guarantee how it will work, but hopefully you'll get the gist and tweak it to your purpose.

Scott Prelewicz
Web Developer
COMAND Solutions

 

[kylebellamy]

Yeah, it makes sense. Only took me about a month to figure out that it was in the JS rather than the code on the page I was writing.

The difficulty with this is that it is in a CMS so I don't have easy access to the JS files. Thank you for the help, I think that might do it perfectly.

http://www.kb-design-studios.com

 

[ScottPrelewicz]

BTW, the "this" in my last post means the <area> tag it's calling from.

Scott Prelewicz
Web Developer
COMAND Solutions

 

[kylebellamy]

Right, got that. So you had some comprehension problems with other posters, I take it?

http://www.kb-design-studios.com

 

[ScottPrelewicz]

Ha, sometimes Figured you'd know it, but like you said, with some poosters you cant assume anything But, thats what the site is here for.

Scott Prelewicz
Web Developer
COMAND Solutions

 

[kylebellamy]

And thank whatever deity you subscribe to that it is! lol

http://www.kb-design-studios.com