Resize & reposition your browser "bookmarklets"

Firefox browser bookmarks toolbar

Firefox bookmarks bar [screenshot] with various bookmarklets for resizing & repositioning the browser window

On a fairly regular basis, I find myself resizing & repositioning the browser window in order to "work happy". Be it general web browsing, web development, or multi-tasking, the browser window and position has a noticeable impact on what I’m doing. Being fairly detail oriented, I prefer resizing & positioning the browser window – in relation to other application windows – to specific pixel coordinates. At one point, I was using a special wallpaper [grid] which helped line elements up to their respective coordinates.

Realizing that the task of resizing & repositioning the browser window could be simplified using JavaScript browser bookmarklets, I created and added similar snippets to accommodate my needs on a 2560×1600 resolution screen:

javascript:self.resizeTo(1280,screen.availHeight);self.moveTo(640,0);

The above will resize the browser window horizontally to 1280px, and vertically to the constraints of the work area. If the dock is hidden (OS X), the browser height would be 1600px. If the dock is visible, the vertical height would be y minus the height of the dock.

javascript:self.resizeTo(1024,screen.availHeight);self.moveTo(768,0);

Alternatively, in order to center a browser window with a max width of 1024, the above snippet would do the trick. The general math to calculate the x,y coordinates for self.moveTo(x,y) can be gathered with the following:

  • Decide on the max-width of the browser window – 1024
  • Divide the horizontal resolution of your screen by 2 – 2560px / 2 = 1280
  • Divide your anticipated browser width by 2 and subtract this figure from the centerline – 1280-(1024/2)=768

Using 1024 as the max-width for the browser window on a 2560×1600 resolution screen, the coordinates to center the browser window would be self.moveTo(768,0);. Confused? That’s OK. Right-click on any of the links below for your respective screen resolution and select "Bookmark this link". Saving the links to your browser bookmarks bar will provide you with quick access to resize and center your browser window.

Note that in order for the above browser bookmarklets to work, you will need to make sure that JavaScript browser window resizing is not disabled in your browser preferences.

Firefox browser preferences

Double-check to make sure that your browser settings do not disable JavaScript browser window resizing

What other browser bookmarklets do you use on a regular basis? Add your recommendations in the comments so that others might benefit as well.

Get the Best Software for your Computer

Looking for the best software on the web? Sometimes it can be tough to find things like landscape software, while other programs like music software seem to be everywhere. Thankfully the internet is full of all types of software, so there’s sure to be something for everyone.

Discuss - 20 Comments

  1. Glenn Wolsey says:

    Handy tips, I’m going to add these to my bookmarks bar now.

  2. Devon Shaw says:

    This is just really freakin’ cool. Even on my 1280×800 MacBook screen, I’m constantly shifting my Safari window so the scroll bar aligns perfectly on the right — makes clicking on the bar 100% easier, looks cleaner, leaves my unusual Adium setup completely viewable, and adjusting the window to 1024 makes a great guideline for debugging. I can’t believe I didn’t think of this first. Thank you.

  3. Ronald Heft says:

    I actually do the same thing, but mainly for switching between my MacBook LCD and my external LCD. I’m really touchy when it comes to my browser position, so I doubt I would be able to switch monitors without this tip.

  4. Mykal says:

    Yeah I was just thinking the same thing…

    Its simple and functional. And yes great for debugging.

  5. Matt says:

    The Firefox plugin “Web Developer Toolbar” also has this feature (along with many others useful to Web Designers). Although you cannot specify a position for the window, only dimensions.

    Cool little bookmarklets to have nevertheless.

  6. Derek says:

    Thanks Paul, I was actually looking for that URL earlier today. I wanted to include it in the post before publishing but you beat me to it.

  7. Daryl says:

    Dead handy! Thanks.

  8. Andreas says:

    Thanks for these, Derek.

  9. Fabio Sasso says:

    Thanks a lot…. really handy!

  10. [...] 5thirtyone: Resize & reposition your browser “bookmarklets” For Safari, Firefox has the WDT. [...]

  11. Hans says:

    To do this, resizing my window : I’ve been using a Firefox add-ons which also include loads of things to help into web dev : here’s it is.

    I don’t know whether that’s related to what you wanted specifically.

  12. Alan Chio says:

    Awesome tips! =)

  13. Derek says:

    [quote comment="48323"]To do this, resizing my window : I’ve been using a Firefox add-ons which also include loads of things to help into web dev : here’s it is.

    I don’t know whether that’s related to what you wanted specifically.[/quote]

    I prefer Firebug for web development via Firefox. The Web Developer Extension is fantastic but many of the tools are ones that I would not normally need to use. Because of that, individual bookmarklets prove far more flexibility w/o the need for an extra extension.

  14. Andy says:

    Can availHeight become a value? When I use it, its resizing to … well … the available height. I’d like to specify it to be slightly smaller.

  15. [...] Resize & reposition your browser “bookmarklets” No Comments, Comment or Ping [...]

  16. [...] could take a look at this. I didn’t read it properly, just remembered it being posted. __________________ My Mac’s: [...]

  17. pushpinder says:

    thanks
    it helped me not to install a full toolbar for just this utility…

  18. Thanks for the page, I generated additional keyword shortcuts from that

    Here are some keyword shortcuts for centering a window

    center:max
    javascript:self.resizeTo(window.outerWidth,screen.availHeight);self.moveTo((screen.width-window.outerWidth)/2,0)

    center:center
    javascript:self.moveTo((screen.width-window.outerWidth)/2,(screen.height-window.outerHeight)/2)

    Window 7 has its own keyboard shortcuts
    http://en.wikipedia.org/wiki/Features_new_to_Windows_7#Keyboard_shortcuts

    WinKey leftarrow maximize to left half / restore / max to right
    WinKey rightarrow maximize to right half / restore / max to left

    If you have 2 monitors you will get 2 sets of three if you continue with either of the above.

    WinKey Up maximize
    WinKey Down restore from maximized, or minimize

    center:top
    javascript:self.moveTo((screen.width-window.outerWidth)/2,0)

    center:bottom
    javascript:self.moveTo((screen.width-window.outerWidth)/2,screen.height-window.outerHeight)