Bufa Webmaster

Añadir una clase css a un elemento

Una forma muy limpio para cambiar un elemento de apariencia es agregar una clase css, en vez de añadir los estilos en línea. Usando jQuery, esto es bastante fácil de hacer:

$('#midiv').addClass('miclase');

Quitar una clase css a un elemento

Es genial ser capaz de añadir algunas clases CSS, pero también tenemos que saber cómo eliminar las clases no deseados. La siguiente línea de código hará que:

$('#midiv').removeClass('miclase');

Comprar si un elemento tiene una determinada clase css

Si su aplicación o sitio suele agregar y quitar las clases a un elemento particular, puede ser muy útil para poder comprobar si un elemento tiene una cierta clase CSS

$(id).hasClass('miclase')

Cambiar hoja de estilos con jQuery

Como vimos en los ejemplos anteriores, agregando o quitando los estilos CSS a un elemento es muy sencilla, utilizando jQuery. Pero lo que si quiere eliminar completamente el documento de archivo css y adjuntar una hoja de estilo nuevo? Una buena noticia, es muy simple, así, como se muestra en el ejemplo siguiente:

$('link[media='screen']').attr('href', 'otroestilo.css');

Añadir código html a un elemento

Cuando tenga que añadir algo de HTML a un elemento, el método append () es un protector de la vida:

$('#midiv').append('voy a añadir todo este <strong>texto</strong> html');

Comprobar si existe un elemento

Cuando se trabaja con JavaScript, con frecuencia necesitamos para comprobar si un elemento existe o no. Usando jQuery y la propiedad length, es muy simple de hacer: Si la longitud == 0, no se utilizan elementos de la página.

if ($('img').length) {
    log('Si hay imagenes');
} else {
    log('No hay imagenes');
}

Obtener el elemento primario de un elemento

Al trabajar con el DOM, es posible que necesite saber qué elemento es el padre directo de otro elemento. El más cercano () método le permitirá saber:

var id = $("button").closest("div").attr("id");

Obtener los hermanos de un elemento

la función siblings() es una herramienta muy útil para conseguir los hermanos de un elemento. Como se muestra a continuación, utilizando este método es muy simple:

$("div").siblings()

Quitar una opción de una lista de selección

Cuando se trabaja con listas de selección, es posible que desee actualizar el contenido de acuerdo con las acciones del usuario. Para eliminar una opción de una lista de selección, el siguiente código hará el truco:

$("#miselect option[value='2']").remove();

Accede a la opción seleccionada como texto

Muy útil cuando se necesita para comprobar rápidamente lo que un visitante seleccionados de su lista de selección.

$('#miselect :selected').text();

Aplicar un “efecto cebra” en las tablas

Cuando utilice tablas, es una buena idea, para facilitar la lectura, para dar un estilo diferente a una línea de cada dos. Usando jQuery, esto se puede hacer fácilmente, sin ningún tipo de código HTML adicional.

$("tr:odd").addClass("odd");

Contar los hijos de un elemento

Si deseas contar cuántos elementos son hijos de otro determinado elemento:

$("#midiv > div").length;

Probablemente alguna vez en nuestra web tengamos una imagen que este alojada en otro servidor, y es muy probable que algunas de estas imagenes dejen ya de existir por cambio de ubicación, hayan sido borradas, etc… Para evitarnos la típica aspa roja de que no existe esa imagen… tenemos una función muy sencilla con jQuery, que nos elimina todas esas imágenes que no pueden ser mostradas correctamente.

1
2
3

$('img').error(function() {
        $(this).remove();
});

Función muy completa para cuando queremos personalizar un poco el listado de post del archive.php o index.php de nuestro wordpress, y que debemos incluir en nuestro functions.php. Con ella podemos personalizar el número de caracteres por post, así como el texto del link (‘Leer mas…, Read more, Seguir, etc…’)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

function wp_limit_post($max_char, $more_link_text = '[...]',$notagp = false, $stripteaser = 0, $more_file = '') {
    $content = get_the_content($more_link_text, $stripteaser, $more_file);
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]>', $content);
    $content = strip_tags($content);
 
   if (strlen($_GET['p']) > 0) {
      if($notagp) {
      echo substr($content,0,$max_char);
      }
      else {
      echo '<p>';
      echo substr($content,0,$max_char);
      echo "</p>";
      }
   }
   else if ((strlen($content)>$max_char) && ($espacio = strpos($content, " ", $max_char ))) {
        $content = substr($content, 0, $espacio);
        $content = $content;
        if($notagp) {
        echo substr($content,0,$max_char);
        echo $more_link_text;
        }
        else {
        echo '<p>';
        echo substr($content,0,$max_char);
        echo $more_link_text;
        echo "</p>";
        }
   }
   else {
      if($notagp) {
      echo substr($content,0,$max_char);
      }
      else {
      echo '<p>';
      echo substr($content,0,$max_char);
      echo "</p>";
      }
   }
}

