# Active scroll center (ok)

<figure><img src="https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FV21LQDyGbe9R7VAphP3m%2Fimage.png?alt=media&#x26;token=6cf50ca2-48a0-4882-bd72-f258cf0f517d" alt=""><figcaption></figcaption></figure>

```
<!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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/active-scroll-center-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
