Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema centrado mapa display none

 Estas en el tema de Problema centrado mapa display none en el foro de Frameworks JS en Foros del Web. Hola! Aprovecho para presentarme y dar las gracias a todo el mundo por este maravilloso oasis de ayuda. Tengo unos pocos conocimientos de html y ...
  #1 (permalink)  
Antiguo 05/02/2011, 20:47
 
Fecha de Ingreso: febrero-2011
Mensajes: 7
Antigüedad: 13 años, 2 meses
Puntos: 0
Problema centrado mapa display none
Hola! Aprovecho para presentarme y dar las gracias a todo el mundo por este maravilloso oasis de ayuda. Tengo unos pocos conocimientos de html y css, y menos aún de jquery. Intento aprender este mundo procurando no morir en el intento. Os pido ayuda en este caso después de días dándole vueltas

Tengo un problema al mostrar un div que contiene un mapa de google maps. Al mostrar el div por defecto, que se abre con un slide, no hay problema. Pero quiero que al cargar la página esté oculto, para lo que uso "display: none;" en el div que lo alberga. Esto provoca que al abrirse el div, el mapa no aparece centrado (según he leído pq google maps interpreta el display none como div sin tamaño y coloca el centro del mapa en la esquina superior izquierda). Adjunto el código.

Sin embargo, en el último código que adjunto sí que se carga correctamente el mapa pero sin el efecto slide que busco (ni tampoco ocultándolo pulsando el mismo enlace).

¿Alguna solución para mostrar el mapa centrado con efecto slide partiendo de un div oculto? Muchísimas gracias.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>mostrar ocultar div</title>
  6. <script type="text/javascript" src="jquery-1.4.4.js"></script>
  7. <script type="text/javascript">
  8. $(function()
  9. {
  10.  
  11. $("#mostrar").click(function(event) {
  12. event.preventDefault();
  13. $("#caja").slideToggle(1000);
  14. });
  15.  
  16. $("#caja a").click(function(event) {
  17. event.preventDefault();
  18. $("#caja").slideUp();
  19. });
  20. });
  21. </script>
  22. <style type="text/css">
  23. body {
  24.     font-family: Verdana, Arial, Helvetica, sans-serif;
  25.     font-size: 14px;
  26.     color: #FFFFFF;
  27. }
  28. a{
  29.     color:#000;
  30.     text-decoration:none;
  31. }
  32. #caja {
  33.     width:70%;
  34.     padding:5px;
  35.     display: none;
  36. }
  37. #mostrar{
  38.     display:block;
  39.     width:70%;
  40.     padding:5px;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <a href="#" id="mostrar">MOSTRAR OCULTAR DIV</a>
  46.  
  47. <div id="caja">
  48. <iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Puerta+del+Sol,+Madrid&amp;aq=3&amp;sll=40.396764,-3.713379&amp;sspn=8.59894,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=Puerta+del+Sol,+PLAZA+Puerta+DEL+SOL,+14,+28013+Madrid,+Comunidad+de+Madrid&amp;ll=40.422906,-3.703423&amp;spn=0.031364,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
  49. </div>
  50. </body>
  51. </html>


Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6. <script>
  7. function loadMap() {
  8. document.getElementById('map').innerHTML = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Puerta+del+Sol,+Madrid&amp;aq=3&amp;sll=40.396764,-3.713379&amp;sspn=8.59894,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=Puerta+del+Sol,+PLAZA+Puerta+DEL+SOL,+14,+28013+Madrid,+Comunidad+de+Madrid&amp;ll=40.422906,-3.703423&amp;spn=0.031364,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>';
  9. }
  10. </script>
  11. </head>
  12.  
  13. <body>
  14.  
  15. <a href="#" id="mostrar" onclick="javascript:loadMap()">Ver mapa</a>
  16. <div id="map"></div> 
  17. </body>
  18. </html>
  #2 (permalink)  
Antiguo 06/02/2011, 10:15
 
