How to make a function set css width with a JavaScript variable?

Question

I have this code:

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

All I am trying to do is to create a function that will set the height and width of the element according to window size using a formula and make sure height and width are the same. I am very new to javascript (almost know nothing about it), so despite there being a ton of example of such questions, and me following them, I can't get this code to work. What am I doing wrong?

score 1 · Accepted Answer · answered Nov 27 '13 at 14:31

The problem that I'm seeing, is that the onload event for the section tag isn't firing. You should add your javascript as a self-executing anonymous function to the end of your body tag and this will work for you.

    <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>

See Here for a demo: http://jsfiddle.net/T7DW6/

score 0 · Answer 2 · answered Nov 27 '13 at 14:30

0

You should move onload to the body tag:

<body onLoad="handleSize()">
<section id="spin">...

answered Nov 27 '13 at 14:30

AlliterativeAlice

11,841
9
52
69

score 0 · Answer 3 · answered Nov 27 '13 at 14:31

I would suggest you to use jQuery, that is JavaScript library used world wide. So in order to develop it using jQuery you need to do next

function setElementSize(elId) {
   var _w $(window); //to get instance of window
   var _el $('#' + elId); //jquery to get instance of element
   var _width = _w.width();
   var _height = _w.height();
   //set width=height
   if(_height>_width)
   {
      _height = _width;     
   } else { _width = _height; }
   _el.css({
      width: _width,
      height: _height 
   });
}


//this will execute script when document is loaded.
     $(document).ready(function(){
       setElementSize('spin');
    });

Function above will set width and height of element to match window size. If height > width then it will use width as width & height otherwise it will use height.

I assume that you want to change this automatically if window is resized then do this

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

score 0 · Answer 4 · edited May 23 '17 at 11:56

0

The onload event occurs when an object has been loaded.

onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).

onload is only Supported by the Following HTML Tags: body, frame, frameset, iframe, img, input type="image", link, script, style

from here: event_onload

then a is may be not the best here (height and weight does not change anything, you should use a div. In order to know, the one to use, please read this: what-is-the-difference-between-section-and-div

edited May 23 '17 at 11:56

Community

1
1

answered Nov 27 '13 at 14:38

user2964961

51
1
5

Please don't reference w3schools, it is not a reliable reference point. However, referencing the w3c or mozilla's developer reference are considered reliable sources of information. – Howard Renollet Nov 27 '13 at 14:46

score 0 · Answer 5 · answered Nov 27 '13 at 14:44

I try your exam and it works fine. The only thing that i changed was the way that you call the function

   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();
 }

I think that onLoad="handleSize()" have to be onload="handleSize()" but don't use that way because it is not a good practise!

score -1 · Answer 6 · answered Nov 27 '13 at 14:30

-1

this works for me

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button and watch it grow.</p>

<button id = "myButton" onclick="myFunction()">Try 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>

answered Nov 27 '13 at 14:30

user3018981

236
2
10

Ok thats weird. Yeah making a separate variable for the object and doing it through the variable worked, thanks. I am thoroughly confused as to why it didn't work the way I tried though. – Megakoresh Nov 27 '13 at 14:35
@Megakoresh - see my post - it would work the way you were doing it, it's just that your onload event is not firing, which is what is actually causing your problems here. You should read through all of the answers before accepting one that is not related to your actual problem. – Howard Renollet Nov 27 '13 at 14:37
The OP requested that the height and width are the same on the element. Unless the window is a perfect square, how does obtaining the window.innerHeight and window.innerWidth achieve this for the OP? – Howard Renollet Nov 27 '13 at 14:41
@HowardRenollet Yeah, it was not directly to the point, but he made a separate object and then assigned the values to the object properties, which, when implemented, worked for me. So I guess the event really did fire off, just something went wrong. Because all I did to get it working was make that separate object x and assign the width to it's attributes. Then it started working. Also I did try moving onload event into the body tag, that didn't work either. In any event thanks for your advice, I will use it in the future as well. – Megakoresh Nov 27 '13 at 15:51

How to make a function set css width with a JavaScript variable?

6 Answers6