Necesito iFrame autoajustable a un DIV

leac3 · #1 (**permalink**) 17/07/2010, 16:21

hola a todos, estoy haciendo experimentos con jQuery, la verdad es que es bien facil de usar. Bueno, mi problema radica en que necesito hacer como una ventana tipo windows, me refiero a lo siguiente:
-un div contenedor el cual lleva las propiedades de drag y resize del jQuery, y un pequeño padding con CSS.
-dentro de este div, tengo otro div de ancho fijo, que seria como una barra de titulo, el cual se expande fluidamente a todo lo ancho a medida que el DIV padre (el anterior) se le hace un resize.
-debajo del DIV anterior, tengo un iframe el cual va a cargar X pagina web o archivo .html o.php; este señor es el del problema.

A continuacion el codigo HTML, para efectos de prueba, estoy usando el CSS con el atributo style de los objetos.

Código:

<body>
  <div id="draggable" style="width:400px; height:400px; border:1px solid #060; background-color:#0F0; position:fixed; top:200px; left:100px; padding:10px;">
      <div style="height:20px; background-color:#F00; border:1px solid #FF0; margin:0px 0px 10px 0px;">
          titulo
      </div>
      <div style="height:100%;">
        <iframe src="http://www.google.com" frameborder="0" style="width:100%; height:100%; border:0px;"></iframe>
      </div>
    </div>
</body>

Al div de titulo le omití el width para que sea fluido con respecto al div padre, y funciona perfecto al hacerle un resize al div padre.

Al segundo div, tambien le omito el width para que se ajuste fluidamente al div padre, y asi mismo le digo al iframe que se ajuste al 100% del ancho, y esto trabaja perfecto al momento de hacer un resize del div padre.

El problema es que al decirle al 2do DIV que tenga un alto de 100%, este agarra la altura que tiene actualmente el DIV padre, y se sale del div padre (como superponiendose).

El iframe por otra parte, se ajusta perfectamente a la altura del div que lo contiene, pero obviamente al tener este DIV una altura inadecuada, el iframe no se muestra como deberia de ser (dentro del div padre).

¿Como hago para que ese 2do div ocupe de forma fluida la altura del DIV padre? sin superponerse al borde inferior y respetando el padding

No es un problema del html, body, ya que he implantado la solucion que algunos ponen de colocar un height del 100% para estos atributos, para lo que no ha habido ningun cambio.

Tambien he intentado eliminando el div que contiene el iframe, es decir que el div padre contenga el div de titulo y posteriormente un iframe, y sucede lo mismo; el iframe agarra la altura del div padre, y se superpone al borde inferior de este div.

exxqizofrenicoo · #2 (**permalink**) 17/07/2010, 16:51

yo lo calcularia mismo con jquery cuando hagan resize la altura del iframe sea $('#draggable').height()-20;

los 20 del titulo

leac3 · #3 (**permalink**) 17/07/2010, 16:55

si???? justamente me puse a inventar una solucion a mano hecha con javascripty me quedó...útil; a ver como sera de la forma que dices. jeje

Apenas llevo menos de 24 horas con jquery, me parece facil, pero aun no estoy ducho en esto. Probemos lo que me dices.

leac3 · #4 (**permalink**) 17/07/2010, 17:38

sip, efectivamente, tu solucion funciona al pelo, y aprendi de paso unas cosas mas para implementar eso. Muchisimas gracias.

Aunque aun tengo un detalle y es que al redimensionar muy rapido la ventana, y poner el cursor sobre el iframe, el procedimiento se detiene; entiendo el porque pero estoy viendo si es posible esconder el iframe al inicio del resize, y volverlo a mostrar (ya redimensinado) al finalizar esto.

leac3 · #5 (**permalink**) 17/07/2010, 17:45

listo, asunto resuelto, amo jQuery.

puse en el codigo del jQuery:

Código Javascript:

Ver original$("#draggable").draggable({opacity: 0.5});
$("#draggable").resizable({
  start:    function(event, ui){
    $('#mi_iframe').hide()
  },
  stop: function(event, ui){
    $('#mi_iframe').height($('#draggable').height()-30),
    $('#mi_iframe').show()
  }
});

exxqizofrenicoo · #6 (**permalink**) 17/07/2010, 21:54

si la verdad que jquery es lo mejor que se pudo crear, me acuerdo cuando programaba con javascript puro, mil lineas para hacer algo y para peor despues andaba solo en un navegador :P

otra cosa que podrias hacer en vez de ocultarlo que quizas queda un poco raro seria algo asi.
yo crearia un evento de tiempo de js cuando se este haciendo resize y lo paro cuando se termine de hacer resize.

Código Javascript:

Ver originalvar timer;
$("#draggable").draggable({opacity: 0.5});
$("#draggable").resizable({
  start:    function(event, ui){
    //se llama a la funcion resizeIframe cada 100 milisegundos
    timer = setTimeout(resizeIframe, 100);
  },
  stop: function(event, ui){
    //paro la funcion
    clearTimeout(timer);
    
  }
});
 
function resizeIframe(){
     $('#mi_iframe').height($('#draggable').height()-30);
}

mmm lo modifique aca asi que nose si funcionara ya de primera pero para una idea creo que sirve.
el valor 100 en el delay del setTimeout si ves que es un poco lento achicalo mas aun hasta que quede fluido el efecto.

te dejo esta noticia en mi web que hablo un poco sobre los eventos de tiempo de javascript, justo hoy lo hice mas temprano, quizas te sirve para aclarar un poco.
http://www.spedevigner.com/cake/Noticias/view/65

Saludos