popup displaying partly outside browser window

Question

I am using CSS to create a pop-up on my page. I have a within the tag that is set to display:none;. Then when you hover over the 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. Is there a way to make sure that the entire pop-up stays within the browser window with CSS or so I need to add in some Javascript? 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.

This is my code:

a span {
display: none;
}

a:hover span {
display: block;
position: absolute;
width: 300px;
z-index: 1000;
}

Thank you in advance for your help! :-)

You need JavaScript to determine if the popup is going to be out of view. — Iansen, Jul 16 '13 at 14:39

score 4 · Answer 1 · answered Nov 17 '14 at 13:17

So, if you put the class "hvrpop-link" on the element you hover over and under that you put the class "hvrpop-win" on the window/menu that popups up. Then the following will nudge the popup window/menu over to the left just enough to keep it on screen. Note - it you already have a margin-left on the popup window you might need to save it down in "data" or something so it goes back to the correct place if you resize the window.

It seems to work all the way back to IE7:

$(function() {
    $('.hvrpop-link').hover(function() {
        var win=$(this).find('.hvrpop-win:visible');
        if(win.length>0) {
            var screenwidth=$('body').width();
            var width=win.width();
            var pos=win.position();
            var rightpos=width+pos.left;
            if(rightpos>screenwidth) {
                var moveleft=rightpos-screenwidth;
                win.css('margin-left','-'+moveleft+'px');
            } else {
                win.css('margin-left','0px');
            }
        }
    });
});

score 1 · Answer 2 · edited May 23 '17 at 12:00

1

You can check whether the corners of the popup are inside the window with jQuery. Have a look at this: How to check if an element is off-screen

edited May 23 '17 at 12:00

Community

1
1

answered Jul 16 '13 at 14:40

Pieter

1,823
1
12
16

Thank you for the reply! Is there a way to do this without jQuery and just use Javascript? I REALLY don't want to use jquery because I would have to go through and attach jquery to over 400 pages. I already have a Javascript file attached to all of these pages so if there is a fix I can put in that one file that would be best. – Christie DeLuca Ellis Jul 16 '13 at 17:05
Hm, that sounds as a lot of work. jQuery is based on Javascript, so it should be possible. I don't know whether it works, but maybe you can have a look at this: http://useallfive.com/javascript-tool-detect-if-a-dom-element-is-truly-visible/ – Pieter Jul 16 '13 at 17:11
You can add jQuery with a existing Javascript by the way. See this: http://stackoverflow.com/questions/950087/how-to-include-a-javascript-file-in-another-javascript-file – Pieter Jul 16 '13 at 17:13

SlawomirJ · Answer 3 · 2013-07-19T09:45:52.520

0

Will be better use the css code:

a span {
    position: absolute;
    z-index: 100000;
    display: none;
    min-width: 100px;
    max-width: 50%;
    left: 50%;
    margin-left: -25%;
}
a:hover span {
    display: block;
}

edited Jul 19 '13 at 09:45

answered Jul 16 '13 at 14:55

SlawomirJ

106
4

why would that be better? – Christie DeLuca Ellis Jul 16 '13 at 15:26
Because SPAN element is in center and it size is dynamic. If you change SPAN size on 300px. You have to change only one attribute in CSS. Other will be dynamic: `code`min-width: 300px;`code` Working in FF, Chrome and IE >= 8 :) – SlawomirJ Jul 19 '13 at 09:50

popup displaying partly outside browser window

3 Answers3