Infoadis
php,ajax,mysql,css,html,software
Como iluminar filas y columnas con jquery
23 may
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…
- Lo primero y muy importante, debes cargar la ultima version de jquery
- Segundo y menos importante, debes bajarte la ultima version que tenga el creador del plugin
- 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 
Firefox 3 RC1 para todos los impacientes
21 may
Como ya sabreis Mozilla saco hace unas semanas la primera candidata seria de Firefox 3.
Se comenta entre los cambios que habran es la de una buena gestion de memoria, mas seguro, cambio en la gestion de favoritos, la inclusion de tags y muchas mas cosas que aun faltan por diseñar o mejor dicho, decidir como colocarlas.
Yo no se vosotros, pero yo prefiero ver las imagenes que circulan por internet y mientras seguir con mi Firefox 2 y todos los plugins que son muy utiles
Link: Descargar Firefox 3 RC1
Redimensionar imagenes con css
19 may
Para resumir rapidamente su funcionamiento es ocultar una parte de la miniatura de la imagen ya redimensionada anteriormente y la mostramos en su totalidad cuando pasamos el raton por encima o mas conocido como el mouseover.
Aunque la gracia de esto ya no es solo que puede estrechar una imagen y si pasa el raton se hace grande, esta claro que es una de las opciones.. pero pensando en algunas utilidades mas.. nos podria servir para hacer imagenes cuadraditas que estan ahora tan de moda.
Para una web de contactos, galeria de imagenes, etc.. y no podemos utilizar el ImageMagic, como la inmensa mayoria utiliza las librerias GD para el tratamiento de imagenes, es una forma de redimensionar una imagen y como la redimension no es cuadrada (a no ser que la imagen original si lo fuese) si le quitamos la opcion de a:hover se nos abre un mundo nuevo en la redimension, esta claro que es un parche, pero quien no quiera calentarse la cabeza esto es una solucion rapida y efectiva a mi entender.
ul#thumbs a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
Link: Create Resizing Thumbnails Using Overflow Property y aqui tambien os dejo una demo del sistema en cuestion
Alli encontrareis la pagina del creador en ingles con todo muy detallado Espero que os haya servido de ayuda!
Infoadis tiene blog!
18 may
Con el animo de informar a todos nuestros clientes, hemos creado esta pagina presencial donde a parte de mostrar todos nuestros proyectos, queremos dar un soporte añadido a la gran comunidad que es esta del desarrollo web en internet.
Sin mas dilacion iremos poco a poco conforme nuestros clientes nos den permisos para publicar nuestros trabajos, pensamientos y demas conceptos erroneos que al navegar vemos por internet y nos gustaria dejar constancia de nuestro punto de vista y nuestro conocimiento para todos las personas iniciadas o no iniciadas en esta complicada red llamada internet.
