Mostrar/Ocultar
Mostrar/Ocultar Foros
Mostrar/Ocultar Menú principal
Mostrar/Ocultar Publicidad

 ¿Como maximizar el div que contiene el plugin? Compartir


Foro Programación de Google Earth y Maps  Foro Programación de Google Earth y Maps:  Programación con las APIs de Google: Google Earth, Google Maps, KML, Aplicaciones Moviles

Foros de Google Earth Ayuda y Soporte TecnicoForo Programación de Google Earth y Maps
SubForos: KML - Google Maps - Html - Kmz - Java - Javascript - Php - Programacion - Excel
Compartir enlaces Compartir enlaces

 
 
Enlace:    Corto  Largo
Copia el texto de uno de los cajones para compartir el enlace
Página 1 de 1 - Tema con 7 Mensajes y 5501 Lecturas
Último Mensaje Publicado:
Autor Mensaje
Morta
Morta
Veterano
Veterano

Registrado: Oct 09, 2008
Mensajes: 64

Envio Publicado: Vie, 22-07-2011 15:48  Asunto: ¿Como maximizar el div que contiene el plugin? Compartir Responder citando

Hola
Hacía tiempo que no pasaba por aquí..
He encontrado una aplicación que me resulta bastante curiosa ya que tiene efectos que no he visto hacer nunca www.planetinaction.com... trenderer/Al hacer click con el ratón en la imagen, se produce un efecto que simula una explosión. El texto que se escribe en la casilla de debajo de la imagen se actualiza en el momento.. y al margen de esto, y aquí viene mi consulta, es que al pulsar sobre la flechita de la esquina superior derecha de la imagen, esta se maximiza...
He intentado ver como consiguen el efecto pero me he perdido entre los muchos ficheros js que contiene la página y quizá alguno de vosotros sepa como se hace para que se maximize la imagen.
¿alguien puede ayudarme?
Un saludo
Volver arriba
Ver perfil de usuario
Compartir:
Google_Master
Google_Master
Administrador
Administrador

Registrado: Jun 01, 2006
Mensajes: 14700

Envio Publicado: Vie, 22-07-2011 18:58  Asunto: Re: ¿Como maximizar el div que contiene el plugin? Compartir Responder citando

La aplicación es muy curiosa... es como organizar una batalla en medio de la ciudad.

No se como se hace, pero gracias por compartirla.

_________________
Cada vez que sacio una curiosidad, me nacen diez mas...
Volver arriba
Ver perfil de usuario
Compartir:
_polifemo
_polifemo
SuperExpert
SuperExpert

Registrado: Nov 27, 2009
Mensajes: 436

Envio Publicado: Dom, 24-07-2011 18:19  Asunto: Re: ¿Como maximizar el div que contiene el plugin? Compartir Responder citando

Amigo Morta, eres un virguero Guiño

Llevo un rato mirando, pero no encuentro el modo... googleando he encontrado una página que usa jquery:

jqueryui.com/demos/res... fault.html

Lo curioso es que el evento que desencadene el cambio de tamaño del <div> no aparece (y la página no tiene mas de 40 líneas de código tabuladas).

Parece que el truco está en en este script:

jqueryui.com/ui/jquery... sizable.js

pero no consigo averiguar nada Trist
Volver arriba
Ver perfil de usuario
Compartir:
_polifemo
_polifemo
SuperExpert
SuperExpert

Registrado: Nov 27, 2009
Mensajes: 436

Envio Publicado: Dom, 24-07-2011 18:30  Asunto: Re: ¿Como maximizar el div que contiene el plugin? Compartir Responder citando

Veamos este ejemplo:

www.csun.edu/~centergs/API/Ballona_HE_Review.htm

Parece que en la misma página tenemos dos contenedores, uno para full screen y el otro para pantalla normal.

Code::
<div id="fullscreencontainer" style="position: absolute; width: 98.5%; height: 98%;"></div>

<div id="sizecontainer" style="position: absolute; width: 748px; height: 500px;"></div>

Tienes también las funciones :

createFullScreenIcon()
createNormalScreenIcon()
makeFullScreen()
makeNormalScreen()


Y parece que lo que hacen las dos últimas funciones es simplemente jugar con la visibilidad de ambos contenedores, incluso diría que solo con la de la ventana mayor. De hecho, si sacas el código fuente de la página con el contenedor maximizado y con el contenedor minimizado, el código es el mismo... ergo son la misma página.

¿Me hago entender? Muy feliz .

Yo creo que en esta página tienes lo que necesitas, ahora solo te faltan un par de tardes entretenido.

Un saludo y ya nos cuentas. Guiño
Volver arriba
Ver perfil de usuario
Compartir:
Morta
Morta
Veterano
Veterano

Registrado: Oct 09, 2008
Mensajes: 64

Envio Publicado: Dom, 24-07-2011 20:02  Asunto: Re: ¿Como maximizar el div que contiene el plugin? Compartir Responder citando

