locked
Unable to scroll to found text java script

    Question

  • I am building an application with a webview inside. I need to find text and scroll to it. I've found this js function:

     http://jsfiddle.net/3JQp5/3/ 

    but i cant make it work.

    I tried to copy the exact code and made it running displayed onto my device but the text does't scroll at all (with the same latin code page), my toolbar crashes and you become unable to tap inside it.

    I found out that the error is in this 2 sencences:

    element = $(selector);

    scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);

    I also build this for testing

    function CallFunction(SearchTerm) {
    
        count = 2;
        scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);
    }
    
    
    
    	function scrollToElement(selector, time, verticalOffset) {
    	    time = typeof (time) != 'undefined' ? time : 500;
    	    verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
    	    element = $(selector);
    	    offset = element.offset();
    	    offsetTop = offset.top + verticalOffset;
    	    $('html, body').animate({
    	        scroll	    }, time);
    	}

    The  Callfuncion is called when i click a button, but crashes every time.

    Im using visual studio 2013.

    Please i need help for this what should i do??







    Thursday, October 23, 2014 11:21 AM

Answers

  • Sorry currently I do not have a dev environment off hand, but the code definitely works fine in Lumia 630, I use jquery 2.1.1 since Windows Store App does only support JQuery 2.0 above version. I could share you the code later when I back to my office --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, October 24, 2014 2:16 PM
    Moderator