Fecha de Ingreso: febrero-2011
Mensajes: 33
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
Código: 
function loadMap() {

$('#map').slideUp();

document.getElementById('map').innerHTML = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Puerta+del+Sol,+Madrid&amp;aq=3&amp;sll=40.396764,-3.713379&amp;sspn=8.59894,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=Puerta+del+Sol,+PLAZA+Puerta+DEL+SOL,+14,+28013+Madrid,+Comunidad+de+Madrid&amp;ll=40.422906,-3.703423&amp;spn=0.031364,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>';

$('#map').slideDown(1000);
}
Escondes el div, cargas y haces slide.
Dependiendo si usas un background color o image, te recomiendo poner un div dentro de map p.e. caja y hacerselo a este, porque en el momento de esconder los backgrounds del div tambien se iran,

Espero que te sirva de ayuda
  #3 (permalink)  
Antiguo 06/02/2011, 11:55
 
Fecha de Ingreso: febrero-2011
Mensajes: 7
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
Un genio! Ahora sí que sale centrado. Muchas gracias. No tengo color de fondo en ese div, así que no pasa nada.

Lo que ocurre es algo que me temía, que se pierde la elegancia del efecto deslizamiento pq mientras se muestra la capa, se está cargando el mapa, y provoca que el slidedown vaya a saltos (máxime pq debajo hay más contenido al que empuja); no queda un movimiento suave como antes, que es lo que busco. Además, sólo querría que se cargase sólo una vez, no siempre que se pulse el botón de mostrar el mapa. Y tb pierdo la posibilidad de que se cierre con efecto slide pulsando el mismo enlace. Desde mi absoluto desconocimiento creo que tendría que ser algo parecido a lo siguiente:

1- Al cargarse la página, tendría que hacerlo tb el mapa (pero correctamente, es decir, centrado). Pero tendía que estar oculto o en su defecto que apareciera de forma imperceptible para que se cargue sin el display none. ¿?
2- Y luego, independientemente, con el mapa ya correctamente cargado y oculto, habilitar las funciones de ocultar/mostrar con efecto slide en el mismo botón, como ya viene en el primer código que puse.

¿Sería posible lo que digo o alguna otra solución? Muchas gracias.

Para
  #4 (permalink)  
Antiguo 06/02/2011, 12:09
 
Fecha de Ingreso: febrero-2011
Mensajes: 33
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
Cuando la pagina se carga, ocultamos el div.... (hacemos como), y cargamos el mapa y cuando este este cargado sacamos el boton de mostrar/ocultar (que deberia llevar un display:none para que salga cuando el mapa este listo)
Código: 
$(document).ready(function(){
$('#map').slideUp();

document.getElementById('map').innerHTML = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Puerta+del+Sol,+Madrid&amp;aq=3&amp;sll=40.396764,-3.713379&amp;sspn=8.59894,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=Puerta+del+Sol,+PLAZA+Puerta+DEL+SOL,+14,+28013+Madrid,+Comunidad+de+Madrid&amp;ll=40.422906,-3.703423&amp;spn=0.031364,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>';


$('#map').ready(function(){

$('#botonmostrarocultar').show();

});

});
Ahora la funcion del boton/link de mostrar/ocultar la pones en el onclick="mostrarocultar()" y fuera del document.ready para que no haya conflictos
Código: 
function mostrarocultar(){$('#map').slidetoggle;}
Creo que asi deberia funcionar, pero no estoy muy seguro del $('#map').ready() dentro del document.ready(). Ya me contaras
  #5 (permalink)  
Antiguo 07/02/2011, 08:53
 
Fecha de Ingreso: febrero-2011
Mensajes: 7
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
¡FUNCIONA! Luchando contra mi torpeza e ignorancia infinitas en estas lides, he fusionado tu última solución con el primer código que puse. Se muestra y oculta con movimiento slide suave a la par que elegante y el mapa aparece centrado con el bocadillo de la marca abierto.

