Fazer aparecer frame ao clicar em um link

Rique · 31 de março de 2011

Olá pessoal!

Estou tentando fazer um sistema de ajuda conforme mostra a seguir. Tenho as páginas home.php e ajuda.php. Na página home.php tem um link (também pode ser um botão) ajuda. Ao clicar neste link ajuda da página home.php aparece a página ajuda.php em um frame à direira ocupando 50% da tela. Na página ajuda.php tem um link fechar que faz com que desapareça este frame voltando à página home.php.

Já pesquisei na internet mas não encontrei isso. Qualquer solução serve, mas também gostaria de saber se o Dreamweaver faz isso e, se fizer, como faz.

Desde já agradeço.

DiF · 31 de março de 2011

Olá pessoal!
Estou tentando fazer um sistema de ajuda conforme mostra a seguir. Tenho as páginas home.php e ajuda.php. Na página home.php tem um link (também pode ser um botão) ajuda. Ao clicar neste link ajuda da página home.php aparece a página ajuda.php em um frame à direira ocupando 50% da tela. Na página ajuda.php tem um link fechar que faz com que desapareça este frame voltando à página home.php.

Já pesquisei na internet mas não encontrei isso. Qualquer solução serve, mas também gostaria de saber se o Dreamweaver faz isso e, se fizer, como faz.

Desde já agradeço.

o que você pode fazer é simplesmente criar DIV ao invés de um frame, e fazer que apareceça e feche com jquery. você pode determinar a posiçao da div com css e usar a propriedade z-index para sobreposiçao de div se for preciso.

Roberto.Korea · 31 de março de 2011

Bom, acredito que html + Javascript resolvem seu problema

primeiramente você deve colocar um <iframe> no local onde você quer que apareça, e dentro dele você carregará a página ajuda.

No evento onClick do botão ou link, faça uma função no javascript que fará com que ele mostre ou oculte o iframe.

DiF · 31 de março de 2011

Bom, acredito que html + Javascript resolvem seu problema
primeiramente você deve colocar um <iframe> no local onde você quer que apareça, e dentro dele você carregará a página ajuda.

No evento onClick do botão ou link, faça uma função no javascript que fará com que ele mostre ou oculte o iframe.

só nao entendi porque usar iframe, se ele usa php... pode usar um include. a funçao de show e hide com jquery é bem mais simplificado e fácil.

Roberto.Korea · 31 de março de 2011

Só dei uma dica de usar iframe, mas pode ser com uma <div> também, só que tem que tomar cuidado onde colocar ela para não desestruturar a página.

Utilizar a biblioteca do Jquery para fazer um hide e show acho que não precisa, uma função em javascript com 5 linhas faz isso, muito mais rápido na hora de carregar a página.

DiF · 31 de março de 2011

Só dei uma dica de usar iframe, mas pode ser com uma <div> também, só que tem que tomar cuidado onde colocar ela para não desestruturar a página.
Utilizar a biblioteca do Jquery para fazer um hide e show acho que não precisa, uma função em javascript com 5 linhas faz isso, muito mais rápido na hora de carregar a página.

discordo, rsrs como sempre...

e se o cara quiser por um efeito de slide up e down? fade in fade out? o jquery oferece de forma rapida e simples.

da pra fazer em 6 linhas também

opção 1 com Toggle()


$(document).ready(function(){
	  $('#ajuda').hide();
	  $('a#abreFechaAjuda').click(function(){
	      $('#ajuda').toggle();
	      });
	});

esse codigo acima utiliza o mesmo link para abrir e para fechar.

HTML para a opção 1:


<a id="abreFechaAjuda" href="#">Ajuda</a>
<div id="ajuda"> 
    <?php include 'ajuda.php'; ?>

</div>

se quiser fazer separado é quase a mesma coisa.. porém funcoes diferentes:

opção 2 com funçao separada de abrir e fechar:


