Width depends on height
Can you show me the complete html code where it has a rectangle with "height = 75% of my screen" and "widtht = 4/3 height". So it should be 3: 4 when the height depends on my screen, but the width doesn't depend on the width of the screen. Shielding only.
I thought I understood the time, but it was not.
I have it:
<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 don't know what to do with the width.
a source to share
You will need JavaScript to calculate the width, this cannot be done with HTML alone.
Corresponding property window.innerHeight
; multiply that by (3/4) to get the height, and since (3/4) * (4/3) == 1, window.innerHeight is (by the way) equal to your desired width.
Then set the properties of the element .height
and .width
.
Note. I am assuming that you want to have a rectangle proportional to the browser window, not the user's screen. If you really want the screen size, use window.screen.height
instead window.innerHeight
; be careful: with widescreens and multi-monitor settings, the browser can report pretty wild sizes.
a source to share
HTML doesn't dictate this. CSS can, but CSS has no direct internal mathematical logic. So what you need to do is use javascript.
When the page loads, grab the width of the object, do your math, and then set the height.
If you are new to JS, I would suggest looking into one of the libraries like jQuery. In jQuery, it looks like this:
$('#myDiv').width($(this).height()*.75);
a source to share