title: StickyX element without float
body: <p>I am trying to make UL.pagination to be in the center of the view-area of the parent, without using float as it will interrupt my style.
  Would this possible?</p>
  
  <p>I am not familiar with SO yet, but my point is to trigger scrollLeft of .pagination parent to keep pagination in the center of its parent.</p>
  
  <p>This is my try on <a href="https://jsfiddle.net/ksqzpfm9/" rel="nofollow">jsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* my goal is to make pagination in the center of the view-area */
  $.fn.StickyX = function() {
    // alert(this.parentNode.clientWidth);
    // alert($(this).parent().innerWidth());
    return this.css({
      'margin-left': ($(this).parent().innerWidth() / 2) - ($(this).width() / 2) + 'px',
      'position': 'inline'
    });
  };
  $('.pagination').StickyX();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#dataTable .pagination {
    margin: 0;
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container" id="wrapper"&gt;
    &lt;div id="header"&gt;
      Header
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-9 contents"&gt;
  
        &lt;div class="table-responsive"&gt;
          &lt;table class="table table-bordered table-hover table-striped table-condensed" id="dataTable"&gt;
            &lt;thead class="text-primary"&gt;
              &lt;tr&gt;
                &lt;th role="group" aria-label=""&gt;
                  &lt;button type="button" class="btn btn-default btn-add"&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-default btn-refresh"&gt;&lt;i class="glyphicon glyphicon-refresh"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                &lt;/th&gt;
                &lt;th&gt;id&lt;/th&gt;
                &lt;th&gt;User name&lt;/th&gt;
                &lt;th&gt;password&lt;/th&gt;
                &lt;th&gt;Full name&lt;/th&gt;
                &lt;th&gt;Email&lt;/th&gt;
                &lt;th&gt;URL&lt;/th&gt;
                &lt;th&gt;Join date&lt;/th&gt;
                &lt;th&gt;activation_key&lt;/th&gt;
                &lt;th&gt;lastupdate&lt;/th&gt;
                &lt;th&gt;status&lt;/th&gt;
                &lt;th&gt;groupID&lt;/th&gt;
                &lt;th&gt;title&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr id="row-1"&gt;
                &lt;td class="btn-group" role="group" aria-label=""&gt;
                  &lt;button type="button" class="btn btn-warning btn-edit"&gt;&lt;i class="glyphicon glyphicon-pencil"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-danger btn-delete"&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                &lt;/td&gt;
                &lt;td&gt;1&lt;/td&gt;
                &lt;td&gt;admin.admin&lt;/td&gt;
                &lt;td&gt;**********&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;2015-12-07 02:37:47&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;2015-12-06 18:37:47&lt;/td&gt;
                &lt;td&gt;isActive&lt;/td&gt;
                &lt;td&gt;isSuperAdmin&lt;/td&gt;
                &lt;td&gt;Super Admin&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="row-2"&gt;
                &lt;td class="btn-group" role="group" aria-label=""&gt;
                  &lt;button type="button" class="btn btn-warning btn-edit"&gt;&lt;i class="glyphicon glyphicon-pencil"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-danger btn-delete"&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                &lt;/td&gt;
                &lt;td&gt;2&lt;/td&gt;
                &lt;td&gt;demo.demo&lt;/td&gt;
                &lt;td&gt;***********&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;0000-00-00 00:00:00&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;2016-01-05 12:45:32&lt;/td&gt;
                &lt;td&gt;isActive&lt;/td&gt;
                &lt;td&gt;isSuperAdmin&lt;/td&gt;
                &lt;td&gt;demo&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="page-control" colspan="13"&gt;
                  &lt;ul class="pagination"&gt;
                    &lt;li class="disabled"&gt;
                      &lt;a href="#Prv" aria-label="Previous"&gt;
                        &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
                      &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="active"&gt;&lt;a href="#page1"&gt;1&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#page2"&gt;2&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#page3"&gt;3&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#page4"&gt;4&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#page5"&gt;5&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href="#Nxt" aria-label="Next"&gt;
                        &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
                      &lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
            &lt;tfoot&gt;&lt;/tfoot&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-3"&gt;
        [Menu]
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      Footer
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I made some modification js which some how solve the issue, but still need some more help.
  <a href="https://jsfiddle.net/emad/ksqzpfm9/5/" rel="nofollow">jsfiddle</a></p>
  
  <pre class="lang-js prettyprint-override"><code>    (function($) { // forked from http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible
        $.fn.hasScrollBar = function() {
          var e = this.get(0);
          return {
            vertical: e.scrollHeight &gt; e.clientHeight,
            horizontal: e.scrollWidth &gt; e.clientWidth
          };
        }
      })(jQuery);
  
      $.fn.StickyX = function() {
        var parentWithScroll = $(this).parents().filter(function() {return $(this).hasScrollBar().horizontal;}).first();
        if(parentWithScroll)  {
        var e = $(this);
        parentWithScroll.scroll(function() {
          e.css('margin-left', ($(this).width() / 2) - (e.width() / 2) + $(this).scrollLeft() + 'px');
        })
        return this.css('margin-left', (parentWithScroll.width() / 2) - ($(this).width() / 2) + parentWithScroll.scrollLeft() + 'px');
        } else {
          return this.css('margin-left', 'auto;');
        }
      };
  
      $('.pagination').StickyX();
  </code></pre>