Popin - Popup qui sort de l'écran

Boobha
Javascript

Bonjour,

Voila je me demandais si vous auriez une astuce pour éviter qu'une popup (un div quoi) ne sorte pas l'écran lorsque celui est tout a droite.

De base le popup pop a droite du texte, j’imagine qu'avec JQuery on peut voir si la div sort a ce moment là on l'affiche a gauche.

Est ce possible et surtout comment ?

Merci d'avance

See you :)

2 réponses

Maenhyr
Réponse acceptée

Salut! Peux tu nous dire quel plugin tu comptes utiliser pour te donner le bon code?

En gros dans le principe, tu vas avoir un paramètre

placement : "left|right"

Le pricipe est d'analyser la place que prend la div, la taille de l'écran et si la taille de la popup est plus grande que la place restante. En gros 

var window_length = window.length;
var div_length = $('div').length;
Var div_position = $('div').offset().left;
Var placement = "right";
if(window_length - div_position < div_length)
    placement = "left";
Boobha
Auteur

Salut prbaron,

Merci pour ton astuce, elle fonctionne très bien !
J'un peu adapté a mon code, qui n'est surement pas parfait mais bon :p

<li>
    <a href="#" data="popover"><img src="http://lorempixel.com/100/100/food"></a>
    <div id="popover" class="left">txt</div>
</li>

$('a[data|="popover"]').mouseenter(function(){
        var window_length = $(window).width();
        var div_length = $(this).next('#popover').width();
        var a_length = $(this).width();
        var a_position = $(this).offset().left;
        if(window_length - a_position-a_length < div_length){
            $(this).next('#popover').removeClass("left").addClass('right').show();
        }else{
            $(this).next('#popover').removeClass("right").addClass('left').show();
        }

    });
    $('a[data|="popover"]').mouseleave(function(){
        $(this).next('#popover').hide();
    });