Cómo hacer Nth-child cross browser

Muchos de vosotros conoceréis el selector css “nth-child”, y los que no lo conozcáis, pues deberías! xD.

Nos permite decir adiós a tener que ir marcando en el html los típicos ‘odd’ y ‘even’ como class en nuestras tablas y listados. Un simple “nth-child(2n+1)” y fuera! Nos ahorramos un montón de trabajo.

Podéis ver mejor como funciona en este artículo: http://css-tricks.com/5452-how-nth-child-works/
El problema de esto, como siempre, es que no es cross browser, y es nuestro amigo IE quien no se entera de esta propiedad… 🙁 Incluso en IE8!!

Como dice al final del artículo, para solucionar este tema, es posible usar jQuery, y así es!
Con una línea de jQuery, podemos obtener los mismos resultados que con la css, pero para todos los navegadores!!

Y aquí viene el valor añadido sobre el artículo anterior… El ejemplo que nos aclarará como es la cosa:

Css:
<<table.myclass tr:nth-child(2n+1) { background-color: #F6F6F6; }>>

jQuery:
<<$(“table.myclass tr:nth-child(2n+1)”).css(“background-color”, “#F6F6F6”);>>

Espero que os sirva!

Publicado por: 0

Guía de buenas prácticas en el desarrollo Front End

Aquí os dejamos un gran recopilatorio sobre ciertos aspectos que tenemos que tener en cuenta cuando estamos desarrollando un proyecto.

Desde la definición del DOCTYPE, el uso de microformatos, o los ‘alt’ en las imágenes, hasta el código en javascript, jquery, css, e incluso alguna anotación sobre HTML5.

Front end development guidelines (en inglés)

Vale la pena darle un vistazo.

xD

Publicado por: 0

Apprise: Una buena alternativa a los alert() de javascript

Son cada vez más los que piensan que no debemos utilizar el alert de javascript de cara al usuario final, pero los programadores estamos demasiado acostumbrados a utilizarlos y son nuestros compañeros de depuración en casos en los que no podemos gastar a ‘San Firebug’ ni similares.

Pues bien. Apprise es una alternativa muy ligera y elegante para sustituir a nuestros viejos alerts.

Además permite personalizar los textos y amplía alguna funcionalidad como podemos ver:

Alternativa al alert de javascript

Además, podemos fácilmente sobrecargar la función alert() para que al implementar ‘apprise’ no tengamos que ir cambiando los viejos alerts uno a uno, e incluso los podamos seguir usando.

if(document.getElementById) {

    window.alert = function(txt) {

        apprise(txt);

    }

}

Pues nada.

Esperamos que os guste y que os sirva.

Happy codding….

Publicado por: 9

Activar una opción de un menú principal cuando navegamos por un submenú

En muchos CMS’s nos pasa que cuando creamos un menú con un enlace a una sección, se active correctamente cuando estamos justo en esa página, pero pieda la clase css que lo marca como activo en cuanto navegamos por las páginas hijas.

Pueden haber distintas soluciones dependiendo del cms que estemos utilizando y de la arquitectura de las urls, pero… si podemos detectar un trozo de nuestra url que no cambia cuando navegamos por la sección, y nunca se encuentra cuando navegamos por el resto, como por ejemplo ‘/blog/’, podemos hacer una ñapa por jquery para que se active la opción de menú poniendo la clase css que corresponda.

El código sería algo como:

<script type="text/javascript">

var sUrl = document.location.href;

if (sUrl.indexOf('/blog/') > 0) {

    jQuery("ul.menu > li > a > span:contains('Blog')").parent().parent().addClass('active current');

}

</script>

Lo que hace es detectar que la url contiene la cadena de texto que identifica que estamos navegando por nuestra sección, y coge el elemento de esa opción del menú por jquery, y le pone al elemento que corresponde la clase css que corresponde.

Si esto os pasa usando Joomla! y con url’s amigables, este plugin ‘Active Parent Menu‘ que hemos desarrollado os puede servir de ayuda:

descargar

Publicado por: 0

Problema de múltiples llamadas ajax en el FullCalendar

Vaya! Otro problema de estos que cuestan resolver y que gustan de compartir con la gente…
Resulta que usando el FullCalendar, nuestra aplicación empezaba a realizar más de una llamada ajax cada vez que pulsabamos un botón del calendario.

Pues el problema estaba básicamente en que cuando recargamos el calendario segun ciertas acciones del usuario, lo haciemos de la siguiente forma:

$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', my_url);

Y nada… Resulta que de esta manera, se iban creando ‘event sources‘ en el calendario y FullCalendar no tiene una forma de hacer limpieza de estos de forma sencilla.

Menos mal que gracias a este hilo de google code, encontramos esta faena hecha.

Sólo tenemos que abrir nuestro fullcalendar.js (actualmente versión 1.4.11) e irnos al apartado de EventManager y añadir:

t.removeEventSources = removeEventSources;
function removeEventSources() {
   sources = [];
   // remove all client events from all sources
   cache = [];
   reportEvents(cache);
}

Ahora ya si que podemos recargar el calendario correctamente:

$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('removeEventSources');
$('#calendar').fullCalendar('addEventSource', my_url);

Bueno. Espero que os ayude…

Publicado por: 5