Jump to content
marcelocardoso

click com slidetoggle e ANCORA no TOP do id

Recommended Posts

Fala galera...
Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
A nível de conhecimento, segue código para:::

1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...

CODE:
 

	$(function () {
		// $("#btn-maps").on("click", function () {
		// 	$('html, body').animate({
		// 		scrollTop: $("#maps").slideToggle('slow').offset().top - 135
		// 	}, 1200, 'linear');
		// });

		$("#btn-maps").click(
			function (event) {
				event.preventDefault();
				if ($("#maps").is(":visible")) {
					$("#maps").slideUp(600).offset().top;

				} else {
					$("#maps").slideDown(600).offset().bottom;
				}
			}
		);
	});

Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;

Dicas, Sugestões como fazer, realizar, agradeço.
Obrigado.

 

Share this post


Link to post
Share on other sites

Você diz um efeito tipo sanfona?

Você clica no item ele expande e e quando clica novamente ele oculta

Só que podemos ter diversos itens desses?

 

Tenho esse script pronto se for o caso.

Share this post


Link to post
Share on other sites

Olha so omar...., 

O code faz isso, so o problema quando expande, ele nao vai para o TOP do item da slidetoggle, queria que ele posicionasse a div expandida pela sua base no topo, tipo no inicio da div quando expandida, tentei com id, mas n consegui.... 

Share this post


Link to post
Share on other sites

Bem... Pelo que eu entendi você quer mover um elemento para outro local e isso é simples:

<div id="topo">Topo</div>
<hr />
<div>Esse é o meio</div>
<hr />
<div id="baixo">Elemento de baixo que vai para o topo</div>

<button onclick="mover();">Mover o de baixo para o topo</button>

<script>
    function mover() {
        var baixo = document.getElementById('baixo');
        document.getElementById('topo').appendChild(baixo);
    }
</script>

 

Sobre o efeito sanfona que acredito que seja o que realmente procura. veja esse script que desenvolvi faz algo similar ao seu objetivo, é bem simples de usar:

https://github.com/Spell-Master/sm-web/tree/master/scripts/Accordion

 

Com o arquivo CSS e JS incluso crie a seguinte situação

<div id="exemplo">
  <button class="acc-button">
    Primeiro
  </button>
  <div class="acc-container">
    Elemento interno do primeiro
  </div>
  <button class="acc-button">
    Segundo
  </button>
  <div class="acc-container">
    Elemento interno do segundo
  </div>
</div>

 

depois basta instanciar a classe:

Isso deve ficar abaixo dos elementos acima pode até ficar no final do "body"
<script>
  var objeto = new Accordion('exemplo');
</script>

Obs.: Não precisa usar jQuery

 

Share this post


Link to post
Share on other sites

a principio teu codigo faz o mesmo efeito accordion que o slideToggle do jquery faz, no que eu preciso, mas ainda peca, falha, no quesito alinhar pelo TOPO, vamos ver se consigo ser mais explicativo...


1) slidetoggle, é clicado, certo.
2) ele, automaticamente, é expandido, abre para baixo e expande o mesmo, com seu conteudo;
3) isso fica perfeito quando é feito com o position BOTTOM, normal dele, 
4) mas QUANDO é feito com o position para expandir para UP, ....
5) aí que está o problema, tentei com OFFSET, ao abrir para CIMA, independente do conteudo do slidetoggle ao ser aberto, deveria a barra de rolagem subir junto e pelo OFFSET, pegar o ID da DIV, e alinhar bem no inicio a div.

ELE EXPANDE CERTO,  mas tipo

Texto inicio
Texto meio
Texto fim

Ele não posiciona no texto início, fica sempre na metade, ou no texto fim, aí tu tens que subir a barra, para o texto início...
Entendeu agora...

Tentei de várias maneiras, pegar o OFFSET e jogar o ID, mas não consegui....
Fica a premissa...

Seu exemplo faz também, mas faz a mesma coisa que eu FIZ, tenho que alinhar no topo quando expande independente do tamanho da DIV pelo slidetoggle sendo aberta.

Se tiver cabeça para dar luz nisso, agradeço.
Obrigado.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Articulando
      Galera, seguinte. Estou tentando criar um evento em javascript que funciona da seguinte maneira; existem 5 checkbox na tela, ao selecionar dois checkbox os outros irão travar e não permitir o clique, se o usuário clicar novamente retirando a seleção de algum dos que foi selecionado ele volta a habilitar. Até então o código funciona blz, porém agora eu preciso fazer com que os dois primeiros checkbox contém como um único clique, ou seja, são 2 checkbox para travar, porém se eu selecionar o primeiro e o segundo eles contam como um, então eu o usuário poderia realizar outro clique em algum checkbox e ficariam 3 checkbox selecionados, porém isso só se aplica aos dois primeiros checkbox, caso não sejam eles é apenas dois cliques, se eles forem clicados o usuário pode escolher mais uma opção.
       
      o código atual está assim:
       
      <script type="text/javascript">
                  (function(){
                      "use strict";
                      var marcados = 0;
                      var verifyCheckeds = function($checks) {
                          if( marcados>=2 ) {
                              loop($checks, function($element) {
                                  $element.disabled = $element.checked ? '' : 'disabled';
                              });
                          } else {
                              loop($checks, function($element) {
                                  $element.disabled = '';
                              });
                          }
                      };
                      var loop = function($elements, cb) {
                          var max = $elements.length;
                          while(max--) {
                              cb($elements[max]);
                          }
                      }
                      var count = function($element) {
                          return $element.checked ? marcados + 1 : marcados - 1;
                      }
                      window.onload = function(){
                          var $checks = document.querySelectorAll('input[type="checkbox"][name="modalidades[]"]');
                          loop($checks, function($element) {
                              $element.onclick = function(){
                                  marcados = count(this);
                                  verifyCheckeds($checks);
                              }
                              if($element.checked) marcados = marcados + 1;
                          });
                          verifyCheckeds($checks);
                      }
                  }());
              </script>
       
       
      Quem conseguir me ajudar eu agradeço, preciso muito desse código rodando. 
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
       
      Atenciosamente,
      ~Ronaldo
       
    • By Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
    • By fbezerra
      Bom dia galera,
      olha eu tenho essa função que faz download, eu queria modificar pra salvar em uma pasta exemplo "/Clientes" ou usuário escolher o diretório para salvar txt.
       
      function salvar(e) { let data = new Date().toLocaleDateString().slice(0,10); var texto = document.getElementById('conteudo').innerText; let titulo = document.getElementById('nomeCliente').value; let CodCli = document.getElementById('CodCliente').value; var blob = new Blob([texto], { type: "text/plain;charset=utf-8" }); saveAs(blob, titulo + " " + CodCli + " " + data + ".txt"); }  alguém pode me ajudar por favor
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.