Mostrar/Ocultar

 Â¿Como maximizar el div que contiene el plugin? 🗺️ Foros de Google Earth y Maps 🗺️

Foro de Programación de Google Earth y Maps  Foro de Programación de Google Earth y Maps: Programación con las APIs de Google: Google Earth, Google Maps, KML, Aplicaciones Moviles
SubForos: Java - Kmz - Google Maps - Herramientas - Html - Javascript - Programacion - Php - KML
Página 1 de 1 - Tema con 7 Mensajes y 8346 Lecturas
Último Mensaje Publicado:
Autor Mensaje
Morta
Morta
Veterano
Veterano
Registrado:
09-10-2008
Mensajes: 64

Votos: 0 👍
Enlaces Asunto: ¿Como maximizar el div que contiene el plugin?   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 http://www.planetinaction.com/textrenderer/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
Ir arriba 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 Al... Morta Compartir:
Google_Master
Google_Master
Admin
Admin
Registrado:
01-06-2006
Mensajes: 16084
Visitar sitio web del autor Perfil de Twitter Perfil de Facebook
Votos: 0 👍
Enlaces Asunto: Re: ¿Como maximizar el div que contiene el plugin?   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...
Ir arriba 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. Google_Master Compartir:
_polifemo
_polifemo
SuperExpert
SuperExpert
Registrado:
27-11-2009
Mensajes: 436

Votos: 0 👍
Enlaces Asunto: Re: ¿Como maximizar el div que contiene el plugin?   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/ ...fault.html

Lo curioso es que el evento que desencadene el cambio de tamaño del 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/ ...sizable.js

pero no consigo averiguar nada Trist
Ir arriba Amigo Morta, eres un virguero ;) Llevo un rato mirando, pero no encuentro el modo... googleando he encontrado una página que usa jquery: Lo curioso es que el... _polifemo Compartir:
_polifemo
_polifemo
SuperExpert
SuperExpert
Registrado:
27-11-2009
Mensajes: 436

Votos: 0 👍
Enlaces Asunto: Re: ¿Como maximizar el div que contiene el plugin?   Responder citando
Veamos este ejemplo:

www.csun.edu/ ...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
Ir arriba Veamos este ejemplo: Parece que en la misma página tenemos dos contenedores, uno para full screen y el otro para pantalla normal. <div id... _polifemo Compartir:
Morta
Morta
Veterano
Veterano
Registrado:
09-10-2008
Mensajes: 64

Votos: 0 👍
Enlaces Asunto: Re: ¿Como maximizar el div que contiene el plugin?   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>
Ir arriba 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... Morta Compartir:
Morta
Morta
Veterano
Veterano
Registrado:
09-10-2008
Mensajes: 64

Votos: 0 👍
Enlaces Asunto: Re: ¿Como maximizar el div que contiene el plugin?   Responder citando
Acabo de encontrar el ejemplo en la página
earth-api-samples.googlecode.com/ ...creen.html
Sonriente
Ir arriba Acabo de encontrar el ejemplo en la página. :-) Morta Compartir:
_polifemo
_polifemo
SuperExpert
SuperExpert
Registrado:
27-11-2009
Mensajes: 436

Votos: 0 👍
Enlaces Asunto: Re: ¿Como maximizar el div que contiene el plugin?   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.
Ir arriba Fantástico Morta. Encantado de que podamos aprender juntos. Por cierto, veo con agrado que últimamente contamos con varios miembros colaborando en el foro... _polifemo Compartir:
Mostrar mensajes de anteriores:   
SubForos: Java - Kmz - Google Maps - Herramientas - Html - Javascript - Programacion - Php - KML
 Responder al tema   Versión Imprimible
Todas las horas son GMT + 1 Hora
Página 1 de 1 - Tema con 7 Mensajes y 8346 Lecturas - Última modificación: 27/07/2011




RSS: Foro Programación de Google Earth y Maps RSS - Ultimos Mensajes
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