iframe con height auto

ceaped · #1 (**permalink**) 27/08/2014, 08:36

Buenos días
Utilizo un acordeón .jquery

Código Javascript:

Ver original<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('.bloque_activador').click(function() {
    jQuery('.bloque_activador').removeClass('on');
    jQuery('.accordionContent').slideUp('normal');
    if(jQuery(this).next().is(':hidden') == true) {
    jQuery(this).addClass('on');
    jQuery(this).next().slideDown('normal');
    } 
          
     });
    
    jQuery('.accordionContent').mouseover(function() {
    jQuery(this).addClass('over');
        
    }).mouseout(function() {
    jQuery(this).removeClass('over');                                       
    });
    
    jQuery('.accordionContent').hide();
 
});
</script>

Código HTML:

Ver original<h2 class="bloque_activador" title="Nombre...">Nombre...</h2>
<div class="accordionContent">
<iframe src="index_1.html" height="auto" scrolling="no" frameborder="0"></iframe>
</div>
 
<h2 class="bloque_activador" title="Nombre...">Nombre...</h2>
<div class="accordionContent">
<iframe src="index_2.html" height="auto" scrolling="no" frameborder="0"></iframe>
</div>

El funciona bien pero con el height no.
Cada index.html tiene un alto distinto, entonces busco como darle un height auto

¿Alguna idea de como lo hago?

Gracias por su ayuda

ceaped · #2 (**permalink**) 28/08/2014, 06:45

Buenos días
Encontré un código que se ajusta a mis necesidades pero deseo hacerle 2 cambios:

1. Quitar el setInterval
2. Que pueda cargar varios iframe

Este es el código:

Código Javascript:

Ver original<script>
 jQuery(function($){
  var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
  setInterval(function(){
    curHeight = $frame.contents().find('body').height();
    if ( curHeight != lastHeight ) {
      $frame.css('height', (lastHeight = curHeight) + 'px' );
    }
  },500);
});
  </script>

Gracias por su ayuda

ceaped · #3 (**permalink**) 29/08/2014, 06:05

Hola
Sigo intentando pero no logro resolver mi problema
¿Alguien que me pueda ayudar?

ceaped · #4 (**permalink**) 23/09/2014, 10:03

Hola retomo este tema por que no he solucionado este asunto.
PHPeros me ayudo y me paso este código:

Código Javascript:

Ver originalvar lastHeight = 0, curHeight = 0, $frame = $('iframe'), curHeight = $frame.contents().find('body').height();
    if ( curHeight != lastHeight ) {
    $frame.css('height', (lastHeight = curHeight) + 'px' );
    }

Pero sucede que debo abrir en orden las pestañas del acordeón, si los abro en desorden los abre mal.

¿Qué debo agregar a este código para que me funcione bien en cualquier orden?

Gracias por su ayuda

CHuLoSoY · #5 (**permalink**) 24/09/2014, 08:12

No entiendo nada de lo que dices. "Los abre mal" no es una descripción de un error. Lo que te han pasado en el otro foro es una función para calcular el alto en función del alto del <body> del iframe que se abre. Es un poco locura lo que estás haciendo, si quieres puedes explicarnos mejor el tema y quizás lo puedas hacer de una forma mejor y más eficiente.

Saludos.

PHPeros · #6 (**permalink**) 24/09/2014, 08:33

A ver si puedo hacer algo...

Como son dos iframes, supongo que falla porque solo recoges el tamaño del primero. Tal vez se solucione usando .each():

Código Javascript:

Ver originalvar lastHeight = 0, curHeight = 0, $frame = $('iframe');
 
$frame.each(function(){
    curHeight = this.contents().find('body').height();
    if ( curHeight != lastHeight ) {
        this.height(lastHeight = curHeight);
    }
});

ceaped · #7 (**permalink**) 24/09/2014, 08:39

Hola CHuLoSoY
Mira utilizo un acordeón y en cada pestaña carga un iframe, te pongo el código:

Código Javascript:

Ver original<head>
<script type="text/javascript">
    jQuery(document).ready(function() {
    
    jQuery('.bloque_activador').click(function() {
    jQuery('.bloque_activador').removeClass('on');
    jQuery('.accordionContent').slideUp('normal');   
    if(jQuery(this).next().is(':hidden') == true) {     
    jQuery(this).addClass('on');              
    jQuery(this).next().slideDown('normal');
    }
    
    //Alto auto del iframe
    var lastHeight = 0, curHeight = 0, jQueryframe = jQuery('iframe'),
    curHeight = jQueryframe.contents().find('body').height();
    if ( curHeight != lastHeight ) {
        jQueryframe.css('height', (lastHeight = curHeight) + 'px' );
    }
    //Fin Alto auto del iframe
          
     });
    
    jQuery('.accordionContent').mouseover(function() {
    jQuery(this).addClass('over');      
    }).mouseout(function() {
    jQuery(this).removeClass('over');                                       
    }); 
    jQuery('.accordionContent').hide();
    
 
});
</script>
</head

Y asi tengo las pestañas cada una con su iframe:

Código HTML:

Ver original<body>
<h2 class="bloque_activador">Texto...</h2>
<div class="accordionContent" >
<iframe src="pagina_01.html" scrolling="no" frameborder="0"></iframe>
</div>
 
<h2 class="bloque_activador">Texto...</h2>
<div class="accordionContent" >
<iframe src="pagina_02.html" scrolling="no" frameborder="0"></iframe>
</div>
 
<h2 class="bloque_activador">Texto...</h2>
<div class="accordionContent" >
<iframe src="pagina_03.html" scrolling="no" frameborder="0"></iframe>
</div>
</body>

Mira que pagina_01.html, pagina_02.html y pagina_03.html, cada una tienen una dimensión distinta.

Código Javascript:

Ver original//Alto auto del iframe
    var lastHeight = 0, curHeight = 0, jQueryframe = jQuery('iframe'),
    curHeight = jQueryframe.contents().find('body').height();
    if ( curHeight != lastHeight ) {
        jQueryframe.css('height', (lastHeight = curHeight) + 'px' );
    }
    //Fin Alto auto del iframe

Este código es el que me da el alto auto, pero sí navego las pestañas en desorden pestaña 3, pestaña 1 y pestaña 2 no me funciona.

¿Cómo hago para que cada height sea auto?

Nota: pagina_01.html, pagina_02.html y pagina_03.html están en mi servidor no son páginas externas.

Gracias por tu ayuda

ceaped · #8 (**permalink**) 24/09/2014, 08:56

Hola PHPeros
Nada...;(
Otro asunto es que pueden sera 2 o más iframes.

Gracias por tu ayuda

ceaped · #9 (**permalink**) 26/09/2014, 10:49

Encontré este código

Código Javascript:

Ver originaljQuery(document).ready(function() {
    var height = $(window).height();
    $('iframe').css('height', height * 0.75 | 0);
    });

Pero me da un alto fijo que no es auto, sobrepasa los límites.

Alguna idea para auto ajustarlo.

Gracias por su ayuda

PHPeros · #10 (**permalink**) 27/09/2014, 04:06

Acabemos con esto de una vez

Código Javascript:

Ver original$("iframe").each(function(){
   $(this).height($(this).contents().height());
});

Y asegúrate de que son del mismo dominio los iframes.

ceaped · #11 (**permalink**) 29/09/2014, 05:59

Hola PHPeros
jejeje...que pena tanta preguntadera.
Te cuento si funciono pero en Chrome abro la primera pestaña y se ajusta bien pero si abro la segunda o cualquier pestaña el alto supera el tamaño (se baja demasiado).
Todos los iframe que cargo están en el mismo servidor yo no cargo en los iframe paginas externas.

De nuevo gracias y disculpa tanta preguntadera...;)