CODEWITHSUNDEEP
javascripthtmlcss
ske
ske

Reputation: 5234

How to align the popup div direction in css?

I am working on a website that while mouse over a DVD shows the details like you see in picture 1, however, it doesn't work on those DVD placed to the right of the screen as you can see in picture 2, the content got chopped.

How to let it automatically choose which direction to display the content? Like if this DVD is close to the right screen, show content to the left?

Many thanks!

.imgbox .imgbox_content{
    display: none;
}

.imgbox:hover .cover{
    display: none;
}

.imgbox:hover .imgbox_content{
    display: block;
    z-index:2;
    width:600px;
    border-radius: 1%;
    border:1px solid gray;
    -webkit-transition: 1s;
    position:absolute;
    background: black;
    color:white;
}

Normal

Error

Upvotes: 0

Views: 1452

Answers (2)

Josh Burgess
Josh Burgess

Reputation: 9567

Here's a quick solution using JS. Not seeing any JS/HTML though, so you'll need to adapt it to whatever your code looks like:

var imgboxes = document.querySelectorAll('.imgbox');
imgboxes.forEach(function (imgbox) {
  var rect = imgbox.getBoundingClientRect(),
      screen_width = document.body.clientWidth,
      popup_width = <<POPUP_CONTENT_WIDTH>>;
  if (rect.right + popup_width > screen_width) {
    imgbox.classList.add('to_left');
  }
});

and then change your CSS to something like this for the popup:

.imgbox:hover .imgbox_content{
    display: block;
    z-index:2;
    width:600px;
    border-radius: 1%;
    border:1px solid gray;
    -webkit-transition: 1s;
    position:absolute;
    background: black;
    color:white;
}

imgbox:hover .imgbox_content.to_left {
  /* this assumes you've got a position:relative item wrapping the imgbox and that .imgbox_content is a child */
  right: 0;
}

In order to get even more complete, you can handle screen resizes too:

window.addEventListener('resize', calculate_pos_imgboxes)

var calculate_pos_imgboxes = function() {
 var imgboxes = document.querySelectorAll('.imgbox');
 imgboxes.forEach(function (imgbox) {
   var rect = imgbox.getBoundingClientRect(),
       screen_width = document.body.clientWidth,
       popup_width = <<POPUP_CONTENT_WIDTH>>;
   if (rect.right + popup_width > screen_width) {
     imgbox.classList.add('to_left');
   } else {
     imgbox.classList.remove('to_left');
   }
 });
}

calculate_pos_imgboxes();

Upvotes: 1

Korgrue
Korgrue

Reputation: 3478

The easiest way to do this is to just force your popups to appear at the center of the screen. You can do this using position:absolute. However, if you want the popups bounded to the location of the item - then you have to do some calculations.

It would look like this.

  1. Get width of your popup.
  2. Get distance from left edge of target to right edge of screen.
  3. Compare 1 and 2
  4. If dist < width, then offset to the left. Otherwise, offset to the right.

The code for this would look something like (using jQuery). 

var padding = 20;
var elem = $(yourpopup);
var popupwidth = elem.width();
var position = p.position();
var dist = position.left - popupwidth;
   // if the popup is wider than distance to edge plus padding, then offset margin using negative value.
   if (dist < popupwidth){
   elem.css('margin-left', "'-" + popupwidth + padding + "px'" );
}

Upvotes: 0

Related Questions