$(document).ready(function(){  
   $('#ajuda').hide();
      $('a#abreAjuda').click(function(){
	    $('#ajuda').show(); 
     });

      $('a#fechar').click(function(){
    		  $('#ajuda').hide();
     }); 
});

e no html para a opção 2 fica assim:


<a id="abreAjuda" href="#">Ajuda</a>
<div id="ajuda">
     <a id="fechar" href="#">Fechar [x]</a> 
      <?php include 'ajuda.php'; ?>
</div>

ainda você pode usar diferente efeitos no jquery como por exemplo:

ao invés de show(). pode usar fadeIn() ou slideDown() para aparecer a div

e ao invés de usar o hide() para esconder a div quando clicar pode usar fadeOut() ou slideUp().

note que você deve usar o hide() na segunda linha para deixar a div escondida.

o resto para esconder com click no link.. você pode usar fadeOut(), slideUp(), toggle() e hide()

você pode parametrizar tempo de execuçao dentro dos parenteses.. por exemplo:

fadeIn(400); - tempo em milisegundo

fadeIn('slow'); ou fadeIn('fast'); com string

jquery é bem simples de usar basta importar a classe dela no head você nao precisa nem ter no seu pc...pode importar assim:

que você pega diretamente do site

sem contar que você pode tambem usar o animate() para criar seus proprios efeitos desejados.

roberto, reconheça que o jquery é prático em relaçao a isso. como ja diz meu professor... pra que reinventar a roda? se ja existe pronto.. porque nao utilizar?

Nao esqueça amigo , você pode declarar no CSS a posiçao da div ajuda, o tamanho dela com width e height, e definir um z-index para ficar por cima das divs. no z-index.. quanto maior o numero mais acima fica: z-index: 1 faz uma div ficar atras de uma div com z-index: 2

com relaçao a onde por aquelas divs.. você pode colocar a div onde quiser.. bem longe do layout para nao quebrar.. porque vai definir a posiçao na tela pelo CSS ou com position: absolute ou relative.

Roberto.Korea · 31 de março de 2011

Dif, logicamente, neste caso, é melhor o jQuery...

O jQuery é uma mão na roda mesmo, não tem como falar que não, se não fosse não teria usado ele

quase 1 ano em todos os meus projetos.

Mas no caso de somente hide, eu achava melhor fazer uma funçãozinha em javascript, pois seria como você importar um cargueiro para levar um velotrol.

No caso de ele querer mais funções, ai a coisa muda.

Sobre ele usar a linha:

 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.mim.js">
</script>

Seria interessante você usar quando estiver trabalhando com o servidor, localmente, baixe os .js relacionados ao jQuery e coloque em uma pasta, deste modo, pode fazer as modificações necessárias offline, sem contar que é mais rápido, afinal irá estar no localhost.

Quando for colocar no ar (servidor) coloque a linha que nosso amigo Dif disponibilizou, pois faz com que o arquivo seja processado no google e não no servidor, isso traz velocidade no processamento.

DiF · 31 de março de 2011

Dif, logicamente, neste caso, é melhor o jQuery...
O jQuery é uma mão na roda mesmo, não tem como falar que não, se não fosse não teria usado ele

quase 1 ano em todos os meus projetos.

Mas no caso de somente hide, eu achava melhor fazer uma funçãozinha em javascript, pois seria como você importar um cargueiro para levar um velotrol.

No caso de ele querer mais funções, ai a coisa muda.

Sobre ele usar a linha:
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.mim.js">
</script> 
Seria interessante você usar quando estiver trabalhando com o servidor, localmente, baixe os .js relacionados ao jQuery e coloque em uma pasta, deste modo, pode fazer as modificações necessárias offline, sem contar que é mais rápido, afinal irá estar no localhost.

Quando for colocar no ar (servidor) coloque a linha que nosso amigo Dif disponibilizou, pois faz com que o arquivo seja processado no google e não no servidor, isso traz velocidade no processamento.

a sim, eu só comentei de usar ali.. porque tem gente q nao se atina.. a baixar e usar no servidor.

