Self resize and center a window using javascript (no jquery) on page load

javascript resize window center

54,329

Solution 1

I personally would advice against Popups an Javascript window manipulation. (due to Popup Blockers, Javascript errors, ...) A Overlay would probably be better.

Here would be an other Solution.

File one(Link should point to this Helper, that opens the Video HTML)

<html>
<body>
<script>
    var windowWidth = 400;
    var windowHeight = 200;
    var xPos = (screen.width/2) - (windowWidth/2);
    var yPos = (screen.height/2) - (windowHeight/2);
    window.open("popup.html","POPUP","width=" 
    + windowWidth+",height="+windowHeight +",left="+xPos+",top="+yPos);
</script>
</body>
</html>

File Two (Video that closes Helper)

<html>
<body onload="window.opener.close();">
</body>
</html>

Solution 2

Got it working with:

<script language="javascript">

  function resizeVideoPage(){
    var width = 600;
    var height = 400;
    window.resizeTo(width, height);
    window.moveTo(((screen.width - width) / 2), ((screen.height - height) / 2));      
  }
</script>

// Then...

<body onload="resizeVideoPage();"></body>

54,329

Author by

CMSCSS

Updated on August 15, 2020

Comments

CMSCSS almost 4 years
This is not something we'd normally do but we're trying load a video into the blank window opened by a clickTag (from a banner ad) - and make it feel like a modal window as much as possible.

Is it possible to use javascript to self-resize the blank window opened by the clickTag and center it on the screen?
- We can't apply anything to the link that is clicked so...
- Everything has to self-run as the page loads
- If possible, it would be nice to not see the browser tabs and address bar
- We're not loading jquery
- Are browser security alerts a potential problem?
Essentially the user clicks to watch a video and we'd like them to watch the video without them feeling like they've gone to a completely different site.

So far I can resize the window but can't figure out how to center it with:
```
<script language="javascript">

  function resizeVideoPage(){
    resizeTo(400,390);
    window.focus();
  }
</script> 

// Then...

<body onload="resizeVideoPage();"></body>
```
Any pointers in the right direction would be much appreciated.

Cheers

Ben
CMSCSS over 11 years

Thanks for that but the publisher insists on a popup from the banner ad - and we have no control over the link code (Flash clickTag) or the page the link is on. Can your JavaScript be placed into the page we load from the clickTag and run on page load? Cheers
winner_joiner over 11 years

If i understand you corrent, i would say it should work. The main Idea, of this 2 scripts was: the AdLink opens "File one" and "File one" opens the real - popup(File two). Than the popup closes the "File one" onload, just leaving the page where the ad was and the Popup. Hop it helps
Elena over 8 years

Nice and clean way to do it. I simply dropped <script language="javascript"> var width = 600; var height = 400; window.resizeTo(width, height); window.moveTo(((screen.width - width) / 2), ((screen.height - height) / 2)); </script> just after the closing head tag and it resizes the window just fine