popup div onmouseover

This is a discussion on "popup div onmouseover" within the JavaScript Forum section. This forum, and the thread "popup div onmouseover are both part of the Program Your Website category.



 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Program Your Website > JavaScript Forum

Notices


Reply
 
LinkBack Thread Tools
  #1  
Old Dec 28th, 2007, 09:36
Junior Member
Join Date: Oct 2007
Location: Holland
Posts: 49
Thanks: 0
Thanked 0 Times in 0 Posts
popup div onmouseover

hi

I'd like to have a <div> block onmouseover, and the block should appear next to the mouse cursor... Ideally, the background should fade a little.

roughly, I need the behavior of the links here:
http://www.javascriptkit.com/javatutors/dom2.shtml

Can you suggest possible implementations?

Thanks!

Last edited by pesho318i; Dec 28th, 2007 at 10:12.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Dec 28th, 2007, 10:26
Rakuli's Avatar
SuperMember

SuperMember
Join Date: Sep 2007
Location: Australia
Age: 24
Posts: 956
Blog Entries: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Re: popup div onmouseover

Okay, this is reasonably simple... give the element you want to have the div appear next to the id of id="trigger"... or something else and replace trigger below..

Then somewhere in your document -- just under the body tag add a div styled how you wish, with an id of id="theBullet" and use CSS to give it a display:none;

Then, add this to the bottom of your page before the </body> tag -- or call it into your document from an external file before the body tag.

Code: Select all
<script type="text/javascript">

var trigger = document.getElementById("trigger"); // this is the element where the mouse will go over
trigger.onmouseover = function() {toggleOn(e, 'theBullet');}; // call the function toggleOn
trigget.onmouseout = function () { document.getElementById('theBullet').style.display = 'none'}; // hide the bullet div

function toggleOn(e, di)
{
    var theBullet = document.getElementById(di);

    var x = e.pageX ? e.pageX : e.clientX ? e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); // get the location on the X axis
    var y = e.pageY ? e.pageY : e.clientY ? e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); // get the location on the Y axis

  theBullet.style.position = 'absolute'; 
  theBullet.style.top = y + 'px'; // move into position
  theBullet.style.left = x + 'px';
  theBullet.style.display = 'block'; // make it appear
}
</script>

Hope that helps.
Last Blog Entry: The wannabe juggler's quest (Oct 27th, 2007)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Dec 28th, 2007, 13:30
Junior Member
Join Date: Oct 2007
Location: Holland
Posts: 49
Thanks: 0
Thanked 0 Times in 0 Posts
Re: popup div onmouseover

hey Rakuli,
thanks, but I could only run it in IE.

First, your two lines for var x and var y gave an error: "missing : in conditional expression"

So I got the coordinates in another way:
Code: Select all
     
var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)     {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)     {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }
I also removed the first input parameter (e) in the toggleOn function.

Now it's working fine in IE, but Firefox complains that e has no properties: "if (e.pageX || e.pageY)"

How shall I make it recognize the event?

Thanks again
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
onmouseover not working in ff dab42pat JavaScript Forum 4 Nov 30th, 2007 14:10
onMouseOver <div> pops up next to mouse pointer - HOW? Love2Java JavaScript Forum 17 Aug 1st, 2007 19:42
onMouseOver Help Bighen JavaScript Forum 3 Jan 24th, 2006 20:17
OnMouseOver kookie09 JavaScript Forum 5 Apr 21st, 2005 23:20
OnMouseOver Action Monie JavaScript Forum 10 Dec 30th, 2004 10:19


All times are GMT. The time now is 09:05.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42