eu particularmente sempre tenho no meu servidor é mais rápido o acesso.

Rique · 31 de março de 2011

Obrigado pela ajuda.

Mas ainda não consegui resolver. Copiei o jquery.min.js pra minha máquina no mesmo diretório das páginas. Acho que faltou eu colocar alguma coisa. Fiz da seguinte maneira.

No head coloquei o seguinte código:


<script type="text/javascript" src="jquery.mim.js">
$(document).ready(function(){  
   $('#ajuda').hide();
      $('a#abreAjuda').click(function(){
	    $('#ajuda').show(); 
     });

      $('a#fechar').click(function(){
    		  $('#ajuda').hide();
     }); 
});
</script>

Dentro do body coloquei o segunte código:


<a id="abreAjuda" href="#">Ajuda</a>
<div id="ajuda">
     <a id="fechar" href="#">Fechar [x]</a> 
      <?php include 'ajuda.php'; ?>
</div>

Não sei porque não funcionou. O que eu faço?

DiF · 31 de março de 2011

Obrigado pela ajuda.
Mas ainda não consegui resolver. Copiei o jquery.min.js pra minha máquina no mesmo diretório das páginas. Acho que faltou eu colocar alguma coisa. Fiz da seguinte maneira.

No head coloquei o seguinte código:
<script type="text/javascript" src="jquery.mim.js">
$(document).ready(function(){  
   $('#ajuda').hide();
      $('a#abreAjuda').click(function(){
	    $('#ajuda').show(); 
     });

      $('a#fechar').click(function(){
    		  $('#ajuda').hide();
     }); 
});
</script>
Dentro do body coloquei o segunte código:
<a id="abreAjuda" href="#">Ajuda</a>
<div id="ajuda">
     <a id="fechar" href="#">Fechar [x]</a> 
      <?php include 'ajuda.php'; ?>
</div>
Não sei porque não funcionou. O que eu faço?

amigo coloque assim:


<script type="text/javascript" src="jquery.mim.js">[COLOR="Red"]</script>[/COLOR]
[COLOR="Red"]<script type="text/javascript">[/COLOR]
$(document).ready(function(){  
   $('#ajuda').hide();
      $('a#abreAjuda').click(function(){
	    $('#ajuda').show(); 
     });

      $('a#fechar').click(function(){
    		  $('#ajuda').hide();
     }); 
});
</script>

nao coloque os dois na mesma.. porque nao vai funcionar.. testei aqui e funciona só fazendo do jeito q eu te falei

Rique · 31 de março de 2011

Fiz o que você falou mas ainda não funcionou. Será que falta alguma coisa nas tags <a>, por exemplo, onClick ou um href diferente?

DiF · 31 de março de 2011


<script type="text/javascript" src="jquery-1.5.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	  $('#ajuda').hide();
    	$('a#abreAjuda').click(function(){	
			$('#ajuda').fadeIn(400);
 	   });
    $('a#fechar').click(function(){					   
 	  		$('#ajuda').fadeOut(400);
    }); 
}); 
</script>

funciona amigo...

de errado no codigo nao tem.. pode ser q você pegou errado o jquery.

usa este aqui:

http://www.4shared.com/document/Ad73VURJ/jquery-152.html

Rique · 31 de março de 2011

Peguei esse jquery que você falou. Continua não pegando. Veja o código das duas páginas que eu criei para testar (home.php e ajuda.php).

home.php


<!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>Home</title>
<script type="text/javascript" src="jquery.mim.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
   $('#ajuda').hide();
      $('a#abreAjuda').click(function(){
	    $('#ajuda').show(); 
     });

      $('a#fechar').click(function(){
    		  $('#ajuda').hide();
     }); 
});
</script>
</head>
<body>
<p><a id="abreAjuda" href="#">Ajuda</a></p>
<div id="ajuda">
     <a id="fechar" href="#">Fechar [x]</a> 
      <?php include 'ajuda.php'; ?>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Página principal</p>