All replies

  • What is the exception information?

    And I tested with the code from fiddle by creating a blank WinJS app, it works fine.

    By the way, I saw alert() is used in the source code but actually in Windows Store App alert is not allow, probably this could be the key reason.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>App201</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
        <!-- App201 references -->
        <link href="/css/default.css" rel="stylesheet" />
        <style>
            .highlight {
                background-color:red;
            }
            .navigation {
                ;
                background: #FFFFFF;
                padding:5px;
                border: 1px solid;
            }
    	
    
        </style>
        <script src="/js/default.js"></script>
        <script src="js/jquery-2.1.1.min.js"></script>
        <script>
            function scrollToElement(selector, time, verticalOffset) {
                time = typeof (time) != 'undefined' ? time : 500;
                verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
                element = $(selector);
                offset = element.offset();
                offsetTop = offset.top + verticalOffset;
                $('html, body').animate({
                    scrollTop: offsetTop
                }, time);
            }
    
            /**document ready**/
            $(document).ready(function () {
                count = 0;
                var max_length = $('.highlight').length;
                /* scroll to 150px before .highlight with animation time of 1000ms */
                $('.navigation a').click(function (e) {
                    e.preventDefault();
                    var id = $(this).prop('id');
                    if (id === "next") {
                        if (count < max_length) {
                            count++;
                        } else {
                            count = 1;
                            //alert("reached start point");
                        }
                    }
                    else {
                        if (count > 1) {
                            count--;
                        } else {
                            count = max_length;
                            //alert("reached start point");
                        }
                    }
                    scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);
                });
            });
        </script>
    </head>
    <body>
        <p>Content goes here</p>
    
        <div class="navigation">
            <a href="#" id="prev">Previous</a>
    
            <br> <a href="#" id="next">Next</a>
    
        </div>
        <div class="demo-container" style="width: 559px; height: 921px;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum, enim sed adipiscing rhoncus, quam mi auctor lorem, ac molestie augue lacus luctus dolor. Quisque ac felis adipiscing, porta justo vitae, semper ligula. Morbi consectetur hendrerit mi, nec dictum urna scelerisque sit amet. Aliquam molestie quis nisi eget scelerisque. Ut at felis tristique, adipiscing nibh vel, accumsan nisl. Aenean venenatis quis justo tincidunt laoreet. Nullam et tellus et lorem faucibus auctor quis vel eros. Curabitur tortor nisi, rhoncus sit amet placerat nec, eleifend vel mi.Pellentesque suscipit, tortor eget ultricies facilisis, orci felis vulputate lectus, et lobortis mauris dolor id metus. Quisque ut nunc aliquam, vulputate justo eget, commodo nisl. Cras nulla sem, congue a vulputate ut, blandit nec sem. Ut ullamcorper, justo in hendrerit pharetra, ligula elit convallis velit, commodo rhoncus purus urna sit amet purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras metus diam, vulputate eget malesuada eget, vulputate ut dolor. Donec congue purus sit amet elit hendrerit, ornare facilisis ipsum elementum.Praesent congue sit amet dolor id volutpat. Aenean non pellentesque orci, sit amet porttitor urna. Nunc cursus malesuada elit, in vehicula nisl fringilla eu. Sed quis purus gravida libero semper laoreet. In at leo ac nulla venenatis porta ac vitae ligula. Cras ac dignissim leo. Aenean in lectus in nunc egestas commodo. Aenean nec arcu nec erat eleifend euismod. Nulla lobortis leo sit amet convallis commodo. Phasellus lacinia libero vel felis faucibus dignissim ultricies quis lectus. In metus ante, ornare et dapibus vitae, blandit ac ipsum. Maecenas congue lectus urna, vel auctor sapien ullamcorper eget. Cras nec venenatis lacus. Donec urna orci, fermentum ut turpis a, commodo adipiscing nisl. Vivamus luctus aliquet mi eget adipiscing. Sed ornare nibh eu semper euismod. Integer vulputate mattis convallis. Morbi ullamcorper sapien ante, aliquam ornare turpis ullamcorper et. Quisque dapibus luctus vestibulum. Etiam neque neque, molestie et aliquet ac, dapibus ullamcorper ipsum. Etiam hendrerit varius sapien, in condimentum lorem sodales convallis. Phasellus scelerisque eros nulla. Aliquam id leo eu sapien fringilla lacinia et sit amet quam. Maecenas sit amet est semper mauris fringilla mattis vel a magna. Cras aliquet turpis ac augue tempus, at consequat ligula dignissim. Duis et lorem arcu.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tincidunt lacinia rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu consectetur sapien. Mauris vulputate, mi in placerat vestibulum, nibh sem faucibus libero, vitae suscipit arcu augue suscipit velit. Pellentesque porta leo sit amet urna gravida condimentum. Pellentesque eleifend, mauris ut facilisis porttitor, libero metus pellentesque nisi, non lacinia eros massa eleifend felis. Cras ac euismod tellus, sit amet convallis turpis. Cras eu nisi fringilla, rutrum urna sit amet, lacinia mi. Proin congue turpis dolor, vel cursus magna auctor eget. Sed euismod nulla libero, ut pulvinar elit accumsan at. Lorem <span class="highlight">ipsum</span> dolor sit amet, consectetur adipiscing elit. Fusce vestibulum, enim sed adipiscing rhoncus, quam mi auctor lorem, ac molestie augue lacus luctus dolor. Quisque ac felis adipiscing, porta justo vitae, semper ligula. Morbi consectetur hendrerit mi, nec dictum urna scelerisque sit amet. Aliquam molestie quis nisi eget scelerisque. Ut at felis tristique, adipiscing nibh vel, accumsan nisl. Aenean venenatis quis justo tincidunt laoreet. Nullam et tellus et lorem faucibus auctor quis vel eros. Curabitur tortor nisi, rhoncus sit amet placerat nec, eleifend vel mi.Pellentesque suscipit, tortor eget ultricies facilisis, orci felis vulputate lectus, et lobortis mauris dolor id metus. Quisque ut nunc aliquam, vulputate justo eget, commodo nisl. Cras nulla sem, congue a vulputate ut, blandit nec sem. Ut ullamcorper, justo in hendrerit pharetra, ligula elit convallis velit, commodo rhoncus purus urna sit amet purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras metus diam, vulputate eget malesuada eget, vulputate ut dolor. Donec congue purus sit amet elit hendrerit, ornare facilisis ipsum elementum.Praesent congue sit amet dolor id volutpat. Aenean non pellentesque orci, sit amet porttitor urna. Nunc cursus malesuada elit, in vehicula nisl fringilla eu. Sed quis purus gravida libero semper laoreet. In at leo ac nulla venenatis porta ac vitae ligula. Cras ac dignissim leo. Aenean in lectus in nunc egestas commodo. Aenean nec arcu nec erat eleifend euismod. Nulla lobortis leo sit amet convallis commodo. Phasellus lacinia libero vel felis faucibus dignissim ultricies quis lectus. In metus ante, ornare et dapibus vitae, blandit ac ipsum. Maecenas congue lectus urna, vel auctor sapien ullamcorper eget. Cras nec venenatis lacus. Donec urna orci, fermentum ut turpis a, commodo adipiscing nisl. Vivamus luctus aliquet mi eget adipiscing. Sed ornare nibh eu semper euismod. Integer vulputate mattis convallis. Morbi ullamcorper sapien ante, aliquam ornare turpis ullamcorper et. Quisque dapibus luctus vestibulum. Etiam neque neque, molestie et aliquet ac, dapibus ullamcorper ipsum. Etiam hendrerit varius sapien, in condimentum lorem sodales convallis. Phasellus scelerisque eros nulla. Aliquam id leo eu sapien fringilla lacinia et sit amet quam. Maecenas sit amet est semper mauris fringilla mattis vel a magna. Cras aliquet turpis ac augue tempus, at consequat ligula dignissim. <span class="highlight">Duis</span> et lorem arcu.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tincidunt lacinia rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu consectetur sapien. Mauris vulputate, mi in placerat vestibulum, nibh sem faucibus libero, vitae suscipit arcu augue suscipit velit. Pellentesque porta leo sit amet urna gravida condimentum. Pellentesque eleifend, mauris ut facilisis porttitor, libero metus pellentesque nisi, non lacinia eros massa eleifend felis. Cras ac euismod tellus, sit amet convallis turpis. Cras eu nisi fringilla, rutrum urna sit amet, lacinia mi. Proin congue turpis dolor, vel cursus magna auctor eget. Sed euismod nulla libero, ut pulvinar elit accumsan at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum, enim sed adipiscing rhoncus, quam mi auctor lorem, ac molestie augue lacus luctus dolor. Quisque ac felis adipiscing, porta justo vitae, semper ligula. Morbi consectetur hendrerit mi, nec dictum urna scelerisque sit amet. Aliquam molestie quis nisi eget scelerisque. Ut at felis tristique, adipiscing nibh vel, accumsan nisl. Aenean venenatis quis justo tincidunt laoreet. Nullam et tellus et lorem faucibus auctor quis vel eros. Curabitur tortor nisi, rhoncus sit amet placerat nec, eleifend vel mi.Pellentesque suscipit, tortor eget ultricies facilisis, orci felis vulputate lectus, et lobortis mauris dolor id metus. Quisque ut nunc aliquam, vulputate justo eget, commodo nisl. Cras nulla sem, congue a vulputate ut, blandit nec sem. Ut ullamcorper, justo in hendrerit pharetra, ligula elit <span class="highlight">convallis</span> velit, commodo rhoncus purus urna sit amet purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras metus diam, vulputate eget malesuada eget, vulputate ut dolor. Donec congue purus sit amet elit hendrerit, ornare facilisis ipsum elementum.Praesent congue sit amet dolor id volutpat. Aenean non pellentesque orci, sit amet porttitor urna. Nunc cursus malesuada elit, in vehicula nisl fringilla eu. Sed quis purus gravida libero semper laoreet. In at leo ac nulla venenatis porta ac vitae ligula. Cras ac dignissim leo. Aenean in lectus in nunc egestas commodo. Aenean nec arcu nec erat eleifend euismod. Nulla lobortis leo sit amet convallis commodo. Phasellus lacinia libero vel felis faucibus dignissim ultricies quis lectus. In metus ante, ornare et dapibus vitae, blandit ac ipsum. Maecenas congue lectus urna, vel auctor sapien ullamcorper eget. Cras nec venenatis lacus. Donec urna orci, fermentum ut turpis a, commodo adipiscing nisl. Vivamus luctus aliquet mi eget adipiscing. Sed ornare nibh eu semper euismod. Integer vulputate mattis convallis. Morbi ullamcorper sapien ante, aliquam ornare turpis ullamcorper et. Quisque dapibus luctus vestibulum. Etiam neque neque, molestie et aliquet ac, dapibus ullamcorper ipsum. Etiam hendrerit varius sapien, in condimentum lorem sodales convallis. Phasellus scelerisque eros nulla. Aliquam id leo eu sapien fringilla lacinia et sit amet quam. Maecenas sit amet est semper mauris fringilla mattis vel a magna. Cras aliquet turpis ac augue tempus, at consequat ligula dignissim. Duis et lorem arcu.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tincidunt lacinia rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu consectetur sapien. Mauris vulputate, mi in placerat vestibulum, nibh sem faucibus libero, vitae suscipit arcu augue suscipit velit. Pellentesque porta leo sit amet urna gravida condimentum. Pellentesque eleifend, mauris ut facilisis porttitor, libero metus pellentesque nisi, non lacinia eros massa eleifend felis. Cras ac euismod tellus, sit amet convallis turpis. Cras eu nisi fringilla, rutrum urna sit amet, lacinia mi. Proin congue turpis dolor, vel cursus magna auctor eget. Sed euismod nulla libero, ut pulvinar elit accumsan at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum, enim sed adipiscing rhoncus, quam mi auctor lorem, ac molestie augue lacus luctus dolor. Quisque ac felis adipiscing, porta justo vitae, semper ligula. Morbi consectetur hendrerit mi, nec dictum urna scelerisque sit amet. Aliquam molestie quis nisi eget scelerisque. Ut at felis tristique, adipiscing nibh vel, accumsan nisl. Aenean venenatis quis justo tincidunt laoreet. Nullam et tellus et lorem faucibus auctor quis vel eros. Curabitur tortor nisi, rhoncus sit amet placerat nec, eleifend vel mi.Pellentesque suscipit, tortor eget ultricies facilisis, orci felis vulputate lectus, et lobortis mauris dolor id metus. Quisque ut nunc aliquam, vulputate justo eget, commodo nisl. Cras nulla sem, congue a vulputate ut, blandit nec sem. Ut ullamcorper, justo in hendrerit pharetra, ligula elit convallis velit, commodo rhoncus purus urna sit amet purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras metus diam, vulputate eget malesuada eget, vulputate ut dolor. Donec congue purus sit amet elit hendrerit, ornare facilisis ipsum elementum.Praesent congue sit amet dolor id volutpat. Aenean non pellentesque orci, sit amet porttitor urna. Nunc cursus malesuada elit, in vehicula nisl fringilla eu. Sed quis purus gravida libero semper laoreet. In at leo ac nulla venenatis porta ac vitae ligula. Cras ac dignissim leo. Aenean in lectus in nunc egestas commodo. Aenean nec arcu nec erat eleifend euismod. Nulla lobortis leo sit amet convallis commodo. Phasellus lacinia libero vel felis faucibus dignissim ultricies quis lectus. In metus ante, ornare et dapibus vitae, <span class="highlight">blandit</span> ac ipsum. Maecenas congue lectus urna, vel auctor sapien ullamcorper eget. Cras nec venenatis lacus. Donec urna orci, fermentum ut turpis a, commodo adipiscing nisl. Vivamus luctus aliquet mi eget adipiscing. Sed ornare nibh eu semper euismod. Integer vulputate mattis convallis. Morbi ullamcorper sapien ante, aliquam ornare turpis ullamcorper et. Quisque dapibus luctus vestibulum. Etiam neque neque, molestie et aliquet ac, dapibus ullamcorper ipsum. Etiam hendrerit varius sapien, in condimentum lorem sodales convallis. Phasellus scelerisque eros nulla. Aliquam id leo eu sapien fringilla lacinia et sit amet quam. Maecenas sit amet est semper mauris fringilla mattis vel a magna. Cras aliquet turpis ac augue tempus, at consequat ligula dignissim. Duis et lorem arcu.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tincidunt lacinia rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu consectetur sapien. Mauris vulputate, mi in placerat vestibulum, nibh sem faucibus libero, vitae suscipit arcu augue suscipit velit. Pellentesque porta leo sit amet urna gravida condimentum. Pellentesque eleifend, mauris ut facilisis porttitor, libero metus pellentesque nisi, non lacinia eros massa eleifend felis. Cras ac euismod tellus, sit amet convallis turpis. Cras eu nisi fringilla, rutrum urna sit amet, lacinia mi. Proin congue turpis dolor, vel cursus magna auctor eget. <span class="highlight">Sed</span> euismod nulla libero, ut pulvinar elit accumsan at.</p>
        </div><div class="navigation">
            <a href="#" id="prev">Previous</a>
    
            <br> <a href="#" id="next">Next</a>
    
        </div>
        <div class="demo-container">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum, enim sed adipiscing rhoncus, quam mi auctor lorem, ac molestie augue lacus luctus dolor. Quisque ac felis adipiscing, porta justo vitae, semper ligula. Morbi consectetur hendrerit mi, nec dictum urna scelerisque sit amet. Aliquam molestie quis nisi eget scelerisque. Ut at felis tristique, adipiscing nibh vel, accumsan nisl. Aenean venenatis quis justo tincidunt laoreet. Nullam et tellus et lorem faucibus auctor quis vel eros. Curabitur tortor nisi, rhoncus sit amet placerat nec, eleifend
                </div>
    </body>
    </html>
    

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, October 24, 2014 2:32 AM
    Moderator
  • I copied your code in a blank HTML page, but it doesn't work for me.

    The words are correctly highlighted, but when i press the next or previous button, the body doesn't scroll to a word, but to the top of the page instead (same result of what i previously tested).

    I'm testing on a nokia 630 does it make any changes?

    Friday, October 24, 2014 8:38 AM
  • Did you include JavaScript, I use JavaScript 2.1.1 version as you can see:

    <script src="js/jquery-2.1.1.min.js"></script>

    Device issue could be, let me give a test.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Friday, October 24, 2014 8:44 AM
    Moderator
  • Tested with Lumia 630, it works.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, October 24, 2014 8:57 AM
    Moderator
  • Oh my gosh this is not possible! Could you send me the file you used so i can check what i am doing wrong?

    Please i've been on this for hours..

    Friday, October 24, 2014 9:48 AM
  • Are you sure that's the right code you used? I can't find out what's the problem with me.. I use the same code... 

    im going nuts

    Friday, October 24, 2014 12:01 PM
  • Sorry currently I do not have a dev environment off hand, but the code definitely works fine in Lumia 630, I use jquery 2.1.1 since Windows Store App does only support JQuery 2.0 above version. I could share you the code later when I back to my office --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, October 24, 2014 2:16 PM
    Moderator
  • Solved. I added the right reference to  jQuery JavaScript Library v2.1.1 there was a syntax error. Thank you my dear;)

    Bye

    Friday, October 24, 2014 3:00 PM