Category Archives: javascript

Optimizar tiempo de carga web con imágenes lazy

Partimos de una página que “pesa” 23mb (sí, tiene imágenes grandes muy bonitas) y las carga todas normalmente. El resultado es que tarda más de 1 minuto en poder navegar

Si utilizamos el plugin de jquery jQuery.Lazy, y configuramos las imagenes como lazy:

Cargando por defecto una imagen pequeña de carga, que ayuda a saber que la imagen se está procesando

Y por otro lado cambiamos el css para en lugar de poner la imagen de fondo directamente

Por codigo javacript que cambia la propiedad

Tenemos como resultado

Lo que mejora la carga de la web en mas del 75%

El resultado se puede ver en:
http://sociedadhistorica.com/indexVACIO.php
Y la pagina anterior al cambio en:
http://sociedadhistorica.com/indexOLD.php
Actualmente utiliza otro sistema, en lugar de cargar la imagen de “cargando” en cada una de ellas, se ha generado una imagen “lazy” con una calidad del 10%, con la consiguiente reducción de tamaño.
Por defecto carga esa imagen y por detras la imagen con calidad óptima, con ello se consigue una pequeña penalización con respecto a la version anterior, pero se obtiene una mejor sensación al tener la pagina con todas las imagenes, mientras se cargan las de alta calidad.
http://sociedadhistorica.com

Mostrar placeholder siempre en input HTML

El atributo placeholder de un input se muestra mientras no tiene valor pero luego desaparece.
La idea es mostrar ese contenido en la parte inferior derecha de la caja de texto siempre que tenga un valor.
Asi para una caja como:

Cuando ponemos el valor el placeholder pasa a estar en la parte inferior

El código necesario está en github :

Y se puede ver funcionando en el siguiente enlace

Para ello hay que incluir la libreria jplaceholder.js ( es necesario el uso de JQUERY )

Y posteriormente ejecutar el codigo:

$('input').jPlaceHolderEmpty();

verificar un formulario con verify.notify de manera manual

Si tenemos un formulario y queremos evaluarlo antes de hacer el submit, necesitamos llamar a validate

<script>
function callback(res){
	if (res){
		document.getElementById('formularioquequieroenviar').submit();
	}
}
function comprobar(){
	$('#formularioquequieroenviar').validate(callback);
								
}
</script>
<form id="formularioquequieroenviar" action="xxx.php" method="post">
<input id="numero" name="numero" type="text" placeholder="numero" data-validate="required" />
<input type="button" value="Comprobar" />
</form>

El resultado del callback será el que determine si se hace el submit o no.

Jugando con imagenes en jquery (añadir texto y reemplazar texto )

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í

xpath

Partimos del siguiente xml:

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>

<book category="cooking">
  <title lang="en">Everyday Italian</title>
  <author>Giada De Laurentiis</author>
  <year>2005</year>
  <price>30.00</price>
</book>

<book category="children">
  <title lang="en">Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</price>
</book>

<book category="web">
  <title lang="en">XQuery Kick Start</title>
  <author>James McGovern</author>
  <author>Per Bothner</author>
  <author>Kurt Cagle</author>
  <author>James Linn</author>
  <author>Vaidyanathan Nagarajan</author>
  <year>2003</year>
  <price>49.99</price>
</book>

<book category="web">
  <title lang="en">Learning XML</title>
  <author>Erik T. Ray</author>
  <year>2003</year>
  <price>39.95</price>
</book>

</bookstore>

 

y trabajamos con javascript para utilizar xpath y ver los resultados

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<p id="resultado"></p>

<script>




var text = "<bookstore><book category='cooking'>  <title lang='en'>Everyday Italian</title>  <author>Giada De Laurentiis</author>  <year>2005</year>  <price>30.00</price></book><book category='children'>  <title lang='en'>Harry Potter</title>  <author>J K. Rowling</author>  <year>2005</year>  <price>29.99</price></book><book category='web'>  <title lang='en'>XQuery Kick Start</title>  <author>James McGovern</author>  <author>Per Bothner</author>  <author>Kurt Cagle</author>  <author>James Linn</author>  <author>Vaidyanathan Nagarajan</author>  <year>2003</year>  <price>49.99</price></book><book category='web'>  <title lang='en'>Learning XML</title>  <author>Erik T. Ray</author>  <year>2003</year>  <price>39.95</price></book></bookstore>";

