Active scroll center (ok)
https://codepen.io/onigetoc/pen/zPvLLG
Last updated
Was this helpful?
https://codepen.io/onigetoc/pen/zPvLLG
Last updated
Was this helpful?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<ul id="timepicker">
<li class="active">6h00</li>
<li>7h00</li>
<li>8h00</li>
<li>9h00</li>
<li>10h00</li>
<li>11h00</li>
<li>12h00</li>
<li>14h00</li>
<li>15h00</li>
<li>16h00</li>
<li>17h00</li>
<li>18h00</li>
</ul>
</main>
<script type="text/javascript">
$("#timepicker li").on("click", function() {
$("#timepicker li").removeClass("active");
$(this).addClass("active");
$("#timepicker").scrollCenter(".active", 300);
});
// $("#timepicker li").on("click", function() {
// var pos = $(this).position().left; //get left position of li
// var currentscroll = $("#timepicker").scrollLeft(); // get current scroll position
// var divwidth = $("#timepicker").width(); //get div width
// pos = pos + currentscroll - divwidth / 2; // for center position if you want adjust then change this
// $("#timepicker").animate({
// scrollLeft: pos
// });
// });
// $("#timepicker li").on("click", function() {
// $("#timepicker").scrollCenter(".active", 300);
// });
//$("#timepicker ul").scrollX(".active", 300);
jQuery.fn.scrollCenter = function(elem, speed) {
// this = #timepicker
// elem = .active
var active = jQuery(this).find(elem); // find the active element
//var activeWidth = active.width(); // get active width
var activeWidth = active.width()/2; // get active width center
//alert(activeWidth)
//var pos = jQuery('#timepicker .active').position().left; //get left position of active li
// var pos = jQuery(elem).position().left; //get left position of active li
//var pos = jQuery(this).find(elem).position().left; //get left position of active li
var pos = active.position().left+activeWidth; //get left position of active li + center position
var currentscroll = jQuery(this).scrollLeft(); // get current scroll position
var divwidth = jQuery(this).width(); //get div width
//var divwidth = jQuery(elem).width(); //get div width
pos = pos + currentscroll - divwidth / 2; // for center position if you want adjust then change this
jQuery(this).animate({
scrollLeft: pos
}, speed == undefined ? 1000 : speed);
return this;
};
// http://podzic.com/wp-content/plugins/podzic/include/js/podzic.js
jQuery.fn.scrollleft = function(elem, speed) {
jQuery(this).animate({
scrollLeft: jQuery(this).scrollLeft() - jQuery(this).offset().left + jQuery(elem).offset().left
}, speed == undefined ? 1000 : speed);
return this;
};
</script>
<style type="text/css">
main{
width:400px;
background-color: yellow;
}
#timepicker{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
padding:5px 0;
}
ul{
text-align: justify;
list-style-type: none;
padding: 0;
}
ul:before{
content: '';
display: inline-block;
width: 40%;
}
ul:after {
content: '';
display: inline-block;
width: 40%;
}
li {
display: inline-block;
margin-right: 2px;
padding: 4px 16px;
font-size: 12px;
cursor:pointer;
}
li.active{
background-color: #dadade;
border-radius: 4px;
color: #44455a;
font-weight: bold;
text-align: center;
}
</style>
</body>
</html>