Free Web Hosting by Netfirms
Web Hosting by Netfirms | Free Domain Names by Netfirms

   
 
Sección "Java Scripts"

Lección 28

Buscador interno de palabras

En ciertas ocasiones, diseñas una página que contiene mucho texto, y resulta fastidioso tener que leer todo lo que dice la página para encontrar lo que uno busca. A través de este buscador, se inserta lo que uno quiere buscar dentro de la página, y el buscador lo localiza de inmediato.

Para lograr este magnífico efecto, solo debes pegar este Script debajo de donde dice <Body> en el HTML de tu página:

<script language="JavaScript">

// By Mike Hall (MHall75819@aol.com)

var NS4 = (document.layers); 
var IE4 = (document.all);

var win = window; // Con frames usar top.nombre.window;
var n = 0;

function findInPage(str) {

var txt, i, found;

if (str == "")
return false;

// Find next occurance 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.");
}
}

return false;
}

</script>

<form name="search" onSubmit="return findInPage(this.string.value);">
<font size="2"><p></font><font size="3"><input name="string" type="text" size="15"
onChange="n = 0;"></font> <input type="submit" value="Buscar"> </p>
</form>

Aquí copio nuevamente el código con opción para seleccionarlo, cortar y pegar en tu sitio.

Para ello haces click en cualquier palabra que se halla dentro de la caja, Te diriges a "Edición" en el menú superior de la barra de herramientas, e indicas "Seleccinar todo", luego tomas lo seleccionado dirigiéndote nuevamente a "Edición", pero esta vez indicas "Cortar", y posteriormente te posicionas en tu página, donde quieres colocar este código, entonces te diriges a Edición, y le indicas "Pegar". 

Si deseas hacer las cosas más rápido, puedes verificar en "Edición" (está escrito al lado de las palabras que indican cada orden) que pulsando "Control" + una letra determinada, puedes "seleccionar todo", "cortar" o "pegar" en forma instantánea y con eso evitas tener que ingresar constantemente al menú de "Edición".

Esto es lo que debes pegar debajo de donde dice <Body> en el HTML de tu página:

Si de todos modos, no funciona este efecto, corta el código HTML que debes colocar en tu página, pero antes de hacerlo, pégalo en tu Block de notas, y luego si córtalo de allí y pégalo en tu sitio. Ahora si no creo que haya ningún inconveniente que te impida disfrutar de este bonito efecto.

Recordemos que este Script también puede ser hallado en el programa Depósito, el cual puedes bajar de aquí: webtutorial.com.ar

Buena suerte.