[Resolvido] Toggle animado

gbrlsepulveda · Dezembro 1, 2011

Bom galera, to tendo um problema com um toggle no rodapé, é dificil explicar mas vou tentar,

no rodapé do site tem um links que abre uma enquete em toggle, no caso esse rodapé tem um tamanho fixo, com a enquete e outro sem,

quando eu clico no link, a enquete se abre em forma de toggle, e rola um scroll ate o fim da página, e o tamanho do rodapé é redimensionado,

para comportar a enquete, ate ai tudo bem, os problemas são os seguintes:

1 - logo após ele abrir, quando tento subir a tela com scroll, ele da umas quicadas pra ficando no fim da página normalmente só para quando clico em algum lugar.

2 - Quando tento fechar a enquete com o toggle, somente a enquete fecha e o rodapé continua com o tamanho grande, e precisaria redimensionar para o tamanho realn no caso como foi antes do click.

Galera, minha experiência com js e jquery é pequena ainda, estou a procura de um curso mais tá dificil achar um no rio que não seja tão caro, peço a quem puder que ajude, segue abaixo o código, valeu !

/* TOGGLE ===================================================  */
var $tr = jQuery.noConflict();
 $tr(document).ready(function(){
  $tr('#footer_enquete_toggle').css('display', 'none')
  $tr('a.mostrar').click(function() {
	  $tr('#footer_enquete_toggle').slideToggle('slow');		  
	  $tr('#rodape_clear').css('display','block');
	  $tr('#conteudo').css('padding-bottom','431px');
	  $tr('#rodape').css('height','431px');
	  $tr('#rodape_down').css('height','381px');
	  $tr('html, body').stop().animate({scrollTop: $tr("#footer_enquete_toggle").offset().top}, 3000);
  });
 })

/* TOGGLE ===================================================  */

Bom galera, pra facilitar dexei um link aonde vcs possam ver oq acontece

o Tal link

Nana Vasconcelos · Dezembro 2, 2011

Toda vez que você usa whell do mouse não vai rolar a página até que acabe o tempo no animate, o que você precisa é parar o animate, quanto ao tamanho é fácil resolver

<script>
/* TOGGLE  -----> */
var $tr = jQuery.noConflict();
 $tr(document).ready(function(){
   $tr('#footer_enquete_toggle').css('display', 'none')
   $tr('a.mostrar').click(function() {
   $tr('#footer_enquete_toggle').slideToggle('slow');              
   $tr('#rodape_clear').css('display','block');
   $tr('#conteudo').css('padding-bottom','431px');
   $tr('#rodape').css('height','431px');
   $tr('#rodape_down').css('height','381px');

   var stopanimate=$tr('html, body').stop().animate({scrollTop: $tr("#footer_enquete_toggle").offset().top}, 3000);

/* By Nana Vasconcelos - Google; */
	var nanawhell=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" 
	if (document.attachEvent) 
	document.attachEvent("on"+nanawhell, function(e){
	stopanimate.stop(); 
	/* aqui você colocar o tamanho normal do rodapé devolta */ 
	$tr('#rodape').css('height','TAMANHO_NORMAL_px');
	$tr('#rodape_down').css('height','TAMANHO_NORMAL_px');
	})
	else if (document.addEventListener) 
	document.addEventListener(nanawhell, function(e){
	stopanimate.stop();
	/* aqui você colocar o tamanho normal do rodapé devolta */ 
	$tr('#rodape').css('height','TAMANHO_NORMAL_px');
	$tr('#rodape_down').css('height','TAMANHO_NORMAL_px');		
	}, false)	


   });
 })

/* <----- TOGGLE  */
</script>

Pare tudo que você começar em jQuery com

<script> stop(); </script>

gbrlsepulveda · Dezembro 2, 2011

