Tips for creating a function to assign a CSS width using a JavaScript variable?

Question

Tips for creating a function to assign a CSS width using a JavaScript variable?

Here is the code snippet I have been working on:

...<script>
function adjustElementSize()
{
var newSize = window.innerWidth - 600;
document.getElementById("spin").style.width = newSize + "px";
document.getElementById("spin").style.height = newSize + "px";
}
</script>
</head>
<body>
<section id="spin" onLoad="adjustElementSize()">...

I am attempting to create a function that dynamically sets the height and width of an element based on the window size using a specific formula. However, despite my best efforts and following various examples, I am struggling to make this code work. As a newcomer to JavaScript with limited knowledge, I am seeking assistance to identify any mistakes in my approach. Any guidance would be greatly appreciated!

javascript css html

Answer 1

Answer №1

I've identified an issue where the onload event for the section tag is not triggering. To fix this, you can include your JavaScript as a self-executing anonymous function at the end of the body tag.

    <body>
        <section id="spin" style="border:5px solid black;"></section>

        <script>
            (function () {
                var setWindowSize = window.innerWidth - 600;
                document.getElementById("spin").style.width = setWindowSize + "px";
                document.getElementById("spin").style.height = setWindowSize + "px";
            })();
        </script>
    </body>

For a demonstration, you can view it here: http://jsfiddle.net/T7DW6/

Answer 2

I've identified an issue where the onload event for the section tag is not triggering. To fix this, you can include your JavaScript as a self-executing anonymous function at the end of the body tag.

    <body>
        <section id="spin" style="border:5px solid black;"></section>

        <script>
            (function () {
                var setWindowSize = window.innerWidth - 600;
                document.getElementById("spin").style.width = setWindowSize + "px";
                document.getElementById("spin").style.height = setWindowSize + "px";
            })();
        </script>
    </body>

For a demonstration, you can view it here: http://jsfiddle.net/T7DW6/

Answer 3

Answer №2

It is recommended to place the onload event in the body tag:

<body onload="handleResize()">
<section id="spinner">...

Answer 4

It is recommended to place the onload event in the body tag:

<body onload="handleResize()">
<section id="spinner">...

Answer 5

Answer №3

If you're looking to enhance your web development skills, I recommend utilizing the popular JavaScript library known as jQuery. This library is widely used across the globe. To implement jQuery in your projects, follow these steps:

function adjustElementSize(elementId) {
   var windowInstance = $(window); // Obtain window instance
   var element = $('#' + elementId); // Get element instance using jQuery
   var width = windowInstance.width();
   var height = windowInstance.height();
   // Set width and height to be equal
   if (height > width) {
      height = width;     
   } else {
      width = height;
   }
   element.css({
      width: width,
      height: height 
   });
}

// Execute this script once the document is fully loaded
$(document).ready(function(){
   adjustElementSize('spin');
});

The above function will dynamically adjust the width and height of an element to match the window size. If the height is greater than the width, it will set the width to match the height and vice versa.

If you want this resizing to occur automatically when the window is resized, add the following code:

$(window).resize(function(){
   adjustElementSize('spin');
});

Answer 6

If you're looking to enhance your web development skills, I recommend utilizing the popular JavaScript library known as jQuery. This library is widely used across the globe. To implement jQuery in your projects, follow these steps:

function adjustElementSize(elementId) {
   var windowInstance = $(window); // Obtain window instance
   var element = $('#' + elementId); // Get element instance using jQuery
   var width = windowInstance.width();
   var height = windowInstance.height();
   // Set width and height to be equal
   if (height > width) {
      height = width;     
   } else {
      width = height;
   }
   element.css({
      width: width,
      height: height 
   });
}

// Execute this script once the document is fully loaded
$(document).ready(function(){
   adjustElementSize('spin');
});

The above function will dynamically adjust the width and height of an element to match the window size. If the height is greater than the width, it will set the width to match the height and vice versa.

If you want this resizing to occur automatically when the window is resized, add the following code:

$(window).resize(function(){
   adjustElementSize('spin');
});

Answer 7

Answer №4

When an object finishes loading, the onload event is triggered.

Typically, the onload event is used within the tag to run a script after a webpage has fully loaded all its content, such as images, scripts, CSS files, etc.

The onload event is only compatible with certain HTML tags, including: body, frame, frameset, iframe, img, input type="image", link, script, style

Source: event_onload

If you're considering using a tag, it might be better to use a div instead, as height and weight properties don't have an effect. To understand the difference, check out this discussion: what-is-the-difference-between-section-and-div

Answer 8

When an object finishes loading, the onload event is triggered.

Typically, the onload event is used within the tag to run a script after a webpage has fully loaded all its content, such as images, scripts, CSS files, etc.

The onload event is only compatible with certain HTML tags, including: body, frame, frameset, iframe, img, input type="image", link, script, style

Source: event_onload

If you're considering using a tag, it might be better to use a div instead, as height and weight properties don't have an effect. To understand the difference, check out this discussion: what-is-the-difference-between-section-and-div

Answer 9

Answer №5

After testing your exam, I found that it functions correctly. The only modification I made was adjusting how the function is called.

   function handleSize(){
            var setWindowSize=window.innerWidth - 600;
            document.getElementById("spin").style.width=setWindowSize + "px";
            document.getElementById("spin").style.height=setWindowSize + "px";
            }

            window.onload = function () {
                handleSize();
 }

My thought is that using onLoad="handleSize()" should actually be onload="handleSize()", but I recommend avoiding this practice as it is not best practice.

Answer 10

After testing your exam, I found that it functions correctly. The only modification I made was adjusting how the function is called.

   function handleSize(){
            var setWindowSize=window.innerWidth - 600;
            document.getElementById("spin").style.width=setWindowSize + "px";
            document.getElementById("spin").style.height=setWindowSize + "px";
            }

            window.onload = function () {
                handleSize();
 }

My thought is that using onLoad="handleSize()" should actually be onload="handleSize()", but I recommend avoiding this practice as it is not best practice.

Answer 11

Answer №6

this method is effective

<!DOCTYPE html>
<html>
<body>

<p id="demo">Press the button and observe the transformation.</p>

<button id = "myButton" onclick="myFunction()">Test it</button>

<script>
function myFunction()
{
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("myButton");
x.style.width = w + "px";
x.style.height = h + "px";
}
</script>

</body>
</html>

Answer 12

this method is effective

<!DOCTYPE html>
<html>
<body>

<p id="demo">Press the button and observe the transformation.</p>

<button id = "myButton" onclick="myFunction()">Test it</button>

<script>
function myFunction()
{
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("myButton");
x.style.width = w + "px";
x.style.height = h + "px";
}
</script>

</body>
</html>

Tips for creating a function to assign a CSS width using a JavaScript variable?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Creating interactive dialogue: the speech bubble script

Wait for the definition of a variable before returning in React Native

Issue with jquery curvy corners not functioning properly on Internet Explorer 8

How to create HTML buttons with CSS that maintain proper proportions?

Receiving an undefined error response when attempting to submit a form using JQuery ajax for file retrieval

Optimizing Angular.js templates for faster loading using Node.js pre-compilation

Tips for Loading a Selected Option from an Ajax Call in Angular JS on Page Load

Using Laravel to retrieve the selected value of a dynamically generated radio button through a for loop in jQuery

I'm still trying to figure out the property position. Why won't my page scroll? (My first time using HTML)

Use React Router to create a link that goes to the same URL but passes along unique state

Concealing and revealing information with jQuery and AJAX

Establishing a dynamic database feature (such as a real-time leader board) on a website

When I include scroll-snap-type: y; in the body tag, the scroll-snapping feature does not function properly

Any recommendations for updating input in a directive without relying on $broadcast?

Trouble with executing two asynchronous AJAX calls simultaneously in ASP.NET using jQuery

Use the given URL to set the background image

Switching the URL without reloading the page in NEXT.JS

What is the distinction between declaring a variable as var $a=$() versus var a?

Modifying the style of a specific row when the form is submitted

Convert a Material UI dropdown into a Bootstrap dropdown