Question

Can u show me completed html code where it is some rectangle in it with “height=75% of my screen” and “widtht=4/3 of height”. So, it should be 3:4 reсtangle where height depends of my screenheight, but width do not depends of my screenwidth. Only of screenheight.

i thought i understood previus time, but it was not so.

I have this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
    });
</script> 

And i dont know what to do with the width.

Answer 1

You’ll need JavaScript for computing the width, it’s not possible to do this only with HTML.

The relevant property is window.innerHeight; multiply that by (3/4) to get height, and since (3/4)*(4/3) == 1, window.innerHeight is (incidentally) equal to your desired width.

Then set the element’s .height and .width properties.

Note: I’m assuming that you wish to have a rectangle proportional to the browser window, not the user’s screen. If you actually want the screen size, use window.screen.height instead of window.innerHeight; beware though: with widescreens and multi-monitor configurations on the rise, the browser may report quite outlandish dimensions.