0

I want to achieve the exact same as this website http://energytrust.org/timeline/ as in they have a bar at the bottom with a handle you drag to scroll the page.. enter image description here

I cant seem to find anything

1

1 Answer 1

0

----------------------------------EXAMPLE #1

So as I mentioned in a comment - Kendo-ui slider Kendo-ui slider will do. Here is an example Fiddle

Basically I made the content wider then the screen and then moved it on slider's "slide" event via changing it's margin.

NOTE: this is not the only way to do this. Just an example.

HTML

<div id="main"></div>
<input id="slider" class="balSlider" value="0" />

Css:

#main {
    width:2000px;
    height:200px;
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(25%, #29b221), color-stop(77%, #d83a22), color-stop(100%, #f2f282));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* IE10+ */
    background: linear-gradient(to right, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#f2f282', GradientType=1);
    /* IE6-9 */
}

Javascript:

var slider = $("#slider").kendoSlider({
    increaseButtonTitle: "Right",
    decreaseButtonTitle: "Left",
    slide: sliderOnSlide,
    min: 0,
    max: 20,
    smallStep: 2,
    largeStep: 1
}).data("kendoSlider");

function sliderOnSlide(e) {
    $("#main").css("margin-left", "-" + (e.value * 20)+"px");
}

----------------------Example #2

You can use Custom scroll bar plugin to achieve the same. Here is the Fiddle

HTML

<body class="container default-skin">
<div id="main" ></div>
</body>

CSS

body
{
 height:202px;
    width:300px;

}

#main {
    width:2000px;
    height:200px;
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(25%, #29b221), color-stop(77%, #d83a22), color-stop(100%, #f2f282));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* IE10+ */
    background: linear-gradient(to right, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#f2f282', GradientType=1);
    /* IE6-9 */
}

Javascript

$(document).ready(function() {
  $(".container").customScrollbar();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.