He tenido que aplicarle unas milésimas de segundo para que apareciera centrado: con 0 milisegundos aparecía descentrado; con unos 400 aparece centrado y sin el bocadillo; y con unos 2500 ya aparece el bocadillo. Esto a efectos visuales da igual (salvo en mi IE7, pero no es tan grave) pq no hace falta esperar tanto tiempo para desplegarlo y que se muestre bien. En FF, Safari y Chrome de lujo.

Como sospechabas, el código $('#map').ready() dentro del document.ready() lo he suprimido pq funciona igual sin él.

Eternamente agradecido. Da gusto contar con estos foros y una gente tan solidaria. Adunto el código final:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>

<script>
$(document).ready(function(){
$('#mapa').slideUp(2500);

document.getElementById('mapa').innerHTML = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Puerta+del+Sol,+Madrid&amp;aq=3&amp;sll=40.396764,-3.713379&amp;sspn=8.59894,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=Puerta+del+Sol,+PLAZA+Puerta+DEL+SOL,+14,+28013+Madrid,+Comunidad+de+Madrid&amp;ll=40.422906,-3.703423&amp;spn=0.031364,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>';

$('#botonmostrarocultar').show(800);
});
</script>

<script type="text/javascript">
$(function() {
	$("#mostrar").click(function(event){
	event.preventDefault();
	$("#mapa").slideToggle(1500); });
	$("#mapa a").click(function(event) {
	event.preventDefault();
	$("#mapa").slideUp(); });
	}); 
    </script>
    
<style type="text/css">
<!--
body {
	background-color: #000;
	color: #FFF;
}
#botonmostrarocultar {
	display: none;
	color: #000;
	background-color: #FFC;
	width: 300px;
}
#texto {
	display: none;
}
-->
</style></head>

<body>
<div id="botonmostrarocultar"><a href="#" id="mostrar">Mostrar/Ocultar MAPA DIV</a></div>
<div id="mapa"></div> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
</body>
</html>
  #6 (permalink)  
Antiguo 07/02/2011, 08:57
 
Fecha de Ingreso: febrero-2011
Mensajes: 7
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
Una cosa más (pesado que es uno, lo siento): Para sacar partido a este efecto slide he observado que sólo se consigue cuando la capa a desplegar se encuentra en la parte superior de la página visible (como se ve en el código adjuntado antes), arriba en el navegador, para así poder observar cómo se despliega y empuja al contenido que tiene por debajo. Si la desplegamos estando situada la capa por la zona media de la pantalla o abajo, no queda efectista.

Para solucionarlo había pensado en un punto de anclaje. Al pulsar el botón de "mostrar/ocultar mapa", a parte de la función java ya vista, que fuese a un anclaje en la misma línea donde está situado, o cerca. Así automáticamente la página se sitúa correctamente en la parte superior de la ventana para observar como se merece el efecto. He intentado lo del ancla sin resultado (no sé si por ser incompatible con el java). Os pongo más contenido para que lo veáis mejor:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>

<script>
$(document).ready(function(){
$('#mapa').slideUp(2500);

document.getElementById('mapa').innerHTML = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Puerta+del+Sol,+Madrid&amp;aq=3&amp;sll=40.396764,-3.713379&amp;sspn=8.59894,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=Puerta+del+Sol,+PLAZA+Puerta+DEL+SOL,+14,+28013+Madrid,+Comunidad+de+Madrid&amp;ll=40.422906,-3.703423&amp;spn=0.031364,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>';

$('#botonmostrarocultar').show(800);
});
</script>

<script type="text/javascript">
$(function() {
	$("#mostrar").click(function(event){
	event.preventDefault();
	$("#mapa").slideToggle(1500); });
	$("#mapa a").click(function(event) {
	event.preventDefault();
	$("#mapa").slideUp(); });
	}); 
    </script>
    
