Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Entre para seguir isso  
mah2602

Auto Height com jQuery - Problemas

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • 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

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    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>

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • 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

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    é 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

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • 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.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • 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:

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário

    Entre para seguir isso  





    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×