Using jQuery to set the size of a new window

Question

I am opening a link in a new window using jQuery:

<script type="text/javascript">
$(document).ready(function() {
    $('a[href="/education/global-health-courses"]').attr("target", "_blank");    
});
</script>

I would like to set the size of the new window to 800px wide by 700px tall. I just need a little help adding those attributes to the existing code.

Thanks.

Answer 1

In order to set the window size you need to use window.open method. Instead of using target="_blank" on the anchor you could subscribe to the click event and call window.open.

Answer 2

You can't resize a target=blank window AFAIK.

You will have to create a new one using window.open - outlined e.g. in this article - and add a testwindow.resizeTo(x,y) command to make sure.

Answer 3

You can't set those attributes using the target="_blank" method, you have to use the window.open method:

$(document).ready(function() {
    $('a[href="/education/global-health-courses"]').click(function() {
        window.open($(this).attr('href'),'title', 'width=800, height=700');
        return false;
    });   
});

Answer 4

a nice way to do this would to use an iframe with colorbox (http://colorpowered.com/colorbox/)

$('a[href="/education/global-health-courses"]')
   .colorbox({width:"80%", height:"80%", iframe:true});

Answer 5

If you really want very fine control of the look and behaviour, i strongly recommand the use of a script called ShadowBox. It's the most stable and versatile modal window javascript script. You can launch external pages inside a popup div (containing an iframe) with that script.