How to make popup div position adjustable when i mouse hover to a div according to position of the div

JavaScript
1

I make a div and on mouse hover, on that div, I show another div and give the position of div at the right side of parent div but when parent div reaches right corner of the screen then some part of popup div hide inside the window screen. So, I want that to move the popup div automatically left, top, bottom where that popup div shows properly.
I attached a image for showing that what is the problem I get and I want to move left that popup div when this type of condition come.

Can anyone give me the solution?
Thanks

2

Show us your code. We cannot troubleshoot a picture.

<copied from previous post>

Please give the full code in a “working page” or a CodePen so we can see what you see.

A “working page” is one that starts with <!doctype html>, contains <head> and <body> sections, and ends with </html>

If you include code in your post, be sure to preceed the block of code with three backticks on a line by themselves and ends with another three backticks on a line by themselves, like this
```
your code here
```

Alternatively, you can highlight your code and click the </> symbol in the editor’s menu bar.

Have you tested for this problem in any other browsers?

3

I am not able to send you code because it is coming dynamically. I send you the website link you can check there what is the problem.
the link is “http://www.pfyidev.apikdd.com/” go to Electronics section and mouse hover on the ratings and then the popup open.

1 Like
4

I can’t help with a js solution as that is too complicated for me but I can offer an alternative css compromise. :slight_smile:

If instead of moving the box to the right or left you simply display the box above the element then you will never need to worry about it being cut off.

If you add this code to the end of the css files for testing you can see the effect. If you don’t like it just remove the code and hope that someone posts a js solution (although I think that would be quite involved).

.ratings-popup{
	margin:-145px 0 0 3px;
	border-left:1px solid #bfbfbf;
	border-bottom:3px solid #eb5c58;
	width:190px;
	padding:5px 0 5px 8px;
}
.ratings-popup.orange-border{border-bottom:3px solid #ffba00;}
.ratings-popup.green-border{border-bottom:3px solid #4bd329;}

.ratings-popup::after, .ratings-popup.red-ratings-popup::after,
.ratings-popup.orange-ratings-popup::after,
.ratings-popup.green-ratings-popup::after   {
    border-color: #eb5a57 transparent transparent;
    margin-top:3px;
    position: absolute;
    right: 50%;
	margin-left:-3px;
    top: 100%;
}
.ratings-popup.orange-ratings-popup::after {
	border-color:#ffba00 transparent transparent;
}
.ratings-popup.green-ratings-popup::after {
	border-color:#4bd329 transparent transparent;
}

When the box is hovered it will now look this:

864Ă—422 66.2 KB

3 Likes
5

Thanks for a solution but I already told to the client about this solution but he doesn’t want this. He wants to move the popup div left automatically when there is no space for the popup.

6

I want to move the popup div left automatically when there is no space for the popup.
I just save the page and attached a zip file so you can use this and implement the js code but I am not able to upload the file. It shows that new user cannot upload files.

So, if you want the file so please save the page and work on this problem. JS code is written in the common.js file ( only first 2 line for popup show and hide ).

7

Ok I’ll have a go at this but my JS will be pretty simplistic so maybe @m3g4p0p can tidy it up.:slight_smile:

First change your two rating functions to this.

function show_rating_box(id){
	var thisEl =  $('#' + id);
	var myCarousel =  $('#myCarousel').width();
	var myPop =  thisEl.width() + 30;//leeway
	var tot1 = 0;
	var tot2 = 0;
	var elem = document.getElementById('myCarousel');
	var elem2 = document.getElementById(id); 
	var box1 = elem.getBoundingClientRect();
	var box2 = elem2.getBoundingClientRect();
	var tot1 = myCarousel + box1.left; 
	var tot2 = myPop + box2.left; 
	$(thisEl).removeClass('swapSides');
	if ( tot2 > tot1){
		$(thisEl).addClass('swapSides')
	  }
	 $("." + id).css("display", "block");
}
function hide_rating_box(id){ 
	$('#' + id).removeClass('swapSides');
	$("." + id).css("display", "none");

}

Just for reference they were previously just this:

function show_rating_box(id){ $("." + id).css("display", "block"); }
function hide_rating_box(id){ $("." + id).css("display", "none"); }

Then next add the following css which will change the positoin of the box based on the swapSides class that was added.

.swapSides  .ratings-popup{
	margin-left:-155px;
	width:200px;
	border-left:1px solid #bfbfbf;
	border-right:3px solid #eb5c58;
}
.swapSides .ratings-popup.orange-border{border-right:3px solid #ffba00;}
.swapSides  .ratings-popup.green-border{border-right:3px solid #4bd329;}

.swapSides .ratings-popup::after, 
.swapSides .ratings-popup.red-ratings-popup::after,
.swapSides .ratings-popup.orange-ratings-popup::after,
.swapSides .ratings-popup.green-ratings-popup::after   {
    border-color:transparent transparent transparent #eb5a57 ;
	right:-15px;
    left: auto;
}
.swapSides .ratings-popup.orange-ratings-popup::after {
	border-color:transparent transparent transparent #ffba00;
}
.swapSides  .ratings-popup.green-ratings-popup::after {
	border-color:transparent transparent transparent #4bd329;
}

Tested and working locally although as I said above it may not be the most efficient way to do this.

1 Like
8

Thank you, PoulOB for giving time and for the correct solution. It’s working fine.

9

Hey @PaulOB, not much to tidy there, though. :-) I just noticed you accidentally declared tot1 and tot2 twice… oh and one small thing, .getBoundingClientRect() also returns a property right, which would save you adding the width.

However, @Praveen_Kumar_Verma you could improve this quite a bit if you would ditch all that inline JS and add a proper event listener add the end of the body; e.g. you could cache the carousel’s bounding client rect, and the hovered element would be readily available as this, which saves you a couple of DOM queries… like

var carouselRight = document
    .getElementById('myCarousel')
    .getBoundingClientRect()
    .right;

$('.sec-rating').hover(function() {
    var thisRight = this.getBoundingClientRect().right + 30;

    if (thisRight > carouselRight) {
        this.classList.add('swapSides');
    } else {
        this.classList.remove('swapSides');
    }

    $('.ratings-popup', this).show();
}, function() {
    $('.ratings-popup', this).hide();
});
1 Like
10

Ah yes, I missed that and didn’t think about using .right:) (I like to make things harder than they should be).

Yes that’s much neater.:slight_smile:

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.