Comunidad de diseño web y desarrollo en internet online

Ubicar al 100% del ancho o alto del navegador dependiendo pantalla.

Citar            
MensajeEscrito el 09 Mar 2012 08:59 pm
Buenas Tardes,

Creo que el título de mi consulta es bastante diciente. Quisiera saber cuales son las líneas de código y la ubicación de las mismas en el index de un archivo html para cargarlo a través de la web para lograr que se ubique al 100% del ancho o del alto del navegador dependiendo de la resolución de la pantalla del computador.

Es decir, que cuando la gente entre a la web, el index determine el alto y el ancho de la resolución de la pantalla del navegador; y que si, el ancho de la misma es más grande que el alto, ubique la resolución del index al 100% del ancho de la misma y escale el alto conservando las dimensiones. Por el contrario, si el alto de la de la misma es más grande que el ancho, ubique la resolución del index al 100% del alto y escale el ancho conservando las dimensiones. Por último si es cuadrada que haga lo mismo si el alto es mayor que el ancho.

Ya lo he logrado hacer para que se ubique siempre al 100% a lo ancho y se escale el alto, pero no sé como hacer para poner los condicionales que describí en el párrafo anterior. Sé que se debe usar una variable utilizando JAVA SCRIPT, ojalá me puedan ayudar (de seguro que sí :) ) . (la variable es "nAltoSWF", el ancho que uso es 1500 y el alto que uso es 600)

Aquí dejo el script que he hecho, para que me lo puedan enriquecer:

Código HTML :

   <head>
      <title>Titulo web</title>
        <script language="JavaScript" type="text/javascript" src="swfobject.js"></script>
      <script language="JavaScript" type="text/javascript">
      var nAltoSWF=Math.round((window.screen.width*600)/1500);
      </script>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css" media="screen">
      html, body { height:100%; background-color: #ffffff;}
      body { margin:0; padding:0;}
      #flashContent { width:100%; height:100%; }
      </style>
   </head>
   <body>
        <script language="JavaScript" type="text/javascript">
      document.write("<div style='width:100%; height:"+nAltoSWF+";' id='flashContent' >");
      document.write("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' width='100%' height="+nAltoSWF+" id='index' align='middle'>");
      </script>
            <param name="movie" value="index.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="wmode" value="window" />
            <param name="scale" value="showall" />
            <param name="menu" value="true" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="allowScriptAccess" value="sameDomain" />
            <!--[if !IE]>-->
                <script language="JavaScript" type="text/javascript">
            document.write("<object type='application/x-shockwave-flash' data='index.swf' width='100%' height="+nAltoSWF+">");
            </script>
            <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="600">
               <param name="movie" value="index.swf" />
               <param name="quality" value="high" />
               <param name="bgcolor" value="#ffffff" />
               <param name="play" value="true" />
               <param name="loop" value="true" />
               <param name="wmode" value="window" />
               <param name="scale" value="showall" />
               <param name="menu" value="true" />
               <param name="devicefont" value="false" />
               <param name="salign" value="" />
               <param name="allowScriptAccess" value="sameDomain" />
            <!--<![endif]-->
               <a href="http://www.adobe.com/go/getflash">
                  <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" />
               </a>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
         </object>
      </div>
   </body>
</html>

Por maooricio

51 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 12 Mar 2012 03:33 pm
Nadie que me pueda ayudar???, por favorrrrrr, me urge terminar el proyecto con mi cliente y es lo único que me falta :shock: , :oops:

Muchas gracias de antemano...

Por maooricio

51 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 12 Mar 2012 04:22 pm
creo que es un poco lioso: "si el alto de la de la misma es más grande que el ancho, ubique la resolución del index al 100% del alto y escale el ancho conservando las dimensiones"

y yo personalmente no entiendo porque... si usas 100% de ancho.... siempre será 100%, ...no se vuelve a definir o indica el motivo. yo almenos me pierdo.

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.