</body>

ajuda.php


<!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>Ajuda</title>

</head>

<body>
<p>Mensagem de teste
</p>
<p>Aqui está o conteúdo da página de ajuda.</p>
</body>
</html>

Devo ter errado alguma coisa. Onde está o erro?

DiF · 1 de abril de 2011

amigo, seu codigo nao tem nenhum erro. está absolutamente correto e funcionando.

seu ERRO esta no nome da jquery qvc esta usando...

por favor baixe o arquivo que eu coloquei no link aqui... e NAO MUDE o nome.

deixe "jquery-1.5.2.js"

funciona perfeitamente vou por imagens para você ver:

a proposito.. eu criei um css da div ajuda só para a visualizaçao.

aqui esta o código completo:


<!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>Home</title>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
   $('#ajuda').hide();
      $('a#abreAjuda').click(function(){
	    $('#ajuda').show(); 
     });

      $('a#fechar').click(function(){
    		  $('#ajuda').hide();
     }); 
});
</script>

<style type="text/css">
	#ajuda{
		background-color: #ADF00E; 
		border: 1px solid #000000; 
		width: 400px; height: 500px;
	}
</style>

</head>
<body>
<p><a id="abreAjuda" href="#">Ajuda</a></p>
<div id="ajuda">
     <a id="fechar" href="#">Fechar [x]</a> 
      <?php include 'ajuda.php'; ?>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Página principal</p>
</body>

Rique · 1 de abril de 2011

Muito obrigado!

Agora sim funcionou. Funcionou independentemente do nome do jquery. Quando eu descobrir qual era o problema que estava dando vou postar aqui. Mas eu gostaria de fazer esse ajuda do lado direito da tela, dividindo a tela (conforme explicado na primeira mensagem deste tópico). Acho que agora estou mais perto de conseguir exatamente o que eu quero. Como eu faço isso?

Abraços.

DiF · 1 de abril de 2011

Muito obrigado!
Agora sim funcionou. Funcionou independentemente do nome do jquery. Quando eu descobrir qual era o problema que estava dando vou postar aqui. Mas eu gostaria de fazer esse ajuda do lado direito da tela, dividindo a tela (conforme explicado na primeira mensagem deste tópico). Acho que agora estou mais perto de conseguir exatamente o que eu quero. Como eu faço isso?

Abraços.

esse passo é simples.

basta você definir um css para sua div ajuda algo do tipo:



<style type="text/css">

#ajuda{

position: absolute;

top: 20px;
right: 40px;

}

</style>

nao esqueça que você pode especificar o numero de pixels utilizado no top e no right.

nao sei você é familiarizado com css.. mas essas medidas funcionam da seguinte forma:

top: 10px determina que a div ficaria a 10 pixels do topo.

right: 30px determinaria que a div ficaria a 30 px da margem direita.( ou seja quanto maior o numero mais para a esquerda ela irá).

e a position :absolute.. você determina que a posiçao da div é absoluta.

você pode usar como relative também (relativo) se precissar.

bem é isso.. qualquer coisa.. da o grito

aqui uma video aula q eu fiz para abrir e fechar divs com jquery

Rique · 2 de abril de 2011

Obrigado dif.

Muito bom os seu vídeos. Obrigado também pela atenção. Ainda não consegui fazer o que eu quero, mas estou aprendendo muito. Fiz assim:


<style type="text/css">
	#ajuda{
		position: absolute;
		background-color: #ADF00E; 
		border: 1px solid #000000; 
		width: 400px; height: 500px;
		top: 0px;
		right: 0px;
	}
</style>

O ajuda está aparecendo do lado direito da tela, só que a tela do ajuda aparece por cima da página, tirando a visibilidade do que tem por trás do ajuda. Por isso, acho que frameset seria a melhor alternativa para o que eu pretendo fazer. Como faço para criar o ajuda conforme já mencionado?

DiF · 2 de abril de 2011

