jquery.avgrund.js Center pop-up in window

I just started using Avgrund for a project, and it's working really well.

I have an containing a video from youtube popping up, and it seems to be working well so far. However, the pop-up is opening at the top of the page, instead of in the center. Is there any easy fix for this?

Aug 27 '13 22:08 ericjacksonwood

Hi, thanks

Actually it should be opened in the center of the page, could you share a demo with a bug?

Aug 30 '13 13:08 voronianski

Hey Eric, Im also having the same issue.

Ive been toying with it on http://www.wunder.co/index1.html Scroll to the very bottom left and there is a little blue icon next to the copyright. Thats the trigger.

It looks like the popup is appearing y=-150px. Not sure how to bring this down.

Thanks!!

Aug 31 '13 22:08 wunderco

I'm experiencing it as well. If you scroll down a bit long, then the popup seem to be hidden from the page. Change the position to fixed doesn't work neither. I guess this is a bug with browser when scale is applied?

Sep 21 '13 07:09 phuongnd08

Look like scale is the cause. I remove all scale declaration from CSS and the dialog is aligned perfectly centered on the page.

Sep 21 '13 07:09 phuongnd08

Hey! Thanks for writing back. Quick question, if I killl the scale in body.avgrund-active { overflow: hidden; transform: scale(0.9); }

It works great. Except, the background no longer scales out. Any ideas?

Lauren Wunderlich UX/UI Visual Designer www.wunder.co p: 609.206.4812

On Sat, Sep 21, 2013 at 3:59 AM, Phuong Nguyen [email protected]:

Look like scale is the cause. I remove all scale declaration from CSS and the dialog is aligned perfectly centered on the page.

— Reply to this email directly or view it on GitHubhttps://github.com/voronianski/jquery.avgrund.js/issues/41#issuecomment-24858018 .

Sep 21 '13 16:09 wunderco

Scale is the heart of the effect. As you remove the scale, the effect is removed. My guess of a solution is that you can put the whole document in a single container did (instead of the body tag) and scale that did instead. Put the popin out of that scaled div so that it can be positioned properly.

Sep 22 '13 02:09 phuongnd08

Ok thanks! Will give it a try :)

Lauren Wunderlich UI/UX Design www.wunder.co 609.206.4812

On Sep 21, 2013, at 10:32 PM, Phuong Nguyen [email protected] wrote:

Scale is the heart of the effect. As you remove the scale, the effect is removed. My guess of a solution is that you can put the whole document in a single container did (instead of the body) and scale that did instead. Put the popin out of that scaled div so that it can be positioned properly.

— Reply to this email directly or view it on GitHub.

Sep 22 '13 02:09 wunderco

@wunderco @phuongnd08 I'm trying to fix this now, this scale stuff is a bit tricky and @phuongnd08's proposal is considered to be a solution but for now I don't think it's the best variant to wrap user's content with one more container (if no better solution will be found I think it can be optionate then).

Sep 22 '13 11:09 voronianski

@wunderco @phuongnd08 also I'm thinking about scrolling user up to the top of page.. what do you think?

Sep 22 '13 12:09 voronianski

Ahh yea, but mine is off and above the view. Plus the rest if the site ends up scrolling you up. I still don't understand why it works sans issues on the demo? Is it wrapped up in a container as mentioned?

Lauren Wunderlich UI/UX Design www.wunder.co 609.206.4812

On Sep 22, 2013, at 8:08 AM, Dmitri Voronianski [email protected] wrote:

@wunderco @phuongnd08 also I'm thinking about scrolling user up to the top of page.. what do you think?

— Reply to this email directly or view it on GitHub.

Sep 22 '13 14:09 wunderco

@wunderco demo doesn't contain long content on it, you can checkout how positioning of child inside scaled container behaves here - http://labs.voronianski.com/test/scaled-positioning.html

Sep 22 '13 14:09 voronianski