Cara, muito obrigado pela resposta, no caso o problema da rolagem parou, mas na hora de retorna o rodapé continua na mesma, eu tentei fazer uns testes com slideUp() e slideDown(), mas quando vou dar um slideup() ele n ta funcionando ;s usei este código abaixo


 $(document).ready(function(){
  $('#footer_enquete_toggle').css('display', 'none')
  $('a.mostrar').click(function() {
	  $('#footer_enquete_toggle').stop().slideDown('slow');		  
	  $('#rodape_clear').css('display','block');
	  $('#conteudo').css('padding-bottom','431px');
	  $('#rodape').css('height','431px');
	  $('#rodape_down').css('height','381px');
	  $('html, body').animate({scrollTop: $("#footer_enquete_toggle").offset().top}, 1000);
	  $('a.mostrar').removeClass('mostrar').addClass('esconder');
	  stop();
  });


  $('a.esconder').click(function() {
	  $('#footer_enquete_toggle').slideUp(1000);		  
	  $('#rodape_clear').css('display','none');
	  $('#conteudo').css('padding-bottom','331px');
	  $('#rodape').css('height','331px');
	  $('#rodape_down').css('height','281px');
	  $('a.esconder').removeClass('esconder').addClass('mostrar');
  });

 })

Nana Vasconcelos · Dezembro 2, 2011

Cara, muito obrigado pela resposta,

:ban: Você já viu um cara chamado Nana

voltando ao assunto

tire isto

                
/* aqui você colocar o tamanho normal do rodapé devolta */ 
$tr('#rodape').css('height','TAMANHO_NORMAL_px');
$tr('#rodape_down').css('height','TAMANHO_NORMAL_px');

eu pensei que era para voltar ao tamanho normal na rolagem de volta

coloque onde você clica para fechar,

quando você clica para abrir não aumenta o rodapé

                 $('#conteudo').css('padding-bottom','431px');
                 $('#rodape').css('height','431px');

então quando clicar para fechar diminua o valor para menor que esses acima ou o valor original

$('#conteudo').css('padding-bottom','200px'); // valores sugestivos
$('#rodape').css('height','200px'); // valores sugestivos
$('#rodape_down').css('height','190px'); // valores sugestivos

gbrlsepulveda · Dezembro 2, 2011

Nana, desculpa, pra falar a verdade nem tinha visto o nome,

sim era pra voltar ao tamanho normal do rodapé, só

que ele não voltou, só tinha resolvido o problema do rodapé preso no bottom,

mas dps ainda apareceu um bug, o rodape ficava sem cor de fundo quando subia novamente,

mas o problema maior ta sendo pra fechar, ele não ta voltando pro msm tamanho o rodapé;s

Nana Vasconcelos · Dezembro 2, 2011

você postou o código do click para abrir, viu que foi fácil resolver.

agora posta o código botão que você clica para fechar, vai ser fácil resolver também

gbrlsepulveda · Dezembro 2, 2011

então, seria o mesmo botão, a idéia, era trocar a classe dele pra fechar por ele msm, usando outro botão eu ate consegui dps (com alguns problemas), mas precisaria fechar no msm, tentei trocar a classe na hora do click, ate trocou mas não executou a function dps pra recolher o rodapé ;s

Nana Vasconcelos · Dezembro 2, 2011

desculpe não tinha visto ali, sabe o que é que um nova classe adicionada o documento ainda não leu ela então não funciona mesmo, mude para live

        $('a.esconder').live('click', function() {
                 $('#footer_enquete_toggle').slideUp(1000);              
                 $('#rodape_clear').css('display','none');
                 $('#conteudo').css('padding-bottom','331px');
                 $('#rodape').css('height','331px');
                 $('#rodape_down').css('height','281px');
                 $('a.esconder').removeClass('esconder').addClass('mostrar');
         });

gbrlsepulveda · Dezembro 2, 2011

ate funcionou, mas rolou um efeito sanfona, abriu e logo após fechou, estou tentando resolver, mas teria alguma sugestão ?

Nana Vasconcelos · Dezembro 2, 2011

tenho sugestões, mas acho que você está trabalhando em localhost, coloca lá online pra mim ver como está agora

gbrlsepulveda · Dezembro 2, 2011

Atualizei lá

Nana Vasconcelos · Dezembro 2, 2011

está do mesmo jeito ali no link que você passou primeiro, você não colocou os scripts

gbrlsepulveda · Dezembro 2, 2011

o script ta na pasta scripts/funcionalidades.js esse arquivo ta sendo chamado no footer da página, no caso ta com esse código no momento

