0

when i am trying to move image to the center that time the browser can showing the error can not read property width of null . I am trying to divide the width of the screen by 2 i can t understan why that error is showing . 

var mobile = document.getElementById("mobile");
var monitor = document.getElementById("monitor");
var tab = document.getElementById("tab");
var header = document.getElementById("header");
var position = (screen.width - monitor.width)/2;
monitor.style.left = position+"px;";
function initScroll(){
  if(window.pageYOffset >500){
    mobile.style.left = "300px";
    tab.style.right = "250px";
    header.style.height = "60px";
    header.style.fontSize = "25px";
  }else{
    header.style.height = "60px";
    header.style.fontSize = "25px";
    mobile.style.left = "0px";
    tab.style.right = "0px";
  }
}
window.addEventListener("scroll",initScroll);

*{padding: 0;margin: 0;font-family:arial;}
#header{height:100px;background-color: #354458;font-size: 40px;color:#fff; text-align:center;line-height:2.5;
position:fixed; width:100%;z-index:20;
  -moz-transition: 2s height, 2s font-size;
  -o-transition: 2s height, 2s font-size;
   -webkit-transition: 2s height, 2s font-size;
   transition: 2s height, 2s font-size;
}
#banner{background: #3a9ad9;height:400px;position:fixed;width:100%;
top:100px;font-size:50px; text-align: center; color
  :#fff;z-index:10;
}
#banner > * {
  margin-top:30px;
}
#content{
  top:500px;
  position:relative;
  height:1000px;
  padding-top:200px;
  background-color: #fff;
  z-index:15;
}
#mobile{
  position: absolute;
  left: 0;
  z-index: 15;
  top: 470px;
  -moz-transition: 2s left;
  -o-transition: 2s left;
   -webkit-transition: 2s left;
   transition: 2s left;
}
#monitar{position: relative;}
#tab{
  position: absolute;
  right: 0;
  z-index: 15;
  top: 385px; 
  -moz-transition: 2s right;
  -o-transition: 2s right;
   -webkit-transition: 2s right;
   transition: 2s right;

}

<html>
<head>
  <title>Java script Scroller</title>
  <meta  charset="utf-8"/>
  <link  rel="stylesheet" type="text/css" href="./css/style.css"/>
  <script src="./js/custom.js"></script>
</head>
<body>
         <div id="wrapper">
                <div id="header">Header</div>
                <div id="banner">
                  <h1>My Animation</h1>
                  <h2>First collapsable header</h2>
                  <h3>Apurva Kinkar</h3>
                </div>
                <div id="content">
                   <img id="mobile" src="./img/1.jpg" />
                   <img id="monitar" src="./img/2.png" />
                   <img id="tab" src="./img/3.jpg" />
                </div>
         </div>
</body>
</html>
Apurva Kinkar
  • 35
  • 8

2 Answers2

1

You have a typo error with your <img> declaration, It has to be monitor not monitar

 <img id="monitar" src="./img/2.png" />

Change this as,

 <img id="monitor" src="./img/2.png" />

Hope this helps!

David R
  • 14,711
  • 7
  • 54
  • 72
0

Firstly, your image id is wrongly spelled.

Change this :-

<img id="monitar" src="./img/2.png" />

to

<img id="monitor" src="./img/2.png" />

After changing this, you will still get the same error. This is because, when your js code runs, the img element is still not added to the DOM. For that, make the javascript code run on document.ready function ( when the img with id "monitor" is present in the DOM ).

Here is the working example which uses jQuery's document.ready() function.

You can also use this example if your dont want to use jQuery.

Aalind Sharma
  • 423
  • 4
  • 17