Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help fine-tuning a popup box

    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]

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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.
    Last edited by Old Pedant; 10-05-2012 at 11:07 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Opps, forgot the attachment
    Attached Files Attached Files


  •  

    Posting Permissions

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