title: set div position dynamically depending window size browser
body: <p>I'm trying to set the position of a div element depending of the window browser size. What I need is giving the div a negative left margin to be off screen. I can simply do <code>mydiv {left: -900 px;}</code> but that would not be dynamycally and it wouldn't work depending breakpoints. My attempt with javascript is this. I know the code is not very clean but I'm trying to make it work and then refactor a little bit.</p>
  
  <pre><code> &lt;script&gt;
  
     function getPosition(element) {
       var xPosition = 0;
       var yPosition = 0;
  
       while(element) {
         xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
         yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
         element = element.offsetParent;
       }
       return { x: xPosition, y: yPosition };
     };
  
     var addEvent = function(elem, type, eventHandle) {
       if (elem == null || typeof(elem) == 'undefined') return;
       if ( elem.addEventListener ) {
         elem.addEventListener( type, eventHandle, false );
       } else if ( elem.attachEvent ) {
           elem.attachEvent( "on" + type, eventHandle );
       } else {
           elem["on"+type]=eventHandle;
       }
     };
  
     function moveFiltersOffScreen() {
       var width = window.innerWidth;
       var asideFilters = document.getElementsByClassName("inner");
       console.log(width);
       var offset = width - width * 2;
       console.log(offset);
       asideFilters[0].style["left"] = " offset + 'px'";
       var position = getPosition(asideFilters[0]);
       console.log(position);
     }
  
  
    addEvent(window, "resize", moveFiltersOffScreen);
  
    document.addEventListener("DOMContentLoaded", function() {
      var asideFilters = document.getElementsByClassName("inner");
      var listItems = document.getElementsByTagName("body");
      console.log(listItems);
      var touchControl = new Hammer(listItems[0]);
      console.log(touchControl);
      touchControl.on("panright", function(event) {
        var element = document.getElementsByClassName("inner");
        var elementResults = document.getElementsByClassName("inner-results");
        element[0].style["transform"] = "translate3d(850px, 0px, 0px)";
        element[0].style["-webkit-transform"] = "translate3d(850px, 0px, 0px)";
        element[0].style["-moz-transform"] = "translate3d(850px, 0px, 0px)";
        element[0].style["-ms-transform"] = "translate3d(850px, 0px, 0px)";
        element[0].style["-o-transform"] = "translate3d(850px, 0px, 0px)";
        element[0].style["-webkit-transition"] = "all .5s ease-out"; 
        element[0].style["-moz-transition"] = "all .5s ease-out"; 
        element[0].style["-ms-transition"] = "all .5s ease-out"; 
        element[0].style["-o-transition"] = "all .5s ease-out";
        element[0].style["transition"] = "all .5s ease-out";
        var element = document.getElementsByClassName("inner");
        var position = getPosition(element[0]);
        console.log(position);
        // elementResults[0].style["display"] = "none";           
      });
    });
  </code></pre>
  
  <p></p>
  
  <p>And the html code it would be something like this</p>
  
  <pre><code>&lt;div clas="row outer"&gt;
    &lt;div class="inner"&gt;
      &lt;div class="large-3 columns"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="another-inner"&gt;
      &lt;div class="large-9"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>