www.webdeveloper.com
Results 1 to 9 of 9

Thread: Floating DIV appear on mousehover at mouse coordinates

  1. #1
    Join Date
    Apr 2011
    Posts
    13

    Exclamation Floating DIV appear on mousehover at mouse coordinates

    Hi guys, I'm having a hard time figuring this one out...

    I have a Div that is set to display:none with CSS, and I have it set to appear when the mouse is hovered over an anchor. It all works fine and dandy, but I want the div to appear at the coordinates of my mouse cursor and follow it around until it's taking off of the anchor, when the div will be hidden again.

    Here's the live page: http://thekevbot.com/fresh/kw/properties.html

    Here's my Javascript:

    Code:
    var cX = 0; var cY = 0; var rX = 0; var rY = 0;
    function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
    function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
    if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
    else { document.onmousemove = UpdateCursorPosition; }
    function AssignPosition(d) {
    if(self.pageYOffset) {
    	rX = self.pageXOffset;
    	rY = self.pageYOffset;
    	}
    else if(document.documentElement && document.documentElement.scrollTop) {
    	rX = document.documentElement.scrollLeft;
    	rY = document.documentElement.scrollTop;
    	}
    else if(document.body) {
    	rX = document.body.scrollLeft;
    	rY = document.body.scrollTop;
    	}
    if(document.all) {
    	cX += rX; 
    	cY += rY;
    	}
    d.style.left = (cX+10) + "px";
    d.style.top = (cY+10) + "px";
    }
    function HideContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    if(d.length < 1) { return; }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = "block";
    }
    function ReverseContentDisplay(d) {
    if(d.length < 1) { return; }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    if(dd.style.display == "none") { dd.style.display = "block"; }
    else { dd.style.display = "none"; }
    }
    Here's the anchor that calls the DIV:
    Code:
    <a onmouseover="ShowContent('6404_Chukar'); return true;" onmouseout="HideContent('6404_Chukar'); return true;"
                href="#"><img src="images/properties/thumb_address01.jpg" border="0" /></a>
    The DIV that is being displayed:

    Code:
    <div class="box" id="6404_Chukar" align="center">
    	<table style="margin-top:5px;" width="350" border="0">
      	<tr>
        	<td style="color:#000; font-size:14px; font-family:Georgia, 'Times New Roman', Times, serif; font-style:italic; font-weight:bold;" width="196">6404 Chukar Drive</td>
        	<td style="font-size:10px;" align="right" valign="bottom" width="138">Click here for more information</td>
      	</tr>
    	</table>
    	<table width="350" border="0">
      	<tr>
        <td style="color:#000; font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px; line-height:18px; font-style:italic; font-weight:bold" width="95">Area<br />Type<br />Property Size<br />House Size<br />Beds<br />Baths<br /></td>
        	<td style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px; line-height:18px; font-style:italic;" width="95">Dallas<br />Single-Family<br />19,311 Sq Ft<br />6400 Sq Ft<br />3<br />2</td>
        	<td valign="bottom"style="color:#000; font-size:24px; font-family:Georgia, 'Times New Roman', Times, serif; font-weight:bold; font-style:italic;"align="right" valign="bottom" width="138">$1,999,000</td>
      	</tr>
    	</table>
    </div>
    And my CSS:

    Code:
    .box {
    	display:none;
    	height: 144px;
    	width: 400px;
    	background-image: url(../images/hover_bg.gif);
    	background-repeat: repeat-x;
    	position: absolute;
    	z-index: 1000;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	color: #686868;
    }
    HALP!

  2. #2
    Join Date
    Apr 2011
    Posts
    13
    BTW, if there's a better script to do this, I'm open to ideas as well.

  3. #3
    Join Date
    Apr 2011
    Posts
    13
    Hopeful bump...

  4. #4
    Join Date
    Jul 2009
    Posts
    184
    While that is an nice bit of javascript code, I really think you could make your life a whole lot easier if you could use the JQuery javascript library. Then your code could look as simple as this:

    Code:
    $("#anchor").mousemove(function(e){         
    $(".box").show();         
    $(".box").css({             
    top: (e.pageY + 50) + "px",             
    left: (e.pageX + 15) + "px"         
    });     
    });     
    $("#the-box").mouseout(function(e){         
    $(".box").hide();     
    });
    #anchor is the anchor link that you want to hover the mouse over, and .box is your pop-up box that will display while the mouse pointer is within the bounds of #anchor.

    The + 50 and + 15 pixels are to offset .box from the mouse pointer, by the boxes' dimensions: adjust accordingly.

    I tried this with a block level div that had a width and height set. You may need to add display: block; width: ??px; height: ??px; to your anchor link for this to work properly.

    I hope that helps!

  5. #5
    Join Date
    Apr 2011
    Posts
    13
    Thanks for the reply! I'll give it a try and let you know how it works.
    Last edited by khaag; 04-25-2011 at 11:20 AM.

  6. #6
    Join Date
    Apr 2011
    Posts
    13
    I can't seem to get it to work... I'll post what I have and maybe you can point out what I'm doing wrong...

    I have the Jquery script saved as "jquery.propertydisplay.js"

    Code:
    $(".thumbnail_link").mousemove(function(e){         
    $("#6404_Chukur").show();         
    $(".box").css({             
    top: (e.pageY + 10) + "px",             
    left: (e.pageX + 10) + "px"         
    });     
    });     
    $(".thumbnail_link").mouseout(function(e){         
    $("#6404_Chukur").hide();     
    });
    Anchors look like this:

    Code:
    <div class="Thumbnail_1"><a class="thumbnail_link" href="#"><img src="images/properties/thumb_address01.jpg" border="0" /></a></div>
    Hidden box DIV looks like this:

    Code:
    <div class="box" id="6404_Chukur" align="center">
    	<table style="margin-top:5px;" width="350" border="0">
      	<tr>
        	<td style="color:#000; font-size:14px; font-family:Georgia, 'Times New Roman', Times, serif; font-style:italic; font-weight:bold;" width="196">6404 Chukar Drive</td>
        	<td style="font-size:10px;" align="right" valign="bottom" width="138">Click here for more information</td>
      	</tr>
    	</table>
    	<table width="350" border="0">
      	<tr>
        <td style="color:#000; font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px; line-height:18px; font-style:italic; font-weight:bold" width="95">Area<br />Type<br />Property Size<br />House Size<br />Beds<br />Baths<br /></td>
        	<td style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px; line-height:18px; font-style:italic;" width="95">Dallas<br />Single-Family<br />19,311 Sq Ft<br />6400 Sq Ft<br />3<br />2</td>
        	<td valign="bottom"style="color:#000; font-size:24px; font-family:Georgia, 'Times New Roman', Times, serif; font-weight:bold; font-style:italic;"align="right" valign="bottom" width="138">$1,999,000</td>
      	</tr>
    	</table>
    </div>
    CSS for the anchor class and box class:

    Code:
    .thumbnail_link {
            display:block;
            width:150px;
            height:95px;
    }
    .box {
    	display:none;
    	height: 144px;
    	width: 400px;
    	background-image: url(../images/hover_bg.gif);
    	background-repeat: repeat-x;
    	position: absolute;
    	z-index: 1000;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	color: #686868;
    }
    And here's a link to the HTML page:
    http://thekevbot.com/fresh/kw/properties2.html

    Let me know if you need to see anything else!

  7. #7
    Join Date
    Apr 2011
    Posts
    13
    One more hopeful bump...

  8. #8
    Join Date
    Jul 2009
    Posts
    184
    Hey sorry for the late reply, I've been swamped!

    At first glance it looked like you have it all right. On a second glance I noticed you don't have a $(document).ready... to make the new JQuery code load after the pages content has loaded.

    So, on the very first line of your "jquery.propertydisplay.js" file add this:
    Code:
    $(document).ready(function(){
    Then on the very last line add this:
    Code:
    });
    ...And that should do it for you.

    BTW how's Kamloops looking these days? It's been awhile since I made the trip from where I live out here on Vancouver Island.

  9. #9
    Join Date
    Apr 2011
    Posts
    13
    Oh man, you're the greatest dude! Worked like a charm!

    I just had to subtract 330px from the X value to make it pop up a little closer to the mouse. Thanks so much!

    An Islander, hey? Good to see another BC bud! Kamloops is finally heating up now, and it's about time too... this last winter seemed to hang around forever...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles