JavaScript/Jquery
Web responsive no se adapta al girar el móvil, o como recargar estilos al girar la pantalla
Ratio: 4 / 5
Con Jquery añadiendo esto para volver a llamar al css cuando se gira el smartphone:
window.addEventListener("orientationchange", function() {
// estp genera lentitud lo descarto: location.reload();
$('head').append('<link rel="stylesheet" href="ruta_de_mi_css.css" type="text/css" />');
}, false);Saber la URL y el dominio actual con Jquery
Ratio: 5 / 5
$(location).attr('host'); www.test.com:8082
$(location).attr('hostname'); www.test.com
$(location).attr('port'); 8082
$(location).attr('protocol'); http
$(location).attr('pathname'); index.php
$(location).attr('href'); http://www.test.com:8082/index.php#tab2
$(location).attr('hash'); #tab2
$(location).attr('search'); ?foo=123Como centrar una imagen verticalmente en un DIV con Javascript/JQuery
Ratio: 0 / 5
Algo recurrente que todo diseñador web necesita en algún momento es el poder centrar una imagen verticalmente. A lo largo de los años se han propuesto varias soluciones que, por un motivo u otro no funcionaban correctamente. Ya que por CSS nos quedamos cortos para centrar la imagen si no tiene una altura fija, vamos a hacerlo ayudándonos de Javascript / JQuery.
Mostrar/Ocultar código php<div class="contenedor">
<img src="imagen.png" class="imagen" />
</div>
$(window).load(function(){ //Se espera a que se cargue la página antes de ajustar la posicion. Si no no encontrará la imagen.
var altura_div = $(".contenedor").css("height"); //La propiedad height debe estar definida en el css o en el código, sino no funcionará
altura_div = altura_div.slice(0, -2); //Quitamos la cadena "px".
$(".imagen").each(function() { //para cada imagen, si sólo será 1 imagen no es necesario el bucle each
var altura_img = $(this).attr("height"); //Altura de la imagen
var resto_altura = Math.round((altura_div - altura_img) / 2); //Restamos la altura del div con la altura de la imagen, la dividimos entre dos y la redondeamos
$(this).css("position" , "relative").css("top" , resto_altura); //Centramos la imagen relativamente con la altura que acabamos de calcular
$(".contenedor").css("visibility","visible"); //Como se ve como se modifica la posición de la imagen hemos optado por definir el DIV en el CSS como invisible, y aquí lo mostramos, una vez que hemos colocado la imagen en su sitio.
});
})
Como pasar parámetros a una función dentro de un SetTimeout
Ratio: 5 / 5
Un recurso muy utilizado en javascript es ejecutar una función con un retardo mediante la funcion setTimeout. En ocasiones necesitamos pasar parámetros a las funciones que llamamos, pero al hacerlo en este caso javascript nos devuelve un error.
Si tenemos la función incrementarVar(param1, param2) y queremos llamarla dentro de un timeOut definiremos una función anónima, y dentro de ella llamaremos a la función. Veamos un ejemplo erróneo y uno correcto:
setTimeout( incrementarVar ( param1, param2 ) ); ERROR
setTimeout( function () { incrementarVar ( param1, param2 ); }, 1000 ); CORRECTO
Esta misma solución nos servirá también con la funció setInterval.
