Añadir automaticamente una leyenda a una imagen con su texto alternativo o poder cambiar las imagenes por un div con el mismo tamaño que la imagen y como contenido el texto alternativo.
Para ello nos hace falta JQuery y estilo css
Dada una imagen
Lo que obtenemos es la misma imagen pero con una leyenda inferior
La otra variante oculta la imagen y en su lugar muestra un hueco del mismo tamaño pero con el texto alternativo como contenido.
Everyday ItalianGiada De Laurentiis200530.00Harry PotterJ K. Rowling200529.99XQuery Kick StartJames McGovernPer BothnerKurt CagleJames LinnVaidyanathan Nagarajan200349.99Learning XMLErik T. Ray200339.95
y trabajamos con javascript para utilizar xpath y ver los resultados
Y vemos como resultado:
/bookstore/book/author
Giada De Laurentiis
J K. Rowling
James McGovern
Per Bothner
Kurt Cagle
James Linn
Vaidyanathan Nagarajan
Erik T. Ray
//title
Everyday Italian
Harry Potter
XQuery Kick Start
Learning XML
//book/author[1]
Giada De Laurentiis
J K. Rowling
James McGovern
Erik T. Ray
//book[@category="web"]/title
XQuery Kick Start
Learning XML
La idea es teniendo una caja de texto o un elemento input añadir un contador de los caracteres que faltan y que se vaya actualizando a medida que escribimos.
para ello utilizamos JQuery y la siguiente libreria:
(function($) {
'use strict';
$.fn.countChar = function() {
return this.each(function(i, element) {
$(element).keyup(function updateCharCounter() {
var $me = $(this);
var maxLength = parseInt($me.attr('maxlength'), 10);
var charCount = $me.val().length;
var nombrecajalimite=$me.prop('id')+"_limit";
var cajalimite = $('#'+nombrecajalimite);
cajalimite.text('' + maxLength + '/' + (maxLength - charCount));
});
var $me = $(this),
maxLength = parseInt($me.attr('maxlength'), 10),
charCount = $me.val().length;
var nombrecajalimite=$me.prop('id')+"_limit";
var cajalimite = $('#'+nombrecajalimite);
if (cajalimite){
$me.after('');
}
cajalimite = $('#'+nombrecajalimite);
cajalimite.text('' + maxLength + '/' + (maxLength - charCount));
});
};
$( "" ).appendTo( "head" )
}(jQuery));
Con esto lo único que tenemos que hacer es añadir una clase a nuestra caja de texto:
Y añadir al final del documento la linea que lo enlaza:
Hay determinadas columnas que no se ordenan bien de manera nativa utilizando jquery.datatable.js
Por ejemplo las fechas
Las fechas en español no se ordenan bien, para ello tenemos que indicarle un valor con la fecha en formato americano de manera que no se vea pero que le sirva para ordenar:
Donde lo importante es poner un elemento <span style=»display:none»>valor util para ordenar</span> que en el caso de las fechas es con el formato americano.
Imaginemos que tenemos una tabla que tiene un evento click en el tr y dentro del tr una celda tiene un checkbox que tambien tiene un evento click
Si queremos que no se ejecute el click del tr tenemos que añadir el siguiente codigo:
event.stopPropagation();
Quedando el codigo:
Ya hemos deshabilitado el click del tr cuando se produce el click del checkbox