Hello, I am building a website and I have used an iframe for the main content
<iframe src="main.html" frameborder="0" width="100%" name="mainFrame" id="mainFrame" allowtransparency="true" scrolling="no" onload="iSize()" style="z-index:-1;">Your browser does not support iframes!</iframe>
Now, I am using a JS script to resize the iframe based on the iframe content height:
<script type="text/javascript">
function iSize(){
document.getElementById('mainFrame').height = document.getElementById('mainFrame').contentWindow.document.body.scrollHeight + 20;
document.getElementById('mainFrame').height = document.getElementById('mainFrame').contentDocument.documentElement.scrollHeight + 20;
}
</script>
And this is where the problem begins, on my Photos.html page I use fancybox. When I click on a thumbnail the photo loads in the middle of the iframe instead of loading in the middle of the screen(so I have to scroll to see the photo). Is there anything I can do to tell the fancybox position itself based on the browser window instead of iframe?
