Ir para conteúdo

  • Entrar usando o Facebook Entrar usando o Twitter Entrar usando o Windows Live Login com Steam Login com Google      Entrar   
  • Cadastre-se

Foto
- - - - -

Auto Height com jQuery - Problemas


  • Por favor, faça o login para responder
7 respostas neste tópico

#1 mah2602

mah2602

    Novato

  • Membros Plenos
  • Pip
  • 58 posts
  • Membro desde 06/10/2009
1
Neutra
  • Ribeirao Preto

Postado 27 de abril de 2012 - 13h46min

Olá,

Estou desenvolvendo um site que precisa ter um iframe no index linkando pra página de notícias. Está no mesmo domínio, e como o conteúdo pode variar eu procurei uma solução que definisse automaticamente a altura do iframe de acordo com o conteúdo.

Achei esse plugin do jQuery, mas não está funcionando. https://github.com/house9/jquery-iframe-auto-height

Se alguém puder me ajudar a descobrir a falha, serei eternamente grata.

Segue o código abreviado:

<!DOCTYPE html>
<html lang="pt-br">
<head>
(..)
	
   <!-- CSS
  ================================================== -->
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/skeleton.css">
	<link rel="stylesheet" type="text/css" href="css/layout.css">
        <link rel="stylesheet" type="text/css" href="css/menu.css" />


(..)

</head>
<body>


(..)

<div id="logo" class="sixteen columns"> </div>

<div class="sixteen columns">
<iframe allowtransparency="true" src="slider/slider.html" id="slider" frameborder="0" scrolling="no"></iframe>
</div>

<div id="noticias" class="sixteen columns">
<iframe id="noticias" src="http://site.com.br/blog" class="auto-height" scrolling="no" frameborder="0"></iframe>
<script>
  $('iframe.auto-height').iframeAutoHeight({minHeight: 240});
</script>
</div>
(..)
	</div>
<!-- container -->



	<!-- JS
	================================================== -->
 
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/tabs.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/sprite.js"></script>
    <script type="text/javascript" src="js/jquery.iframe-auto-height.plugin.1.6.0.js"></script>
<script>
  $(document).ready(function () {
    $('iframe').iframeAutoHeight({debug: true});  
  });
</script>


<!-- End Document
================================================== -->
</body>
</html>


CSS:

#noticias{
width:940px;
padding-bottom:10px;
overflow:hidden;
height:auto;
}


Editado por mah2602, 27 de abril de 2012 - 14h12min.


#2 dif

dif

    Usuário Avançado

  • Moderadores
  • 4.811 posts
  • Membro desde 17/04/2007
516
Excepcional
  • Pelotas-RS

Postado 27 de abril de 2012 - 14h26min

olá, você ja tentou fazer assim:

dessa forma você acessa o elemento identificador da div
<script type="text/javascript">
  $(document).ready(function(){
       $('#noticia').iframeAutoHeight({minHeight: 240});
    });
</script>

ou


dessa forma que pega o elemento direto
<script type="text/javascript">
  $(document).ready(function(){
       $(iframe').iframeAutoHeight({minHeight: 240});
    });
</script>




nao sei porque você tm o id #noticias para a div noticias e para o iframe juntos.. isso nao dá conflito?

AMD FX 8120 Bulldozer @4.1Ghz, Asus M5A88-V Evo, Nvidia GeForce GTX 660Ti(2GB)
8GB DDR3 Dual Channel, Samsung HD322HJ Sata-II(320GB), Samsung HD502HI Sata-II(500GB)
Sony Optiarc DVD RW AD-7240S, LG FullHD(1080p) 21" 

#3 mah2602

mah2602

    Novato

  • Membros Plenos
  • Pip
  • 58 posts
  • Membro desde 06/10/2009
1
Neutra
  • Ribeirao Preto

Postado 27 de abril de 2012 - 14h38min

Oi dif.. tentei assim agora e não deu certo.. o jQuery tá de brincadeira cmg hoje.

Ontem quando eu achei esse script cheguei a testar online e deu certo.. criei uma pasta no host 'novosite' e subi tudo pra ver se o height acompanhava e deu certinho.. mas como ele não funciona no host local eu desativei os scripts com <!----> e coloquei um height temportário só o suficiente pra visualizar a primeira página do iframe. Aí hoje quando reativei os scripts e subi o site, ele resolveu não funcionar!

O id eu já tirei, eu to ficando meio doida de tanto que testo pra tentar fazer funcionar de novo.

Editado por mah2602, 27 de abril de 2012 - 14h40min.


#4 dif

dif

    Usuário Avançado

  • Moderadores
  • 4.811 posts
  • Membro desde 17/04/2007
516
Excepcional
  • Pelotas-RS

Postado 27 de abril de 2012 - 14h54min

tenta definir o tamanho na propria iframe

e tenta no jquery sem o parametro:

 <script type="text/javascript">
     $(document).ready(function(){
      jQuery('iframe').iframeAutoHeight();
});
    </script>

AMD FX 8120 Bulldozer @4.1Ghz, Asus M5A88-V Evo, Nvidia GeForce GTX 660Ti(2GB)
8GB DDR3 Dual Channel, Samsung HD322HJ Sata-II(320GB), Samsung HD502HI Sata-II(500GB)
Sony Optiarc DVD RW AD-7240S, LG FullHD(1080p) 21" 

#5 mah2602

mah2602

    Novato

  • Membros Plenos
  • Pip
  • 58 posts
  • Membro desde 06/10/2009
1
Neutra
  • Ribeirao Preto

Postado 27 de abril de 2012 - 15h12min

Não funcionou.. eu acho estranho que esse mesmo código que eu postei funcionou ontem, então só podem ser duas coisas:

1 - O java do iframe tá conflitando com os outros
2 - Problema com o domínio

Ontem eu testei no domínio: http://site.com.br/novosite/index.html e funcionou.
Hoje eu coloquei o site no ar, portanto o domínio ficou: http://site.com.br/index.html e não funcionou.

O domíno do iframe é http://site.com.br/blog

Eu tentei colocar assim no código:

<iframe id="noticias" src="blog/index.php" class="auto-height" scrolling="no" frameborder="0"></iframe>


E ainda nao funcionou.

Então eu acho que o problema só pode ser um conflito entre os scripts, mas eu não lembro de ter adicionado nenhum depois de ter testado e funcionado. Os que estão aí só servem pro menu e eu acredito que estavam antes quando eu testei.

Editado por mah2602, 27 de abril de 2012 - 15h15min.


#6 dif

dif

    Usuário Avançado

  • Moderadores
  • 4.811 posts
  • Membro desde 17/04/2007
516
Excepcional
  • Pelotas-RS

Postado 27 de abril de 2012 - 15h31min

é bem provavel que pode ser algum tipo de conflito mesmo.. como eu ja havia pensado..

tenta incluir a funçao:

jQuery.noConflict();


exemplo:

<script type="text/javascript">
  $(document).ready(function(){
       jQuery.noConflict();
       $(iframe').iframeAutoHeight({minHeight: 240});
    });
</script>


essa funçao livra de possiveis conflitos.. se você tiver outros plugins jQuery na mesma pagina

AMD FX 8120 Bulldozer @4.1Ghz, Asus M5A88-V Evo, Nvidia GeForce GTX 660Ti(2GB)
8GB DDR3 Dual Channel, Samsung HD322HJ Sata-II(320GB), Samsung HD502HI Sata-II(500GB)
Sony Optiarc DVD RW AD-7240S, LG FullHD(1080p) 21" 

#7 mah2602

mah2602

    Novato

  • Membros Plenos
  • Pip
  • 58 posts
  • Membro desde 06/10/2009
1
Neutra
  • Ribeirao Preto

Postado 28 de abril de 2012 - 10h53min

Testei tirar os links para os javas do menu e só deixei o do jquery e do plugin, e ainda não funcionou.

Continuo tentanto, se conseguir posto aqui.


#8 mah2602

mah2602

    Novato

  • Membros Plenos
  • Pip
  • 58 posts
  • Membro desde 06/10/2009
1
Neutra
  • Ribeirao Preto

Postado 30 de abril de 2012 - 16h19min

Depois de 3 dias pesquisando e várias tentativas encontrei a solução:

O problema realmente era o fato do iframe estar em um sub-domínio. Para evitar o erro de segurança é só "informar" ao jQuery que ambas as páginas estão no mesmo domínio.

Coloquei o seguinte código na página que chama o iframe e na do iframe:

<script type="text/javascript">
document.domain="site.com.br"
</script>


:cool:





0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos