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.
El ejemplo completo se puede ver aquí
Partimos del siguiente xml:
Everyday Italian Giada De Laurentiis 2005 30.00 Harry Potter J K. Rowling 2005 29.99 XQuery Kick Start James McGovern Per Bothner Kurt Cagle James Linn Vaidyanathan Nagarajan 2003 49.99 Learning XML Erik T. Ray 2003 39.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
Se puede interactuar y probar desde la url: aquí
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.
Si queremos que al pulsar en un elemento se comporte de manera distinta si tiene la tacla mayusculas pulsada lo podemos conseguir con Javascript:
Si quieres que se comporte distinto manten pulsado "Mayusculas"
Ejemplo funcinando https://jsfiddle.net/Lu252r5z/
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
