How can I zoom an element by scrolling?

user_14872369 0
Viewed 136

I am currently learning javascript and have encountered a problem that got me stuck:
I have a div with a 90% height and a 80% width.
I'm trying to make this div grow when scrolling to reach a full screen size (needs to occupy the whole display)(100% width, 100% height).

I've tried for and do-while loops, but it doesn't seem to be working.
It seems as if the height and width of the div do not change the element's style.

Does anyone know how to fix this ?
I am really looking forwards to any tips you can give me in order to achieve my project and learn from my mistakes.

Below is my current code :

$(document).ready(function(){

   $(window).scroll(function(e){

      var pos = $(window).scrollTop();
      
      console.log("Scroll:" +pos);
      
      var div = document.getElementsByClassName('home');
      
      if(pos>300){
         let h = 90 + (pos/150);
         let w = 80 + 1 +(pos/50);

         if(h>100){
            h = 100;
         }

         if(w>100){
            w = 100;
         }

         h = " \" " + h + " %\"";
         w = " \" " + w + " %\"";

         console.log(h);

         document.getElementsByClassName('home').height = Math.round(h);
         document.getElementsByClassName('home').width = Math.round(w);
      }
   });
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #CBCACA;
}

.wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.home{
    height: 90%;
    width: 80%;
    position: fixed;
    top: 5%;
    left: 10%;
    border-radius: 50px;
    background-color: #302D2D;
}

.supply{
    height: 100vh;
    width: 70%;
    position: relative;
    left: 15%;
    margin-top: 100%;
    background-color: crimson;
}
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Timo Roedler</title>
        <meta name="description" content="small test with Scrolling">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="headline">

            </div>
            <div class="main">
                <div class="home">
                    
                </div>
                <div class="supply">
                    <div class="supply1">
                        
                    </div>
                    <div class="supply2">

                    </div>
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="app.js"></script>

    </body>
</html>

css html jquery javascript
2 Answers

Very good effort. You just have a few things that are incorrect.

Targeting the element

Right now, you have the following code.

var div = document.getElementsByClassName('home');

In this you are trying to target your "home" element and the syntax is correct, but it will not return the node. .getElementsByClassName() returns an array-like object, which means that you would need to access it using document.getElementsByClassName('home')[0] or div[0]. Personally, I prefer using document.querySelector(), but you could also use jQuery to get the element you're after.

Applying the style

Here's your code:

h = " \" " + h + " %\"";

document.getElementsByClassName('home').height = Math.round(h)

First, the nature of strings in JavaScript allow you to simply use h = h + '%'. Also, if you need to include quotes in a string (you don't here, but it may be useful to know), you can wrap them in single quotes instead: var message = 'the "name" field is required.' Once you have a string, you can't use Math.round() on it anymore. Math.round() only accepts a number. In this case, however, there's no need to round. You can use the unrounded value, but you shouldn't apply it to .height. That property is outdated and it's preferable to assign to the CSS style property, which is .style.height.

Centering your element

In your code, you attempt to offset the element using 5% and 10% top and left respectively. You'll have to change those too as you change the height, or you can use transforms to center your element like so:

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

Overall, good effort and good luck on your efforts to learn JavaScript. It's a very fun language to learn. Below I've included a code snippet with those changes. Hopefully it'll help demonstrate the information above.

$(document).ready(function(){

   $(window).scroll(function(e){

      var pos = $(window).scrollTop();
      
      //console.log("Scroll:" +pos);
      
      var div = document.querySelector('.home');
      
      if(pos>300){
         let h = 90 + (pos/150);
         let w = 80 + 1 +(pos/50);

         if(h>100){
            h = 100;
         }

         if(w>100){
            w = 100;
         }

         h = h + "%";
         w = w + "%";

         //console.log(h);

         document.querySelector('.home').style.height = h;
         document.querySelector('.home').style.width = w;
      }
   });
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #CBCACA;
}

.wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.home{
    height: 90%;
    width: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
    background-color: #302D2D;
}

.supply{
    height: 100vh;
    width: 70%;
    position: relative;
    left: 15%;
    margin-top: 100%;
    background-color: crimson;
}
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Timo Roedler</title>
        <meta name="description" content="small test with Scrolling">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="headline">

            </div>
            <div class="main">
                <div class="home">
                    
                </div>
                <div class="supply">
                    <div class="supply1">
                        
                    </div>
                    <div class="supply2">

                    </div>
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="app.js"></script>

    </body>
</html>

user_8542460

At a cursory look it might have something to do with these lines

     // You were trying to use Math.round on a string.
     h = Math.round(h) + "%";
     w = Math.round(w) + "%";
     console.log(h);
     // assign the percentage directly to the style
     document.getElementsByClassName('home').style.height = h;
     document.getElementsByClassName('home').style.width = w;
user_47275510
Related