I am attempting to achieve this task without relying on jQuery.
My goal is to load a page where the content adjusts dynamically based on the dimensions of the browser window. I currently have two versions of the code, one with an image in the content div and another simpler version without it.
Starting with the version without the image. Invoking winSize from an onload event either in the body tag or inside the script tag at the bottom of the HTML seems to be able to determine the scrollHeight/Width before setting the style. However, it ends up filling the entire window with black instead of setting its width to 704px as intended by the script. Using document.body.onload in the script header to call winSize resulted in null scrollWidth/Height and only displaying a grey background.
The code for this scenario is shown below:
<style>
body {
padding:0px;
background-color: #808080;
}
div {
position:absolute;
}
</style>
<script type="text/javascript">
bArat=3/2;
bH1=0;
bW1=0;
bX1=0;
bY1=0;
function winSize(){
winW=document.body.scrollWidth;
winH=document.body.scrollHeight;
_style();
}
function _style(){
bH1=winH;
bW1=bH1/bArat;
bX1=(winW/2)-(bW1/2);
document.getElementById("gutters").style.left=bX1;
document.getElementById("gutters").style.top=bY1;
document.getElementById("gutters").style.height=bH1;
document.getElementById("gutters").style.width=bW1;
document.getElementById("gutters").style.backgroundColor="black";
document.body.style.backgroundColor="black";
}
//document.body.onload=winSize();
</script>
</head>
<body>
<div id="gutters">
</div>
<script>
//winSize();
</script>
</body>
</html>
Moving on to the more complex version that includes an image within "gutters" div. Everything works fine except for when initially loaded, the styles are not applied (in Chrome). They do get applied if the page is refreshed or if a slight delay is set on the onload trigger. This discrepancy might be because Chrome (and Safari?) triggers the onload event after the html has loaded but before the image itself has rendered, hence causing the function to be unable to determine the height and width of the body correctly.
In this second version of the script, the function mentioned above:
function winSize(){
winW=document.body.scrollWidth;
winH=document.body.scrollHeight;
_style();
}
fails to work as expected. The variables winH and winW remain undefined.
This function is adapted from
function winSize(){
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
}
behaves according to the description provided: "...styles are not applied when initially loaded in Chrome, but on refresh they are.". Integrating this second winSize function into the first script results in an error stating "Cannot read property 'style' of null".
I lean towards the brevity of the first function due to better cross-browser compatibility with object.scrollWidth over window.innerWidth, but unfortunately, one or both seem to be malfunctioning under specific circumstances.
My inquiries, ranked by priority, include:
- In the second script, how can the
winSizefunction be executed after all images have fully loaded? (if that indeed is the issue) - What causes the significant variance in behavior between the two scripts when utilizing the same functions in a similar manner?
- How can the initial script, where the first content div "gutters" fills the entire screen instead of forming a rectangle, be rectified?
- Why does including an
onloadevent in the body tag produce different outcomes compared to placingdocument.body.onloadin the script of the head section?
Apologies for the lengthy question—and for bundling multiple questions together—but unraveling these complexities proved challenging. I welcome any assistance and will forever value those who aid me in understanding this matter.