Adjustable page dimensions

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:

  1. In the second script, how can the winSize function be executed after all images have fully loaded? (if that indeed is the issue)
  2. What causes the significant variance in behavior between the two scripts when utilizing the same functions in a similar manner?
  3. How can the initial script, where the first content div "gutters" fills the entire screen instead of forming a rectangle, be rectified?
  4. Why does including an onload event in the body tag produce different outcomes compared to placing document.body.onload in 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.

Answer №1

Is there a reason for not utilizing percentage dimensions and allowing the browser to handle it? It seems like you might have a unique requirement in mind. Could you please provide a brief description of the scenario?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on displaying data in pie chart legend using react-chartjs-2

I am currently using a pie chart from react-Chartjs-2 for my dashboard. The requirement is to display both the label and data in the legend. I have implemented the following component in my application: import React, { Component } from "react"; ...

Express/axios fails to properly configure cookies and headers for response delivery

I am facing a complex issue with my project that involves two APIs. One API serves as the front-end of the application, while the other is for the back-end. The process simply entails sending requests from the front-end API to the back-end API. The front- ...

Accessing new information seamlessly without the need for page refresh

For optimal mobile viewing of my website, I am considering implementing a select element. Here are the available options: HTML: <select name="select-choice-8" id="select-choice-nc"> <optgroup label="News"> & ...

What is the best way to create an arrow connecting a parent div to multiple child divs?

I'm faced with a challenge involving a reusable React list component that supports nested children. My goal is to visually connect the parent div to its direct children using arrows, similar to the image linked below. View List Component Image Below ...

retrieving the current value of a variable from a jQuery function

I've done my best to keep things simple. Here's the HTML code I've put together: <div id="outsideCounter"><p></p></div> <div id="clickToAdd"><p>Click me</p></div> <div id="in ...

Creating a Duplicate of the Higher Lower Challenge Game

To enhance my comprehension of React, I am constructing a replica of the website: Instead of utilizing Google searches, I opted for a dataset containing Premier League stadiums and their capacities. Up to this point, I have crafted the subsequent script: ...

What is the best way to update a data value in one Vue Js component and have it reflected in another component?

I'm a newcomer to Vue Js and encountering an issue with changing data values from another component. Let's start with Component A: <template> <div id="app"> <p v-on:click="test ()">Something</p> </div> ...

How can I display the console log output from JavaScript on an HTML webpage?

If I have a JavaScript function that logs its output in the console using console.log(), is there a way to then export that result into the HTML console? Appreciate any advice on this. ...

Issues with retrieving the subsequent anchor element using Jquery Slider

(Apologies for the lengthy post. I like to provide detailed explanations.) Just starting out with Jquery, trying my hand at creating a custom image slider from scratch. Got the slider working with fade effects using this code: Javascript: $(document).re ...

Merging a prop of array type in a Vue component

I'm encountering an issue in my component where using the splice function on an array prop does not trigger the $emit event. Can anyone provide some insight into why this might be happening? The removeItem method is called by clicking a button. View ...

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive

I'm having trouble with the functionality of the "Back" button on pages 2 and 3 of my website. Can anyone help me figure out why it's not working? My goal is to create a website that resembles a game menu, similar to Deus Ex The Fall. I'm u ...

Exploring the money library in typescript after successfully installing it on my local machine

I've been struggling to set up a new library in my TypeScript project for the first time, and I can't seem to get it functioning properly. The library in question is money. I have downloaded it and placed it in the root of my project as instructe ...

Focus event in IE does not always work as expected after an ajax request is

Our current focus is on supporting IE8 exclusively. An ajax call retrieves data from the server, replaces the HTML in a container div with the response, and then attempts to focus on an element within the response. However, there seems to be inconsistenci ...

Leveraging JSON data with jQuery's ajax function

Utilizing jQuery to retrieve data from this API () has been a success. I have successfully fetched the main details such as "name", "height", and "mass". However, I am facing a challenge when trying to access the values of "homeworld", "films", "species", ...

Developing a calendar with limited availability for selecting future dates and restricting the ability to choose past dates

I am currently working on creating a calendar in Vue.js that allows users to select dates only from the current day up to the next 30 days. Dates prior to the current date are disabled, as well as dates beyond the initial 30-day period. While I have exper ...

Creating an associative array in javascript: A step-by-step guide

I require an array to be structured in the following manner: {"3": {"label":"All i want for christmas", "song":"Alliw_1405399165.mp3", "name":"All i want for christmas"}, "4": {"label":"Call your girlfriend robyn clip", "song":"Gang ...

Underscore performs calculations and outputs a fresh object as a result

Here is an example of a time series: [ { "_id": { "action": "click", "date": "2015-02-02T00:00:00+01:00" }, "total": 5 }, { "_id": { "action": "hit", "date": "2015 ...

Exploring Angular 6: Unveiling the Secrets of Angular Specific Attributes

When working with a component, I have included the angular i18n attribute like so: <app-text i18n="meaning|description"> DeveloperText </app-text> I am trying to retrieve this property. I attempted using ElementRef to access nativeElement, bu ...

Tracking your daily nutrition using cronometer with the powerful combination of JavaScript

I'm currently developing a JavaScript cronometer in vueJS. I want the timer to start at 5 minutes (300 seconds) and then continue counting minutes and seconds. Although my cronometer is functioning, I am struggling to get it to start counting minutes ...

What makes it possible for Vue v3 to handle variables that are undefined?

We are in the process of developing a web application that monitors analytical changes and updates them in real time. While this may not be crucial information, we thought it would be worth mentioning. If you visit Vue.js's official website at https: ...