21.2.11

Busqueda de Texto en tu Página con Javascript

Si deseas buscar Texto en Página web o Blog se puede realizar fácilmente gracias a Javascript, el cual es un gran valor agregado a la usabilidad de tu página sobretodo si esta trata temas con gran cantidad de Texto,  generalmente en muchos navegadores se puede hacer con la función window.find(), pero para que funcione en casi todos hay que incluir un pequeño script.

Ejemplo:



Código:

Script:

<script language="JavaScript">
var TRange=null

function busca (str) {
 if (parseInt(navigator.appVersion)<4) return;
 var strFound;
 if (window.find) {

  strFound=self.find(str);
  if (!strFound) {
   strFound=self.find(str,0,1)
   while (self.find(str,0,1)) continue
  }
 }
 else if (navigator.appName.indexOf("Microsoft")!=-1) {

    if (TRange!=null) {
   TRange.collapse(false)
   strFound=TRange.findText(str)
   if (strFound) TRange.select()
  }
  if (TRange==null || strFound==0) {
   TRange=self.document.body.createTextRange()
   strFound=TRange.findText(str)
   if (strFound) TRange.select()
  }
 }
 else if (navigator.appName=="Opera") {
  alert ("Opera no soporta busqueda")
  return;
 }
 if (!strFound) alert ("Cadena '"+str+"' no fue Encontrada")
 return;
}

Formulario:
<input name="t1" value="Texto a Buscar" /> <input onclick="busca(document.all.t1.value)" type="button" value="Buscar" />

Importante: El script y el formulario los puedes poner en cualquier parte de tu web, pero recomendamos que incluyas el script en el <head> </head> de tu página, aunque no es absolutamente necesario, como ves en este blog en el cual no copie el script en el <head> pero si lo puse de primero en la entrada y funciona correctamente.

Como puedes ver la caja de texto tiene el name="t1", por lo cual el botón tiene en el evento OnClick la función busca en la cual envía el Value del objeto t1.



Leer más...

16.2.11

Links de Páginas en una Lista


Si quieres poner tus Links o Hipervínculos en una Lista y que al seleccionarlo Cambie de página, con un poco de Javascript es Posible, muy Fácil de Hacer y gracias a esto puedes ahorrar un Poco de espacio en tu página ayudando al diseño de la misma.

Ejemplo:


Código:

<form>
<select onchange="if(this.selectedIndex!=0)
self.location=this.options[this.selectedIndex].value">
<option selected="" value=""> Seleccione la Página
</option><option value="http://trucosw3.blogspot.com/">Inicio
</option><option value="http://trucosw3.blogspot.com/p/complementos-widgetsgadgets.html">Como Agregar Widgets
</option><option value="http://trucosw3.blogspot.com/p/directorio.html">Listado de Trucos
</option></select>
</form>


Explicación: Como puedes ver el Evento OnChange de la Lista se encuentra este código: "if (this.selectedIndex != 0) self.location=this.options[this.selectedIndex].value" el cual hace funcionar la lista ya que tiene una condicion en la cual mira si es Diferente al Primer Elemento, en nuestro caso "Seleccione la Página", pone el valor del elemento de la lista en Self.Location el cual es nuestro marco o ventana actual.

Importante: En Value debes colocar tus URLs estos pueden ser Absolutos como por ejemplo "http://trucosw3.blogspot.com/" o Relativos como "/ejemplo.htm"
Leer más...

15.2.11

Divertido FanGame de Mario Bros



El divertido juego de Super Mario Bros, ha sido convertido en un increíble Widget o Gadget con el cual te puedes divertir por muchas horas y lo puedes Agregar a tu Pagina Web o Blog muy fácilmente. Se juega con las Flechas y la tecla A para saltar y S para correr.

Juega:


Código:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('984f5544-004a-4cd9-ac25-6a5d400c9c3d');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/the-new-random-site-widget">Super Mario World</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Diviértete con este plomero italiano y recuerda este gran juego.

Leer más...

11.2.11

Imprimir una Página con Javascript

Este truco es muy sencillo, si deseas que tu página se pueda imprimir con un solo click, se puede agregar algo de código a un Botón y listo.

Ejemplo:



Código:

<input onclick="window.print()" type="button" value="Imprimir" />

El código importante aquí es onclick="window.print()", el cual indica en el evento de Clickear que Imprima, por lo cual lo puedes agregar a cualguier otra etiqueta en el mismo evento, OnClick o en otro similar.

Ejemplos:

Imprimir



Código:

Enlace:

<a href="" onclick="window.print()">Imprimir</a>

Imagen:
<img border="0" onclick="window.print()" src="http://ruta_imagen" />
(puedes usar una imagen que ya este en internet si no deseas subir una, puedes buscarla en un servidor de imagenes o de iconos como Iconfinder.com y copiar el URL )

En una Celda
<td onclick="window.print()">...</td>

Y en muchas otras etiquetas más.

Espero que lo uses, ya que es muy útil para muchos tipos de páginas y blog poder imprimir el contenido.

Leer más...

1.2.11

Resultados del Béisbol de ESPN

ESPN, la cadena deportiva tiene muchos Widgets que son de nuestro agrado, primero agregamos los widgets de Fútbol: Resultados e Insignia de tu Equipo, luego el de los Resultados de la NBA, pues ahora le llego el turno al deporte de la pelota caliente, el beisbol, todo los resultados de la MLB, las ligas mayores, se encuentran en un solo Widget para que estes al tanto o lo lleves a tu página o blog completamente gratis.

Pruébalo:



Código:

<object width="300" height="387" type="application/x-shockwave-flash" data="http://a.espncdn.com/deportes/community/widgets/swfs/scoreboard.swf"><param name="flashVars" value="sport=mlb&amp;pid=espndeportesscoreboard_129660344757835939&amp;share=embed"><param name="movie" value="http://a.espncdn.com/community/deportes/widgets/swfs/scoreboard.swf" ><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><param name="allowNetworking" value="all"></object>

Agrégalo a tu página y sigue la MLB muy de cerca.
Leer más...