JAVASCRIPT   25

localizar

Guest on 14th May 2022 01:56:09 AM

  1. /* Cool Javascript Find on this Page
  2. Written by Jeff Baker on Spetember
  3. Copyrightby Jeff Baker-
  4.  
  5. Paste the following javascript call in your HTML web page where
  6. you want a button called "Find on this Page...":
  7.  
  8. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"
  9. SRC="find.js">
  10. </SCRIPT>
  11.  
  12. When you click on the button a floating DIV will pop up
  13. that will have a text box for users to enter in the text they
  14. want to find on the page.  
  15.  
  16. WARNING: If you want to place a second "Find on this page..."
  17. button somewhere on the same page then use the code below for
  18. the second button, otherwise firefox and netscape will not
  19. display the text that users type in and it will not find
  20. text correctly because there will be two different text input
  21. boxes with the same name:
  22.  
  23. <INPUT TYPE="button" VALUE="Find on this page..."
  24. onClick="show();">
  25.        
  26. */
  27.  
  28. /* You may edit the following variables */
  29.  
  30. var window_background = "#99CCFF"; // the color of the pop-up window
  31. var window_border = "black"; // the border color of pop-up window
  32. var text_color = "black"; // the color of the text in window
  33. var title_color = "white"; // color of window title text
  34. var window_width = 293; // width of window
  35. var window_height = 40; // height of window
  36. var mozilla_opt = 1; // change to 0 to use Netscape and Firefox built-in search window
  37. var start_at = 0; // Change to which character you want to start with on the page if IE gives an error because of searching in menus
  38. // Example: start_at = 300, makes the find start at the 300th character on the page
  39. /* Do not edit anything below this line */
  40.  
  41. //var ie = ((navigator.appVersion.indexOf("MSIE")!= -1)&&!window.opera)? true : false; // to detect if IE
  42. var ie = (document.all)
  43. //if (document.getElementById && !document.all)
  44. if (window.find)
  45.         var nav = 1; // to detect if netscape or firefox
  46. else
  47.         var nav = 0;
  48. var t = 0;  // used for timer to move window in IE when scrolling
  49.  
  50. var sel; // Selection object needed for Firefox
  51. var range; // range object needed for Firefox
  52.  
  53. // The following is to capture mouse movement
  54. // If Netscape or Mozilla -- then set up for mouse capture
  55. if (!ie)
  56. {
  57.         document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
  58. }
  59.  
  60. document.onmousedown = MouseDown;
  61. document.onmousemove = MouseMove;
  62. document.onmouseup = MouseUp;
  63.  
  64. // Temporary variables to hold mouse x-y pos's
  65. var mousex = 0;
  66. var mousey = 0;
  67.  
  68. if (ie)
  69. {
  70.         // this variable will hold all the text on the page for IE
  71.         // We are creating a text range from the whole document body
  72.         var txt = document.body.createTextRange();
  73.  
  74.         // this variable will bookmark the last find position
  75.         // in an array of bookmarks so we can keep going to previous finds
  76.         var bookmark = new Array();
  77.         // bookmark the beginning of the text body
  78.         //bookmark[0] = txt.getBookmark();
  79. }
  80.  
  81. // variable to record number fo finds
  82. var finds = 0;
  83.  
  84. function findit()
  85. {
  86.         // put the value of the textbox in string
  87.         var string = document.getElementById('fwtext').value;
  88.  
  89.         if (ie)
  90.         {
  91.         // Bookmark this position in bookmark array at finds variable
  92.         bookmark[finds] = txt.getBookmark();
  93.                
  94.         // findText is IE's javascript function to find text in
  95.         // a text range
  96.         if (string)  // only call findText if there is a string or IE will have error
  97.                 if (txt.findText(string)) // if found
  98.                 {      
  99.                         // select() not only highlights the string but
  100.                         // it also moves the view to that location
  101.                         txt.select();
  102.                         // scrollIntoView() is just a duplicate of what
  103.                         // select does by jumping to the selection, so
  104.                         // we don't realy need it.
  105.                         txt.scrollIntoView();
  106.                         // moveStart('character') moves the position in the
  107.                         // text one character forward so that we can search
  108.                         // for the next case of string in the body
  109.                         //txt.moveStart('character');
  110.                        
  111.                         // collapse moves the insertion point to the end
  112.                         // of the range so we can search for the next value
  113.                         txt.collapse(false);
  114.                        
  115.                         test.innerHTML = "";
  116.                         //test.innerHTML = "Localizada";
  117.                 }
  118.                 else
  119.                         test.innerHTML = "Finalizada";
  120.                 }
  121.                 else // Netscape or firefox
  122.                 {
  123.                         if (finds > 0)
  124.                         {
  125.                                 sel = window.getSelection(); // get selection
  126.                                 // remove all ranges
  127.                                 if(sel.rangeCount > 0) sel.removeAllRanges();
  128.                                 // add last highlighted range
  129.                                 sel.addRange(range);           
  130.                         }      
  131.                         // window.find(string, caseSensitive, searchBackwards)
  132.                         //for (i=0;i <= finds; i++)
  133.                         if (string != "")      
  134.                                 test.innerHTML = window.find(string, false, false);
  135.                         // In Firefox (not Netscape) when we press the
  136.                         // Next or Prev buttons in the DIV it looses the
  137.                         // selection, so we have to grab the selection
  138.                         // locations so we don't keep searching for only
  139.                         // the first found search over and over
  140.                         sel = window.getSelection(); // get selection
  141.                         range = sel.getRangeAt(0); // get object
  142.                         //test.innerHTML = sel.toString();
  143.                 }
  144.                 finds++;       
  145.        
  146. }  // end function findit()
  147.  
  148.  
  149. // This function is to find backwards by pressing the Prev button
  150. function findprev()
  151. {
  152.         // put the value of the textbox in string
  153.         var string = document.getElementById('fwtext').value;
  154.        
  155.         if (ie)
  156.         {
  157.         // if they found only 0 or 1 occurance then don't do anything
  158.         // because they haven't found enough to go backwards
  159.         if (finds < 2)
  160.                 return;  
  161.        
  162.         // Make finds variable go back to previous find
  163.         finds = finds - 2;  // I don't know why I have to go back 2
  164.        
  165.         // move back to previously bookmarked position
  166.         txt.moveToBookmark(bookmark[finds]);
  167.        
  168.         // select it
  169.         findit();
  170.         }
  171.         else // if netscape or firefox
  172.         {
  173.                         if (finds > 0)
  174.                         {
  175.                                 sel = window.getSelection(); // get selection
  176.                                 // remove all ranges
  177.                                 if(sel.rangeCount > 0) sel.removeAllRanges();
  178.                                 // add last highlighted range
  179.                                 sel.addRange(range);           
  180.                         }
  181.                 // window.find(string, caseSensitive, searchBackwards)
  182.                 if (string != "")
  183.                         test.innerHTML = window.find(string, false, true);     
  184.                 // In Firefox (not Netscape) when we press the
  185.                         // Next or Prev buttons in the DIV it looses the
  186.                         // selection, so we have to grab the selection
  187.                         // locations so we don't keep searching for only
  188.                         // the first found search over and over
  189.                         sel = window.getSelection(); // get selection
  190.                         range = sel.getRangeAt(0); // get object
  191.         }
  192.        
  193.        
  194. } // end findprev()
  195.  
  196.  
  197. // This function looks for the ENTER key (13)
  198. // while the find window is open, so that if they user
  199. // press ENTER it will do the find next
  200. function checkkey(e)
  201. {      
  202.         var keycode;
  203.         if (window.event)  // if ie
  204.                 keycode = window.event.keyCode;
  205.         else // if Firefox or Netscape
  206.                 keycode = e.which;
  207.        
  208.         //test.innerHTML = keycode;
  209.        
  210.         if (keycode == 13) // if ENTER key
  211.         {      
  212.                 // For some reason in IE,
  213.                 // I have to focus on the 'NEXT' button
  214.                 // or finding by the Enter key does not always work.
  215.                 if (ie)
  216.                         document.getElementById('btn').focus();
  217.                 findit(); // call findit() function (like pressing NEXT)       
  218.         }
  219. } // end function checkkey()
  220.  
  221.  
  222. // This function makes the findwindow DIV visible
  223. // so they can type in what they want to search for
  224. function show()
  225. {
  226.         if (ie || mozilla_opt == 1)
  227.         {
  228.         //var findwindow = document.getElementById('findwindow');
  229.        
  230.         // Object to hold textbox so we can focus on it
  231.         // so user can just start typing after "find" button
  232.         // is clicked
  233.         var textbox = document.getElementById('fwtext');
  234.        
  235.         // Make the find window visible
  236.         findwindow.style.visibility = 'visible';
  237.         //fwtext.style.visibility = 'visible';
  238.        
  239.         // Put cursor focus in the text box
  240.         textbox.focus();
  241.        
  242.         // Call timer to move textbox in case they scroll the window
  243.         t = setInterval('move_window();', 150);        
  244.        
  245.         // Setup to look for keypresses while window is open
  246.         document.onkeydown = checkkey;
  247.        
  248.         }
  249.         else  // if netscape or firefox
  250.                 window.find();
  251.         // Note: Netscape and Firefox have a built in find window
  252.         // that can be called with window.find()
  253.         // They also have a find like IE's with self.find(string, 0, 1)
  254.         // But I can't find any instructions on how to use it to
  255.         // keep searching forward on "Next" button presses
  256.        
  257. } // end function show()
  258.  
  259.  
  260. // This function makes the findwindow DIV hidden
  261. // for when they click on close
  262. function hide()
  263. {
  264.         //var findwindow = document.getElementById('findwindow');
  265.        
  266.         findwindow.style.visibility = 'hidden';
  267.        
  268.         // turn off timer to move window on scrolling
  269.         clearTimeout(t);
  270.        
  271.         // Make document no longer look for enter key
  272.         document.onkeydown = null;
  273.        
  274. } // end function hide()
  275.  
  276.  
  277. // This function resets the txt selection pointer to the
  278. // beginning of the body so that we can search from the
  279. // beginning for the new search string when somebody
  280. // enters new text in the find box
  281. function resettext()
  282. {
  283.         if (ie)
  284.         {
  285.                 txt = document.body.createTextRange();
  286.                 txt.moveStart("character", start_at);
  287.                 //txt.select();
  288.         }
  289.         finds = 0;
  290. } // end function reset()
  291.  
  292.  
  293. // This function makes the find window jump back into view
  294. // if they scroll while it is open or if the page automatically
  295. // scrolls when it is hightlighting the next found text
  296. function move_window()
  297. {
  298.         //var findwindow = document.getElementById('findwindow');      
  299.        
  300.         // get current left, top and height of find_window
  301.         fwtop = parseFloat(findwindow.style.top);
  302.         fwleft = parseFloat(findwindow.style.left);
  303.         fwheight = parseFloat(findwindow.style.height);
  304.        
  305.         // get current top and bottom position of browser screen
  306.         if (document.documentElement.scrollTop) // Needed if you use doctype loose.htm
  307.                 current_top = document.documentElement.scrollTop;
  308.         else
  309.                 current_top = document.body.scrollTop;
  310.         if (document.documentElement.clientHeight)
  311.         {
  312.                 if (document.documentElement.clientHeight > document.body.clientHeight)
  313.                         current_bottom = document.body.clientHeight + current_top;
  314.                 else
  315.                         current_bottom = document.documentElement.clientHeight + current_top;
  316.         }
  317.         else
  318.                 current_bottom = document.body.clientHeight + current_top;
  319.        
  320.         // get current left and right position of browser
  321.         if (document.documentElement.scrollLeft) // Needed if you use doctype loose.htm
  322.                 current_left = document.documentElement.scrollLeft;
  323.         else
  324.                 current_left = document.body.scrollLeft;
  325.         if (document.documentElement.clientWidth)
  326.         {
  327.                 if (document.documentElement.clientWidth > document.body.clientWidth)
  328.                         current_right = document.body.clientWidth + current_left;
  329.                 else
  330.                         current_right = document.documentElement.clientWidth + current_left;
  331.         }
  332.         else
  333.                 current_right = document.body.clientWidth + current_left;
  334.        
  335.         //test.innerHTML = current_right + ',' + current_left;
  336.        
  337.         // Only move window if it is out of the view
  338.         if (fwtop < current_top)
  339.         {      
  340.                 // move window to current_top
  341.                 findwindow.style.top = current_top + 'px';       
  342.         }
  343.         else if (fwtop > current_bottom - fwheight)
  344.         {
  345.                 // move to current_bottom
  346.                 findwindow.style.top = current_bottom - fwheight + 'px';         
  347.         }
  348.        
  349.         // Only move left position if out of view
  350.         if (fwleft < current_left ||
  351.                 fwleft > current_right)
  352.         {
  353.         findwindow.style.left = current_left + 'px';
  354.         }
  355.        
  356.         /* var test = document.getElementById('test');
  357.         test.innerHTML = 'find window: ' + fwtop
  358.                 + ' curr_bottom: ' + current_bottom; */
  359.  
  360. } // end function move_window()
  361.  
  362.  
  363. function MouseDown(e)
  364. {
  365.     if (over == 1)
  366.         DivID = 'findwindow';
  367.        
  368.         if (over)
  369.     {    
  370.                 if (ie)
  371.                 {
  372.             objDiv = document.getElementById(DivID);
  373.             objDiv = objDiv.style;
  374.             mousex=event.offsetX;
  375.             mousey=event.offsetY;
  376.         }
  377.         else // if Mozilla or Netscape
  378.                 {
  379.             objDiv = document.getElementById(DivID);
  380.             mousex=e.layerX;
  381.             mousey=e.layerY;
  382.             return false;
  383.         }
  384.     }
  385. }
  386.  
  387.  
  388.  
  389. function MouseMove(e)
  390. {
  391.    
  392.         // get current top
  393.         if (document.documentElement.scrollTop) // Needed if you use doctype loose.htm
  394.                 current_top = document.documentElement.scrollTop;
  395.         else
  396.                 current_top = document.body.scrollTop;
  397.        
  398.        
  399.         // get current left
  400.         if (document.documentElement.scrollLeft) // Needed if you use doctype loose.htm
  401.                 current_top = document.documentElement.scrollLeft;
  402.         else
  403.                 current_left = document.body.scrollLeft;
  404.        
  405.        
  406.         if (objDiv)
  407.         {
  408.         if (ie)
  409.         {
  410.             objDiv.pixelLeft = event.clientX-mousex + current_left;
  411.             objDiv.pixelTop = event.clientY-mousey + current_top;
  412.             return false;
  413.         }
  414.                 else // if Mozilla or Netscape
  415.                 {
  416.             objDiv.style.left = (e.pageX-mousex) + 'px';
  417.             objDiv.style.top = (e.pageY-mousey) + 'px';
  418.             return false;
  419.         }
  420.     }
  421. }  // end function MouseMove(e)
  422.  
  423. //
  424. //
  425. //
  426. function MouseUp()
  427. {
  428.     objDiv = null;
  429. }
  430.  
  431.  
  432.  
  433. // Create findwindow DIV but make it invisible
  434. // It will be turned visible when user clicks on
  435. // the "Find on this page..." button
  436.  
  437. document.write('<DIV ID="findwindow" STYLE="position:absolute'
  438.         + ';right: 10px; top: 10px'
  439.         //+ ';left: 0px; top: 0px'
  440.         + ';visibility: hidden'
  441.         + ';background-color: ' + window_background
  442.         + ';border: 1px solid ' + window_border
  443.         + ';width: ' + window_width + 'px'
  444.         + ';height: ' + window_height + 'px'
  445.         + ';color: ' + text_color
  446.         + ';padding: 1px'
  447.         + ';font-size: 14px'
  448.         + ';"'
  449.         + '>');
  450.  
  451. // This part creates the instructions and the "find" button
  452. document.write('<DIV ID="window_body" STYLE="padding: 1px;">'
  453. //      + '<img src="../img/navega/fundo_horizontal.gif" border=0><img src=onClick="hide();Fecha">'
  454.         //+ 'Digite a palavra desejada: '
  455.         + '<INPUT TYPE="text" SIZE="32" MAXLENGTH="30" ID="fwtext" style="border-style: solid; border-width: 1"'
  456.         + ' onChange="resettext();">'
  457. //      + '<a href="javascript:findprev();"><img src="../img/navega/setaesquerda.gif" border=0>'
  458. //      + '<a href="javascript:findit();"><img src="../img/navega/setadireita.gif" border=0>'
  459. //      + '<img src="../img/navega/fecha.gif" border=0 onClick="hide();">'
  460. //      + '<INPUT TYPE="button" VALUE="Anterior" onClick="findprev();">'
  461. //      + '<INPUT ID="btn" TYPE="button" VALUE="Próxima" onClick="findit();">'
  462.  
  463.         + '<INPUT TYPE="image" src="../img/navega/setaesquerda.gif" ALT="Ocorrência anterior" width="24" height="24" name="anterior" border=" align="="absbottom" onClick="findprev();">'
  464.         + '<INPUT TYPE="image" src="../img/navega/setadireita.gif" ALT="Ocorrência seguinte" width=" height="t=" name="e="seguinte" border="0" align="absbottom"onClick="findit();">'
  465.         + '<INPUT TYPE="image" src="../img/navega/fecha.gif" ALT="Fecha o assistente de pesquisa" width=" height="t=" name="e="fecha" border="0" align="absbottom"onClick="hide();">'
  466.         + '</DIV>\n'
  467.         + '<DIV ID="test"><BR></DIV>');
  468.         document.write('</DIV>'// This part creates a visible button on the HTML page to
  469. // where the script is pasted in the HTML code
  470. //document.write('<INPUT TYPE="button" VALUE="Localizar"style="width:1.60cm;height:0.56cm;font-size:12px;color:#FF6600;background:#D9D9B9;font-family:Arial;."'
  471. "'
  472. document.write('<input type=image src="../img/navega/localiza.gif" ALT="Localiza neste texto" width=" height="t=" name="e="Destaca" border="0" align="absbottom"'
  473.         + ' onClick="show();">'// hold the findwindow DIV in findwindow
  474. ow
  475. var findwindow = document.getElementById('findwindow'// over variable is whether mouse pointer is over the DIV to move
  476. ve
  477. var over = // Object to hold findwindow for MouseMove
  478. ve
  479. var objDiv = nul// ID of DIV for MouseMove functions
  480. ns
  481. var DivID = null;
  482. var test = document.getElementById('test

Raw Paste


Login or Register to edit or fork this paste. It's free.