title: jQuery Marquee plugin - setting start position
body: <p>I am using this jq plugin: <a href="http://plugins.jquery.com/marquee/" rel="nofollow">http://plugins.jquery.com/marquee/</a>, (<a href="https://github.com/aamirafridi/jQuery.Marquee/blob/master/README.md" rel="nofollow">github</a>). The API options are pretty limited, and there is no mention of a start position. I want it to start with the first element of the marquee aligned to the left of the container, not to the right which is default. </p>
  
  <p>Here's what I have put together so far, but as you can see from the fiddle it is far from perfect: </p>
  
  <p><a href="http://jsfiddle.net/rtdLqxm7/1/" rel="nofollow">Fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class='marquee'&gt;
          &lt;div class="ablock"&gt;1&lt;/div&gt;
          &lt;div class="ablock"&gt;2&lt;/div&gt;
          &lt;div class="ablock"&gt;3&lt;/div&gt;
          &lt;div class="ablock"&gt;4&lt;/div&gt;
          &lt;div class="ablock"&gt;5&lt;/div&gt;
          &lt;div class="ablock"&gt;6&lt;/div&gt;
          &lt;div class="ablock"&gt;7&lt;/div&gt;
          &lt;div class="ablock"&gt;8&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      margin: 10px;
      font-family:'Lato', sans-serif;
  }
  .marquee {
      width: 100%;
      overflow: hidden;
      border:1px solid #ccc;
      background: black;
      color: rgb(202, 255, 195);
  }
  .ablock {
      width:50px;
      height:50px;
      background:red;
      margin-left:10px;
      display:inline-block;
  }
  .ablock:first-child {
      margin-left:0;
  }
  
  .wrapper{
      width:50%;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var offset_is_set = false;
  
  $(function () {
      $('.marquee').bind('beforeStarting', function () {
          if (!offset_is_set) {
              $('.marquee &gt; div &gt; .js-marquee &gt; .ablock:first-child').css('margin-left', '-' + $('.wrapper').width() + 'px');
              offset_is_set = true;
          }
      });
  
        $('.marquee').marquee({
          duration: 10000,
          duplicated: true,
          pauseOnHover: true,
          gap: 15
      });
  });
  </code></pre>