anotaciones que no quiero recordar, ni olvidar

me

JavaScript/Jquery

Web responsive no se adapta al girar el móvil, o como recargar estilos al girar la pantalla

Ratio: 4 / 5

Iniciar activoIniciar activoIniciar activoIniciar activoInicio inactivo

Con Jquery añadiendo esto para volver a llamar al css cuando se gira el smartphone:

Mostrar/Ocultar código jquery

Ver código
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

Iniciar activoIniciar activoIniciar activoIniciar activoIniciar activo

Mostrar/Ocultar código jquery

Ver código
$(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=123

Como centrar una imagen verticalmente en un DIV con Javascript/JQuery

Ratio: 0 / 5

Inicio inactivoInicio inactivoInicio inactivoInicio inactivoInicio inactivo

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

Ver código
<div class="contenedor">
<img src="imagen.png" class="imagen" />
</div>

Mostrar/Ocultar código javascript
Ver código
 
 
 
$(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

Iniciar activoIniciar activoIniciar activoIniciar activoIniciar activo

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.