CODEWITHSUNDEEP
javascriptcross-browser
BonyT
BonyT

Reputation: 10940

Popup windows - Browser differences

I am creating popup windows using window.open and setting the height and width of the created screen.

The navigation bar always appears (since this is a browser setting beyond my control). The problem is in IE/Firefox the navigation bar is excluded from the height I define which is good, but in Chrome, it is not, so my popup ends up being undersized with a right scrollbar.

What's the preferred mechanism for dealing with this.

Using a function to set the popup-height which checks the browser type and adds adjustments depending on the result?

 function popupCreator(url, popupname, height, width){

    if(browsertype=="chrome"){  //obviously not this exact code!
        height = height + 20;
    }

    var params = 'width=' + width + ',height=' + height;
    newwin = window.open(url, popupname, params);

 }

Or is there a better way of achieving this?

The full function I am currently using:

 "popup": function (url, popupname, height, width) {
    if (null == width) {
        var width = screen.width / 2;
    }
    if (null == height) {
        var height = screen.height / 2;
    }

    var left = (screen.width - width) / 2;
    var top = (screen.height - height) / 2;
    var params = 'width=' + width + ',height=' + height;
    params += ',top=' + top + ',left=' + left;
    params += ',directories=no';
    params += ',location=no';
    params += ',menubar=no';
    params += ',resizable=no';
    params += ',scrollbars=no';
    params += ',status=no';
    params += ',toolbar=no';
    params += ',dialog=yes';
    params += ',titlebar=no';
    newwin = window.open(url, popupname, params);
    if (window.focus) { newwin.focus() }
    return false;
},

Upvotes: 1

Views: 2684

Answers (3)

nbjorling
nbjorling

Reputation: 104

Since chrome is using inner syntax and the other browser dont, you can just use this in the code aswell. and get it this easy!

window.open('http://some-url', 'window-name',
'location=yes,links=no,scrollbars=yes,width=716,height=480,innerHeight=510');

You are welcome! :D

Upvotes: 0

mplungjan
mplungjan

Reputation: 177860

Here is my version of the same code

I assume you do a return popup(this.href,this.target,500,600) in a link

"popup": function (url, popupname, height, width) {
    var w = width  || screen.width  / 2;
    var h = height || screen.height / 2;
    if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) h+=20;
    var left = (screen.width - w) / 2;
    var top  = (screen.height - h) / 2;
    var params = 'width=' + w + ',height=' + h;
    params += ',top=' + top + ',left=' + left;
    params += ',screenY=' + top + ',screenX=' + left; // let's support older NS too ;)

    // all params that are not mentioned are off per default, 
    // all params mentioned are true per default
//    params += ',directories=no';
//    params += ',location=no';
//    params += ',menubar=no';
    params += ',resizable'; // given as an example of a =yes
//    params += ',scrollbars=no';
//    params += ',status=no';
//    params += ',toolbar=no';
    params += ',dialog'; // NS/FF only thing
//    params += ',titlebar=no';
    var newwin = window.open(url, popupname, params);
    if (newwin) { 
      newwin.focus(); 
      return false; // cancel the href
    }
    return true; // follow the href, the window was blocked
}

Upvotes: 1

Karolis
Karolis

Reputation: 9562

The visibility of navigation bar is controllable. For instance:

window.open('http://some-url', 'window-name',
    'location=yes,links=no,scrollbars=yes,toolbar=no,status=no,width=716,height=480');

Location is the only thing that cannot be hidden, because of security reasons.

Upvotes: 0

Related Questions