Comunidad de diseño web y desarrollo en internet online

Redimensionar popup de Dialog Jquery

Citar            
MensajeEscrito el 03 Ene 2012 07:32 pm
Buenos dias, les comento que estoy haciendo una sistema web en donde gran parte de la navegacion se realiza mediante ventanas popups.

Actualmente estoy utilizando la UI de Jquery Dialog, pero tengo el inconveniente de que este popup no ajusta su tamaño a su propio contenido.

Para hacer un ejemplo, les paso el siguiente codigo

Código HTML :

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
</head>
<body>
   <div id="whatup">
   <table border='1' width='800px' height='600px'>
   <tr><td>a ver ahora!</td></tr>
      <div id="inside">Hi there.</div>
   </div>
   <script>
jQuery(function () {
   $('#whatup').dialog(
      "resize", "auto"
     );
 $('#whatup').dialog(
  );
 setTimeout(function() {
   $('#inside').append("Hello!<br>");
   setTimeout(arguments.callee, 1000);
  }, 1000);
  });
</script>
</body>
</html>


La idea seria de que al abrirse el popup, este tome el tamaño de su contenido, sin utilizar scrollbars(de ser posible).
No siempre tengo una tabla con un tamaño fijo, por lo que el tamaño no puede ser seteado, este fue solo un ejemplo rapido que hice.

Gracias!

Por faabass

11 de clabLevel



 

chrome
Citar            
MensajeEscrito el 03 Ene 2012 10:31 pm
Tanto el ancho como el alto deben de ser automáticos (auto), pero en lo que debes concentrarte más es en el centrado absoluto dependiendo del largo y ancho de tu contenedor anteriormente modificado con la altura/ancho automático de tu contenido.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 04 Ene 2012 01:39 pm
Muchas gracias por tu respuesta! Estuve haciendo unas pruebas y funciona...

Pero en mi caso particular yo dentro del dialog cargo un iframe. Y con este tema ya no me funciona :S
Acá te dejo otra prueba que hice... Me podrías ayudar con este tema? estuve haciendo algunos intentos pero no logro hacerlo funcionar.

Código Javascript :

 $('#whatup').html('<iframe src="http://foros.cristalab.com/redimensionar-popup-de-dialog-jquery-t103041/#630084" style="position:relative;border: 0px;"></iframe>').dialog(
 {
         modal: false,
         show: "blind",
         title: 'holaa',
         resizable: true,
         height: 'auto',
         width: 'auto',
         position: 'center',
         close: function (event, ui) {
             jQuery(this).remove();
            }
         
  });


Gracias!! y saludos!

Por faabass

11 de clabLevel



 

chrome
Citar            
MensajeEscrito el 04 Ene 2012 05:57 pm
¿Si es muy necesario que utilices iframes para cargar contenido? Busca acerca de cargar contenido con jQuery y de ahí ya puedes sacar mucho más fácil el alto y ancho del mismo para pasarlo a tu otro code.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 04 Ene 2012 06:35 pm
El tema de usar iframes es porque la navegacion de mi pagina (abms, reportes, etc) se hace mediante los popups, y en un momento intente realizarlo con la funcion de jquery "load".
Pero por lo que vi, esta solo inserta el codigo html y no ejecuta javascript, por lo tanto muchas funciones no me van a funcionar..

Te referias a esto o existe otra manera?

Gracias!

Por faabass

11 de clabLevel



 

chrome
Citar            
MensajeEscrito el 04 Ene 2012 07:05 pm

faabass escribió:

..esta solo inserta el codigo html y no ejecuta javascript, por lo tanto muchas funciones no me van a funcionar..

Si ejecuta js, la función .load() tiene poder, revisa la documentación y verás que si funciona. De hecho, hay por ahí uno que otro plugin que evita utilizar iframes (algo que se evita a toda costa en web dev).

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 04 Ene 2012 07:39 pm
ok, lo del load cuando lo probe no me funciono, porque cuando me iba a otra pagina desde adentro del dialog, me actualizaba TODA la pagina y no solo el dialog... Lo voy a volver a probar a ver que pasa...
En cuanto a los plugins de jquery para iframes, voy a ver que encuentro... no estaba al tanto de eso.
Voy a probar con este a ver que pasa... http://project.mahemoff.com/jquery-iframe/

Por faabass

11 de clabLevel



 

chrome
Citar            
MensajeEscrito el 05 Ene 2012 01:01 pm
Me podrias dar una mano con esto? porque por lo que estoy viendo de esta forma seguiria utilizando el iframe...

Agradeceria que me digas cual es el pluging del cual estas hablando

Gracias!

Por faabass

11 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Ene 2012 09:06 pm
Kinduff, me podrias dar una idea de otra alternativa para no usar iframes? estuve probando varias cosas y no logre dar en el clavo... Con el load no logro la misma funcionalidad, por ejemplo en lugar de navegar por el popup, me redirecciona la pagina en si al link al cual deberia ir el popup...

Agradezco tu ayuda!

Por faabass

11 de clabLevel



 

chrome

 

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