for the analog clock (and almost all the plugin) i’m using the code and images from this article of css-tricks.com

you can see this plugin completely in action in this netvibes world clock widget

greetings

Homepage
Download
Demos
Documentation
jquery plugin page

greetings

(04-07-2010) update: drop-down list support was added by  Ajay Sawant thank you!

if you are this kind of person worried about the loading time, optimizing everything, you would find this script very useful and you’ll love it.

i’ve improved the style of this script and the last one for make it more presentable and useful, so enjoy it

(again) this script with a css compressor like this or this are a complet and useful tools for make your css files lighter

for use the script, you can put this code in your html file

greetings

the result es very basic, don’t expect nothing very impressive or really advanced. the beatiful part is that you can navigate through your pages and see inmediately the results

this script plus the senseo addon for firebug are two very helpul tools for make SEO easy.

for use the script, you can put this code in your html file

enjoy :D

Le puse jquery capitalize para mantener mi originalidad … acá los demos, documentación ( bien corta ) y descarga.

también la publiqué en los proyectos de jquery.

saludos :-)

Para los fanaticos…. agregué al plugin jquery del rut las cosas que quería y al menos que alguien tenga una buena idea … creo que lo dejaré así no mais hasta nuevo aviso.

Si usabas una versión anterior la sintaxis cambió un poco, ahora todo es configurable, así que sé precavido.

Agregué soporte para:

Validación en on y off. (Por si no quieres validar)

Formateo en on y off. ( Por si no quieres formatear )

Evento que formatea configurable ( Por si quieres efectuar el formateo cuando el usuario termina de escribir o en otro evento )

Digito verificador en otro input ….. ( :D )

Pueden ver demos, leer la documentación o descargarlo.

Saludos

Hace dos post les comentaba de un plugin de validación de jQuery muy potente … y en el post anterior a este les comentaba que había solucionado unos problemas del plugin del rut para jQuery en internet explorer. Ahora y siguiendo la misma linea he integrado ambos para que puedas usar el validador del Rut en el plugin de validación.

Este código lo puedes agregar en additional-methods.js o en algún otro lado y recuerda incluir el plugin del rut.

$.validator.addMethod("rut", function(value, element) {
return this.optional(element) || $.Rut.validar(value);
}, "Este campo debe ser un rut valido.");

Ahora y aprovenchando la flexibilidad del plugin de validación podemos obtener algo así.

<input type="text" name="rut" class="rut" />

Con lo que nos bastaría para validar el rut, sencillo y cómodo. El demo acá. Disfruten :D

Hace ya bastante tiempo cuando publiqué el plugin para validar y formatear el rut  chileno con jquery no me dí el trabajo de testearlo en otro lado que no fuese firefox …. en realidad si lo hice, lo probé en ie, pero como no funcionaba y las herramientas de depurado en ie dejan bastante que desear lo de je así.

Hoy y gracias a un correo de un señor llamado Rodrigo Morales he vuelto a mirar el plugin y he dado con la solución. Por lo que ahora está funcionando en ie6 e ie7.

Pronto ( pueden ser varias semanas :p ) pretendo agregar un par de funcionalidades más para el deleite de los desarrolladores chilenos que usamos jquery :D

No estoy seguro si se cambió bien en la página de jquery … pero siempre lo pueden descargar desde la página del proyecto o directamente desde acá.

Varias veces había pasado por la página web de Jörn Zaefferer pero no habia mirado los plugins de jquery que tiene. Y también muchas veces me encontré validando formularios a mano hasta que en algún momento me pregunte ¿ por que escribo yo las rutinas de validación de mis formularios ? mmm pense debe existir algún plugin o algo similar para jquery que automatice todo el proceso de validación. Buscare! Y no me equivoque.

El plugin de validación desarrollado por Jörn Zaefferer es muy completo, muy configurable, muy todo =). Su funciomiento es relativamente sencillo. Si lo que quieres es limpieza y poco código sólo necesitas agregar a los campos que quieres validar una clase required por ejemplo para que el plugin valide el campo como requerido.

Creo que dar ejemplos esta demás, porqué puedes ver algunos funcionando acá o en el descargable y además la documentación es bastante completa.

Excelente alternativa si lo que quieres es transformar el “tortuoso” momento de validar formularios en una delicia con resultados que gustan y cumplen.

Imprescindible.

Ya habia comentado como hacer mensajes de acciones exitosa y mensajes de error de validaciones pues me quedan los warnings y los mensajes informativos.

Con respecto a los warnings, no son nada muy dificil, sólo un div que advierta al usuario sobre X cosa. Las razones para mostrar un warning pueden ser variadas. Desde que una tarea no se puede ejecutar por X motivos, una tarea que fue ejecutada pero con ciertos problemas menores, una advertencia para ser precavido en lo que haga el usuario, etc.

El código para mostrar un warning es este:

<div class="warning">
  <ul>
    <li>Oh no! hemos encontrado un problema acerca de xxYYzz solucionalo, e intentalo de nuevo</li>
  </ul>
</div>

Finalmente con los mensajes informativos la cosa se pone un poco más entretenida.

La idea detrás de los mensajes informativos es que cierta información se muestre a los usuarios cuando esta se crea, pero a medida que los usuarios vayan cerrando estos mensajes/información, no les aparezcan más a ellos.

Esto sirve principalmente para un usuario que conoce un sitio nuevo y se le da la información necesaria para que aprenda a usar las funcionalidades básicas, o para mostrar noticias o cosas similares.

Un buen ejemplo es el que me tope hoy en facebook, cuando me conecte salia este mensaje:

Curiosamente aprete en cerrar y no apareció más =)

La implementación que use en el demo es bastante sencilla, la verdad no quise complicarme mucho para hacerlo, pero si necesitan algo un poco más serio en la descarga hay un schema.yml tentativo que podrás usar y también deberás reescribir los metodos del myUser.class.php.

Para obtener mensajes como estos, se necesitan 2 cosas, 1.- poner los mensajes en donde se quiere que aparezcan y 2.- gestionar que mensajes le aparecen a que usuarios.

Para poner un mensaje informativo como el anterior se puede hacer lo siguiente:

<?php if($sf_user->hasInfo(2)): ?>
  <div class="info" id="2">
    <img src="/images/close.png" class="close"/>
    <ul>
      <li>Vamos a hacer cambios en la página de inicio muy pronto.</li>
      <li>Familiarizate con las nuevas funciones. Estos cambios van a producirse muy ponto ... bla bla ...</li>
    </ul>
  </div>
<?php endif; ?>

Y estos metodos en el myUser.class.php:

public function init($force = false)
{
  if($force || !$this->hasAttribute(1)){
    $this->setAttribute(1, true);
    $this->setAttribute(2, true);
  }
}

public function hasInfo($info_id)
{
  return $this->getAttribute($info_id);
}

public function delInfo($info_id)
{
  $this->setAttribute($info_id, false);
}

También para quitar los info se necesita el siguiente código jQuery en el partial _messages.php:

$('.info .close').click(function(){
  var id = $(this).parent().attr('id');
  $(this).parent().fadeOut('slow', function(){
    $.ajax({
      type:'POST',
      dataType:'html',
      url:'/id/'+id
    });
    $(this).remove();
  });
});

Todo esto lo puedes encontrar en la descarga y para verlo funcionar acá el demo.

Les recuerdo que la descarga y el demo estan con  SYMFONY 1.0 (obviamente es completamente migrable) …… y esta sin freeze, las funcionalidades para que desaparezcan los mensajes estan escritas en jQuery por lo que si alguien las puede hacer en prototype u otro se agradecerá.