1
2

// Modo de uso:
wp_limit_post(180,'...',true);

Hoy os muestro otro plugin de jquery, Uniform, con el cual podemos cambiar la visualización a los elementos (Selects, Checkboxes, Radio buttons, File Upload inputs). Esta validado para los principales navegadores web (Safari 3+, Firefox 3+, IE7+,  Chrome,  jQuery 1.3+,  Opera 10+,  IE6) y diseñar los elementos de los formularios a nuestro antojo.

También podemos aportar nuestro granito de arena creando diferentes skins muy facilmente, ya que el css de uniform se basa solo en una imágen.

http://pixelmatrixdesign.com/uniform/

Averiguar la extensión de un archivo con php es una tarea muy sencilla utilizando la función explode. Veámos un ejemplo que podemos utilizar a la hora de validar formularios. Vamos a crear una función para usarla más a menudo.

1
2
3
4
5
6
7
8

function extension($archivo){ 
   $partes = explode(".", $archivo); 
   $extension = end($partes); 
   return $extension;
}
 
// Modo de uso
extension("thenumberofthebeast.mp3");

Todos alguna vez hemos tenido que centrar un div horizontalmente y verticalmente, normalmente hemos empleado css para ello. Vamos a conocer otro método esta vez en javascript con jquery utilizando una simple función en la que bastará con pasarle la clase o id del div a centrar en la pantalla.

Con la función $(window).width() y $(window).height() obtenemos el ancho y altura de la ventana abierta.
Con la función outerWidth() y outerHeight() obtenemos el ancho y altura del div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(document).ready(function(){
 
     $(window).resize(function(){
 
          // aquí le pasamos la clase o id de nuestro div a centrar (en este caso "caja")
          $('.caja').css({
               position:'absolute',
               left: ($(window).width() - $('.caja').outerWidth())/2,
               top: ($(window).height() - $('.caja').outerHeight())/2
          });
 
	});
 
// Ejecutamos la función
$(window).resize();
 
});

Modo de uso:

1
2
3

<div class="caja"> 
<p>Div centrado utilizando jquery</p> 
</div>

Ya conocemos por medio de Matt Cutts que uno de los 200 factores que afectan al posicionamiento web es la velocidad de carga de la página. Las metatags ya pasaron a la historia y deberíamos perder más en el tiempo en otros factores seo como programar y maquetar nuestras web de manera más limpia y sencilla para los robots de búsqueda. Pingdom es una herramienta online que nos permite conocer el tiempo de carga de nuestra web, y tamaño de carga mostrandonos (kb) todos los archivos (css, js, xml…) que componen la página.

Hay una página web html5test, que se encarga de verificar con diversas puntuaciones (160 puntos) si nuestro navegador web de Internet está preparado para soportar esta nueva tecnología (html5), indicándonos sobre las características actuales que si puede leer y las que aún no.

El creador de www.elegantthemes.com ha compartido una nueva colección excelente de iconos de la web social para poder usarlos sin ningún tipo de restricción en cualquier tipo de trabajo.

El paquete incluye 42 iconos de 64×64 píxeles en PNG y PSD.

[descargar]

En muchos casos nos gustaría utilizar un diseño diferente dependiendo de la categoría a la que pertenezca el post. Pues bien, editando un poco el archivo “single.php” de wordpress podemos utilizar diferentes maquetaciones para cada single.

Dos modos de uso:

1
2
3
4
5
6
7
8

// Filtrando por id de la categoría
if (in_category(1)) { // Si el post pertenece a la categoría con id = 1
    include(TEMPLATEPATH . '/single1.php');
} elseif (in_category(2)) { // Si el post pertenece a la categoría con id = 2
    include(TEMPLATEPATH . '/single2.php');
} else { // Sino, cargo otro single por defecto
    include(TEMPLATEPATH . '/single3.php');
}

1
2
3
4
5
6
7
8

// Filtrando por el permalink de la categoría
if (in_category('noticias')) { // Si el post pertenece a la categoría con permalink 'noticias'
    include(TEMPLATEPATH . '/single1.php');
} elseif (in_category('fotos')) { // Si el post pertenece a la categoría con permalink 'fotos'
    include(TEMPLATEPATH . '/single2.php');
} else { // Sino, cargo otro single por defecto
    include(TEMPLATEPATH . '/single3.php');
}