Hola Polifemo
Te ha gustado ¿eh?
Lástima que el manual de la Api de Google Earth sea tan escueto en cuanto a ejemplos de lo que se puede hacer.. seguro que se pueden hacer muchísimas cosas mas. Creo que ya hemos comentado alguna vez sobre lo poco claro y "raro" que resulta ese manual, al menos para mi.
Por cierto, muy interesante también la página con el codigo jquery para redimensionar el div

Bueno, creo que algo he conseguido a base de eliminar el código sobrante de la página que indicabas y dejando solo el efecto de maximizar el contenedor de la imagen

Un saludo y muchas gracias por tu ayuda

Ahí va (quizá le sobre algo, pero así funciona)



Code::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--http://www.csun.edu/~centergs/API/Ballona_HE_Review.htm-->

<html>

<head>

<title>PRUEBA MAXIMIZAR PLUGIN</title>
<meta name="author" content="Eric  Meyers_EricCMeyers @ yahoo.com">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://www.google.com/jsapi?key=**KEY**"></script>
<script type="text/javascript">
      
      function addSampleUIHtml(html) {
        document.getElementById('sample-ui').innerHTML += html;
                                     }   
                                                              
        var ge;
        var fullScreenState = false;
        var noFullScreenIcon = null;
        var fullScreenIcon = null;
                             
            existingChild = null;
    
        google.load("earth", "1");
        google.load("maps", "2");

      function init() {
        var content = document.getElementById('content');
        google.earth.createInstance('content', initCallback, failureCallback);
                      }
 
      function initCallback(instance) {
        ge = instance;
        ge.getWindow().setVisibility(true);
        ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
        ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
        ge.getOptions().setScaleLegendVisibility(true);
        ge.getOptions().setStatusBarVisibility(true);
        ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);
        
        createFullScreenIcon();
        createNormalScreenIcon();
        google.earth.addEventListener(ge.getWindow(), "click", handleMouseClick);

        var mugu1 = ge.createLookAt('');
        /* VIEW OF EARTH */
        mugu1.set(33.9423, -118.2653,
        60000, /* ALT */
        ge.ALTITUDE_RELATIVE_TO_GROUND,
        0, /* HEAD */
        0, /* TILT */
        40000 /* RANGE */
                  );
        ge.getOptions().setFlyToSpeed(0.5);      
        ge.getView().setAbstractView(mugu1);
                                      }
    
      function failureCallback(errorCode) {
                                          }
                                          
    
      function handleMouseClick(event){
        var INSET_PIXELS_X = document.getElementById("content").offsetWidth - event.getClientX();
        var INSET_PIXELS_Y = event.getClientY();
        if (INSET_PIXELS_X < 32){
          if (INSET_PIXELS_Y < 32){ toggleFullScreen();}
                                }
                                      }

      function toggleFullScreen(){
        if (fullScreenState == true) {makeNormalScreen();}
        else {makeFullScreen();}
                                 }

      function makeFullScreen(){
        var samplecontainer = document.getElementById('fullscreencontainer');
        var container = document.getElementById('content');
        container.style.left = 0; 
        container.style.top = 0;
        container.style.width = samplecontainer.offsetWidth + 'px'; 
        container.style.height = samplecontainer.offsetHeight + 'px';
        fullScreenState = true;
        noFullScreenIcon.setVisibility(fullScreenState);
        fullScreenIcon.setVisibility(!fullScreenState);  
                               }

      function makeNormalScreen(){
        var samplecontainer = document.getElementById('sizecontainer');
        var container = document.getElementById('content');
        container.style.left = samplecontainer.style.left; 
        container.style.top = samplecontainer.style.top;
        container.style.width = samplecontainer.offsetWidth + 'px'; 
        container.style.height = samplecontainer.offsetHeight + 'px';
        fullScreenState = false;
        noFullScreenIcon.setVisibility(fullScreenState);
        fullScreenIcon.setVisibility(!fullScreenState);
                                 }

      function createFullScreenIcon() {
        /* create an image for the screen overlay */
        var icon = ge.createIcon('');
        icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png');
        /* create the screen overlay */
        fullScreenIcon = ge.createScreenOverlay('');
        fullScreenIcon.setDrawOrder(60);
        fullScreenIcon.setIcon(icon);
        /* anchor point in top left of icon. */
        fullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
        fullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
        fullScreenIcon.getScreenXY().setX(1);
        fullScreenIcon.getScreenXY().setY(1);
        /* place icon in top left of screen. */
        fullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
        fullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
        fullScreenIcon.getOverlayXY().setX(2);
        fullScreenIcon.getOverlayXY().setY(4);
        /* Set icon size. */
        fullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
        fullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
        fullScreenIcon.getSize().setY(32);
        fullScreenIcon.getSize().setX(32);
        /* add the screen overlay to Earth */
        ge.getFeatures().appendChild(fullScreenIcon);
                                      }

      function createNormalScreenIcon() {
        /* create an image for the screen overlay */
        var icon = ge.createIcon('');
        icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tonormal.png');
        /* create the screen overlay */
        noFullScreenIcon = ge.createScreenOverlay('');
        noFullScreenIcon.setDrawOrder(62);
        noFullScreenIcon.setIcon(icon);
        /* anchor point in top left of icon. */
        noFullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
        noFullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
        noFullScreenIcon.getScreenXY().setX(1);
        noFullScreenIcon.getScreenXY().setY(1);
        /* place icon in top right of screen. */
        noFullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
        noFullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
        noFullScreenIcon.getOverlayXY().setX(2);
        noFullScreenIcon.getOverlayXY().setY(4);
        /* Set icon size. */
        noFullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
        noFullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
        noFullScreenIcon.getSize().setY(32);
        noFullScreenIcon.getSize().setX(32);
        noFullScreenIcon.setVisibility(false);
        /* add the screen overlay to Earth */
        ge.getFeatures().appendChild(noFullScreenIcon);
                                       }

      function handleFullScreen(){
        if (window.innerWidth == screen.width){
          if (window.innerHeight > screen.height - 10){
            /*this is likely caused by pressing F11 on the browser */
            makeFullScreen();
                                                      } 
          else if (fullScreenState == true) { makeNormalScreen();}
                                              } 
               else {makeNormalScreen();}
                                 }
