CODEWITHSUNDEEP
jqueryresizewindowposition
JacobTheDev
JacobTheDev

Reputation: 18520

Position a Window On Screen

Is there a way to position a window opened with jQuery to the top right corner of the screen?

This is the code I have right now: 

$(document).ready(function() {
    $("#dirs a").click(function() {
        // opens in new window
        window.open(this.href, "customWindow", "width=960, height=1040");
        return false;
    });
});

And I want it to open in the top right corner of the screen, similar to how it would appear if "snapped" with Windows Aero snap in Vista or higher. Is there a way to make this happen?

By the way, this is a simple page that only I will use, and I will only use it in Chrome on a 1920x1080 monitor, so it doesn't have to have any fancy stuff to adjust for different browsers or screen sizes.

Upvotes: 10

Views: 56466

Answers (5)

Zuul
Zuul

Reputation: 16269

JavaScript window.open accepts lots of parameters. To your particular case, top and left should suffice.

See the working Fiddle Example!

The Syntax

window.open([URL], [Window Name], [Feature List], [Replace]);

The Feature list

enter image description here

The working example to fit your needs

<script type="text/javascript">
<!--
function popup(url) 
{
 var width  = 960;
 var height = 1040;
 var left   = screen.width - 960;
 var top    = 0;
 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';
 newwin=window.open(url,'customWindow', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

<a href="javascript: void(0)" 
   onclick="popup('popup.html')">Top Right popup window</a>

Note: This will calculate the screen width to set the left properly.

Take into consideration that you are using a window with a large height, usually, screens are larger than taller...

Upvotes: 7

Marko
Marko

Reputation: 72222

$("#dirs a").click(function(e) {
    e.preventDefault();
    var popupWidth = 960;
    var leftPos = screen.width - popupWidth;

    window.open(this.href, "customWindow", "width=" + popupWidth + ", height=1040, top=0, left=" + leftPos);
});

Here's an example.

Upvotes: 1

Gijoey
Gijoey

Reputation: 316

This is the right one.. You need to calculate the width of the screen first. 

var leftPos = screen.width - 960;
window.open(this.href, "customWindow", "width=960, height=1040, top=40, left="+leftPos+");

Upvotes: 1

nmford
nmford

Reputation: 1014

If he wants it on the top right doesn't he need this?

window.open(this.href, "customWindow", "width=960, height=1040, top=0, left=960");

Upvotes: 21

web_bod
web_bod

Reputation: 5758

window.open(this.href, "customWindow", "width=960, height=1040, top=0, left=0");

Other window properties:

Property         Default value   Description
width            auto            specifies width of the new window in pixels
height           auto            height of the window in pixels
top              auto            specifies window position
left             auto            specifies window position
directories      no              should the directories bar be shown? (Links bar)
location         no              specifies the presence of the location bar
resizable        no              specifies whether the window can be resized.
menubar          no              specifies the presence of the menu bar
toolbar          no              specifies the presence of the toolbar
scrollbars       no              specifies the presence of the scrollbars
status           no              specifies the presence of the statusbar

Upvotes: 1

Related Questions