1

I'm developing a site that uses isotope to lay out a number of items in grid form.

I'm implementing a rollover system that displays popup boxes with additional info.

The issue is that on narrow screens the popups flow off the screen to the right, example here:

https://jsfiddle.net/wsgfuace/2/

Ideally when rolling over the right half of the screen I'd like the popups to anchor to the lower right hand corner instead of the lower left.

How is this possible please?

I found this code which looks like it could potentially work but am unable to implement it successfully:

$(function() {
    $('.item-s').hover(function() {
        var win=$(this).find('.big-s: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');
            }
        }
    });
});
isonome
  • 83
  • 1
  • 1
  • 7
  • Is the isotope grid layout making all the elements absolute positioned? Right now the way the page is structured its going to be pretty messy to try and get something to work (as far as I can see) – crazymatt Jun 08 '15 at 23:32
  • Thanks Matt. Def looks like the isotope grid is using absolute positioning however there's also a transform command that is used to position the item within the grid i.e. transform: translate3d(200px, 50px, 0px); Could the latter not be used to assess the position of the item and then position the tooltip accordingly? – isonome Jun 09 '15 at 09:49
  • On a separate note, You shouldn't have 3 different itemSelectors in isotope `itemSelector : ".item-s, .item-m, .item-l"`, pick only one class like `.item`. Also, why are you loading Packery as well as Isotope, since they are not used together. I'm guessing you want isotopes specific packery layout, not the separate packery javascript. – Macsupport Jun 09 '15 at 13:39

1 Answers1

0

This was solved using a combination of jquery to detect page width and hence cursor position:

$(".item-s").mouseover(function(e){
    var pageWidth = $('body').width();
    if ( e.pageX > pageWidth / 2 ){
        $(this).toggleClass('special');
    }
});

and by adding a 'special' div to the CSS to shift the popup as detailed here:

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

Updated fiddle for ref here:

https://jsfiddle.net/wsgfuace/5/

Community
  • 1
  • 1
isonome
  • 83
  • 1
  • 1
  • 7