horizontally auto scroll to active thumbnail li

Question

i have horizontal book page image thumbnail ul li, more than 100 image, i have given text box to enter page number to active that page and view that page, it is working without any problem but it is not auto scrolling to that active li in ul, i'm beginner to JavaScript please help me with this, bellowis my code

HTML

   <div class="book-list-headbox">
       <div class="page-number-box">
           <label for="" id="total-page" value="" class="mb-0"></label>
           <span class="separator">of</span>
           <input type="text" id="current-page" value="1">
       </div>
   </div>

  <ul class="book-list" id="book-list">
        <?php if ($total_page > 0) : ?>
        <?php foreach ($results as $row) : ?>
        <li class="book">
            <span class="page-number" id="active-page-number"><?php echo $page_num++ ?></span>
            <img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Page">
        </li>
        <?php endforeach ?>
        <?php endif ?>
  </ul>

JavaScript

var bookCurrentPages = $('.book #active-page-number');
$('#current-page').keypress(function(e) { 
    var userInput = $('#current-page').val();
    if (this.value.length == 0 && e.which == 48){
        // disable enter zero
        return false;
    }
    else if (e.keyCode == 13) {
        bookCurrentPages.each(function (key) {
            var numKey = key + 1;
            if (userInput == numKey) {
                // console.log(numKey + " success");
                var currentKey = userInput;   
                // console.log(currentKey);
                $('#book-list li:nth-child('+ currentKey +')').children('img').trigger('click');
            }
        })
    return false; // prevent the button click from happening
    }
});

Demo check my codes, https://jsfiddle.net/Looper/dmug0zxz/1/

Try to provide a live example, need to add `html` `css` too. — Pedram, Dec 25 '17 at 07:23

score 3 · Accepted Answer · answered Dec 25 '17 at 09:45

can you try this

<!DOCTYPE html>
<html>
<head>
  <style>
 li{display: table-cell; padding:20px;}
 ul{display: table-row; }
 .cont{overflow: auto;}
 li.active{border: 1px solid blue;}
  </style>
</head>
<body>
   <div class="book-list-headbox">
       <div class="page-number-box">
           <label for="" id="total-page" value="" class="mb-0"></label>
           <span class="separator">of</span>
           <input type="text" id="current-page" value="1">
       </div>
   </div>
   <div class="cont">
  <ul class="book-list" id="book-list">
        <li class="book active"><img src="http://via.placeholder.com/300x300/?text=1" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=2" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=3" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=4" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=5" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=6" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=7" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=8" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=9" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=11" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=12" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=13" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=14" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=15" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=16" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=17" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=18" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=19" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=20" alt="Book Page"></li>
  </ul>
</div>

  <div>another content</div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 <script>
 $(function(){
  $('#current-page').change(function() {
   var i = $(this).val() -1;
   activeBook(i);
  });
  $('.book-list').on('click', '.book', function(){
   activeBook($(this).index());
  });
  
  function activeBook(i){
   $('.book').removeClass('active');
   var active = $('.book').eq(i).addClass('active');
   var left = active.position().left;
   var currScroll= $(".cont").scrollLeft(); 
   var contWidth = $('.cont').width()/2; 
   var activeOuterWidth = active.outerWidth()/2; 
   left= left + currScroll - contWidth + activeOuterWidth;

   $('.cont').animate( { 
    scrollLeft: left
   },'slow');
  }
 });
 </script>
</body>
</html>

i made it before you post your fiddle. i will help you figure out your current fiddle only if i have extra time again. good luck. — plonknimbuzz, Dec 25 '17 at 09:55
yah please can u fix that, coz i was trying to merge your code with mine, im getting problems — Sam, Dec 25 '17 at 10:08
as i said i'm learning java script , the above jsfiddle codes are my own idea, tell me if there is any wrong or how it is different from your code, coz your code is less than mine — Sam, Dec 25 '17 at 10:16
thank you very much mate, but next arrow not working i dont know why — Sam, Dec 25 '17 at 15:12
hey mate, there is one problem, if we enter the value, it is scrolling that li and active it, but it is not taking and displaying that src of that img? — Sam, Dec 25 '17 at 16:38
thank you very much for your time and work, some part of codes bit confusing to me, but ill try to understand it, happy code! — Sam, Dec 25 '17 at 16:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161936/discussion-between-plonknimbuzz-and-looper). — plonknimbuzz, Dec 25 '17 at 17:13
click link `continue this discussion in chat`, dont reply here again, since your question is already solved — plonknimbuzz, Dec 25 '17 at 17:19
@plonknimbuzz Thank you...this is very helpful for my project....would it be possible to feed a custom index...as currently the index is set to 1 to n...the thumbnail gallery that I have has its own numbers attached to it — Apricot, Aug 01 '18 at 09:07

score 0 · Answer 2 · edited Dec 25 '17 at 08:50

0

One can use jquery's scrollTop on window to do some scrolling:

$(window).scrollLeft($('#book-list li:nth-child('+ currentKey +')').scrollLeft())

You can have a look at scrollLeft function here: jQuery

In addition, you can do some cool trick for smooth scrolling by this:

$('html,body').animate({ scrollLeft: xxx})

edited Dec 25 '17 at 08:50

plonknimbuzz

2,594
2
19
31

answered Dec 25 '17 at 07:40

Tree Nguyen

1,198
1
14
37

it is not working, it is not even activating li if i enter page number – Sam Dec 25 '17 at 07:44
my bad it is activating that i entered page num but not scrolling, scrolling not working – Sam Dec 25 '17 at 07:47
@Looper I am building a jsfiddle to show you what I meant. Please give me a sec – Tree Nguyen Dec 25 '17 at 07:49
scrollTop() for vertical scroll position, but i asked horizontal scroll:[ – Sam Dec 25 '17 at 07:51
@Looper I am sorry for misreading that. You can use scrollLeft instead for horizontal scroll – Tree Nguyen Dec 25 '17 at 07:53
@Looper might provide me a jsfiddle of what you have tried? – Tree Nguyen Dec 25 '17 at 08:51
i have added my jsfid u can understand now, – Sam Dec 25 '17 at 09:43

horizontally auto scroll to active thumbnail li

2 Answers2

Linked