Cambiar el tamaño dinámico de un div que use jQuery -- javascript campo con jquery campo con html camp Relacionados El problema

Dynamically resize a div using jQuery


2
vote

problema

Español

Tengo un div ( id="mainDiv" ) que necesito cambiar el tamaño dinámico si el usuario cambia el tamaño de la ventana de su navegador. He escrito el siguiente código para intentar hacer que esto funcione, sin embargo, esto no parece estar configurando la altura de mi div :

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script>     var height = $(window).height();      $("#mainDiv").height(height); </script> <body>     <div id="mainDiv"></div> </body>   

No sé mucho jquery, ¿estoy haciendo un error obvio?

Original en ingles

I have a div (id="mainDiv") which I need to dynamically resize if the user changes the size of their browser window. I have written the following code to try and get this to work however this doesn't seem to be setting the height of my div:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script>     var height = $(window).height();      $("#mainDiv").height(height); </script> <body>     <div id="mainDiv"></div> </body> 

I don't know much jQuery, am I making an obvious mistake?

        
     
     

Lista de respuestas

7
 
vote
vote
La mejor respuesta
 

Hay algunas cosas que van mal aquí:

  1. Su código se ejecutará de inmediato antes de que su documento haya terminado de cargar.
  2. Su código se ejecutará solo en la carga del script, no en el tamaño de tamaño
  3. No está configurando la altura de su Maindiv: está configurando la altura de otro elemento con la identificación: Accordianmain (pero supongo que lo sabe).

Debe manejar el evento de tamaño del navegador para esperar a que el navegador cambie de tamaño, obtenga las dimensiones de la ventana y aplique en consecuencia. Haría esto manipulando la ventana. Realizar evento que gusta esto:

  var $win = $(window);  $win.on('resize',function(){     $("#mainDiv").height($win.height()); });   

Lo que probablemente desee hacer es esperar a que se espera un cambio de tamaño para finalizar agregando un tiempo de espera para que no se dispare a menudo también:

  var timer,     $win = $(window);   $win.on('resize',function(){     clearTimeout(timer);     timer = setTimeout(function(){         $("#mainDiv").height($win.height());     }, 500);  });   
 

There are a few things going wrong here:

  1. Your code will execute straight away before your document has finished loading.
  2. Your code will execute only on load of the the script, not on resize
  3. You're not setting the height of your mainDiv - you're setting the height of another element with the id: accordianMain (but I'm guessing you know that).

You need to handle the browser resize event to wait for the browser to resize then get the dimensions of the window and apply accordingly. You'd do this by handling the window.resize event liks this:

var $win = $(window);  $win.on('resize',function(){     $("#mainDiv").height($win.height()); }); 

What you probably want to do is wait for for a resize to finish to by adding a timeout so that it doesn't fire too often as well:

var timer,     $win = $(window);   $win.on('resize',function(){     clearTimeout(timer);     timer = setTimeout(function(){         $("#mainDiv").height($win.height());     }, 500);  }); 
 
 
2
 
vote

Necesitas envolverlo en una función de cambio de tamaño:

  $(window).on('resize',function(){     var height = $(window).height();      $("#mainDiv").height(height); });   

Aunque debería señalar lo que se puede lograr fácilmente a través de CSS:

  body,#mainDiv {     height:100%; }   

Esto es más para señalar el punto más grande de "Necesita estar en un cambio de red de cambio de tamaño", en caso de que quisiera hacer una lógica que realmente necesitaba el evento.

 

You need to wrap it in a resize function:

$(window).on('resize',function(){     var height = $(window).height();      $("#mainDiv").height(height); }); 

Although I should point out what your doing could easily be attained through CSS:

body,#mainDiv {     height:100%; } 

This is more to point out the "it needs to be in a resize event wrapper" larger point, in case you wanted to do some logic that actually needed the event.

 
 
         
         
1
 
vote

Sí, el error es usar jquery jejeje

usted hace esto con CSS

  <body>     <div id="mainDiv" style="height:100%"></div> </body>   
 

Yes, the mistake is use jquery hehehe

You do this with CSS

<body>     <div id="mainDiv" style="height:100%"></div> </body> 
 
 
0
 
vote

Use un escuchador de eventos para el tamaño del tamaño de la ventana (y debe esperar la carga de la página antes de acceder a los elementos con jQuery):

  $(function() {   $(window).on('resize', function() {     var height = $(window).height();      $("#mainDiv").height(height);   }); });   
 

Use an event listener for the window resize (and you should wait for page load before accessing elements with JQuery):

$(function() {   $(window).on('resize', function() {     var height = $(window).height();      $("#mainDiv").height(height);   }); }); 
 
 
0
 
vote

Usé Div Contenido y DIV Footer en mi página, estableceré este código en mi JS para configurar la altura dinámica para el contenido DIV.

   footer = $("div[data-role='footer']");     content = $("div[data-role='content']");     viewHeight = $(window).height();     contentHeight = viewHeight - footer.outerHeight();     contentHeight -= (content.outerHeight() - content.height());     content.height(contentHeight);   
 

I used div content and div footer in my page, i will set this code in my js to set dynamic height for div content.

 footer = $("div[data-role='footer']");     content = $("div[data-role='content']");     viewHeight = $(window).height();     contentHeight = viewHeight - footer.outerHeight();     contentHeight -= (content.outerHeight() - content.height());     content.height(contentHeight); 
 
 

Relacionados problema

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

273  Múltiples botones de envío en un formulario HTML  ( Multiple submit buttons in an html form ) 
Digamos que crea un asistente en un formulario HTML. Un botón se remonta, y uno avanza. Dado que el botón Atrás aparece primero en el marcado cuando presion...

80  ¿Cómo imprimo un documento HTML de un servicio web?  ( How do i print an html document from a web service ) 
Quiero imprimir HTML desde un servicio web C #. El control del navegador web está exagerado, y no funciona bien en un entorno de servicio, ni funciona bien en...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

31  ¿Cómo doy a mis sitios web un icono para iPhone?  ( How do i give my websites an icon for iphone ) 
¿Cómo configuro el icono que aparece adecuado en el iPhone para los sitios web que he creado? ...

635  Determinar la zona horaria de un usuario  ( Determine a users timezone ) 
¿Hay una forma estándar para que un servidor web pueda determinar la zona horaria de un usuario dentro de una página web? Tal vez de un encabezado HTTP o pa...

4  ¿Cuál es el futuro de la web? Xhtml 2, html 5, o otra cosa?  ( Whats the future of the web xhtml 2 html 5 or something else ) 
Estoy confundido por la discusión y el avance de una nueva versión de HTML y una nueva versión de XHTML. ¿Son competidores? Si es así, ¿qué es lo más probable...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos