Click here to Skip to main content
15,039,149 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Searching for some word, I'm getting some highlighted results and I'm using
JavaScript
.scrollIntoView();
to scroll into first available word.
JavaScript
// scroll to highlighted word(s)
        $(this).closest(".timeline-compendium__content")[0].scrollIntoView();


What I would like to achieve, is to go to next highlighted word but I'm not sure how to do it. If I'm trying to put [1] I'm getting
Quote:
Uncaught TypeError: Cannot read property 'scrollIntoView' of undefined"


For more details about my issue, an example can be found here: Pick next highlighted word

What I have tried:

JavaScript
// jump to next available highlighted word 
        let pickWord = document.querySelector('#btnNext');
        pickWord.addEventListener('click', function(){
            // scroll to highlighted word(s)
            $(this).closest(".timeline-compendium__content")[0].scrollIntoView();
        });


JavaScript
function highlightWord() {
            // create a regex from our term
            const word = document.getElementById("searchedWord").value;
            const r = new RegExp("(" + word + ")", "ig");
            $(".reports-list-item__title--compendium").each(function (i) {
                if ($(this).text().match(r)) {
                    // get all the matches
                    var matches = $(this).text().match(r);
                    console.log(matches);
                    // loop through them
                    $.each(matches, function () {
                        // push the index of this section onto the array
                        occurrences.push(i);
                    });
                    // wrap each found search term with our mark to highlight it
                    $(this).html($(this).text().replace(r, "<mark>$&</mark>"));
                    $(this).closest(".timeline-compendium__content").collapse("show");
                    // scroll to highlighted word(s)
                    $(this).closest(".timeline-compendium__content")[0].scrollIntoView();
                    $(this).closest('.timeline-type .timeline-type__content').collapse('show');                    
                }   
            });
        }
Posted
Updated 13-Jul-21 6:29am
Comments
Chris Copeland 13-Jul-21 12:11pm
   
How are you handling the move to the next word? Are you expecting a keyboard button press to scroll to the next position, or do you have a physical button being clicked? Ie. if the user searches and scrolls to the first word, how are they then signalling to the browser they want to move to the next one?
User 15221028 13-Jul-21 12:16pm
   
Hello Chris,

In my example I placed a Next button to add to it the functionality to go to next highlighted word. By clicking it, I would like to go to next highlighted word then scroll to it as it happened with the first.

Of course, the button will have to have position: sticky to remain visible to the users but currently I want to give some functionality to it.

Any advice regarding this?

What this probably requires is state-tracking. What this means is that you need to keep a record of which of the elements was last scrolled to, so you know which one is next in the list.

You'll need at least two things to make this work:

  1. An array variable which contains references to the elements on the screen which had matched text
  2. A number variable which keeps track of which element was last scrolled into view

Using the above you can build your array variable up each time the search runs, and then when the first element is scrolled into view you can set your number variable to 0 (indicating that the first element was scrolled to)

When the next button is clicked, you know you can increment your number variable, get the element from the array variable, and scroll that into view. Make sure to check that the number variable does not exceed or equal the length of the array otherwise you'll get errors. Also make sure to reset both the array and the number variables when a new search is run, otherwise you'll end up cycling through the same elements all over again!
   
Comments
Chris Copeland 16-Jul-21 4:15am
   
I can't provide you the solution, this is something you'll probably need to develop yourself! It does present a good opportunity to learn more about development, and if you get stuck then you can always post a new question with what you've developed so far :)
User 15221028 16-Jul-21 4:22am
   
In my opinion, some people are learning visually and a small example is also a good opportunity to teach a junior developer than leaving him struggling for hours or days finding a possible answer, but thanks anyway for the logic explanation. I added my solution which works quite good.
Chris Copeland 16-Jul-21 4:49am
   
I agree some people learn visually, but we also don't provide full code or solutions on demand. We expect people to take the initiative and make the effort to solve the problems themselves, and provide support along the way. I gave you all of the building blocks necessary to get started, and if you've managed to build a solution then my job is done!

You have also changed your comment since I wrote my previous one, removing the part where you asked for the full solution.
JavaScript
$("#btnNext").on("click", test);  
  var i = 0;
  function test() {
     var pickHighlights = document.querySelectorAll("mark");
     var viewportOffset = pickHighlights[i].getBoundingClientRect();

     var top = viewportOffset.top;
     window.scrollTo(0, top);
            
     i++;

     if (i >= pickHighlights.length) {
         i = 0;
     }
}
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900