javascriptparallaxonresize

Move element on resize


I have a black box

<div id="blackbox" style="margin-left:0px; background-color:black; width:20px; height:20px;">

onresize, each 1px decrement from screen.width should increment 'blackbox'.margin-left by 2px.

A parallax triggered by resize

Need to translate this to javascript

    function move() {
        var screenwidth = screen.width
        var innerwidth = window.innerwidth
        var x = screenwidth - innerwidth
        document.getElementById("blackbox").style.marginLeft = (x * 2) + "px";
    }
        window.onresize = move;

Solution

  • This is a case sensitivity issue. The property you're looking for is "innerWidth", with a capital "W", and not "innerwidth". Adjusting your code:

    function move() {
      var screenwidth = screen.width
      var innerwidth = window.innerWidth
      var x = screenwidth - innerwidth
      document.getElementById("blackbox").style.marginLeft = (x * 2) + "px";
    }
    window.onresize = move;
    <div id="blackbox" style="margin-left:0px; background-color:black; width:20px; height:20px;">