Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fabiodurgante

Efeito login iMasters

Por , em Javascript

Recommended Posts

fabiodurgante    0

fabiodurgante
Postado

alguem poderia me dizer como posso fazer um efeito igual a esse do IMASTER a tela de login quando voce clica em ENTRAR abaixa uma nova janela na mesma janela faz tempo q quero aprender a fazer isso muito legal so q nao sei por onde comessar alguem poderia exclarecer ??????

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Nome do tópico alterado:

 

duvida http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Efeito login iMasters

 

Tópico movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é um 'simples' display: none|block;

Com um efeito de ir aparecendo aos poucos.. você consegue fazer isso facilmente com jQuery, usando o método show('slow');

o elemento começa com display: none, e ao clicar em algum lugar, você aplica o show com velocidade slow. Ou qualquer outro efeito.. slide.. animate..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Cara, não é uma página.

 

Primeiro dá uma estudada melhor sobre como a jQuery funciona e teu JavaScript vai ficar menor e melhor. Daí você coloca uma DIV oculta e no evento click() da própria jQuery você mostra essa DIV com slideDown() (se não me engano o nome do método).

 

O resto é programação do lado servidor, como o login mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Assim:

 

$(function(){
     $("#ID DO ELEMENTO QUE RECEBE O CLIQUE").click(function(){
          $("#ID DO ELEMENTO QUE SOFRE O EFEITO").animate({height: "toggle", opacity: "toggle"});
     });
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Assim:

 

$(function(){
     $("#ID DO ELEMENTO QUE RECEBE O CLIQUE").click(function(){
          $("#ID DO ELEMENTO QUE SOFRE O EFEITO").animate({height: "toggle", opacity: "toggle"});
     });
});
Dois adendos.

 

Não precisa necessáriamente ser um ID, pode ser uma classe, uma instrução XPath, enfim.

 

Segundo que, para ser igual ao do iMasters, precisa dentro do click() de um return false para que a ação do clique normal disparada pelonavegador seja cancelada.

 

Faça o teste. Se você, deslogado, clicar bem rápido no link Entrar vai para a página de login. Se você espera a página ser totalmente carregada (que inclui os JavaScript's), ao clicar no link abre-se ao painel, ao invés do redirecionamento.

 

Agora... Fiquei na dúvida quato a esse parâmetro toggle para a propriedade opacity. Vou pesquisar um pouco por que só de ler não faz sentido :P

Compartilhar este post

Link para o post
Compartilhar em outros sites

fabiodurgante    0

fabiodurgante
Postado

essa pagina html tem um form quero q ele nao apareca na pagina, somente aparece quando clicar no botao


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>


<script>      
       
$('aqui').click(function(){
            $('pesquisar').animate({width: "400",opacity : 0.2}, 1200)
            .animate({height: "400",opacity : 1},1200)
            .animate({opacity : 0.2});
        });

</script>

 <form name="pesquisar" method="post"> 
 
Nome 
<input type="text" name="nome" value=""/>

 <input type="submit" name="sub" value="OK"/>

</form>            
      <input id ='aqui' type='button' value='aqui'  >  
     
  
  </body>
</html>

aparece erro objeto esperado linha 17 como fazer esse efeito no form ??????

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

$('aqui') não existe nos nós do documento gerado.

 

Você deveria ter usado $('#aqui') para pegarpelo ID do botão.

Compartilhar este post

Link para o post
Compartilhar em outros sites

fabiodurgante    0

fabiodurgante
Postado 

  <script src="C:/jquery-1.3.2.js" type="text/javascript"></script> 

<script>      
       
 $('#aqui').click(function(){
            $('pesquisar').animate({width: "400",opacity : 0.2}, 1200)
            .animate({height: "400",opacity : 1},1200)
            .animate({opacity : 0.2});
        });

</script>

 <form name="pesquisar" method="post"> 
 
Nome 
<input type="text" name="nome" value=""/>

 <input type="submit" name="sub" value="OK"/>

</form>      
      
      <input id ="aqui" type="button" value="aqui"  >

coloquei essa linha aqui

<script src="C:/jquery-1.3.2.js" type="text/javascript"></script>

 

parou de dar erro porem nao acontece nada quando clico no botao

Compartilhar este post

Link para o post
Compartilhar em outros sites

fabiodurgante    0

fabiodurgante
Postado 

<!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>Simple Slide Panel</title>

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

<script type="text/javascript">
$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
	
	 
});
</script>

<style type="text/css">
body {
	margin: 0 auto;
	padding: 0;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#panel {
	background: #754c24;
	height: 200px;
	display: none;
 
        
}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #422410;
	background: url(btn-slide.gif) no-repeat center top;
        
}
.btn-slide {
	background: url(white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}

</style>
   
</head>

<body>

<div id="panel">
	 <form name="pesquisar" method="post"> 
 
Nome 
<input type="text" name="nome" value=""/>


 <input type="submit" name="sub" value="OK"/>
<br/>
<br/>


</form>  
</div>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

</body>
</html>
ae ate q enfim vo deichar o negocio pronto ai se alguem um dia tiver interrese

so presisa baxa o arquivo

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

 

da net e ta funcionando valeu ai a todos pela ajuda

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Vem cá, vai me dizer que você REALMENTE estava invocando funções do framework SEM incluí-lo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Conhece os eventos Javascript?

 

jQuery te fornece várias opções.. pesquise sobre:

$(window).load(function(){
//
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito