Need help fine-tuning a popup box

gocats2 · 10-05-2012, 09:52 PM

I am inserting a popup box that is activated on mouse over. When the mouse is moved away from the link the box goes away. I am happy to finally have a popup that works at all (after many tries) but would like it to display on mouse over and also allow the cursor to move into the box and keep the box open as long as the cursor is there. I want to put a couple of links in the box to take visitors to other pages. The way it is now, this is not possible. It would be helpful if the box went away when the cursor was moved from the box rather than the visitor having to click to close. I have never used java script before in my webpages and I'm not sure where to insert code that would make it work the way I want. I have added the current code below. Thank you for any help you can give me.

[CODE]<script type="text/javascript" language="JavaScript">
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 HideText(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowText(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"; }
}
//-->
</script>[CODE]

Old Pedant · 10-05-2012, 10:52 PM

Well, for starters, I see document.all in there. Which means you have been reading obsolete books and/or code. Not that it's wrong, per se, just that it's not the best way.

Same with stuff such as language="JavaScript" and //-->

ANYWAY...you don't show how you activate the ShowText and HideText.

And obvious fix is to use onmouseover of whatever-you-are-using to show the box and then onmouseout *OF THE BOX* to hide it. Don't assign an onmouseout for the whatever-you-are-using.

Oh...and there is a MUCH easier way to make a popup box appear near the point of the onmouseover. Without needing to track the cursor all over the screen.

Old Pedant · 10-05-2012, 11:04 PM

Here, try this example:

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span.HERE { 
    font-weight: bold;
    color: red;
}
div#message {
    position: absolute;
    display: none;
    border: solid blue 3px;
    background-color: lightblue;
    width: 100px; height: 50px;
}
</style>
<body>
stuff stuff stuff<br/><br/>
stuff stuff stuff<br/><br/>
stuff stuff stuff<br/><br/>
stuff stuff stuff<br/><br/>
let's put a boc near <span class="HERE">these words</span> and then we can put one near <span class="HERE">this text</span>.
stuff stuff stuff<br/><br/>
stuff stuff stuff<br/><br/>
stuff stuff stuff<br/><br/>
stuff stuff stuff<br/><br/>
And one more <span class="HERE">here</span>

<div id="message">
   Just a message box
</div>

<script type="text/javascript">
(
  function() 
  {
      var msgbox = document.getElementById("message");
     
      var spans = document.getElementsByTagName("span");
      for ( var s = 0; s < spans.length; ++s )
      {
          spans[s].onmouseover = showMessage;
      }
      msgbox.onmouseout = function() { this.style.display = "none"; }

      function showMessage( )
      {
          var node = this;
          var x = 0, y = 20; // change these to adjust message position
          while ( node != null )
          {
              x += node.offsetLeft;
              y += node.offsetTop;
              node = node.offsetParent;
          }
          msgbox.style.top = y + "px";
          msgbox.style.left = x + "px";
          msgbox.style.display = "block";
      }   
  }
)();
</script>
</body>
</html>

p.s.: That works in all modern browsers. Even works in MSIE as far back as version 5.

gocats2 · 10-06-2012, 02:20 AM

Thanks for your reply. As I mentioned, I have never worked with java script before and I just need to clarify your response. Is this code that goes directly into my document? Or is this meant to open from a separate file (don't you love working with the clueless!). I'm a little confused because it includes the head, body, & their closing tags at the end. I tried this as written and it over-wrote my entire page. I tried taking sections (css in the head with the rest, java script in the head & the span with text section in the html body. That totally messed up the page (I am working with copies so can afford to mess up!)

I am using this on the navigation bar of a local church's site. When the mouse lands on the various items in the nav. bar, a box will come up with a couple of paragraphs of text giving a summary of the link. The visitor will have the option of clicking for more info, or, in some cases, following more links or ignoring.

Obviously, I need help. I thought it would be as easy as downloading the script but I should know better!

Old Pedant · 10-06-2012, 02:34 AM

Ummm...that was a complete demo page, only. I can't help you integrate it with your code until/unless I see your code.

You never did show your HTML, for example.

gocats2 · 10-06-2012, 08:58 PM

Ok, sorry, I didn't want to send too much. The code is quite messy as I have added, subtracted and generally edited without care. If it matters, I'm using Dreamweaver to do the page. I'm sending this as a .doc file rather than copy code into this message. If you would rather have the code in a different format, please let me know.

This AM I made a change to the page (deleted the header div and moved the logo to the nav bar) and now the popup box is way to the right and also under the slideshow. I am determined to get this right and I really appreciate you taking the time to help.

gocats2 · 10-06-2012, 08:59 PM

Opps, forgot the attachment