CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SaKer
SaKer

Reputation: 107

adjust html element size to maximum browser size

Hello I have a small question. Not sure how to ask this, but I hope u will understand what I mean...

I have a small website with an embed video on it and by a click of a button I can toggle between the sizes of an element

var small=true;
function toggle()
{
    if(small){
        document.getElementById('frame').width = 1000;
        document.getElementById('frame').height = 600;
        document.getElementById('change').innerHTML = "Smaller!";
        small=false;
    }
    else{
        document.getElementById('frame').width = 640;
        document.getElementById('frame').height = 360;
        document.getElementById('change').innerHTML = "Bigger!";
        small=true;
    }
 }

The smaller size will always be 640*360, which is also the default size, so I don't want to mess with that, but the bigger size should adjust according to the screen-size. The bigger size is now hardcoded to look good on my 15' laptop but (ofcourse) isn't big enough on my external monitor.

So my question is... How do I change this little code so when the user clicks the button it will toggle between 640*360 and maximum screen size of a current user? (I dont mean fullscreen, but maximum browser size).

Screens

bigger

smaller

Thank you very much s_

Upvotes: 0

Views: 80

Answers (1)

Dotnet Learners
Dotnet Learners

Reputation: 96

By using jquery $(window).height() you can get the height and with $(window).width() you can get the width.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
var small=true;
<script language="javascript">
function toggle()
{
    if(small){
        document.getElementById('frame').width = $(window).width();
        document.getElementById('frame').height = $(window).height();
        document.getElementById('change').innerHTML = "Smaller!";
        small=false;
    }
    else{
        document.getElementById('frame').width = 640;
        document.getElementById('frame').height = 360;
        document.getElementById('change').innerHTML = "Bigger!";
        small=true;
    }
 }
</script>

Note If you don't want full screen you can change like $(window).height()-50; $(window).width()-50;

Upvotes: 1

Related Questions