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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Orlando, Florida
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Hover over text to get textbox to appear (& not disappear til mouse is out of bounds)

    Like in this thread, I'm looking for a script that makes a text box pop up when a user hovers over some text. However, I need the pop up to have buttons and to not disappear when the user moves their cursor from the text, but instead when the user removes the cursor from the bounds of the box that pops up. Here's a mockup of what it will eventually look like:


    Will anyone please help me with this?
    Last edited by Lolligirl; 02-08-2013 at 04:30 PM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts
    What / Where is your question or code?

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Odds are the post was SPAM or something else that is contrary to the T&C, and was removed.

    I've seen questionable posts from Lolligirl, before. Don't know if it's actually Lolligirl, or Lolligirl's account has been compromised.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    The first post must have been put in the moderation queue automatically after Lolligirl has edited it so it wasn’t visible to the genera public. Can’t see any spam in it, though.

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Orlando, Florida
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    What the heck, guys? I had posted this thread before and my post got deleted or something after I edited it (was no different from the first post now), so I posted another one. My question is in the first post ("I'm looking for a script that makes a text box pop up when a user hovers over some text"). You haven't seen me before because I just now created an account. :/

    Quite the warm welcome; forget it.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Lolligirl, as I said, the automatic spam filter has somehow automatically “unapproved” your post after you edited it – it’s a little sensitive if people with a post count lower than six post links and/or images because that’s also typical for spammers. Sometimes, however, this triggers false postitives when a user is a legitimate member. No need to get angry.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    If 'Lolligirl' is still around, see how close this comes to your request.
    Specifically see the second of three underlined tips.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    function $_(IDS) { return document.getElementById(IDS); }
    
    // From: http://txt.binnyva.com/2007/06/find-elements-position-using-javascript/
    function findPos(obj) {
      var curleft = curtop = 0;
      if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
          curleft += obj.offsetLeft
          curtop += obj.offsetTop
        }
      }
      return [curleft,curtop];
    }
    
    function tip(IDS,flag,info) {
      if (flag) {
        var tarr = findPos(info);  // el.innerHTML += '<p>'+tarr[0]+':'+tarr[1];
        $_(IDS).style.display = 'block';
        $_(IDS).style.left = (tarr[0]+10)+'px';
        $_(IDS).style.top = (tarr[1]+25)+'px';
      } else { $_(IDS).style.display = 'none'; }
    }
    </script>
    
    <style type="text/css">
     .ttip { display:none; position:absolute; z-index:10;
             background-color:#ffff00; border:3px solid blue; }
    
     span { text-decoration:underline; background-color:lime; }
     li { list-style-type:none; }
    </style>
    
    </head>
    <body>
    <div style="width:400px">
     Ipsum <div style="display:inline;font-size:1.5em;font-weight:bold" title="Hot Title Tip">lorem dolor</div> sit amet, 
      <span onmouseover="tip('Sced',true,this)" onmouseout="tip('Sced',false)" >Schedule</span>
     consectetuer adipiscing elit. Mauris magna. 
      <span onclick="return false" onmouseover="tip('Mail',true,this)"> Forums </span>
     Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
      <span onClick="Toggle('MainTable');Toggle('FunTable');return false"
        onmouseover="tip('Diversion',true,this)" onmouseout="tip('Diversion',false)" > 
       <a href="http://www.punoftheday.com/">Fun stuff link</a> </span>
     convallis, sagittis vitae, convallis sit amet, lectus.
    </div>
    
      <div id="Sced" class="ttip">Similar to title="something" in link</div>
      <div id="Mail" class="ttip" style="width:250px;text-align:center" onclick="tip('Mail',false)">
        <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" style="height:100px; width:75px;float:left;">    
        <div style="display:inline;font-size:1.5em">Title of popup</div>
        <div style="display:inline;float:right;background-color:lime">Close</div>
        <br style="clear:both">
        <a href="http://www.webdeveloper.com">Webdeveloper.com</a><br>
        <a href="http://www.codingforums.com">CodingForums.com</a><br>
        <a href="http://www.dreamincode.net">DreamInCode.net</a><br>
      </div>
      <div id="Diversion" class="ttip">Diversions page</div>
    
    </body>
    </html>
    Last edited by jmrker; 02-09-2013 at 05:05 AM.

  • #8
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Orlando, Florida
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    If 'Lolligirl' is still around, see how close this comes to your request.
    Specifically see the second of three underlined tips.
    (snip)
    It comes very close, thanks! There's only one main difference: is there a way to have the second popup close when my cursor is outside of that popup bounding box instead of having to click on "Close"?

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Closer?
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    function $_(IDS) { return document.getElementById(IDS); }
    
    // From: http://txt.binnyva.com/2007/06/find-elements-position-using-javascript/
    function findPos(obj) {
      var curleft = curtop = 0;
      if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
          curleft += obj.offsetLeft
          curtop += obj.offsetTop
        }
      }
      return [curleft,curtop];
    }
    
    function tip(IDS,flag,info) {
      if (flag) {
        var tarr = findPos(info);  // el.innerHTML += '<p>'+tarr[0]+':'+tarr[1];
        $_(IDS).style.display = 'block';
        $_(IDS).style.left = (tarr[0]+10)+'px';
        $_(IDS).style.top = (tarr[1]+25)+'px';
      } else { $_(IDS).style.display = 'none'; }
    }
    </script>
    
    <style type="text/css">
     .ttip { display:none; position:absolute; z-index:10;
             background-color:#ffff00; border:3px solid blue; }
    
     span { text-decoration:underline; background-color:lime; }
    </style>
    
    </head>
    <body>
    <div style="width:50%">
     Ipsum
     <div style="display:inline;font-size:1.5em;font-weight:bold" title="Hot Title Tip">lorem dolor</div> sit amet, 
    
     <span
      onmouseover="tip('Sced',true,this)"
      onmouseout="tip('Sced',false)">Schedule</span>
     consectetuer adipiscing elit. Mauris magna. 
     Curabitur eros justo, malesuada 
    
     <span onclick="return false"
      onmouseover="tip('Mail',true,this)"> Forums </span>
     Suspendisse accumsan elit non tellus.
    
     <span
       onClick="Toggle('FunTable');return false"
       onmouseover="tip('Diversion',true,this)"
       onmouseout="tip('Diversion',false)" > 
       <a href="http://www.punoftheday.com/">Fun stuff link</a> </span>
     convallis, sagittis vitae, convallis sit amet, lectus.
    </div>
    
    <div id="Sced" class="ttip">Similar to title="something" in link</div>
    
    <div id="Mail" class="ttip" style="width:250px;text-align:center"
     onmouseover="$_('Mail').style.display='block'"
     onmouseout="$_('Mail').style.display='none'">
      <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" style="height:100px; width:75px;float:left;">    
      <div style="display:inline;font-size:1.5em">Title of popup</div>
      <br style="clear:both">
      <a href="http://www.webdeveloper.com">Webdeveloper.com</a><br>
      <a href="http://www.codingforums.com">CodingForums.com</a><br>
      <a href="http://www.dreamincode.net">DreamInCode.net</a><br>
    </div>
    
    <div id="Diversion" class="ttip">Diversions page</div>
    
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    Lolligirl (02-10-2013)

  • #10
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Orlando, Florida
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Precisely what I needed. Thank you so much!

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by Lolligirl View Post
    Precisely what I needed. Thank you so much!
    Your're most welcome.
    Happy to help.
    Good Luck!


  •  

    Posting Permissions

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