Javascript y PHP: recursos y explicaciones - por IUGO http://www.iugo.com.uy/blog PHP y JavaScript claro y sencillo, por IUGO software & design studio Thu, 10 May 2012 16:19:44 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 jQuery .live() vs .on() http://www.iugo.com.uy/blog/index.php/jquery-live-vs-on/ http://www.iugo.com.uy/blog/index.php/jquery-live-vs-on/#comments Thu, 10 May 2012 16:19:44 +0000 admin http://www.iugo.com.uy/blog/?p=402 A partir de lal versión 1.7 de jQuery el método .live() ha sido deprecated. En lugar de live(), deberá usarse el nuevo método .on()

Este método tiene un nuevo parámetro “selector” (opcional) , que permite especificar un filtro de los hijos del nodo al que se le aplica el evento on() que causarán el ejecución del evento.

Para eliminar un evento creado con on(), deberá usarse el método off().

]]> http://www.iugo.com.uy/blog/index.php/jquery-live-vs-on/feed/ 0 Catálogo de soluciones CUTI http://www.iugo.com.uy/blog/index.php/catalogo-de-soluciones-cuti/ http://www.iugo.com.uy/blog/index.php/catalogo-de-soluciones-cuti/#comments Thu, 10 May 2012 16:09:42 +0000 admin http://www.iugo.com.uy/blog/?p=400 IUGO diseño y desarrolló para CUTI el catálogo de soluciones, donde las empresas socias de la cámara pueden publicar sus datos y productos y servicos ofrecidos.
Pueden acceder al catálogo en http://guiatic.cuti.org.uy

]]> http://www.iugo.com.uy/blog/index.php/catalogo-de-soluciones-cuti/feed/ 0 Nuevo sitio web de Montecable! http://www.iugo.com.uy/blog/index.php/nuevo-sitio-web-de-montecable/ http://www.iugo.com.uy/blog/index.php/nuevo-sitio-web-de-montecable/#comments Thu, 10 May 2012 15:57:18 +0000 admin http://www.iugo.com.uy/blog/?p=398 Ya está online el nuevo sitio web de Montecable: www.montecable.com.
Desde el sitio los clientes pueden contratar perlículas y eventos,
Iugo estuvo a cargo del diseño y desarrollo del sitio.

]]> http://www.iugo.com.uy/blog/index.php/nuevo-sitio-web-de-montecable/feed/ 0 Nuevo integrante en IUGO http://www.iugo.com.uy/blog/index.php/nuevo-integrante-en-iugo/ http://www.iugo.com.uy/blog/index.php/nuevo-integrante-en-iugo/#comments Sun, 22 Apr 2012 21:36:20 +0000 admin http://www.iugo.com.uy/blog/?p=396 IUGO sigue creciendo y a partir del mes pasado se ha sumado Santiago al equipo de desarrollo. Santiago es desarrollador PHP con varios años de experiencia.

]]> http://www.iugo.com.uy/blog/index.php/nuevo-integrante-en-iugo/feed/ 0 IUGO estrena web! http://www.iugo.com.uy/blog/index.php/estrenamos-nueva-web/ http://www.iugo.com.uy/blog/index.php/estrenamos-nueva-web/#comments Thu, 17 Nov 2011 20:49:04 +0000 alfonso http://www.iugo.com.uy/blog/?p=392 Re-diseñamos por completo nuestra web, esperamos sus comentarios!

www.iugo.com.uy

]]> http://www.iugo.com.uy/blog/index.php/estrenamos-nueva-web/feed/ 0 Precargar imágenes con jQuery http://www.iugo.com.uy/blog/index.php/precargar-imagenes-con-jquery/ http://www.iugo.com.uy/blog/index.php/precargar-imagenes-con-jquery/#comments Tue, 08 Nov 2011 20:49:10 +0000 gonzalo http://www.iugo.com.uy/blog/?p=268 Muchas veces nuestros sitios web tienen imágenes que necesitamos precargar, un claro ejemplo en el que resulta útil hacer esto es cuando nuestro sitio tiene efectos de “rollover” sobre las imágenes. Resulta bastante molesto cuando pasamos el mouse sobre una imágen y ésta queda en blanco hasta que termina de descargarse la imágen que debería verse al hacer rollover. Y cuando hablamos de rollover no sólo nos referimos a efectos realizados utilizando funciones en javascript, tambien se incluye, por ejemplo, cuando cambiamos el “background” de algo, en su estado hover

a.linkConRollover:hover {
background-image: url(imagen-over.jpg);
}

En este caso, sería bueno precargar la imagen “imagen-over.jpg” para que al pasar el mouse por primera vez sobre un  hipervínculo con estilo “linkConRollover” no debamos esperar a que se cargue dicha imagen.  Para eso podemos usar una función muy muy muy sencilla:

