[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 866
  • Last Modified:

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!
0
LTY83
Asked:
LTY83
  • 9
  • 5
1 Solution
 
cLFlaVACommented:
Hey-

Here's some sloppy code I threw together to see if I even could.  I could.  If you want to make additional changes to this, let me know.

Okay:




<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
  return true
}

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

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

// 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>
<CENTER>
<table border="1" width="300">
<tr><td onmouseover="setTimeout('showit(\'row1\')',2000);" onmouseout="hideit('row1');">cory<div id="row1" class="hide">info about cory</div></td></tr>
<tr><td onmouseover="setTimeout('showit(\'row2\')',2000);" onmouseout="hideit('row2');">jim<div id="row2" class="hide">info about jim</div></td></tr>
<tr><td onmouseover="setTimeout('showit(\'row3\')',2000);" onmouseout="hideit('row3');">bob<div id="row3" class="hide">info about bob</div></td></tr>
</table>
</CENTER>

</BODY>
</HTML>
0
 
LTY83Author Commented:
thanks, lemme mess w/ it some see what i can / can't come up w/ :)
0
 
LTY83Author Commented:
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
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
cLFlaVACommented:
Try adding this to the <td>

 onmousemove="showit('row1');"
0
 
LTY83Author Commented:
can't thank you enough, this is gonna be awesommmmeee!!!!!! THANKS BRO!
0
 
cLFlaVACommented:
Hey...I've noticed it's a little sloppy.  I've composed a solution - gimme a sec...
0
 
LTY83Author Commented:
yea i saw a couple bugs, but dude the idea is right on
0
 
LTY83Author Commented:
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
0
 
cLFlaVACommented:
still doing some research - it's hard to come by
0
 
LTY83Author Commented:
yea its a tough one, but i really appreciate everything, this is gonna be so sweet
0
 
cLFlaVACommented:
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.
0
 
LTY83Author Commented:
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
0
 
LTY83Author Commented:
do I have to put a dynamic number after to as well?
0
 
LTY83Author Commented:
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
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 9
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now