DIV Deslizante

[Fábio_R.R 0]

Olá

 

Não conheço nada de JS, mas vivo usando suas funcionalidade na base do copia e cola. Estou precisando muito de uma funcionalidade que encontrei no JQuery. Segue a chamada abaixo:

$(document).ready(function() {
	$(".box-curtir-flutuante").hover(function(){
		$(this).stop().animate({left: "0"}, "slow");
		}, 
			function(){
				$(this).stop().animate({left: "-805"}, "slow");}, 500);
			});

 

Só que isso funciona assim: coloco o mouse em cima de uma abinha que fica no canto da tela e uma DIV (expansível) surge do canto da tela. Enquanto eu fico com o mouse em cima da DIV ela permanece na tela. Assim que tiro o mouse de cima ela desliza de volta, ficando só a abinha visível.

 

Muito bem! Mas como eu quero que funcione:

 

1º - Quero ter que CLICAR na abinha para expandir a DIV (e não apenas passar o mouse em cima (tentei trocar o hover por click, mas não adiantou));

 

2º - Quero que a DIV permaneça visível na tela mesmo que o mouse não esteja em cima dela;

 

3º - Quero ter que CLICAR na abinha para fazer com que a DIV deslize de volta.

 

 

Como posso adaptar essa chamada para as funcionalidades que desejo?

 

Obrigado e abç a todos!!!

 

[Bergs 53]

Olá na verdade a abinha vai ter que ser feita separadamente do box que ela puxa porque se fizer a função na abinha como o box todo ao clicar em qualquer parte do box ele vai ocultar novamente.

 

A abinha vc posiciona ela na direita do box e aplica o seguinte script:

$(document).ready(function(){

$(".box-curtir-flutuante").click(function(){

	if(!$(this).hasClass("ativo")){
		$(this).addClass("ativo");
		$(".box").stop().animate({left: "0"},{duration: 500});
		

	} else {
		$(this).removeClass("ativo");
		$(".box").stop().animate({left: "-805"},{duration: 500});
	}

});



});

 

 

fazendo assim, a abinha vai poder também ter um cursor pointer para indicar que só ela é clicável.

o script foi testado, se não conseguir implementar veja onde está errando com o firebug.

[Fábio_R.R 0]

[...]

 

fazendo assim, a abinha vai poder também ter um cursor pointer para indicar que só ela é clicável.

o script foi testado, se não conseguir implementar veja onde está errando com o firebug.

 

Fala Bergs... cara, demorôôôô... chic demais!!!! Funcionou certinho e resolveu minha vida. Muito obrigado.

[Fábio_R.R 0]

 

Amigo... seu script tá perfeito. Preciso só de mais um help pra fechar o assunto:

 

Eu fui até um script JS que eu tenho de uma janela modal que quando eu clico no link pra abrir a janela, todo o resto da tela fica com fundo escuro. Quando eu clico no X para fechar a janela, o fundo da página volta ao normal.

 

Tentei puxar essa parte do script para minha DIV deslizante. Então quando eu clico na abinha para abrir a DIV, o fundo da tela fica preto, funcionando certinho, mas quando eu mando fechar a DIV, o fundo não volta ao normal, continuando preto. Veja o código:

//colocando o fundo preto =========================== 
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();
		
        $('#mascara').css({'width':larguraTela,'height':alturaTela});
        $('#mascara').fadeIn(1000); 
        $('#mascara').fadeTo("slow",0.8);
        
    });
  
    $('.fechar').click(function(ev){
        ev.preventDefault();
        $("#mascara").hide();
        $(".box-curtir-flutuante").hide();

Como resolvo isso? Mais uma vez, obrigado!

 

Amigo... seu script tá perfeito. Preciso só de mais um help pra fechar o assunto:

 

Sobre o fundo preto, acabei de descobrir. Pequei o código de exibir e ocultar o fundo preto e joguei dentro do if / else do script que vc tinha me passado. Funcionou!!!

 

Vlw!!!!