Friday, 17 June 2011

How to open new windows with a specific size, target blank

I was asked about my previous post that had this link to the mobile version of the Web Devil blog.
The link opens a new window with a predefined size of 320x480 (basic mobile viewport size).


You could use:
<a href="YOURPAGE.html" target="_blank">Link Text</a>

however this doesn't specify the page size.
Instead you have to use a bit of javaScript.  You could write a function, but it's so small you can include it inline like:
<a href="#" onClick="window.open('http://webdev-il.blogspot.com/?m=1','mywindow','width=320,height=480,toolbar=no,location=no,directories=no,statu s=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes')">Link Text</a>

You'll notice in this example I've set the preferences to not display most of the toolbars etc. but have allowed scrolling and resizing.  Also remember that when using javaScript inside quotation marks " " you need to use single quote marks '  ' to define variables etc.

For more info about mobile viewport sizes view this post about mobile viewport vs screen resolution

... and the top tips for designing a mobile interface

Share/Bookmark

2 comments:

  1. Excellent read. I like your style...have a good one!/Nice blog! Keep it up!

    Website Design and Development

    ReplyDelete
  2. Thank, just what I neede - even it's kind of old post :)

    ReplyDelete