Inicio  >  Javascript

$().ready(function(){
$(‘INPUT:first’).focus();
});

o si queremos posicionarnos en el primer textarea:

$().ready(function(){
$(‘TEXTAREA:first’).focus();
});

Efecto zebra en jquery

Javascript      10 Diciembre, 2009      316 lecturas      2 comentarios

El efecto zebra consiste en cambiar el color de los elementos pares de una tabla o lista para diferenciar mejor los elementos y se puedan leer mejor.

Podéis ver un ejemplo en sinplan, para hacer el efecto en jquery en una tabla es este código:

$(“tr:even”).css(“background-color”, “#EFEFEF”);

Para listas:

$(“li:even”).css(“background-color”, “#EFEFEF”);

Evitar que el formulario se envie más de una vez con jquery

Javascript      21 Octubre, 2009      549 lecturas      0 comentarios

Lo que hace este fragmento de código es bloquear el botón submit al enviar el formulario, para evitar que se pueda enviar otra vez y se duplique contenido.

<script>
$().ready(function(){
$(‘form’).submit(function(){
$(‘input[type=submit]‘).attr(‘disabled’, ‘disabled’);
});
});
</script>

Mensaje de alerta para los usuarios de internet explorer 6

Javascript      4 Junio, 2009      1113 lecturas      8 comentarios

A petición de Rafael Bucio publico este post.

Yo flipo en colores, todavia hay mucha de gente que usa internet explorer 6 un navegador arcaico del año 2001 y del que seguramente más de alguno se ha cagado más de una vez.

Según google analytics el 34,30% de los visitantes de nvivo.es usa internet explorer 6, sin mirar la versión sigue siendo el navegador más usado con un 70,06%, respecto al 24,12% de firefox.

Hace poco en nvivo.es hemos implementado una alerta que sólo se muestra a los usuarios de IE6, así queda:

El código es sencillo, más ligero que el de ie6update ya que no tiene animaciones, aunque también requiere jquery el framework javascript que usamos en nvivo.es, a continuación os dejo todo lo necesario para implementarlo en vuestro sitio:

CSS:

.ie_bar{display:block;padding:10px 10px 10px 35px;background:#FFFFE6 url(‘/img/iealert.png’) no-repeat 10px center;border-bottom:1px #ccc solid;color:#000;text-decoration:none}

Nota: el CSS contiene un icono PNG

Javascript:

$(document).ready(function(){
if($.browser.msie && /6.0/.test(navigator.userAgent)){
$(‘body’).prepend(‘<a href=”http://www.microsoft.com/windows/internet-explorer/default.aspx” class=”ie_bar” target=”_blank”>’ + IE_BAR + ‘</a>’);
}
});

Nota: Al pulsar la alerta se buscará la última versión de Internet explorer, si quereis que baje el firefox cambia el enlace a http://getfirefox.com

HTML:

<script language=”javascript”>
var IE_BAR = “<!–{t}–>Internet Explorer is missing updates required to view this site. Click here to update…<!–{/t}–>”;
</script>

Nota: Para la internacionalización el texto esta en una variable javascript en el template y no dentro de un fichero javascript, os dejó la cadena de texto en inglés y en español:

Internet Explorer está desactualizado para ver este sitio. Haz clic para actualizar…

¿Algún error?

Revisa las comillas dobles al copiar el código, wordpress los remplaza por otros caracteres y es posible que el javascript no funcione bien.

El widget secreto de twitpic

Javascript      22 Mayo, 2009      790 lecturas      3 comentarios

El widget es tan secreto que ni siquiera se menciona en la web oficial de twitpic, aquí os dejo el código con el que podreis insertar las últimas fotos subidas en vuestro blog.

Parámetros:

  • username: usuario de twitter asociado a twitpic
  • count: número de fotos a mostrar: 1 a 20+
  • size: tamaño de la miniatura: thumb (pequeño), full (tamaño completo)
  • colorbg: color de fondo
  • colorborder: color del borde
  • colorfont: color de la letra
  • colorlink: color de los enlaces
  • title: titulo que aparacera encima del widget

Código HTML:

<script src=”http://twitpic.com/badge/v1.jsx?username=gafeman&count=1&size=big&colorbg=FFFFFF&colorborder=EEEEEE&colorfont=000000&colorlink=0000FF&title=Últimas fotos” type=”text/javascript”></script>

Demostración:

Lo podéis en acción en la parte derecha de este blog.

4 páginas