Archivos de la categoría jQuery

jSquares

jSquares – Una imagen cuadriculada con texto

jSquares

jSquares es un plugin de jQuery que aparece una imagen y una descripción superpuesta sobre la imagen.

Se pueden configurar varios parámetros como por ejemplo, tamaño de los subtítulos, la opacidad de las imágenes, la velocidad de reproducción aleatoria, etc

Funciona en IE6 +, FF 3 +, Safari 3 + y Opera 10.

Link blog: jSquares

Demo: http://boedesign.com/demos/jsquares/

Licencia: Licencia MIT, GPL

Share

Cambiar fuente de tu página web con Cufon

Si estas harto de que tu web siempre tenga la misma letra que el resto de webs, se ha desarrollado hace ya un tiempo con un script llamado Cufon.

Ventajas:

Tiene varias ventajas como:

  • Los usuarios de tu web no tienen porque tener instalada la fuente en cuestión
  • Es fácil de instalar y utilizar
  • Totalmente valida para los buscadores

¿Como añadirlo a nuestra web?

Ahora os preguntareis, como instalo esto en mi web.

Lo primero es bajarte aquí la librería fuente y pones el siguiente código en el <head> para que todo marche sobre ruedas.

<script src="cufon-yui.js" type="text/javascript"></script>

Como no podemos usar nuestras fuentes TTF que tenemos instalado en nuestro sistema operativo, debemos convertirla a un formato especial desde la propia página de cufon usando su conversor automático nos generará un fichero .js de deberemos añadir también a nuestro:

<script src="Myriad.font.js" type=”text/javascript”></script>

Por último, deberemos indicarle que etiquetas html queremos reemplazar las nuevas letras, se aconseja siempre que sean los titulares por darle mas agilidad, pero bueno haya que haga cada uno lo que quiera.

<script type=”text/javascript”>
    Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>

En este ejemplo lo que se pretende es sustituir las etiquetas <h2> con la nueva fuente.

Algunos problemas encontrados:

Por ahora solo me he encontrado con un problema, y es que ni acentos, las ñ, etc.. (me refiero al español) a veces no se ven, esto es debido a que puede que tu fuente no soporta estos caracteres especiales. Esto no es un fallo del sistema, esto es que como casi todas las fuentes que existen en ingles son inglesas y contemplan estos caracteres.

Share

Como iluminar filas y columnas con jquery

Hace tiempo que tenia en mente trastear con un plugin basado en jquery llamado tablehover que mas o menos viene a decir iluminar tablas. Esta claro que hay muchas formulas de ilumuniar las tablas cuando pasamos el raton y que algun dia lo explicaremos todas las opciones que hay.

Lo que pasa es que aveces iluminar el horizontal no es suficiente, asi que en nuestro proyecto de DulcesFamosas este sistema dejo de ser util hace tiempo, debido a la gran cantidad de lineas de datos y columnas, para mostrar informacion en el panel de administracion y una solucion era reducir datos, pero la cantidad de datos que aun desprendia esa solucion no era suficiente, asi que hace tiempo que encontre este plugin para jquery y me parecio bastante util.

Ahora voy a intentar explicaros un poco de que va, ya que veo que la documentacion esta incompleta y para muchos al estar en ingles la web original del creador pues aumenta las dificultades de poder implementar esto en tu sitio web…

  1. Lo primero y muy importante, debes cargar la ultima version de jquery
  2. Segundo y menos importante, debes bajarte la ultima version que tenga el creador del plugin
  3. Despues mirar tambien las demo del plugin. Ver demo

Ahora despues de que ya hayais seguido estos pasos sencillos y habeis visto la demo yo he escogido para mi sistema el ejemplo 3, osea ilumina en vertical, ilumina en horizontal e ilumina la celda donde tienes ubicada el raton.

* Doy por supuesto, que en vuestro script ya teneis bien linkado los *.js de jquery y el plugin tablehover.

Antes de colocar la tabla y dentro de <body> para mostrar los elementos debemos poner esta sentencia javascript para declarar el plugin:

$(document).ready(function(){
    $('#large').tableHover({colClass: 'hover', cellClass: 'hovercell', clickClass: 'click', ignoreCols: [11]});
});

Como vereis hay varios elementos los elementos:

  • colClass: 'hover', cellClass: 'hovercell', clickClass: 'click'; contienen los nombres de las clases que deberemos editar en nuestra hora de estilos
  • el elemento ignoreCols: [1, 4] se lo he añadido yo para decirle que no ilumine la columna 1 y la 4
  • al principio tenemos $('#large'); pues esto no es mas que la id de la tabla donde vamos a aplicar el efecto 😉

Y ahora os pongo un ejemplo en codigo HTML de una tabla…

<table id="large">
    <thead>
        <tr>
            <th>ID</th>
            <th>Título</th>
            <th>Url</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ID</td>
            <td>Título</td>
            <td>Url</td>
            <td>Acciones</td>
        </tr>
    </tbody>
</table>

Donde las tablas iluminadas seran las que estan dentro de las etiquetas <tbody>.

Llegados a este punto estareis viendo vuestro script y direis que no funciona, mirareis si os falta codigo, si algo esta mal escrito, etc…

Bueno pues para los que habeis llegado hasta aqui, os dejo la solucion… es que os falta editar vuestra hoja de estilos 😉

td.click, th.click{
    background-color: #bbb;
}
td.hover, tr.hover{
    background-color: #69f;
}
th.hover, tfoot td.hover{
    background-color: ivory;
}
td.hovercell, th.hovercell{
    background-color: #abc;
}
td.hoverrow, th.hoverrow{
    background-color: #6df;
}

Al final de la pelicula os deberia de quedar algo como esto:

Espero que os haya servido de ayuda 🙂

Share