3

I'm trying to create a popup window that would have a fixed width but a dynamic height based on the user's screen size. Is this even possible? I've scoured this site and others to no avail.

I read the question below but I don't need it sized based on content.

Dynamic height for popups depending on content, is it possible?

I use the popup window for training. The window is auto-sized and positioned on one side of the screen and contains directions on how to use an application that takes up the remaining bit of the screen. The issue is, we have different sized monitors with different screen resolutions. Fortunately we only have to worry about IE11.

Here's a giant disclaimer; I don't know anything about JavaScript except that it exists and can possibly do what I need. I do, however, know HTML & CSS. So here's what I've got going on so far and I'm sure it's far from the proper way to do this:

    <a href="link.html" onclick="javascript:void window.open('link.html','1429893142534','width=290,height=675,toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=0,left=0,top=0');return false;">Link</a>

I tried omitting the height completely but that didn't work. The height that's there is based on the smallest screen the user might be working on, but looks pretty silly with a larger screen & resolution. Maybe something besides JavaScript would work better?

Thanks in advance for any responses!

Community
  • 1
  • 1
shewok
  • 33
  • 1
  • 1
  • 5
  • You can detect the height/width of the browser and position the window based upon the browser width/height... – brso05 Aug 06 '15 at 15:07
  • Cool... how does that work? I found this to get the height/width but, how do I use the info to size the window? – shewok Aug 06 '15 at 15:17
  • I posted an answer that will change the size of the pop-up based upon how big/small the user's browser is...Just try re-sizing your browser and you will see it change when you click the link. You can change the scaling factor just change `0.3` to whatever you want basically I am taking `30%` of the width and `30%` of the height... – brso05 Aug 06 '15 at 17:21

2 Answers2

6

You can do something like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<a href="" onclick="openLink();">Link</a>
<script>
    function openLink()
    {
        window.open('link.html','1429893142534','width=' + (parseInt(window.innerWidth) * 0.3) + ',height=' + (parseInt(window.innerHeight) * .3) + ',toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=0,left=0,top=0');
        return false;
    }
</script>
</body>
</html>
brso05
  • 13,142
  • 2
  • 21
  • 40
  • Thanks! That's certainly working better than what I had. For some reason I have to multiply by more than 1 for the innerHeight to get it tall enough. There is small size difference between my desktop and laptop. Strangely, the smaller screen on my laptop has more space between the bottom of the window and the taskbar, whereas the window on my desktop rests flush against the taskbar.Still, so much better. Thank you. – shewok Aug 06 '15 at 19:55
  • What is the purpose of multiplying with 0.3 ? – Ashok kumar Ganesan Apr 08 '20 at 10:00
3
<a href="link.html" onclick="javascript:void window.open('link.html','1429893142534','scrollbars=1');return false;">Link</a>

This should fulfil your requirement as it's working for me too. For more please refer here

Guest
  • 31
  • 1