1+ /* Cool Javascript Find on this Page
2+ Ver 5.3
3+ Written by Jeff Baker on September, 8, 2007.
4+ Copyright 2014 by Jeff Baker -
5+ Version 5.0 created 7/16/2014
6+ Updated 5/15/2015 ver 5.3
7+ http://www.seabreezecomputers.com/tips/find.htm
8+ Paste the following javascript call in your HTML web page where
9+ you want a button called "Find on this Page...":
10+
11+ <script type="text/javascript" language="JavaScript"
12+ src="find5.js">
13+ </script>
14+
15+ When you click on the button a floating DIV will pop up
16+ that will have a text box for users to enter in the text they
17+ want to find on the page.
18+
19+ WARNING: If you want to place a second "Find on this page..."
20+ button somewhere on the same page then use the code below for
21+ the second button, otherwise firefox and netscape will not
22+ display the text that users type in and it will not find
23+ text correctly because there will be two different text input
24+ boxes with the same name:
25+
26+ <input type="button" value="Find on this page..."
27+ onclick="show();">
28+
29+ */
30+
31+ /**** Compressed****/
32+ var find_window_background = "white" ; var find_window_border = "#29DCB2" ; var find_text_color = "#29DCB2" ; var find_title_color = "white" ; var find_window_width = 245 ; var find_window_height = 85 ; var find_root_node = null ; var drag = { mousex :0 , mousey :0 , tempx :'' , tempy :'' , isdrag :false , drag_obj :null , drag_obj_x :0 , drag_obj_y :0 } ; var find_timer = 0 ; var highlights = [ ] ; var find_pointer = - 1 ; var find_text = '' ; var found_highlight_rule = 0 ; var found_selected_rule = 0 ; document . onmousedown = MouseDown ; document . onmousemove = MouseMove ; document . onmouseup = MouseUp ; document . ontouchstart = MouseDown ; document . ontouchmove = MouseMove ; document . ontouchend = MouseUp ; function highlight ( word , node )
33+ { if ( ! node )
34+ node = document . body ; var re = new RegExp ( word , "i" ) ; for ( node = node . firstChild ; node ; node = node . nextSibling )
35+ { if ( node . nodeType == 3 )
36+ { var n = node ; var match_pos = 0 ; { match_pos = n . nodeValue . search ( re ) ; if ( match_pos > - 1 )
37+ { var before = n . nodeValue . substr ( 0 , match_pos ) ; var middle = n . nodeValue . substr ( match_pos , word . length ) ; var after = document . createTextNode ( n . nodeValue . substr ( match_pos + word . length ) ) ; var highlight_span = document . createElement ( "span" ) ; if ( found_highlight_rule == 1 )
38+ highlight_span . className = "highlight" ; else
39+ highlight_span . style . backgroundColor = "yellow" ; highlight_span . appendChild ( document . createTextNode ( middle ) ) ; n . nodeValue = before ; n . parentNode . insertBefore ( after , n . nextSibling ) ; n . parentNode . insertBefore ( highlight_span , n . nextSibling ) ; highlights . push ( highlight_span ) ; highlight_span . id = "highlight_span" + highlights . length ; node = node . nextSibling ; } } }
40+ else
41+ { if ( node . nodeType == 1 && node . nodeName . match ( / t e x t a r e a / i) && ! getStyle ( node , "display" ) . match ( / n o n e / i) )
42+ textarea2pre ( node ) ; else
43+ { if ( node . nodeType == 1 && ! getStyle ( node , "visibility" ) . match ( / h i d d e n / i) )
44+ if ( node . nodeType == 1 && ! getStyle ( node , "display" ) . match ( / n o n e / i) )
45+ highlight ( word , node ) ; } } } }
46+ function unhighlight ( )
47+ { for ( var i = 0 ; i < highlights . length ; i ++ )
48+ { var the_text_node = highlights [ i ] . firstChild ; var parent_node = highlights [ i ] . parentNode ; if ( highlights [ i ] . parentNode )
49+ { highlights [ i ] . parentNode . replaceChild ( the_text_node , highlights [ i ] ) ; if ( i == find_pointer ) selectElementContents ( the_text_node ) ; parent_node . normalize ( ) ; normalize ( parent_node ) ; } }
50+ highlights = [ ] ; find_pointer = - 1 ; }
51+ function normalize ( node ) { if ( ! node ) { return ; }
52+ if ( node . nodeType == 3 ) { while ( node . nextSibling && node . nextSibling . nodeType == 3 ) { node . nodeValue += node . nextSibling . nodeValue ; node . parentNode . removeChild ( node . nextSibling ) ; } } else { normalize ( node . firstChild ) ; }
53+ normalize ( node . nextSibling ) ; }
54+ function findit ( )
55+ { var string = document . getElementById ( 'fwtext' ) . value ; findwindow . style . visibility = 'hidden' ; if ( find_text . toLowerCase ( ) == document . getElementById ( 'fwtext' ) . value . toLowerCase ( ) && find_pointer >= 0 )
56+ { findnext ( ) ; }
57+ else
58+ { unhighlight ( ) ; if ( string == '' )
59+ { find_msg . innerHTML = "" ; findwindow . style . visibility = 'visible' ; return ; }
60+ find_text = string ; if ( find_root_node != null )
61+ var node = document . getElementById ( find_root_node ) ; else
62+ var node = null ; highlight ( string , node ) ; if ( highlights . length > 0 )
63+ { find_pointer = - 1 ; findnext ( ) ; }
64+ else
65+ { find_msg . innerHTML = " <b>0 of 0</b>" ; find_pointer = - 1 ; } }
66+ findwindow . style . visibility = 'visible' ; }
67+ function findnext ( )
68+ { var current_find ; if ( find_pointer != - 1 )
69+ { current_find = highlights [ find_pointer ] ; if ( found_highlight_rule == 1 )
70+ current_find . className = "highlight" ; else
71+ current_find . style . backgroundColor = "yellow" ; }
72+ find_pointer ++ ; if ( find_pointer >= highlights . length )
73+ find_pointer = 0 ; var display_find = find_pointer + 1 ; find_msg . innerHTML = display_find + " of " + highlights . length ; current_find = highlights [ find_pointer ] ; if ( found_selected_rule == 1 )
74+ current_find . className = "find_selected" ; else
75+ current_find . style . backgroundColor = "orange" ; scrollToPosition ( highlights [ find_pointer ] ) ; }
76+ function findprev ( )
77+ { var current_find ; if ( highlights . length < 1 ) return ; if ( find_pointer != - 1 )
78+ { current_find = highlights [ find_pointer ] ; if ( found_highlight_rule == 1 )
79+ current_find . className = "highlight" ; else
80+ current_find . style . backgroundColor = "yellow" ; }
81+ find_pointer -- ; if ( find_pointer < 0 )
82+ find_pointer = highlights . length - 1 ; var display_find = find_pointer + 1 ; find_msg . innerHTML = display_find + " of " + highlights . length ; current_find = highlights [ find_pointer ] ; if ( found_selected_rule == 1 )
83+ current_find . className = "find_selected" ; else
84+ current_find . style . backgroundColor = "orange" ; scrollToPosition ( highlights [ find_pointer ] ) ; }
85+ function checkkey ( e )
86+ { var keycode ; if ( window . event )
87+ keycode = window . event . keyCode ; else
88+ keycode = e . which ; if ( keycode == 13 )
89+ { if ( window . event && event . srcElement . id . match ( / f w t e x t / i) ) event . srcElement . blur ( ) ; else if ( e && e . target . id . match ( / f w t e x t / i) ) e . target . blur ( ) ; findit ( ) ; }
90+ else if ( keycode == 27 )
91+ { hide ( ) ; } }
92+ function show ( )
93+ { var textbox = document . getElementById ( 'fwtext' ) ; findwindow . style . visibility = 'visible' ; textbox . focus ( ) ; textbox . select ( ) ; textbox . setSelectionRange ( 0 , 9999 ) ; find_timer = setInterval ( 'move_window();' , 500 ) ; document . onkeydown = checkkey ; }
94+ function hide ( )
95+ { unhighlight ( ) ; findwindow . style . visibility = 'hidden' ; clearTimeout ( find_timer ) ; document . onkeydown = null ; }
96+ function resettext ( )
97+ { if ( find_text . toLowerCase ( ) != document . getElementById ( 'fwtext' ) . value . toLowerCase ( ) )
98+ unhighlight ( ) ; }
99+ function move_window ( )
100+ { var fwtop = parseFloat ( findwindow . style . top ) ; var fwleft = parseFloat ( findwindow . style . left ) ; var fwheight = parseFloat ( findwindow . style . height ) ; if ( document . documentElement . scrollTop )
101+ var current_top = document . documentElement . scrollTop ; else
102+ var current_top = document . body . scrollTop ; var current_bottom = ( window . innerHeight || document . documentElement . clientHeight || document . body . clientHeight ) + current_top ; if ( document . documentElement . scrollLeft )
103+ var current_left = document . documentElement . scrollLeft ; else
104+ var current_left = document . body . scrollLeft ; var current_right = ( window . innerWidth || document . documentElement . clientWidth || document . body . clientWidth ) + current_left ; if ( fwtop < current_top )
105+ { findwindow . style . top = current_top + 30 + 'px' ; }
106+ else if ( fwtop > current_bottom - fwheight )
107+ { findwindow . style . top = current_bottom - fwheight + 'px' ; }
108+ if ( fwleft < current_left || fwleft > current_right )
109+ { findwindow . style . left = current_left + 'px' ; } }
110+ function MouseDown ( event )
111+ { drag . tempx = drag . tempy = '' ; if ( ! event ) event = window . event ; var fobj = event . target || event . srcElement ; var scrollLeft = document . body . scrollLeft || document . documentElement . scrollLeft ; var scrollTop = document . body . scrollTop || document . documentElement . scrollTop ; if ( typeof fobj . nodeName != "undefined" )
112+ if ( fobj . nodeName . toLowerCase ( ) == "input" || fobj . nodeName . toLowerCase ( ) == "textarea" )
113+ return true ; for ( fobj ; fobj ; fobj = fobj . parentNode )
114+ { if ( fobj . className )
115+ if ( fobj . className . match ( / d r a g m e / i) )
116+ break ; }
117+ if ( fobj )
118+ if ( fobj . className . match ( / d r a g m e / i) )
119+ { drag . isdrag = true ; drag . drag_obj = fobj ; drag . drag_obj_x = parseInt ( drag . drag_obj . offsetLeft ) ; drag . drag_obj_y = parseInt ( drag . drag_obj . offsetTop ) ; drag . mousex = event . clientX + scrollLeft ; drag . mousey = event . clientY + scrollTop ; if ( event . type == "touchstart" )
120+ if ( event . touches . length == 1 )
121+ { var touch = event . touches [ 0 ] ; var node = touch . target ; drag . mousex = touch . pageX ; drag . mousey = touch . pageY ; }
122+ return true ; } }
123+ function MouseMove ( event )
124+ { if ( drag . isdrag )
125+ { if ( ! event ) event = window . event ; drag . tempx = event . clientX ; drag . tempy = event . clientY ; var scrollLeft = document . body . scrollLeft || document . documentElement . scrollLeft ; var scrollTop = document . body . scrollTop || document . documentElement . scrollTop ; drag . tempx += scrollLeft ; drag . tempy += scrollTop ; drag . drag_obj . style . position = 'absolute' ; if ( event . type == "touchmove" )
126+ if ( event . touches . length == 1 )
127+ { var touch = event . touches [ 0 ] ; var node = touch . target ; drag . tempx = touch . pageX ; drag . tempy = touch . pageY ; }
128+ drag . drag_obj . style . left = drag . drag_obj_x + drag . tempx - drag . mousex + "px" ; drag . drag_obj . style . top = drag . drag_obj_y + drag . tempy - drag . mousey + "px" ; return false ; } }
129+ function MouseUp ( )
130+ { if ( drag . isdrag == true )
131+ { if ( drag . tempx == '' && drag . tempy == '' )
132+ { } }
133+ drag . isdrag = false ; }
134+ function scrollToPosition ( field )
135+ { var scrollLeft = document . body . scrollLeft || document . documentElement . scrollLeft ; var scrollTop = document . body . scrollTop || document . documentElement . scrollTop ; var scrollBottom = ( window . innerHeight || document . documentElement . clientHeight || document . body . clientHeight ) + scrollTop ; var scrollRight = ( window . innerWidth || document . documentElement . clientWidth || document . body . clientWidth ) + scrollLeft ; if ( field )
136+ { var theElement = field ; var elemPosX = theElement . offsetLeft ; var elemPosY = theElement . offsetTop ; theElement = theElement . offsetParent ; while ( theElement != null )
137+ { elemPosX += theElement . offsetLeft
138+ elemPosY += theElement . offsetTop ; theElement = theElement . offsetParent ; }
139+ if ( elemPosX < scrollLeft || elemPosX > scrollRight || elemPosY < scrollTop || elemPosY > scrollBottom )
140+ field . scrollIntoView ( ) ; } }
141+ function getStyle ( el , styleProp )
142+ { var x = ( document . getElementById ( el ) ) ?document . getElementById ( el ) :el ; if ( x . currentStyle )
143+ var y = x . currentStyle [ styleProp ] ; else if ( window . getComputedStyle )
144+ var y = document . defaultView . getComputedStyle ( x , null ) . getPropertyValue ( styleProp ) ; return y ; }
145+ function create_div ( dleft , dtop , dwidth , dheight )
146+ { if ( document . documentElement . scrollTop )
147+ var current_top = document . documentElement . scrollTop ; else
148+ var current_top = document . body . scrollTop ; if ( document . getElementById ( 'findwindow' ) )
149+ { findwindow = document . getElementById ( 'findwindow' ) ; }
150+ else
151+ { findwindow . id = "findwindow" ; findwindow . style . position = 'absolute' ; document . body . insertBefore ( findwindow , document . body . firstChild ) ; findwindow . className = 'findwindow dragme' ; findwindow . style . visibility = 'hidden' ; }
152+ findwindow . style . backgroundColor = find_window_background ; findwindow . style . border = '2px solid ' + find_window_border ; findwindow . style . color = find_text_color ; findwindow . style . width = find_window_width + 'px' ; findwindow . style . height = + find_window_height + 'px' ; findwindow . style . top = '200px' ; findwindow . style . right = '50px' ; findwindow . style . padding = '0px' ; findwindow . style . zIndex = 2000 ; findwindow . style . fontSize = '14px' ; findwindow . style . overflowX = 'hidden' ; findwindow . innerHTML = '<div style="text-align: center' + ';width: ' + ( find_window_width - 20 ) + 'px' + ';cursor: move' + ';color: ' + find_title_color + ';border: 1px solid ' + find_text_color + ';background-color: ' + find_window_border + ';float: left' + ';" onmouseover="over=1;" onmouseout="over=0;">' + 'Search</div>' ; findwindow . innerHTML += '<div onclick="hide();" class="close" style="text-align: center' + ';width: ' + ( 16 ) + 'px' + ';cursor: pointer' + ';font-weight: bold' + ';background-color: white' + ';border: 1px solid ' + find_text_color + ';float: right' + ';">' + 'X' + '</div><br />\n' ; findwindow . innerHTML += '<div id="window_body" style="padding: 5px;">' + '<form onsubmit="return false;"><input type="search" size="20" maxlength="25" id="fwtext"' + ' onchange="resettext();" placeholder="Enter text to find">' + '<input class="search-button" type="button" value="Find Prev" onclick="findprev();">' + '<input class="search-button" id="btn" type="button" value="Find Next" onclick="this.blur(); findit();">' + ' <span id="find_msg"><br /></span>' + '</form></div>\n' ; var sheets = document . styleSheets ; for ( var i = 0 ; i < sheets . length ; i ++ )
153+ { var rules = ( sheets [ i ] . rules ) ?sheets [ i ] . rules :sheets [ i ] . cssRules ; if ( rules != null )
154+ for ( var j = 0 ; j < rules . length ; j ++ )
155+ { if ( rules [ j ] . selectorText == '.highlight' )
156+ found_highlight_rule = 1 ; else if ( rules [ j ] . selectorText == '.find_selected' )
157+ found_selected_rule = 1 ; } } }
158+ function textarea2pre ( el )
159+ { if ( el . nextSibling && el . nextSibling . id && el . nextSibling . id . match ( / p r e _ / i) )
160+ var pre = el . nextsibling ; else
161+ var pre = document . createElement ( "pre" ) ; var the_text = el . value ; the_text = the_text . replace ( / > / g, '>' ) . replace ( / < / g, '<' ) . replace ( / " / g, '"' ) ; pre . innerHTML = the_text ; var completeStyle = "" ; if ( el . currentStyle )
162+ { var elStyle = el . currentStyle ; for ( var k in elStyle ) { completeStyle += k + ":" + elStyle [ k ] + ";" ; }
163+ pre . style . border = "1px solid black" ; }
164+ else
165+ { completeStyle = window . getComputedStyle ( el , null ) . cssText ; pre . style . cssText = completeStyle ; }
166+ el . parentNode . insertBefore ( pre , el . nextSibling ) ; el . onblur = function ( ) { this . style . display = "none" ; pre . style . display = "block" ; } ; el . onchange = function ( ) { pre . innerHTML = el . value . replace ( / > / g, '>' ) . replace ( / < / g, '<' ) . replace ( / " / g, '"' ) ; } ; el . style . display = "none" ; pre . id = "pre_" + highlights . length ; pre . onclick = function ( ) { this . style . display = "none" ; el . style . display = "block" ; el . focus ( ) ; el . click ( ) } ; }
167+ function selectElementContents ( el )
168+ { if ( window . getSelection && document . createRange ) { var range = document . createRange ( ) ; range . selectNodeContents ( el ) ; var sel = window . getSelection ( ) ; sel . removeAllRanges ( ) ; sel . addRange ( range ) ; } else if ( document . body . createTextRange ) { var textRange = document . body . createTextRange ( ) ; textRange . moveToElementText ( el ) ; textRange . select ( ) ; } }
169+ document . write ( '<input id="search-show-btn" type="button" value="Search"' + ' onclick="show();">' ) ; var findwindow = document . createElement ( "div" ) ; create_div ( ) ; var find_msg = document . getElementById ( 'find_msg' ) ;
0 commit comments