Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Highlight A Text Search Javascript Help Needed

    Hello,

    I found this javascript highlight all text search script and it works great, but when entering a keyword, it doesn't go to the first highlighted word (if there are a couple of found highlighted words and the first one is lower on the page to where you need to scroll). Can anyone offer the code needed so it will go to the first found highlighted keyword (so i don't have to scroll down the page looking for the highlight)?

    Here's the site that offers the script: http://4umi.com/web/javascript/hilite.php

    Any help would be greatly appreciated!

    Thanks.
    Last edited by aacdrw; 09-27-2008 at 11:45 PM. Reason: removing the resolved notice - need help with another issue in the script

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    var times = 0;
    
    function hex( n ) { return ( n<16 ? '0' : '' ) + n.toString(16); }
    
    function hi( f ) {
     f = f.elements, s = f.query.value;
     f.result.value = highlight( s ) + 'x ' + s;
     return false;
    }
    
    function highlight( f, o ) {
      s=document.getElementById('query').value;
      if( !s ) { return 0; }
      var d = window.document, f = d.forms.f.elements;
      if( !f.regex.checked ) { s = s.replace( /([\\|^$()[\]{}.*+?])/g, '\\$1' ); }
      if( /^\s*$/.test( s ) ) { return 0; }
      if( !f.phrase.checked ) { s = s.split( /\s+/ ).join( '|' ); }
      o = [ o || d.documentElement || d.body ];
      var hs=document.getElementsByTagName('A');
      for (var zxc0=0;zxc0<hs.length;zxc0++){
       hs.set=false;
      }
    
      var r = new RegExp( s, f.cases.checked ? 'g' : 'gi' ),h = d.createElement( 'A' ), i = 0, j, k, l, m, n=0, t;
      h.style.color = '#000';
      h.style.backgroundColor = '#'+( times%2 ? ''+hex(((times+1)%5)*51)+'ff' : 'ff'+hex((times%5)*51)+'' )+'00';
      h.set=true;
      times++;
      do {
        m = o[i];
        if( m.nodeType===3 ) {
          r.lastIndex = 0;
          l = r.exec(m.nodeValue);
          if( l !== null ) {
            k = l[0].length;
            if( r.lastIndex > k ) {
              m.splitText( r.lastIndex - k );
              m = m.nextSibling;
            }
            if( m.nodeValue.length > k ) {
              m.splitText(k);
              o[i++] = m.nextSibling;
            }
            t = h.cloneNode( true );
            t.appendChild( d.createTextNode( l[0] ) );n++;
            m.parentNode.replaceChild( t, m );
          }
        } else {
          j = m.childNodes.length;
          while ( j ) { o[i++] = m.childNodes.item( --j ); }
        }
      } while( i-- );
     for (var zxc0=0;zxc0<hs.length;zxc0++){
      if (hs[zxc0].set){
       window.scrollTo(zxcPos(hs[zxc0])[0],zxcPos(hs[zxc0])[1]);
       break;
      }
     }
      return n;
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    
    
    function unhighlight( s, o ) {
     var d = window.document;
     s = s.replace(/([\\|^$()[\]{}.*+?])/g, '\\$1').split( /\s+/ ).join( '|' );
     o = o || d.documentElement || d.body;
     var a = o.getElementsByTagName( 'span' ), i = a.length, j,
      re = new RegExp( '^' + s + '$', 'i' );
     while( i-- ) {
      j = a[i].firstChild;
      if( j ) {
       if( j.nodeType===3 && re.test( j.nodeValue ) ) {
        a[i].parentNode.replaceChild( d.createTextNode( j.nodeValue ), a[i] );
       }
      }
     }
     return false;
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <form action="?f" id="f" onsubmit="return hi( this ); return false;">
    <fieldset>
    <legend>Your <i>q</i>uery</legend>
    <label for="query" title=" Alt+Q ">Search: <input type="text" value="unknown"  class="it" id="query" name="query" size="70" accesskey="q"/></label>
    <input type="button" class="key" name="find" value=" Find " onclick="return highlight(this.form); return false;"/>
    
    <input id="tst" type="text" class="it" name="result" size="70" style="border:0" readonly="readonly" onclick="unhighlight(this.value.substring(this.value.indexOf('x ')+1))"/><br />
    Options: <label for="phrase"><input type="checkbox" id="phrase" name="phrase"/>phrase</label>
    <label for="cases"><input type="checkbox" id="cases" name="cases"/>case-sensitive</label>
    <label for="regex"><input type="checkbox" id="regex" name="regex"/>regex</label>
    </fieldset>
    </form>
    <div style="height:500px;" ></div>
    Lorem Ipsum is the well known dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <div style="height:500px;" ></div>
    Lorem Ipsum is the well known dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    aacdrw (09-27-2008)

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    That works like a charm. Thank you so much for the help vwphillips!

  • #4
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Removing the Options from the Script Help Needed

    Hi vwphillips, thanks again for the help. Another quick question on the code you supplied - there are options (phrase, case sensitive and regex). I managed to delete the regex from the form contents and deleted it off of the script and it works, but when i try to delete the other options (whether just deleting it off of the form contents or trying to delete the portions off of the script), the script doesn't work. I would greatly appreciate any help you could offer to get the options (phrase and case sensitive) out of the script.

    Thank you!

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    var times = 0;
    
    function hex( n ) { return ( n<16 ? '0' : '' ) + n.toString(16); }
    
    function hi( f ) {
     f = f.elements, s = f.query.value;
     f.result.value = highlight( s ) + 'x ' + s;
     return false;
    }
    
    function highlight( f, o ) {
      s=document.getElementById('query').value;
      if( !s ) { return 0; }
      var d = window.document, f = d.forms.f.elements;
      o = [ o || d.documentElement || d.body ];
      var hs=document.getElementsByTagName('A');
      for (var zxc0=0;zxc0<hs.length;zxc0++){
       hs.set=false;
      }
      s = s.split( /\s+/ ).join( '|' );
    //  var r = new RegExp( s,'gi' ); // Not Case Sensitive
      var r = new RegExp( s,'g' );  // Case Sensitive
      var h = d.createElement( 'A' ), i = 0, j, k, l, m, n=0, t;
      h.style.color = '#000';
      h.style.backgroundColor = '#'+( times%2 ? ''+hex(((times+1)%5)*51)+'ff' : 'ff'+hex((times%5)*51)+'' )+'00';
      h.set=true;
      times++;
      do {
        m = o[i];
        if( m.nodeType===3 ) {
          r.lastIndex = 0;
          l = r.exec(m.nodeValue);
          if( l !== null ) {
            k = l[0].length;
            if( r.lastIndex > k ) {
              m.splitText( r.lastIndex - k );
              m = m.nextSibling;
            }
            if( m.nodeValue.length > k ) {
              m.splitText(k);
              o[i++] = m.nextSibling;
            }
            t = h.cloneNode( true );
            t.appendChild( d.createTextNode( l[0] ) );n++;
            m.parentNode.replaceChild( t, m );
          }
        } else {
          j = m.childNodes.length;
          while ( j ) { o[i++] = m.childNodes.item( --j ); }
        }
      } while( i-- );
     for (var zxc0=0;zxc0<hs.length;zxc0++){
      if (hs[zxc0].set){
       window.scrollTo(zxcPos(hs[zxc0])[0],zxcPos(hs[zxc0])[1]);
       break;
      }
     }
      return n;
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    
    
    function unhighlight( s, o ) {
     var d = window.document;
     s = s.replace(/([\\|^$()[\]{}.*+?])/g, '\\$1').split( /\s+/ ).join( '|' );
     o = o || d.documentElement || d.body;
     var a = o.getElementsByTagName( 'span' ), i = a.length, j,
      re = new RegExp( '^' + s + '$', 'i' );
     while( i-- ) {
      j = a[i].firstChild;
      if( j ) {
       if( j.nodeType===3 && re.test( j.nodeValue ) ) {
        a[i].parentNode.replaceChild( d.createTextNode( j.nodeValue ), a[i] );
       }
      }
     }
     return false;
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <form action="?f" id="f" onsubmit="return hi( this ); return false;">
    <fieldset>
    <legend>Your <i>q</i>uery</legend>
    <label for="query" title=" Alt+Q ">Search: <input type="text" value="unknown"  class="it" id="query" name="query" size="70" accesskey="q"/></label>
    <input type="button" class="key" name="find" value=" Find " onclick="return highlight(this.form); return false;"/>
    
    <input id="tst" type="text" class="it" name="result" size="70" style="border:0" readonly="readonly" onclick="unhighlight(this.value.substring(this.value.indexOf('x ')+1))"/><br />
    </fieldset>
    </form>
    <div style="height:0px;" ></div>
    Lorem Ipsum is the well known dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <div style="height:500px;" ></div>
    Lorem Ipsum is the well known dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    aacdrw (09-29-2008)

  • #6
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks again vwphillips - works like a charm.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •