|
| Summary of Content |
or just Double Mouse Click anywhere (except when over hyperlinks) |
| Whilst browsing I found an interesting script that allowed a simple but effective page search, however if
the search word or phrase was too far down the page you lost the means of
finding subsequent occurrences as you need to click on the search button to
find. Not too much a pain if you don't have too many repetitions on a page. I then found another script which allowed the fixing of a layer
at an absolute position even when scrolling down a page. Put the two together
and add a small show and hide layer script with a double click option and I had my solution.
On the press of the 'Open Search Window' hyperlink or just a Double Mouse Click, the search control layer is made visible, enter your search phrase, press the 'Search this Page' button, and wherever the phrase is located down a page the search control comes with you, following you down the page always at its original position. You can now search again for the next occurrence without scrolling up the page to find the control, in fact leave your cursor where it is, the control will come to you. Once you have finished searching, press the 'Close Window' button located at the top of the layer and it will become hidden. The next time you open the search window (a double mouse click, or the link, if it is still visible), you will see the previous phrase still showing, however that will vanish as soon as you single click over the text entry point. This allows you to continue searching with the existing phrase (from the last occurrence found) or start a brand new search. The search will cycle one by one through all occurrences of the phrase returning to the top of the page and starting over again for as many times as you press the 'Search this Page' button. If no results are found an alert box will inform you accordingly. Please note: Normally throughout my site a 'Double Mouse Click' will take you back to the top of the page. For the purposes of this exercise I have disabled this function so I could use it to open the Search Window instead. |
| Script Sources | |
| Hypergurl.com | Page Search script. This is what started me off.... |
| Felgall.com | Another similar search script which is more flexible but has uses a pop-up window |
| Dyn-web.com | Scrolling / Gliding Layer |
| Layers Crossbrowser | Show & Hide layer script and 'control' |
| Script Assembly |
| This roughly how its put together. No doubt somebody could do a tidy
merge of all the parts. If you do let me know. In the meantime this works
fine for me. Please make sure you follow the individual scripts' terms of use, which is basically leave their credits in place in your coding. See the individual sites for details. Its only fair as they did the work and saved me a lot of time. |
| Head section |
| The layer gliding mechanism relies on two external javascript libraries
included in the download from dyn-web, path depends on where you located
these. <script src="/js/dw_lib.js" type="text/javascript"></script> <script src="/js/dw_glider.js" type="text/javascript"></script> Also add the script to initialise the layer<script type="text/javascript"> <script> function initStatLyr() { // args: id, left, top, w, h, duration of glide to location onscroll, acceleration factor // acceleration factor should be -1 to 1. -1 is full deceleration var statLyr = new Glider("glideDiv",20,20,null,null,1000,-1); statLyr.show(); } </script> |
| ADD Within the Style section in addition to any of your own |
| #glideDiv { position:absolute; left:10px; top:10px; z-index:1; width:120px; height:140px; background-color:#dee7f7; visibility: hidden; |
| This example positions the layer absolutely (fixed), Left, Top, Layer (z) index (not important if there are no other layers on the page), Width, Height (optional), Background colour, Initial State (visible or not). |
| Script For Searching The Page |
| Add the script for the page search function from hypergurl
here or from the link in the script sources
section above. <script> var NS4 = (document.layers); // Which browser? var IE4 = (document.all); var win = window; // window to search. var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; // Find next occurrence of the given string on the page, wrap around to the // start of the page if necessary. if (NS4) { // Look for match starting at the current point. If not found, rewind // back to the first match. if (!win.find(str)) while(win.find(str, false, true)) n++; else n++; // If not found in either direction, give message. if (n == 0) alert("Not found."); } if (IE4) { txt = win.document.body.createTextRange(); // Find the nth match from the top of the page. for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } // If found, mark it and scroll it into view. if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); n++; } // Otherwise, start over at the top of the page and find first match. else { if (n > 0) { n = 0; findInPage(str); } // Not found anywhere, give message. else alert("Not found on this page."); } } return false; } </script> |
| Script for Visibility of The Layer |
| <script> <!-- Set Visibility Script function setvisible(Layer) { document.getElementById(Layer).style.visibility="visible"; } function setinvisible(Layer) { document.getElementById(Layer).style.visibility="hidden"; } //--> </script> |
| Body Section |
| Body Tag |
| As well as the layer initialisation in the Body 'Onload' statement add
setinvisible('glideDiv');" to hide the layer
at page load time. glideDiv is the layer id. Your
body statement should look something like this. <body onload="initStatLyr(); setinvisible('glideDiv');" > |
| Activate control with a Double Mouse Click |
|
<script> <!-- Double Mouse Click to Open Search Control --> document.ondblclick=dblclick; function dblclick() { setvisible('glideDiv') } if (document.layers) { document.captureEvents(Event.ondblclick); } document.ondblclick=dblclick; //--> </script> |
| Position where you want the 'Open Search Window' link |
| <p align="center"><input type="button" name="r1" onClick="setvisible('glideDiv')" style="text-align: center; border-style:
solid; border-width: 0; font-family: Verdana; font-size:10pt; color:#000080;
text-transform:uppercase; background-color:#dee7f7" size="25" value="OPEN SEARCH WINDOW"> </p> |
| This layer can be situated anywhere that is convenient in the body section. I've put it at the end. |
| <!-- Here is the layer that glides
with the search page, close window and clear search text controls within it--> <div id="glideDiv" align="center" style="padding:0px; height: 55px; width:140px; z-index:1"> <!-- Above should match the shape defined in the style definition--> <br><label><input type="text" name="r1" onClick="setinvisible('glideDiv');" style="text-align: center; border-style: solid; border-width: 0; font-family: Verdana; font-size:10pt; color:#000080; text-transform:uppercase; background-color:#dee7f7" size="15" value="CLOSE WINDOW"></label> <!-- Above is the control to shut the layer window--> <form name="search" onSubmit="return findInPage(this.string.value);"> <div align="center" style="height: 50px; width: 120px"> <p><font size=3> <input name="string" type="text" size=20 onfocus="string.value='';" onChange="n = 0;" style="width: 120px; font-family:Verdana; color:#000080; font-size:10pt" id="string"></font></p> <p><input type="submit" value="Search this Page" style="color: #000080; width:120px"></p> </div></form></div> |
| Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL) |
|
Last Update: 04/03/2008 - Page Search Plus - Javascript - Web Development - Neils Resource Web