CODEWITHSUNDEEP
javascriptjqueryhtml
stackOverlord
stackOverlord

Reputation: 5412

make popup window centered

I'm popping up a window for facebook authentication and I would like the contents of that page to be centered in the popup window. I am NOT asking for how to center the popup window on the screen. I am asking how to center the page in the popup window. Javascript is ok.

<a href="/auth/facebook" id="facebook_button" data-width="800" data-height="400">

<script>
$("#facebook_button").click(ask_for_facebook_auth);

function popupCenter(url, width, height, name) {
    var left = (screen.width/2)-(width/2);
    var top = (screen.height/2)-(height/2);
    return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top);
}

function ask_for_facebook_auth(e){
    popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
    e.stopPropagation(); return false;
}
</script>

Upvotes: 0

Views: 2273

Answers (3)

stackOverlord
stackOverlord

Reputation: 5412

This isn't a general solution to the popup centering, but it solved my issue with the facbeook auth dialog. You have to put 

config.omniauth :facebook, APP_ID, APP_SECRET, { :display => 'popup' }

in your initializers/omniauth so that facebook will generate a centered page that looks nice in a popup.

Upvotes: 0

Rohan Patil
Rohan Patil

Reputation: 2348

Use this function to center your popup.

jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
            this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
            return this;
        }

If you want to center div with id simplemodal-container then use

   $('#simplemodal-container').center();

Upvotes: 0

Aaron
Aaron

Reputation: 5247

You'll want to use the window.scrollTo() method to center the viewport at half the body width/height minus half the window innerWidth/innerHeight respectively. This should accomplish what you're after:

window.onload = function() {
    var w = window.innerWidth * 0.5;
    var h = window.innerHeight * 0.5;
    var x = document.body.clientWidth * 0.5 - w;
    var y = document.body.clientHeight * 0.5 - h;
    window.scrollTo(x,y);
}

Upvotes: 1

Related Questions