Obrigado dif.
Muito bom os seu vídeos. Obrigado também pela atenção. Ainda não consegui fazer o que eu quero, mas estou aprendendo muito. Fiz assim:
<style type="text/css">
	#ajuda{
		position: absolute;
		background-color: #ADF00E; 
		border: 1px solid #000000; 
		width: 400px; height: 500px;
		top: 0px;
		right: 0px;
	}
</style>
O ajuda está aparecendo do lado direito da tela, só que a tela do ajuda aparece por cima da página, tirando a visibilidade do que tem por trás do ajuda. Por isso, acho que frameset seria a melhor alternativa para o que eu pretendo fazer. Como faço para criar o ajuda conforme já mencionado?

a ideia era justamente essa, usar uma div para aparecer ajuda, e fecha-la quando quiser para ver o resto da pagina.

porque o uso do framesets ja sao considerados obsoletos pela W3C eles recomendam que nao o usem mais.

se pra criar uma ajuda.. eu recomendo o uso de Tooltip feito em jquery.. aquelas caxinhas que aparexem quando passam o mouse por cima de um elemento, imagem.. ou caractere de interrogação.

Rique · 2 de abril de 2011

o uso do framesets ja sao considerados obsoletos pela W3C eles recomendam que nao o usem mais.

Muito obrigado pela ótima informação!

Não sabia que o uso de framesets já é considerado obsoleto pela W3C e é recomendável que não use mais. É que o cliente falou que tá querendo um ajuda assim. Já conversei com ele sobre o uso de Tooltip e ele falou que não quer assim. Mas, vou conversar com ele sobre isso pra ver o que fica decidido. Esse já é um ótimo argumento. Vou ver isso aqui e depois posto como resolveu.

Abraços.

DiF · 3 de abril de 2011

Muito obrigado pela ótima informação!
Não sabia que o uso de framesets já é considerado obsoleto pela W3C e é recomendável que não use mais. É que o cliente falou que tá querendo um ajuda assim. Já conversei com ele sobre o uso de Tooltip e ele falou que não quer assim. Mas, vou conversar com ele sobre isso pra ver o que fica decidido. Esse já é um ótimo argumento. Vou ver isso aqui e depois posto como resolveu.

Abraços.

exato, usando iframes, frameset,... você esta indo contra as regras da webstandard dadas pelas W3C. ou seja.. se você fazer uma validaçao na w3c provavelmente nao irá passar.

você deve explicar ao cliente que compromete a performace do website, alem de nao ser nada elegante. por isso sugeri o uso de tooltip para ajuda ou simplesmente use divs flutuantes pelo site.

deixando a ideia.. o que você pode fazer é utilizar o jquery com o método draggable() que permite que o usuario movimente uma div ou um elemento pelo site. então você pode aplicar na div ajuda o metodo draggable() e quando o usuario clicar para abrir.. ele poderá movimentar a div pra onde ele quiser pra leer o resto do site,,, você pode dar a opção de minimizar a div... esconde-la

Rique · 4 de abril de 2011

Obrigado dif!

Falei com o cliente e ficou decidido fazer do jeito que você mostrou (com div por cima da tela ao lado direito).

<style type="text/css">

#ajuda{

position: absolute;

border: 1px solid #000000;

width: 400px; height: 500px;

top: 0px;

right: 0px;

}

</style>

Abraços.

DiF · 5 de abril de 2011

Obrigado dif!
Falei com o cliente e ficou decidido fazer do jeito que você mostrou (com div por cima da tela ao lado direito).

Abraços.

legal cara, agora é se dedicar. particularmente para ajudas, eu uso sempre o tooltip. mas nada impede que sejam divs como recomendei a você. outro método que você pode fazer q eu andei achando pela google é quando clicar em ajuda, desce uma caixa semi-transparente de cima com as ajudas e com um link de fechar. quando clica a div volta pra cima se "fechando". bem legal eu fiz um exemplo aqui e achei bom. estou ate pensando em usar no meu tcc.

abraço