Solved

onmouseover show layer position right by mouse arrow

Posted on 2004-09-23
14
855 Views
Last Modified: 2012-05-05
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
Comment
Question by:LTY83
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
14 Comments
 
LVL 13

Accepted Solution

by:
cLFlaVA earned 500 total points
ID: 12136229
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
 
LVL 4

Author Comment

by:LTY83
ID: 12136238
thanks, lemme mess w/ it some see what i can / can't come up w/ :)
0
 
LVL 4

Author Comment

by:LTY83
ID: 12136262
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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12136315
Try adding this to the <td>

 onmousemove="showit('row1');"
0
 
LVL 4

Author Comment

by:LTY83
ID: 12136373
can't thank you enough, this is gonna be awesommmmeee!!!!!! THANKS BRO!
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12136396
Hey...I've noticed it's a little sloppy.  I've composed a solution - gimme a sec...
0
 
LVL 4

Author Comment

by:LTY83
ID: 12136406
yea i saw a couple bugs, but dude the idea is right on
0
 
LVL 4

Author Comment

by:LTY83
ID: 12136548
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
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12136605
still doing some research - it's hard to come by
0
 
LVL 4

Author Comment

by:LTY83
ID: 12136621
yea its a tough one, but i really appreciate everything, this is gonna be so sweet
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12136839
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
 
LVL 4

Author Comment

by:LTY83
ID: 12136943
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
 
LVL 4

Author Comment

by:LTY83
ID: 12137002
do I have to put a dynamic number after to as well?
0
 
LVL 4

Author Comment

by:LTY83
ID: 12137133
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question