Web Analytics Made Easy -
StatCounter Search function not scrolling text into view - CodingForum

Announcement

Collapse
No announcement yet.

Search function not scrolling text into view

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Search function not scrolling text into view

    I have written a JS search function. I want it to work with IE, Firefox, Opera and Windows Safari. At this point it is working in all four of these browsers except for one feature: if the word I'm searching for is at the bottom of the textarea (not in the visible text) then the search function will not scroll the text up so that the find is visible.

    I should quickly say that this does work in IE but not in the other three browsers. I'm at a loss as to how to get the textarea to scroll the found word into view in FF, Opera and Safari.

    Thanks for any help...

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Search Test for Firefox and Opera</title>
    <
    script type="text/javascript">
    function 
    highlight(directionstartover) {
        var 
    srch document.getElementById('search').value;
        var 
    haystack document.getElementById('textarea1').value;

        if (
    navigator.appName != "Opera"haystack haystack.replace(/\r\n/g"\n");

        if (
    document.getElementById('cs').checked == false) {
            
    srch srch.toLowerCase();
            
    haystack haystack.toLowerCase();
            } 
    // end of: if (document.getElementById('cs').checked == false)

        
    if (document.getElementById('wholeword').checked == true) {
            
    srch srch.replace(/^\s*/, "");
            
    srch srch.replace(/\s*$/, "");
            
    srch " " srch " ";
            } 
    // end of: if (document.getElementById('cs').checked == false)

        
    document.getElementById('textarea1').focus();

        if (
    startover == '' && typeof start != 'undefined') {
            if (
    direction == "next") {
                
    start++;
                
    haystack haystack.substr(start);
                }
            if (
    direction == "prev") {
                
    start--;
                
    haystack haystack.substr(0start);
                }
            }
        else 
    start 0;

        if (
    direction == "next" && haystack.indexOf(srch) > -1) {
            
    start start haystack.indexOf(srch);
            
    end start srch.length;

            if (
    document.getElementById('wholeword').checked == true) {
                
    start++;
                
    end--;
                } 
    // end of: if (document.getElementById('wholeword').checked == true)

            
    if (document.getElementById('textarea1').setSelectionRange)  // this is Mozilla
                
    document.getElementById('textarea1').setSelectionRange(start,end);
            else { 
    // this is IE
                
    var range document.getElementById('textarea1').createTextRange();
                
    range.collapse(true);
                
    range.moveEnd('character'end);
                
    range.moveStart('character'start);
                
    range.select();
                } 
    // end of else for: if (document.getElementById('textarea1').setSelectionRange)
            
    // end of : if (direction == "next" && haystack.indexOf(srch) > -1)

        
    if (direction == "prev" && haystack.lastIndexOf(srch) > -1) {
            
    start haystack.lastIndexOf(srch);
            
    end start srch.length;

            if (
    document.getElementById('wholeword').checked == true) {
                
    start++;
                
    end--;
                } 
    // end of: if (document.getElementById('wholeword').checked == true)

            
    if (document.getElementById('textarea1').setSelectionRange)  // this is Mozilla
                
    document.getElementById('textarea1').setSelectionRange(start,end);
            else { 
    // this is IE
                
    var range document.getElementById('textarea1').createTextRange();
                
    range.collapse(true);
                
    range.moveEnd('character'end);
                
    range.moveStart('character'start);
                
    range.select();
                } 
    // end of else for : if (document.getElementById('textarea1').setSelectionRange)
            
    // end of : if (direction == "prev" && haystack.lastIndexOf(srch) > -1)

        
    return false;
    }
    </
    script>
    </
    head>
    <
    body>
    <
    textarea cols="100" rows="10" id="textarea1">
    Your Horoscope for March 30 2009 You might do well to heed a note of caution or even a gut feeling during the AM hoursStore it away for the eveningwhen sparkling influences may well persuade you to accept or agree to something that is best left for others to sort out. If it isn't your problem in the morning; it certainly shouldn't become yours by the evening!

    Your Horoscope for March 30 2009 You might do well to heed a note of caution or even a gut feeling during the AM hoursStore it away for the eveningwhen sparkling influences may well persuade you to accept or agree to something that is best left for others to sort out. If it isn't your problem in the morning; it certainly shouldn't become yours by the evening!

    Your Horoscope for March 30 2009 You might do well to heed a note of caution or even a gut feeling during the AM hoursStore it away for the eveningwhen sparkling influences may well persuade you to accept or agree to something that is best left for others to sort out. If it isn't your problem in the morning; it certainly shouldn't become yours by the evening!

    test Your Horoscope for March 30 2009 You might do well to heed a note of caution or even a gut feeling during the AM hoursStore it away for the eveningwhen sparkling influences may well persuade you to accept or agree to something that is best left for others to sort out. If it isn't your problem in the morning; it certainly shouldn't become yours by the evening!
    </
    textarea>
    <
    br />
    <
    br />
    <
    input type="text" name="search" id="search" width="40" />
    <
    br />
    <
    input type="checkbox" name="cs" id="cs" value="insensitive" /> Case Sensitive
    <br />
    <
    input type="checkbox" name="wholeword" id="wholeword" value="yes" /> Whole Word Search
    <br />
    <
    input type="button" name="reset" value="Search - First" onclick="highlight('next','1')" />
    &
    nbsp;&nbsp;&nbsp;&nbsp;
    <
    input type="button" name="test1" value="Search - Next" onclick="highlight('next','')" />
    &
    nbsp;&nbsp;&nbsp;&nbsp;
    <
    input type="button" name="test2" value="Search - Previous" onclick="highlight('prev','')" />
    </
    body>
    </
    html
    RalphF
    Business Text Messaging Services
    https://www.MobileTextingService.com

  • #2
    It's tough to do this within a textarea, because the browser--and hence the JS code--isn't really "aware" of WHERE in the textarea a given character (or, of course, set of characters) *IS*. That is, you might figure out that it's character number 337. But how do you know how many lines "down" in the textarea that character 337 is??

    The browser controls the line wrapping in the textarea, and the font size and other factors control how many characters will fit on each line.

    I would say that if the height of the <TEXTAREA> is larger than the screen height, you probably have no effective way to do this. The best you could do would be to make some *guess* at it, by counting NEWLINE characters in the text area combined with an estimate of how much text is on each line. (If the font is fixed width--e.g., Courier--that would help your calculations.)

    Anyway, if the height of the <textarea> is the same or less than the height of the screen, then the easy way to do this would be to simply scroll the contents of the window such that the entire textarea is within the visible window. That's not hard, using scrollTop.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      So, IE is able to do this automatically but the other 3 browsers didn't build in this capability at all .... ?
      RalphF
      Business Text Messaging Services
      https://www.MobileTextingService.com

      Comment


      • #4
        Heh. Yeah, there really *ARE* a FEW things that IE does that are superior to other browers. But it's dangerous to say that in forums like this. You can get banned for life. <grin/>
        Be yourself. No one else is as qualified.

        Comment

        Working...
        X