javascript

Google map no carga adecuadamente tras usar display: none

Si intentamos mostrar un mapa de google que previamente tenemos oculto con display: none nos encontraremos que se encuentra desplazado con el centro del mapa en el borde superior izquierdo en lugar de en el centro de la pantalla. Esto se debe a que teniendo display: none el javascript de google asume que el tamaño del div es cero y lo situa en el centro. Para evitar esto debemos cargar el iframe en el div dinámicamente esto es cuando hacemos click, para ello podemos usar el siguiente código:

<script>
function loadMapa() {
document.getElementById('mapa').innerHTML = '###CODIGO DE IFRAME###';
}
</script>
<a href="#" onclick="javascript:loadMapa()">Ver mapa</a>
Estándar
javascript

Toggle

Hoy comentaré como hacer la típica función toggle para hacer que aparezca y desaparezca un div de varias maneras distintas:

Usando Javascript plano

Esta es la mejor opción si no queremos estar descargándonos el jquery ó simplemente no queremos usarlo.


function toggle-js(div){
var div = document.getElementById(div)
if (div.style.display == 'none') {
div.style.display = 'block'
} else {
div.style.display = 'none'
}
}

Usando Jquery

Eso mismo que hemos hecho podemos hacerlo usando selectores jquery


function toggleJquery() {
if ($('#div').css('display') == 'none') {
$('#div').css('display', 'block');
} else {
$('#div').css('display', 'none');
}
}

Aunque si queremos usar jquery lo más cómodo es usar la función toggle que ya viene predefinida. Podemos utilizarla de la siguiente manera:

$('#div').toggle();

Merece la pena echarle un vistazo a la documentación de la función toggle, ya que esta función es muy potente y presenta muchas opciones.

Estándar