path = "/bookstore/book/author";
var parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
 showResult(xmlDoc,path);
 showResult(xmlDoc,"//title");
 showResult(xmlDoc,"//book/author[1]");
 showResult(xmlDoc,"//book[@category=\"web\"]/title");

function showResult(xml,path) {
    var txt = "";
    
    if (xml.evaluate) {
        var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
        var result = nodes.iterateNext();
        while (result) {
            txt += result.childNodes[0].nodeValue + "<br>";
            result = nodes.iterateNext();
        } 
    // Code For Internet Explorer
    } else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
        xml.setProperty("SelectionLanguage", "XPath");
        nodes = xml.selectNodes(path);
        for (i = 0; i < nodes.length; i++) {
            txt += nodes[i].childNodes[0].nodeValue + "<br>";
        }
    }
    document.getElementById('resultado').innerHTML += "<strong>"+path+"</strong><br/>"+txt+"<br>";
}
</script>

</body>
</html>

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í

Añadir contador de caracteres restantes a caja de texto

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('<p id="'+nombrecajalimite+'" class="limit"></p>');
}
cajalimite = $('#'+nombrecajalimite);
cajalimite.text('' + maxLength + '/' + (maxLength - charCount));

});
};


$( "<style>.limit { float: right; clear: both; margin-bottom: 10px; font: 400 0.688em/1.38 'Roboto'; text-align: right; color: #777777;}</style>" ).appendTo( "head" )



}(jQuery));

Con esto lo único que tenemos que hacer es añadir una clase a nuestra caja de texto:

<div class=" clearfix">
<label class="_text">Caja de texto con maxlength = 50</label>
<input id="nickname" class="cuentacaracteres _textfield" size="32" maxlength="50" placeholder="counter.js">
</div>

Y añadir al final del documento la linea que lo enlaza:

<script>

$(document).ready(function (){
'use strict';

// works on one field
$('.cuentacaracteres').countChar();
});
</script>

Ordenar columnas datatable jquery

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.

 

Usar verify.js para validar un formulario usando AJAX

El plugin verify.js nos permite validar un formulario rápidamente, pero funciona cuando se envía el formulario con el botón submit.

Si el formulario lo queremos utilizar mediante ajax no se dispara el evento.

campoobligatorio

Para ellos vamos a utilizar el evento beforeSubmit

<form id="formulario1" action="destiny.php" method="POST" name="formulario1">
<input id="field" class="form-control" name="field" type="text" value="" placeholder="" data-validate="required" /> 
<input type="submit" onclick="function_validate_form()"/>
</form>
<script>
function function_validate_form(){
    $('#formulario1').verify({
    'beforeSubmit': function(form, result) {
    if (result) {
        // Since the form is valid, submit form via AJAX.
      alert('OK, send ajax');
      send_ajax();
    }else{
        //do nothing
    }

    // Form is either invalid or was already submitted, return `false` to tell verify.js to not submit the form.
    return false; 
}
});
}
function send_ajax(){
var formData = $("#formulario1").serializeArray(); 
var URL = $("#formulario1").attr("action"); 
$.post(URL, formData, function(data) { console.log(data); },"json") .fail(function(jqXHR, textStatus, errorThrown) { alert( "error ajax" ); });
}
</script>
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="plugins/jQueryUI/jquery-ui.min.js"></script>
<script src="plugins/verify.notify.min.js"></script>

Detectar tecla mayusculas pulsada al hacer click en un enlace

Si queremos que al pulsar en un elemento se comporte de manera distinta si tiene la tacla mayusculas pulsada lo podemos conseguir con Javascript:

<html>
<head>

<script>
var may;
function estaPulsadoShift(event){
if (event.shiftKey==1)
    may=true;
else
   may=false;
}
function prueba(){
	if (may){
		window.location="https://www.google.es/?gws_rd=ssl#q=pulsado";
	}else{
		window.location="https://www.google.es/?gws_rd=ssl#q=no+pulsado";
		
	}
	
}
</script>
</head>
<body onmousedown="estaPulsadoShift(event);">
	Si quieres que se comporte distinto manten pulsado "Mayusculas"
	<input type="button" onclick="prueba()" value="Pulsame">

</body>
</html>

Ejemplo funcinando https://jsfiddle.net/Lu252r5z/