Solved

onmouseover show layer position right by mouse arrow

Posted on 2004-09-23
14
848 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
  • 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
 
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now