google.setOnLoadCallback(init);
</script> 

<style type="text/css">
.tool
{
position:relative;
left:350px;
}
.legend
{
position:relative;
left:30px;
}
</style> 
                     
</head>

<body bgcolor="#FFFFFF" text="#000000 onresize="handleFullScreen();">
<font color="#000000" size=+2 face="corbel"><b>Pulsando en el icono de la esquina superior derecha la imagen se maximiza</b></font>

<br>

<div class="tool">
<font color="#000000" size=-1><i>Click on the <img src="http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png"/> to toggle full browser mode or press F11 for full screen.</i></font>
</div>

<div style="clear: both;"></div>

<div id="fullscreencontainer" style="position: absolute; width: 98.5%; height: 98%;"></div>

<div id="sizecontainer" style="position: absolute; width: 748px; height: 500px;"></div>

<div id="content" style="position: absolute; border: 5px solid  #585858; width: 748px; height: 500px;"></div>

</body>

</html>
Volver arriba
Ver perfil de usuario
Compartir:
Morta
Morta
Veterano
Veterano

Registrado: Oct 09, 2008
Mensajes: 64

Envio Publicado: Dom, 24-07-2011 20:07  Asunto: Re: ¿Como maximizar el div que contiene el plugin? Compartir Responder citando

Acabo de encontrar el ejemplo en la página
earth-api-samples.goog... creen.html
Sonriente
Volver arriba
Ver perfil de usuario
Compartir:
_polifemo
_polifemo
SuperExpert
SuperExpert

Registrado: Nov 27, 2009
Mensajes: 436

Envio Publicado: Mie, 27-07-2011 9:30  Asunto: Re: ¿Como maximizar el div que contiene el plugin? Compartir Responder citando

Fantástico Morta.

Encantado de que podamos aprender juntos. Guiño

Por cierto, veo con agrado que últimamente contamos con varios miembros colaborando en el foro con asuntos técnicos... a ver si tenemos suerte y conseguimos crear una comunidad estable.
Volver arriba
Ver perfil de usuario
Compartir:
Mostrar mensajes de anteriores:   
Foros de Google Earth > Ayuda y Soporte Tecnico > Foro Programación de Google Earth y Maps
 Responder al tema   Versión Imprimible
Todas las horas son GMT + 1 Hora
Página 1 de 1 - Tema con 7 Mensajes y 5501 Lecturas - Última modificación: 27/07/2011




RSS: Foro de Programación de Google Earth y Maps RSS
Cambiar a:  


Puede publicar nuevos temas en este foro
No puede responder a temas en este foro
No puede editar sus mensajes en este foro
No puede borrar sus mensajes en este foro
No puede votar en encuestas en este foro
No Puedes adjuntar archivos en este foro
Tu puedes descargar archivos en este foro

Últimas búsquedas por posts: 138 - Windhoek - Api - Referencia Catastral 2... - Marcas Xml - Earth
Últimas búsquedas por topics: Earth - Kmz - Url - Capas Superpuestas - Capas Poligonales Supe... - Kml de Xls

SubForos: KML - Google Maps - Html - Kmz - Java - Javascript - Php - Programacion - Excel

Este es el lugar de los amigos de Google Earth: la Comunidad de Google Earth en Español. La propiedad de nuestro portal es completamente independiente de Google y sus marcas. Todos los logos y gráficos de este sitio son propiedad de nuestra web o de nuestros usuarios. Las opiniones son de los usuarios y nosotros no tenemos porque compartirlas, rebatirlas o apoyarlas.
Aviso Legal - Privacidad - Google Earth en: Pag. de Facebook - Web amiga: LosViajeros.com