CODEWITHSUNDEEP
javascripthtmlcss
shewok
shewok

Reputation: 33

Dynamic Height in JavaScript Popup Window

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!

Upvotes: 3

Views: 17087

Answers (2)

Guest
Guest

Reputation: 31

<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

Upvotes: 3

brso05
brso05

Reputation: 13222

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>

Upvotes: 7

Related Questions