jQuery.precargarImg = function() {
for(var i=0; i
jQuery("").attr("src", arguments[i]);
}

 

El código completo a incluir en nuestra etiqueta head sería:


<script src="jquery.min.js" language="javascript"></script>
<script>
jQuery.preloadImages = function() {
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);
}
$.preloadImages("pics/pic1.jpg","pics/pic2.jpg","pics/pic3.jpg");
</script>

]]> http://www.iugo.com.uy/blog/index.php/precargar-imagenes-con-jquery/feed/ 2 Nos renovamos! http://www.iugo.com.uy/blog/index.php/nos-renovamos/ http://www.iugo.com.uy/blog/index.php/nos-renovamos/#comments Tue, 08 Nov 2011 20:47:16 +0000 alfonso http://www.iugo.com.uy/blog/?p=382 Para estar a tono con la próxima versión de la web de IUGO, renovamos la imagen del blog. Espramos que sea más cómodo para leer. Dejen su opinión!

]]> http://www.iugo.com.uy/blog/index.php/nos-renovamos/feed/ 0 Ventanas modales con jQuery, de manera simple http://www.iugo.com.uy/blog/index.php/ventanas-modales-con-jquery-de-manera-simple/ http://www.iugo.com.uy/blog/index.php/ventanas-modales-con-jquery-de-manera-simple/#comments Mon, 07 Feb 2011 00:20:35 +0000 admin http://www.iugo.com.uy/blog/?p=375

Reveal es un plugin para jQuery que permite implementar ventanas modales elegantes de manera muy sencilla.

Las ventanas modales pueden ser customizadas si se desea, aunque el diseño por defecto es muy bueno. El plugin es compatible con todos los navegadores modernos, y muy liviano (1.75 KB).

]]> http://www.iugo.com.uy/blog/index.php/ventanas-modales-con-jquery-de-manera-simple/feed/ 0 Filtrar resultados en jQuery http://www.iugo.com.uy/blog/index.php/filtrar-resultados-en-jquery/ http://www.iugo.com.uy/blog/index.php/filtrar-resultados-en-jquery/#comments Tue, 01 Feb 2011 18:55:46 +0000 alfonso http://www.iugo.com.uy/blog/?p=362 Hoy les presentamos un script realmente útil a la hora de darle al usuario la posibilidad de filtrar resultados en una lista...

El código tras el salto.

El código:

El siguiente código funciona buscando el texto vayamos generando, en cada elemento de la lista, y de esa manera elimina los elementos que no coincidan.

Clic para ver Texto Plano
JAVASCRIPT:
  1. (function ($) {
  2. jQuery.expr[':'].Contains = function(a,i,m){
  3. return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())&gt;=0;
  4. };
  5.  
  6. function filterList(header, list) {
  7. var form = $("
  9. <form>").attr({"class":"filterform","action":"#"}),
  10. input = $("
  12. <input />").attr({"class":"filterinput","type":"text"});
  13. $(form).append(input).appendTo(header);
  14.  
  15. $(input)
  16. .change( function () {
  17. var filter = $(this).val();
  18. if(filter) {
  19.  
  20. $matches = $(list).find('a:Contains(' + filter + ')').parent();
  21. $('li', list).not($matches).slideUp();
  22. $matches.slideDown();
  23.  
  24. } else {
  25. $(list).find("li").slideDown();
  26. }
  27. return false;
  28. })
  29. .keyup( function () {
  30. $(this).change();
  31. });
  32. }
  33.  
  34. $(function () {
  35. filterList($("#form"), $("#list"));
  36. });
  37. }(jQuery));

El HTML:

Clic para ver Texto Plano
HTML:
  1. <div id="wrap">
  2. <div class="product-head">
  3. <h1>Product Search</h1>
  4. </div>
  5. <ul id="list">
  6.     <li><img src="products/apple.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Apple/">Apple</a></li>
  7.     <li><img src="products/acorn_squash.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Squash/">Acorn Squash</a></li>
  8.     <li><img src="products/broccoli.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Broccoli/">Broccoli</a></li>
  9.     <li><img src="products/carrot.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Carrot/">Carrot</a></li>
  10.     <li><img src="products/celery.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Celery/">Celery</a></li>
  11.     <li><img src="products/lettuce.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Lettuce/">Lettuce</a></li>
  12.     <li><img src="products/mushroom.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Mushroom/">Mushroom</a></li>
  13.     <li><img src="products/onion.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Onion/">Onion</a></li>
  14.     <li><img src="products/potato.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Potato/">Potato</a></li>
  15.     <li><img src="products/pumpkin.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Pumpkin/">Pumpkin</a></li>
  16.     <li><img src="products/radish.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Radish/">Radish</a></li>
  17.     <li><img src="products/squash.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Squash/">Squash</a></li>
  18.     <li><img src="products/strawberry.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/strawberry/">Strawberry</a></li>
  19.     <li><img src="products/sugar_snap.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/SugarSnaps/">Sugar Snaps</a></li>
  20.     <li><img src="products/tomato.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/tomato/">Tomato</a></li>
  21. </ul>
  22. </div>

DEMO

Visto en PaperMashup

]]> http://www.iugo.com.uy/blog/index.php/filtrar-resultados-en-jquery/feed/ 0 jQuery 1.5: disponible http://www.iugo.com.uy/blog/index.php/jquery-1-5-disponible/ http://www.iugo.com.uy/blog/index.php/jquery-1-5-disponible/#comments Tue, 01 Feb 2011 18:21:00 +0000 alfonso http://www.iugo.com.uy/blog/?p=365

La versión 1.5 de jQuery ya esta disponible para descargar.

Entre sus principales mejoras encontramos 83 bugs solucionados y la reescritura completa de su módulo Ajax.

Descargas:

- jQuery Regular
- jQuery Minified

Visto en blog.jQuery

]]> http://www.iugo.com.uy/blog/index.php/jquery-1-5-disponible/feed/ 0