CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
ramesh babu
ramesh babu

Reputation: 87

scrolling path show jquery

I need similar function to this demo, but I need only the functionality of scrolling the tabs header.

I have list of elements in a div, and I need to scroll those items like the demo tab header.

I tried by setting position absolute to the inner elements. Still, I didn't get the functionality.

How do I achieve the tabs header scrolling functionality?

Due to a server side code interaction I can't reveal my stuff.

Upvotes: 0

Views: 175

Answers (3)

kongaraju
kongaraju

Reputation: 9606

Here is a demo for what you are expecting

http://jsbin.com/opufow/4/edit

you need to hide the items first then scroll using animate.

Upvotes: 1

Minko Gechev
Minko Gechev

Reputation: 25682

Try this: http://jsbin.com/welcome/42790 I think that this is the effect you're looking for. Here is the source code:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div class="scroll">
      <div id="parent" class="parent">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
        <div class="block">6</div>
        <div class="block">7</div>
      </div>
    </div>
    <button id="leftButton">&lt;</button>
    <button id="rightButton">&gt;</button>
  </body>
</html>

CSS

.parent {
  width: 364px;
  height: 52px;
  background: #EDC9FF;
  margin-left: 0px;
}
.block {
  width: 50px;
  height: 50px;
  background: #C9E2FF;
  border: 1px solid #8FC3FF;
  float: left;
}
.scroll {
  overflow: hidden;
  width: 200px;
}

JavaScript

var timeout = 0;

window.onload = function () {
  var leftBtn = document.getElementById('leftButton'),
      rightBtn = document.getElementById('rightButton');

  leftBtn.addEventListener('mousedown', function () {
    multipleScroll(-2);
  }, false);

  leftBtn.addEventListener('mouseup', function () {
    clearTimeout(timeout);
  }, false);

  rightBtn.addEventListener('mousedown', function () {
    multipleScroll(2);
  }, false);

  rightBtn.addEventListener('mouseup', function () {
    clearTimeout(timeout);
  }, false);

};

function scroll(offset) {
  var parent = document.getElementById('parent'),
      current = parseInt(parent.style.marginLeft, 10) || 0;
  current += offset;
  parent.style.marginLeft = current + 'px';
}


function multipleScroll(offset) {
  timeout = setTimeout(function () {
    multipleScroll(offset);
    scroll(offset);
  }, 20);
}

Upvotes: 0

Monie corleone
Monie corleone

Reputation: 1618

You can use iscroll.js to scroll the elements horizontally or vertically. That will provide you with a smooth scrolling feel.

Check the demo link

http://iscroll-js.googlecode.com/hg-history/bd496ab69c553b6e3d294c5f68200513215f5e75/examples/horizontal-scroll/index.html

You can download Iscroll.js from the following location.

http://cubiq.org/iscroll

Upvotes: 0

Related Questions