/* TOGGLE ===================================================  */

 $(document).ready(function(){
  $('#footer_enquete_toggle').css('display', 'none')
  $('a.mostrar').click(function() {
	  $('#footer_enquete_toggle').slideDown('slow');		  
	  $('#rodape_clear').css('display','block');
	  $('#conteudo').css('padding-bottom','431px');
	  $('#rodape').css('height','431px');
	  $('#rodape_down').css('height','381px');
	  $('html, body').stop().animate({scrollTop: $("#footer_enquete_toggle").offset().top}, 1000);
	  $('a.mostrar').removeClass('mostrar').addClass('esconder');

  });
 })

 $(function () {
        $('a.esconder').live('click', function() {
                 $('#footer_enquete_toggle').slideUp(1000);              
                 $('#rodape_clear').css('display','none');
             	  $('#conteudo').css('padding-bottom','165px');
			  $('#rodape').css('height','165px');
			  $('#rodape_down').css('height','115px');
			  $('a.esconder').removeClass('esconder').addClass('mostrar');
         });
 })


/* TOGGLE ===================================================  */

Nana Vasconcelos · Dezembro 3, 2011

você simplesmente tirou o onmousewhel, se alguém tentar rolar a página enquanto não acabar o animate a página fica travada

esse stop ai não serve, alem de que ele está antes do animate, você precisa armazenar o animate em uma var e depois chamar o stop junto com o onmousewhell, tudo como eu tinha passado,

o correto

var stopanimate=$tr('html, body').stop().animate({scrollTop: $tr("#footer_enquete_toggle").offset().top}, 3000);
var mousewhell=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" 
if (document.attachEvent) 
document.attachEvent("on"+mousewhell, function(e){
stopanimate.stop();  })
else if (document.addEventListener) 
document.addEventListener(mousewhell, function(e){
stopanimate.stop(); 
}, false)

qual o problema de usar o código correto, se você soubese que essas linhas acima é o sonho de muitos programadores

gbrlsepulveda · Dezembro 5, 2011

Nana, desculpe por não ter feito um bom uso do código, como disse não tenho mt exp em js, normalmente cmg oq deu certo fica, oq n funfa eu mudo, não q tinha algo errado, mas não eu soube usar de forma correta,

no fim eu usei algo como isso no código não ficou da forma q eu esperava mas ate q funcionou, obg pela ajuda.

 $(document).ready(function(){
  $('#footer_enquete_toggle').css('display', 'none')
  $('a.mostrar').click(function() {
	  $('#footer_enquete_toggle').slideDown('slow');		  
	  $('#rodape_clear').css('display','block');
	  $('#conteudo').css('padding-bottom','431px');
	  $('#rodape').css('height','431px');
	  $('#rodape_down').css('height','381px');
	  /*$('html, body').stop().animate({scrollTop: $("#footer_enquete_toggle").offset().top}, 1000);*/
	  $('a.mostrar').css('display', 'none');
	  $('a.esconder').css('display', 'block');
	  var stopanimate=$('html, body').stop().animate({scrollTop: $("#footer_enquete_toggle").offset().top}, 3000);
	  var mousewhell=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" 
	  if (document.attachEvent) 
		  document.attachEvent("on"+mousewhell, function(e){
		  stopanimate.stop();  })
	  else if (document.addEventListener) 
		  document.addEventListener(mousewhell, function(e){
		  stopanimate.stop(); 
	  }, false) 


  });
 })

 $(function () {
   $('a.esconder').click(function() {
		  $('#footer_enquete_toggle').slideUp(1000);              

		  $('a.esconder').css('display', 'none');
		  $('a.mostrar').css('display', 'block');
		  // Agora temos um Delay de 3 segundos
		  var stopanimate=$('html, body').stop().animate({scrollTop: $("body").offset().top}, 1000);

		  $(this).delay(1000,function(){	  
			  // Mudamos a cor de fundo da Div para azul
			  $('#conteudo').css('padding-bottom','165px');
			  $('#rodape').css('height','165px');
			  $('#rodape_down').css('height','115px');
			  $('#rodape_clear').css('display','none');  		  
		  });
	});
 })

Estou retirando o nome do cliente e att naquele link pra qualquer pessoa q queira ver.

Arquivado

[Resolvido] Toggle animado

Recommended Posts

gbrlsepulveda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gbrlsepulveda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gbrlsepulveda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gbrlsepulveda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gbrlsepulveda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gbrlsepulveda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gbrlsepulveda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gbrlsepulveda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante