Ir para conteúdo
Entre para seguir isso  
AlessandroPiaz

Rotacionar btn após um click

Recommended Posts

Olá pessoal. Meu site tem um btn, que serve para rolar o site para baixo, quero que ele gire 180 graus após o click e mude o link (a) para que o site volte para o topo, mas não sei como fazer isso. Ja tentei com a pseudo-classe :active, mas o btn so rotaciona no momento em que o click ocorre, e quero que continue rotacionado após o click.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Basta utilizar jQuery e isso fica super facil de resolver. O que você tem que fazer é capturar o evento de click no btn com algo deste genero

$('#my_btn').on( 'click', function(){
  // codigo
});

E depois utilizar a metodo ".toggleClass()" do jQuery para adicionar uma class se ela não estiver presente ou remover uma class se ele estiver presente. Essa class é o que vai dizer que se o seu botão deve estar rodado 180º para cima ou não.

O código completo é isto:

$('#my_btn').on( 'click', function(){
 $(this).toggleClass( 'up' );
});

Pode ver um exemplo no jsfiddle nesse link http://sousatg.github.io/forum/imasters/2016/08/23/imasters-rodar-botao-apos-click.html

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

  • Conteúdo Similar

    • Por DinhoPHP
      Olá!
      Estou com um problema jamais visto antes e nunca pensei que se tornaria um algum dia. Estou desenvolvendo um site, porém no arquivo index.php, ao ser enviado para o servidor da Hostgator, tudo que está em uma tag PHP em diante é ignorado, inclusive tags HTML5. No arquivo, há tags PHP antes dessa e são interpretadas tanto no XAMPP quanto na Hostgator, já a "tag problemática", funciona normal no XAMPP, porém não Hostgator. Segue o código, marquei o trecho ignorado pelo servidor, com uma linha de comentário em HTML5.
       
      index.php
      <!DOCTYPE html> <html lang="pt-br"> <head> <title>Royal Poker</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- ESTILO CSS DO PROGRAMADOR --> <link rel="stylesheet" href="_css/estilo_adicional.css"> <!-- DEPENDÊNCIAS DO BOOTSTRAP ONLINE DE ESTILO --> <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">--> <!-- DEPENDÊNCIAS OFFLINE --> <link rel="stylesheet" href="node_modules/bootstrap/compiler/bootstrap.css"> <link rel="stylesheet" href="_css/main.css"> </head> <body> <div class="container-fluid fixed-top" style="z-index: 9999;"> <ul id="estados" class="navbar-nav fixed-top justify-content-start flex-row" style="background-color: #b4954f; font-size: 12px;"> <li> <a href="http://www.h2club.com.br" target="_self" class="navigation-link atual"> SÃO PAULO </a> </li> <li> | </li> <li> <a href="http://campinas.h2club.com.br" target="_self" class="navigation-link "> CAMPINAS </a> </li> <li> | </li> <li> <a href="http://curitiba.h2club.com.br" target="_self" class="navigation-link "> CURITIBA </a> </li> </ul> </div> <?php require_once"_include/menu_top.php";?> <div class="content-fluid" style="margin-top: 6rem;"> <?php require_once"_include/slide_top.php"; ?> </div> <div class="content-fluid text-uppercase text-center" style="margin-top: 6rem;"> <img src="_imagens/logo-rewards-meio.png" class="img-fluid" alt=""> <h2>PROGRAMA DE RECOMPENSAS DO H2 CLUB</h2> <h4>Acumule pontos enquanto joga Poker e troque por muitos prêmios e benefícios</h4> </div> <div class="flex-column w-100 justify-content-center text-uppercase text-justify"> <?php require_once"_include/opcoes_meio.php"; ?> </div> <div class="content-fluid justify-content-center"> <img src="_imagens/banner_meio.jpg" class="img-fluid" alt=""> <!-- TUDO É IGNORADO PELA HOSTGATOR E NÃO NO XAMPP --> <?php require_once"_include/calendario.php"; ?> </div> <?php require_once"_include/calendario.php"; ?> <?php require_once"_include/footer.php"; ?> <!-- DEPENDÊNCIAS DO BOOTSTRAP ONLINE NESSA ORDEM E AQUI NO FIM DO BODY --> <!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>--> <!-- DEPENDÊNCIAS DO BOOTSTRAP OFFLINE NESSA ORDEM E AQUI NO FIM DO BODY --> <script src="_jquery/jquery-3.3.1.slim.min.js"></script> <script src="_bootstrap4_1_3/popper.js/dist/umd/popper.min.js"></script> <script src="_bootstrap4_1_3/_js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html>  
    • Por Joob
      Boas Malta,
       
      Básicamente queria fazer uma contagem de 30 dias, com desactivação do serviço em si, ou seja, Comprava e Fica do tipo "Faltam 30 Dias / Faltam 29 Dias, etc.." depois no fim dos dias, ficaria "Comprar Novamente" ..
      Sei que não está bem, precisava era de uma ajuda.
       
      Tenho desta forma a chamada
      <?php if($account->SERVICO1) : ?> <font color="#BB0306"> <?php if(isset($_POST['buy1'])) { $buy1 = date('Y-m-d H:i:s');; $buy1->add(new DateInterval('P30D')); echo "" . $buy1 . "\n"; } ?> </font> <?php else : ?> <font color="#0C9620"><?= $language->store->SERVICO1->no_limit ?></font> <?php endif; ?> Já coloquei de outra forma só para colocar como se tivesse comprado e aparecesse a diferenca dos 30 dias. ou seja, a data ficava com + 30 dias do dia de hoje por exemplo.
      Queria era adicionar a data da compra que quando clicassem no botão da compra de comprar, que adicionasse os dias que faltavam para renovar e quando chegasse ao fim, voltava novamente ao "Comprar" (exemplo)..
       
      Tenho o botão da chamada assim
      <a href="store/purchase/COMPRA1/<?= Security::csrf_get_session_token('url_token'); ?>" class="label label-success label-store btn btn-dark" data-confirm="<?= $language->store->confirm_purchase; ?>"> <?php printf($language->store->display->purchase); ?> </a> Se me conseguissem dar uma ajuda para colocar na database, acho que seria melhor para a configuração/registo do dia.
       
      Não sei se me fiz entender.
      Obrigado.
       
       
      Abraço,
    • Por junior almeida
      tenho o seguinte codigo
      <head> <script type="text/javascript"> $.ajax({ url: 'livros.json', dataType: 'json', type: 'get', cache: false, success: function(data){ $.each(data, function(i, item){ console.log(item.name); $("#lista").append("<li><a id='livro'>"+item.name+"</a></li>"); }); } }); </script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div id="wrapper"> <ul id="lista"> </ul> </div> </body>  
      ate ai tudo bem ele me lista os dados que estão no json
       
      ai queria pegar o click nos items listados ai estou usando esse codigo
       
      $(document).ready(function(){ $('#livro').click(function(){ console.log("clicou"); }); })  
      só que ele não me retorna nada, se alguém puder me ajudar 
    • Por hansleygladberg
      Tenho a classe conexão:
       
      class Conexao{ private $_host = 'localhost'; private $_user = 'root'; private $_pass = ''; private $_database = 'mg'; public $_con; public $conecta; function __construct() { $this->conecta(); } public function conecta() { $_con = mysqli_connect($this->_host, $this->_user, $this->_pass, $this->_database) or die("Erro ao conectar ao servidor &raquo; " . mysqli_error()); return $_con; } } E o arquivo da classe que insere dados:
       
      require_once 'Conexao.class.php'; $conecta = new Conexao(); class Cliente{ private $id, $nome, $endereco, $telefone1, $telefone2; protected $tabela = 'clientes'; public function getId(){ return $this->id; } public function getNome(){ return $this->nome; } public function setNome($nome){ $this->nome = $nome; } public function getEndereco(){ return $this->endereco; } public function setEndereco($endereco){ $this->endereco = $endereco; } public function getTelefone1(){ return $this->telefone1; } public function setTelefone1($telefone1){ $this->telefone1 = $telefone1; } public function getTelefone2(){ return $this->telefone2; } public function setTelefone2($telefone2){ $this->telefone2 = $telefone2; } public function insere(){ $query = "INSERT INTO clientes (nome, endereco, telefone1, telefone2, email) VALUES ('2', '3', '4', '5', '6')"; $query2 = mysqli_query($_con, $query); } }  
      Quando executo a função "insere" ela retorna que falta um dos parâmetros que no caso não consegue encontrar a variável "$_con".
      Estou apenas fazendo testes pra depois de 12 anos relembrar e me atualizar no PHP....  Mas não consegui acessar essa variável..
    • Por Mirian Almeida
      Já entendi que as variaveis criadas fora das funções não são enxergadas dentro delas, e é preciso utilizar a palavra global, e funciona! Ex:
      <?php     $texto = 'Olá';     function mostrar()     {         global $texto;         echo $texto;     } mostrar(); //imprime o Ola na tela ?>  
      MAS quando eu coloco a mesma coisa dentro de uma classe, nao funciona mais, o que eu faço?
      Vaja o codigo
      <?php class teste {     public $texto = 'Olá';     public function mostrar(){         global $texto;         echo $texto;     } } $a = new teste(); $a->mostrar(); //isso não imprime nada na tela, fica vazio  
×

Informação importante

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