asked on

onmouseover show layer position right by mouse arrow

hi everyone,

i am pulling records from a db and displaying them in single line format - per record
i want to give basic details on the line displayed, but when the person mouseovers the record and holds it for say 2 or 3 seconds on that record it would display a css layer that would display more details about that record. now i'm not sure how to put the delay in so that when they mouseover it doesn't show up for say 2 or 3 seconds, and i'm also unsure of how to set the css layer positions so that the layer shows up next to the mouse cursor everytime, as long as the person is mousing over a record being shown

hopefully this is enough info,

thanks guys!

ASKER CERTIFIED SOLUTION

cLFlaVA

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LTY83

ASKER

thanks, lemme mess w/ it some see what i can / can't come up w/ :)

LTY83

ASKER

hey one quick question, i know i'm being picky but is there anyway to make it so when you move the mouse the layer moves w/ it, i think taht would really cool

thanks

cLFlaVA

Try adding this to the <td>

onmousemove="showit('row1');"

LTY83

ASKER

can't thank you enough, this is gonna be awesommmmeee!!!!!! THANKS BRO!

cLFlaVA

Hey...I've noticed it's a little sloppy. I've composed a solution - gimme a sec...

LTY83

ASKER

yea i saw a couple bugs, but dude the idea is right on

LTY83

ASKER

hows the new solution comin? i added some css to the div, different css for colors/font styles etc and it seems when i mouseover they appear to show up a lot lower than the cell, plus on mouseout sometimes it doesn't make the layer dissappear, u probably already know this just lettin ya know if you had any thoughts
thanks man

cLFlaVA

still doing some research - it's hard to come by

LTY83

ASKER

yea its a tough one, but i really appreciate everything, this is gonna be so sweet

cLFlaVA

Hey...

This works better. However, There's a lot of hard-coding involved (unfortunately), which can be tricky. Since you're using dynamic data (from a database), you'll have to change all hardcoded values (such as, like, looping from "row1" to "row3" you'll have to loop from "row1" to "row_" where _ is the total number of rows.

Let me know if this code works better for you:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Start hiding from old browser

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
//document.Show.MouseX.value = tempX
//document.Show.MouseY.value = tempY

for (var i=1;i<4;i++) {
       document.getElementById('row' + i.toString()).style.pixelTop = tempY+2;
       document.getElementById('row' + i.toString()).style.pixelLeft = tempX+2;
}
return true
}

function showit(on) {
      var o = document.getElementById(on);
      o.style.position = 'absolute';
      o.style.display = 'inline';
}

function hideit(on) {
      var o = document.getElementById(on);
      o.style.display = 'none';
}

// timeout integers

function ReadyForShowing(the_row) {
      var i = setTimeout("showit('" + the_row + "')",2000);
      return i;
}

function StopShowing(the_row, the_to) {
      clearTimeout(the_to);
      hideit(the_row);
}

function HideAll() {
      for (var i = 1; i < 4; i++)
            document.getElementById('row' + i.toString()).display = 'none';
}

var to1,to2,to3;
// Stop Hiding From Old Browsers -—>
</SCRIPT>

<style type="text/css">
div {
      border: 2px solid gray;
      background-color: yellow;
}

.hide {
      display: none;
      position: relative;
}

.show {
      display: inline;
}
</style>
</HEAD>

<BODY onmouseover="">
<CENTER>
<table border="1" width="300">
<tr><td onmouseover="to1 = ReadyForShowing('row1');"
onmouseout="StopShowing('row1', to1);">cory<div id="row1" class="hide">info about cory</div></td></tr>
<tr><td onmouseover="to2 = ReadyForShowing('row2');"
onmouseout="StopShowing('row2', to2);">jim<div id="row2" class="hide">info about jim</div></td></tr>
<tr><td onmouseover="to3 = ReadyForShowing('row3');"
onmouseout="StopShowing('row3', to3);">bob<div id="row3" class="hide">info about bob</div></td></tr>
</table>
</CENTER>

</BODY>
</HTML>

If you want, I can mark the places you'll need to make dynamic.

LTY83

ASKER

thanks man, i should be able to figure out the dymanic stuff, i just say row(then my record unique id) and that seems to do the trick, i'm gonna mess w/ this, thanks again

LTY83

ASKER

do I have to put a dynamic number after to as well?

LTY83

ASKER

it seems to be working fine, however it doesn't move with the mouse after i put it in my code, the diff is i use the code on the TR tag so when they mouseover the row they would see it, also i get a javascript error at this line: document.getElementById('row' + i.toString()).style.pixelLeft = tempX+2;

but other than that its goin