<style type="text/css">
<!--
body {
	background-color: #000;
	color: #FFF;
}
#botonmostrarocultar {
	display: none;
	color: #000;
	background-color: #FFC;
	width: 300px;
}
#texto {
	display: none;
}
-->
</style></head>

<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptoshymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<br />

<a name="Anclaje" id="Anclaje">Anclaje</a>
<div id="botonmostrarocultar"><a href="#Anclaje" id="mostrar">Mostrar/Ocultar MAPA DIV</a></div>
<div id="mapa"></div> 

<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
</body>
</html>
Mil gracias.
  #7 (permalink)  
Antiguo 07/02/2011, 21:27
 
Fecha de Ingreso: febrero-2011
Mensajes: 33
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
en el evento click añade $('#mapa').focus(); antes del slide toggle, asi aplica el foco en el div en concreto antes de que se mueva

focus() es una funcion de javascript, a lo mejor no funciona con jquery, pero lo dudo, sino el getelement de toda la vida
  #8 (permalink)  
Antiguo 08/02/2011, 08:15
 
Fecha de Ingreso: febrero-2011
Mensajes: 7
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
No me sale, lo estaré escribiendo mal. A ver si me podéis echar una última mano, que con esto ya termino. La acción del onfocus o la función que sea, tiene que actuar cdo se hace click en "mostrar". Pongo el código un poco más limpio:
Código: 
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script>
$(document).ready(function(){
$('#mapa').slideUp(2500);
document.getElementById('mapa').innerHTML = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Puerta+del+Sol,+Madrid&amp;aq=3&amp;sll=40.396764,-3.713379&amp;sspn=8.59894,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=Puerta+del+Sol,+PLAZA+Puerta+DEL+SOL,+14,+28013+Madrid,+Comunidad+de+Madrid&amp;ll=40.422906,-3.703423&amp;spn=0.031364,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>';
$('#botonmostrarocultar').show(800);
});
</script>

<script type="text/javascript">
$(function() {
	$("#mostrar").click(function(event){
	event.preventDefault();
	$("#mapa").slideToggle(1500); });
	}); 
    </script>
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
	background-color: #000;
	color: #FFF;
}
#botonmostrarocultar {
	display: none;
	color: #000;
	background-color: #FFC;
	width: 300px;
}
-->
</style></head>

<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptoshymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptoshymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<br />

<div id="botonmostrarocultar"><a href="#" id="mostrar">Mostrar/Ocultar MAPA DIV</a></div>
<div id="mapa"></div> 

<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
</body>
</html>
  #9 (permalink)  
Antiguo 08/02/2011, 10:32
 
Fecha de Ingreso: febrero-2011
Mensajes: 33
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
Código: 
<script type="text/javascript">
$(function() {
	$("#mostrar").click(function(event){
	event.preventDefault();
        $("#mapa").focus();
	$("#mapa").slideToggle(1500); });
	}); 
    </script>
asi no te funciona?
  #10 (permalink)  
Antiguo 08/02/2011, 11:54
 
Fecha de Ingreso: febrero-2011
Mensajes: 7
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
No, en ningún navegador. Se ejecuta como si no le hubiese añadido el focus. Si a ti te funciona no entiendo por qué a mí no, ya que el código completo es el posteado anteriormente y no tiene gran cosa a parte del otro código java que carga el mapa.
  #11 (permalink)  
Antiguo 08/02/2011, 19:40
 
Fecha de Ingreso: febrero-2011
Mensajes: 33
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
<div id="mapa" tabindex="2"></div>

y el codigo que te deje, ahora deberia funcionar, puedes ponerle tabindex="100" si quieres, esto le da foco tambien si le das al tabulador, ahora si deberia funcionarte
  #12 (permalink)  
Antiguo 09/02/2011, 08:16
 
Fecha de Ingreso: febrero-2011
Mensajes: 7
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Problema centrado mapa display none
Nada, igual que antes. No se mueve. Ni con 2 ni con 100.

Etiquetas: display, mapa, centrar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:58.