Do we have a fix or a workaround for this ? I just cant use the popup if my trigger is down the page, because the popup is positioned on top...

Please let me know.

Thanks.

Oct 25 '13 09:10 codehandling

Workaround - Can you calculate the pixels from the top (pixels scrolled down) in the onLoad function and set the popup's height accordingly ???

Nov 01 '13 16:11 codehandling

Hey Jake, Unfortunately, I have moved away from the pop up... my timebox ended for that work.

Thanks! Lauren

Lauren Wunderlich UX/UI Visual Designer www.wunder.co p: 609.206.4812

On Fri, Nov 1, 2013 at 12:47 PM, Jake [email protected] wrote:

Workaround - Can you calculate the pixels from the top (pixels scrolled down) in the onLoad function and set the popup's height accordingly ???

— Reply to this email directly or view it on GitHubhttps://github.com/voronianski/jquery.avgrund.js/issues/41#issuecomment-27580144 .

Nov 01 '13 16:11 wunderco

I have the same issue. Got this all setup, and now if I use a trigger low on a long page, the pop-in is way up where the user cannot see it.

Please advise

Dec 15 '13 16:12 the-de-coder

The popup should be fixed to the browser window, not to the page, but I tried playing with the CSS to do this, and was not successful.

Dec 15 '13 16:12 the-de-coder

I managed to fix this issue by playing with body's scrollTop. Here's what I changed at line 93 in jquery.avgrund.js :

                // Fix for window scroll
                var s = $('body').scrollTop();

                $('.avgrund-popin').css({
                    'width': maxWidth + 'px',
                    'height': maxHeight + 'px',
                    'margin-left': '-' + (maxWidth / 2 + 10) + 'px',
                    'margin-top': '-' + (maxHeight / 2 + 10 - s) + 'px'
                });

May 07 '14 09:05 apocaalypso

Hi I think this problem can be fixed by bringing the modal outside the transformed content. I forked it and tweaked the code a bit, you can see my feature branch here, and a quick demo here.

The code is still to be checked and refactored but I guess this is a good way to make it work. If it looks good let me know and I'll make a Pull request if interested. Cheers!

Jun 28 '14 09:06 nobitagit

Why don't just open a pull request then you can get some review.

Jun 28 '14 12:06 phuongnd08

:+1: @nobitagit yes please, submit a pull request. Demo looks pretty fine so PR to review is needed ;)

Jun 28 '14 12:06 voronianski

Fair enough, PR submitted.

Jun 28 '14 13:06 nobitagit

Any progress on this pull ? this problem still there and is quite annoying.

Sep 23 '16 12:09 thomasmodeneis

I fixed it with this code:

// Fix for window scroll
                var s = $('body').scrollTop();
                if(s > (maxHeight / 2 + 10)){
                	$('.avgrund-popin').css({
	                    'width': maxWidth + 'px',
	                    'height': maxHeight + 'px',
	                    'margin-left': '-' + (maxWidth / 2 + 10) + 'px',
	                    'margin-top': (maxHeight / 2 + 10 + (s-maxHeight)) + 'px'
	                });
                }else{
	                $('.avgrund-popin').css({
	                    'width': maxWidth + 'px',
	                    'height': maxHeight + 'px',
	                    'margin-left': '-' + (maxWidth / 2 + 10) + 'px',
	                    'margin-top': '-' + (maxHeight / 2 + 10 - s) + 'px'
	                });
	            }

Jan 04 '17 13:01 Stefanoviic

im not edit jquery.avgrund.js. i only use onload function to get to top ^^ ('.show-alert').avgrund({ height: 175, holderClass: 'custom', closeByEscape: true, onLoad: function(){ // $('body').scrollTop(0); // alert('tes');

$('html,body').animate({scrollTop: '0px'}, 500); //EDITED USING JQUERY }, onBlurContainer: '.container-scroller',

Sep 05 '18 08:09 dikyridhlo