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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

    keep pop-up within browser window

    I am using CSS to create a pop-up on my page. I have a <span> within the <a> tag that is set to display:none;. Then when you hover over the <a> tag the definition of the word pops up. This is working wonderful for me, HOWEVER sometimes the pop-up is appearing outside the browser window. I would really like the pop-up to appear at the location of the link but I don't care if it moves left or right in order to be within the window and visible.

    I know I need JavaScript to fix this but I don't know very much about JavaScript. I have done a lot of searching online but I just cannot seem to figure this out. Please let me know if you have any suggestions.

    This is my code:
    Code:
    a span {
    display: none;
    }
    
    a:hover span {
    display: block;
    position: absolute;
    width: 300px;
    z-index: 1000;
    }
    Thank you in advance for your help! :-)

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    not simple. But not grossly hard, either.

    Something like the following. It's not perfect, by any means. If you adjust your screen width so one of the blue italic spans is broken across a line, you'll see the worst aspect. Hover over the word(s) on the right edge, looks okay. Hover over the word(s) on the left edge, uh-oh. Fixing that is possible but a bunch more work compared to this code.

    Anyway, try it out.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    span.explain {
        color: blue;
        font-style: italic;
    }
    div#explanation {
        visibility: hidden;
        position: absolute;
        width: 150px;
        border: solid brown 1px;
        background-color: lightyellow;
        font-size: 16px;
        color: brown;
        z-index: 100;
    }
    </style>
    </head>
    <body>
    <div id="explanation"></div>
    
    <span class="explain" rel="A score is 20,<br/>so 87 years">Four score and seven years</span> 
    ago our fathers brought forth, on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are 
    created equal.<br/><br/>
    
    Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are 
    met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave 
    their lives that that nation might live. It is altogether fitting and proper that we should do this.
    <br/><br/>
    
    But, in a larger sense, we can not dedicate—-we can not consecrate-—we can not hallow—-this ground. The brave men, living and dead, who 
    struggled here, have consecrated it, far above our poor power to add or detract. The world will 
    <span class="explain" rel="shows how much Lincoln knew">little note</span>, 
    nor <span class="explain" rel="time will tell">long remember</span> what we say here, but it can never forget what they did here. It is for 
    us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather 
    for us to be here dedicated to the 
    <span class="explain" rel="in other words, win this bleedin' war!">great task</span> remaining before us-—that from these honored dead we 
    take increased devotion to that cause for which they here gave the last full measure of devotion-—that we here highly resolve that these 
    dead shall not have died in vain—-that this nation, under God, shall have a new birth of freedom—-and that government of the people, by the 
    people, for the people, 
    <span class="explain" rel="despite the CIA, FBI, and NSA">shall not perish</span> 
    from the earth.
    
    <script type="text/javascript">
    var overlay = document.getElementById("explanation");
    
    var spans = document.getElementsByClassName("explain");
    for ( var s = 0; s < spans.length; ++s )
    {
        var span = spans[s];
        span.onmouseover = openOverlay;
        span.onmouseout  = closeOverlay;
    }
    
    function openOverlay( )
    {
        overlay.innerHTML = this.getAttribute("rel"); // copy the text
        overh = overlay.clientHeight || overlay.innerHeight;
    
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            winw = w.innerWidth || e.clientWidth || g.clientWidth,
            winh = w.innerHeight|| e.clientHeight|| g.clientHeight;
        var node = this;
        var x = 0, y = - overh;
        while ( node != null )
        {
            x += node.offsetLeft;
            y += node.offsetTop;
            node = node.offsetParent;
        }
        if ( y < 0 ) 
        {
            y += 20 + overh; // move overlay below span instead
        } 
        if ( x + 155 > winw )
        {
            x = winw - 155; // move overlay left to stay in window
        }
        overlay.style.top = y + "px";
        overlay.style.left = x + "px";
        overlay.style.visibility = "visible";
    }
    function closeOverlay( )
    {
        overlay.style.visibility = "hidden";
    }
    </script>
    </body>
    </html>
    Last edited by Old Pedant; 07-16-2013 at 09:47 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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    There is, of course, a *MUCH* simpler way:

    No JavaScript. No CSS using :hover.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    span.explain {
        color: blue;
        font-style: italic;
    }
    </style>
    </head>
    <body>
    <span class="explain" title="A score is 20, so 87 years">Four score and seven years</span> 
    ago our fathers brought forth, on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are 
    created equal.<br/><br/>
    
    Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are 
    met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave 
    their lives that that nation might live. It is altogether fitting and proper that we should do this.
    <br/><br/>
    
    But, in a larger sense, we can not dedicate—-we can not consecrate-—we can not hallow—-this ground. The brave men, living and dead, who 
    struggled here, have consecrated it, far above our poor power to add or detract. The world will 
    <span class="explain" title="shows how much Lincoln knew">little note</span>, 
    nor <span class="explain" title="time will tell">long remember</span> what we say here, but it can never forget what they did here. It is 
    for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is 
    rather for us to be here dedicated to the 
    <span class="explain" title="in other words, win this bleedin' war!">great task</span> remaining before us-—that from these honored dead we 
    take increased devotion to that cause for which they here gave the last full measure of devotion-—that we here highly resolve that these 
    dead shall not have died in vain—-that this nation, under God, shall have a new birth of freedom—-and that government of the people, by the 
    people, for the people, 
    <span class="explain" title="despite the CIA, FBI, and NSA">shall not perish</span> 
    from the earth.
    </body>
    </html>
    However, the explanation *can* then extend outside the boundaries of the window...but at least it will then still show completely. Try it.
    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.


  •  

    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
    •