Center pop-up in window

[ericjacksonwood]

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

I have an <iframe> 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?

[voronianski]

Hi, thanks

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

[wunderco]

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!!

[phuongnd08]

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?

[phuongnd08]

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

[wunderco]

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 notifications@github.heygears.comwrote:

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//issues/41#issuecomment-24858018
.

[phuongnd08]

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.

[wunderco]

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 notifications@github.com 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.

[voronianski]

@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).

[voronianski]

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

[wunderco]

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 notifications@github.com 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.

[voronianski]

@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

[codehandling]

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.

[codehandling]

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

[wunderco]

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 notifications@github.com 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//issues/41#issuecomment-27580144
.

[the-de-coder]

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

[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.

[apocaalypso]

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'
                });

[nobitagit]

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!

[phuongnd08]

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

[voronianski]

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

[nobitagit]

Fair enough, PR submitted.

[thomasmodeneis]

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

[Stefanoviic]

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'
	                });
	            }

[dikyridhlo]

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',