Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="wrapper">
- <div id="scroller">
- ... divs, boxes generated by jQuery ...
- </div>
- </div>
- #wrapper {
- margin-left: 45px;
- position: absolute;
- width: 900px;
- overflow: hidden;
- }
- #scroller {
- width: 100%;
- height: 100px;
- margin: 0px auto;
- overflow: auto;
- }
- #scroller div.line {
- position: absolute;
- margin-left: 2.5px;
- margin-top: 39px;
- border-bottom: 3px solid;
- border-color: #dd4b39;
- }
- #scroller div.ranges {
- position: absolute;
- width: 90%;
- text-align:left;
- margin-left: 5px;
- margin-top: 70px;
- }
- #scroller box.range {
- position:absolute;
- display: inline-block;
- width: 30px;
- height: 15px;
- border-radius: 15%;
- -moz-box-shadow:0px 0px 10px 1px #777777;
- -webkit-box-shadow:0px 0px 10px 1px #777777;
- -ms-box-shadow:0px 0px 10px 1px #777777;
- -o-box-shadow:0px 0px 10px 1px #777777;
- box-shadow:0px 0px 10px 1px #777777;
- background-image: -ms-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
- background-image: -moz-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
- background-image: -o-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
- background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #A8A8A8), color-stop(1, #BFBFBF));
- background-image: -webkit-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
- background-image: linear-gradient(to bottom right, #A8A8A8 0%, #BFBFBF 100%);
- z-index: 2;
- }
- #scroller div.lrange {
- position:absolute;
- display: inline-block;
- width: 15px;
- height: 100px;
- margin-top: -70px;
- border-right: 1px dotted;
- border-color: #dd4b39;
- }
- #scroller div.circle_small {
- position: absolute;
- cursor: pointer;
- display: inline-block;
- margin: 0 3px;
- margin-top: 32.5px;
- width: 15px;
- height: 15px;
- border-radius: 50%;
- background: #CC3524;
- background: -webkit-linear-gradient(top, #d14836, #dd4b39);
- background: -moz-linear-gradient(top, #d14836, #dd4b39);
- background: -ms-linear-gradient(top, #d14836, #dd4b39);
- background: -o-linear-gradient(top, #d14836, #dd4b39);
- background: -linear-gradient(top, #d14836, #dd4b39);
- }
- #scroller div.circle_big {
- position: absolute;
- cursor: pointer;
- display: inline-block;
- margin: 0px 3px;
- width: 40px;
- height: 40px;
- margin-top: 20px;
- border-radius: 50%;
- background: #CC3524;
- background: -webkit-linear-gradient(top, #d14836, #dd4b39);
- background: -moz-linear-gradient(top, #d14836, #dd4b39);
- background: -ms-linear-gradient(top, #d14836, #dd4b39);
- background: -o-linear-gradient(top, #d14836, #dd4b39);
- background: -linear-gradient(top, #d14836, #dd4b39);
- }
- #scroller div.circle_label {
- cursor: pointer;
- text-align: center;
- font-size: 20px;
- padding: 8px;
- }
- <div style="-webkit-overflow-scrolling: touch;overflow-y: scroll;">
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement