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 iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
      //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
×

Important Information

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