Ir para conteúdo
Fórum Script Brasil
  • 0

iFrame move com botão do meio ou seleção... ajuda?


LucasConstantino

Pergunta

Olá, olá!

Então, a questão é a seguinte: tenho minha página bunitinha, com menu no topo e um iFrame abaixo, onde todos os links são abertos. Esse iFrame tem altura auto ajustável, tudo funcionando perfeitamente tanto no firefox quanto no IE. Daí então vêm o problema: meu iFrame se ajusta automaticamente com o tamanho do conteúdo da página a ser exibida, porém, no Firefox, quando clico com o botão direito do mouse dentro da área do iFrame e movo para baixo, o iFrame, que tem a altura e largura já ajustada, se move um pouco, fazendo com que a primeira linha desapareça por traz da área fora do iFrame. No IE isso também ocorre, e, pra piorar, também ocorre quando alguém seleciona o texto dentro do iFrame até o fim do mesmo. Isso não ocorre no Firefox, mas me parece o mesmo problema: o iFrame, apesar de conter o mesmo tamanho (depois do auto-ajuste) que a DIV que o comporta e conter o mesmo tamanho da página-conteúdo que ele exibe, ou seja, tudo estar bem sincronizado, ele parece conter mais área "por traz dos panos".

Se alguém souber algum código que torne o iFrame "imovel", ou seja, que faça com que, ao clicar o botão direito do mouse nele ou ao selecionar seu texto, ele não mova.

Claro, eu poderia resolver o problema dando um espaçamento entre o inicio do texto e o top (padding) na página-conteúdo, mas não consigo entender essa falha! e, sinceramente, se eu der padding no top, a aparencia do site vai por agua abaixo...

Bom, se vocês quiserem testar, aqui vai uma pagina teste:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
	height: 500px;
	width: 600px;
	padding-top: 20px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-left: 5px;
	background-color: #000066;
}
-->
</style>
</head>

<body>

<div id="container"><iframe src="iframe.html" width="590" height="470" scrolling="no"></iframe></div>

</body>
</html>
Esse primeiro você salva como "qualquernome.html".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
	height: 470px;
	width: 580px;
	background-color: #CCCCCC;
}
body {
	background-color: #cccccc;
}
-->
</style>
</head>

<body>

<div id="container">

Conteúdo a a a a a  a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a

</div>
</body>
</html>

O segundo você salva como "iframe.html"

Coloca os dois na mesma pasta e abre o primeiro. Dai você clica na area cinza do iFrame com o botão do meio do mouse e rola pra cima ou pra baixo pra ver o problema. Se abrir no IE você pode também selecionar o texto pra testar.

ATUALIZADO:

Página teste

bom, agora que eu aprendi a mexer no Dropbox, recomendo que você baixem também... página teste na web funcionando em menos de 10 segundos de trabalho :)

/ATUALIZADO:

Muito obrigado por ler minha pergunta, aguardo respostas...

Editado por LucasConstantino
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

É, depois de um dia quase todo mexendo no site eu tive uma idéia que salvou tudo:

Se o conteúdo do iFrame estava grande demais e consequentemente mostrando a opção de rolar a tela, eu simplesmente calculei a quantidade de pixels que a imagem rolava (no photoshop, sobrepus um printscreen sobre outro, um antes e outro pós a rolagem), e coloquei essa mesma quantidade de pixels a mais na altura do iFrame! A mesma coisa pra largura! Ah, e se alguém usar algum script de auto ajuste da altura do iFrame, é so colocar no script, logo depois da variavel final offsetheight, " + 20"... ou a quantidade de pixels necessária...

Então, pra resolver o problema é só nunca deixar o conteúdo do iFrame ter altura/largura igual a do iFrame, sempre deixar pelo menos 10 pixels menos.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...