Jump to content

All Activity

This stream auto-updates     

  1. Today
  2. Biel.

    deixar disabled alguns itens

    ShadowALL, funcionou bem, Obrigado!
  3. Biel.

    mes e ano

    Direto ao ponto. Pessoal abaixo temos EX1 e EX2 . Gostaria que EX2 tivesse o mesmo resultado que EX1 e que o ano mudasse automaticamente quando o mês de dezembro acabasse, Vejam: EX1 abril-2019 maio-2019 junho-2019 julho-2019 agosto-2019 setembro-2019 outubro-2019 novembro-2019 dezembro-2019 janeiro-2020 fevereiro-2020 março-2020 Ex2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <?php setlocale(LC_ALL, 'portuguese'); date_default_timezone_set('America/Sao_Paulo'); $dia = date('d'); $mes = date('n'); $ano = date('Y'); $meses = array(1 => "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"); $mes_atual = $meses[$mes]; $ano_atual = $ano; echo "<b>mes atual:</b> ".$mes_atual.'<br />'; echo "<b>ano atual:</b> ".$ano_atual; ?> <hr /> <?php if($mes_atual == 'janeiro'){ $tete = array("janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"); } //----------------------------------- elseif($mes_atual == 'fevereiro'){ $tete = array("fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro", "janeiro"); } //----------------------------------- elseif($mes_atual == 'março'){ $tete = array("março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro", "janeiro", "fevereiro"); } //----------------------------------- elseif($mes_atual == 'abril'){ $tete = array( "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro" , "janeiro", "fevereiro", "março"); } //----------------------------------- elseif($mes_atual == 'maio'){ $tete = array("maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro" , "janeiro", "fevereiro", "março" , "abril"); } //----------------------------------- elseif($mes_atual == 'junho'){ $tete = array("junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro" , "janeiro", "fevereiro", "março", "abril", "maio"); } //----------------------------------- elseif($mes_atual == 'julho'){ $tete = array("julho", "agosto", "setembro", "outubro", "novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho"); } //----------------------------------- elseif($mes_atual == 'agosto'){ $tete = array("agosto", "setembro", "outubro", "novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho"); } //----------------------------------- elseif($mes_atual == 'setembro'){ $tete = array("setembro", "outubro", "novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto"); } //----------------------------------- elseif($mes_atual == 'outubro'){ $tete = array("outubro", "novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro"); } //----------------------------------- elseif($mes_atual == 'novembro'){ $tete = array("novembro", "dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro"); } //----------------------------------- elseif($mes_atual == 'dezembro'){ $tete = array("dezembro", "janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro" ); } //----------------------------------- for($a=0; $a <count($tete); $a++){ $exibe = $tete[$a].'-'.'<br/>'; echo $exibe; } ?>
  4. wanderval

    Botão flutuante (igual o messenger)

    muito vaga sua explicação de exemplos ou anexe uma imagem.
  5. Yesterday
  6. luannsr12

    Criar pagina de pagamento com API PicPay

    Para gerar o Link de pagamento você deve fazer uma requisição HTTP para o PicPay passando os dados que é pedido, junto com o x-picpay-token . Uma requisição em PHP ficaria mais ou menos assim: $post = array( 'referenceId' => 'XZ89Y78b7GytRC56cV', // Referencia externa , pode ser o ID do produto ou fatura 'callbackUrl' => 'https://seusite.com/callbak/picpay', // Url que vai receber a notificação 'returnUrl' => 'https://seusite.com/user/pedido/001', // Url que o usuairo será redirecionado após efetuar o pagamento 'value' => 10.00, 'buyer' => [ // Dados do cliente 'firstName' => 'João', 'lastName' => 'Das Neves', 'document' => '000.000.000-00', 'email' => 'clienteemail@dominio.com', 'phone' => '11999999999' ], ); // cURL $ch = curl_init('https://appws.picpay.com/ecommerce/public/payments'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post)); curl_setopt($ch, CURLOPT_HTTPHEADER, array( 'x-picpay-token: SEU_X-PICPAY-TOKEN')); $response = curl_exec($ch); curl_close($ch); $arrayReturn = json_decode($response,true); // PicPPay da uma resposnta em Json, e aqui transformamos em array $paymentUrl = $arrayReturn['paymentUrl']; // Url Para o CheckOut $qrCode = $arrayReturn['qrcode']['base64']; // Qr Code para que seu usuario pague sem sair do seu site (DeskTop) echo '<img src="'.$qrCode.'" />'; echo '<br />'; echo '<a href="'.$paymentUrl.'">Pagar</a>'
  7. Sua classe .cont2 esta com width: 13.3%, e isso em uma tela acaba resultando em pouco espaço para o texto, e as tags p dentro delas, estao com margin-left: 100px. Voce precisa ajustar os media queries para dar folgar ao textos
  8. Eai pessoal, ando fazendo alguns trabalhos de design digital. Agora que juntei uma grana para investir nesta área, que estou curtindo bastante trabalhar, me veio esta dúvida. Vi alguns vídeos do ipad e o Procreate parece ser um excelente programa para fazer ilustrações. O Ipad New 2018 tem 9.7 polegadas o que me parece pouco e por ser um aparelho de Apple ele tem algumas limitações. Eu nunca usei uma mesa digitalizadora, não sei se a adaptação dela é fácil. A maior parte dos meus trabalhos eu faço com o mouse, desenho no papel, tiro uma foto e passo por cima no Illustrator, Photoshop, etc. Mas estou sentindo necessidade de poder desenhar direto no pc ou em um tablet. O que vocês me aconselham ? PS: Eu sinceramente não estou curtindo muito o Illustrator, vocês tem alguma outra indicação para mim ?
  9. redstyle

    PHP iniciante - Usando pacotes (php + composer)

    Olá, Não é obrigatório rodar esse teste para usar esse package. Faça um script de teste de exemplo e veja se roda normal. Se der algum erro comenta aqui. Sobre rodar fora da pasta vendor, acredito que você esteja falando em não usar o auto loader, é isso?
  10. Olá pessoal, tudo bem? Sou novato em PHP, e preciso criar a seguinte função. Meu problema: - Recebo os seguintes parâmetros: (total de alunos & número de pessoas por grupo). - Preciso definir um número ideal de pessoas por grupo, sem deixar nenhum grupo desfalcado. - Mínimo de 4 pessoas por grupo; <?php $totalUsers = 50; $usersPerGroup = 6; $minPerGroup = 4; ?> $var = $totalUsers / $usersPerGroup; Na simulação acima, terei 7 grupos com 6 pessoas, e um grupo com 1,4 pessoas..rs. Gostaria, que a função me retornasse, em um mundo ideal: 7 grupos com 6 pessoas = 42 pessoas 2 grupos com 4 pessoas = 8 pessoas <?php return $array = [ 7 => 6, 2 => 4]; ?> Alguém poderia me ajudar na criação desta função, please...
  11. wanderval

    Alterar elemento em tempo real

    Olha sua descrição não condiz com o problema real o problema pelo test que fiz não é que os dados não são exibidos nas duas ultimas colunas, o problema é que você está pegando os valores da ultima posição do array. A cada "for" você substitui os dados o motivo esta nesses 2 for da lista2 e lista3 quando você usa innerHTML você está pegando o novo conteúdo e jogando entre as tags substituindo o valor anterior a solução seria colocar o sinal de concatenação "+" ficando: for(i=0; i <= lista2.length -1; i ++){ document.getElementById("list" + i).innerHTML += '<td>' + lista2[i] + '</td>'; } for(i=0; i <= lista3.length -1; i ++){ document.getElementById("list" + i).innerHTML += '<td>' + lista3[i] + '</td>'; }
  12. Parece brincadeira, mas estou fazem 3 dias tentando instalar a cURL e não consigo Windows 10 Pro Apache 2.4 Php 7.3.4 MySQL 8.0.15.0 Tentativas: 1) libeay32.dll, msvcr71.dll, ssleay32.dll e php_curl.dll coladas na pasta system32 e adicionadas ao PATH do Windows 2) Baixei a biblioteca cURL do site https://curl.haxx.se/, cliquei em curl.exe e nada acontece. 3) ;extension=CURL e ;extension=php_curl.dll descomentadas no php.ini (Embora a linha ;extension=php_curl.dll não exista nessa versão do PHP eu inserí ela na lista) 4) Confirmado de que o php.ini é o correto. Agora só faltam 2 tentativas A) Apelar para a fé. B) Instalar Apache e PHP antigos pois lembro-me que usei em um projeto fazem uns anos e funcionava de boa. Mas não gostara de voltar no tempo. Claro que essas 2 foram só para descontrair! Alguém me ajuda? Ode estou errando?
  13. Boa noite, me chamo Izaac Borges, acabei de começar aqui. Eu estava procurando um fórum de tecnologia onde eu pudesse encontrar gente disposta a me dar algumas dicas. Estou começando a programar agora, sempre gostei da ideia de programar, já tive algumas experiencias programando código para ,Arduíno coisas bem básicas mas agora estou estudando para valer e escolhi a linguagem C para começar pois já conhecia um pouco dela. Porem agora estou querendo fazer um sistema simples, onde ele armazena os seus dados(no caso seriam números de jogos da loteria) e depois você insere os números sorteados e ele diz quantos acertos você fez em cada jogo. Gostaria de saber se é possível fazer esse tipo de programa em C e se eu iria precisar de alguma outra tecnologia para banco de dados, se sim qual tecnologia recomendam para quem está iniciando e quer aprender fazendo pequenos projetos como esse.
  14. Método Fan Art

    Curso de desenho, vagas abertas!

    Opa! Tudo bem pessoal? Estou passando aqui para apresentar o curso Método Fan Art, estamos precisando de novos alunos, quem estiver interessado em aprender a desenhar siga o link abaixo para mais informações. Desde já agradeço! http://bit.ly/aprenda-a-desenhar-com-o-metodo-fan-art
  15. Last week
  16. Fabrizio.Quadro

    Problemas ao Acessar webservice cadsus atraves do php

    <?php include "lib/nusoap.php"; $cliente = new nusoap_client('http://ws.correios.com.br/calculador/CalcPrecoPrazo.asmx?WSDL', true); $parametros = array ( 'nCdEmpresa' => ' ', 'sDsSenha' => ' ', 'nCdServico' => '41106', 'sCepOrigem' => '99010150', 'sCepDestino' => '78896000', 'nVlPeso' => '1', 'nCdFormato' => '1', 'nVlComprimento' => '16', 'nVlAltura' => '10', 'nVlLargura' => '20', 'nVlDiametro' => '0', 'sCdMaoPropria' => 'S', 'nVlValorDeclarado' => '200', 'sCdAvisoRecebimento' => 'S' ); $resultado = $cliente->call('CalcPrecoPrazo', $parametros); print_r($resultado); ?> Esse ai en cima é o codigo que funciona com o nusoap segue o codigo com a classe soap nativa do php <?php $cliente = new SoapClient('http://ws.correios.com.br/calculador/CalcPrecoPrazo.asmx?WSDL'); $parametros = array ( 'nCdEmpresa' => ' ', 'sDsSenha' => ' ', 'nCdServico' => '41106', 'sCepOrigem' => '99010150', 'sCepDestino' => '78896000', 'nVlPeso' => '1', 'nCdFormato' => '1', 'nVlComprimento' => '16', 'nVlAltura' => '10', 'nVlLargura' => '20', 'nVlDiametro' => '0', 'sCdMaoPropria' => 'S', 'nVlValorDeclarado' => '200', 'sCdAvisoRecebimento' => 'S' ); $resultado = $cliente->__Soapcall('CalcPrecoPrazo', $parametros); print_r($resultado); ?> Segue o erro que da Erro fatal : exceção SoapFault não capturada: [WSDL] ERRO SOAP: análise de WSDL: não foi possível carregar de 'http://ws.correios.com.br/calculador/CalcPrecoPrazo.asmx?WSDL': falha ao carregar a entidade externa " http://ws.correios.com.br/calculador/CalcPrecoPrazo.asmx?WSDL "em /home/u660391699/public_html/teste/teste.php:4 Rastreamento de pilha: # 0 / home / u660391699 / public_html / teste / teste .php (4): SoapClient-> SoapClient ('http: //ws.corre ...') # 1 {main} lançado em /home/u660391699/public_html/teste/teste.php na linha 4 link para o phpinfo do meu servidor phpinfo
  17. marcelocardoso

    Paginação Moderna Bootstrap

    obrigado por lembrar.... mas já faz um tempão isso, já consegui... muito obrigado.
  18. Prog

    CPU Windows

    Já tentou esse comando? wmic cpu get loadpercentage /all
  19. wanderval

    Mudar cor de texto selecionado

    tem como sim mas você terá que fazer alguns tratamentos vou deixar um exemplo aqui: Lembrando que mesmo aparentemente funcional esse script tem uma falha de não remover os elementos criados se o mesmo texto sofrer outra alteraçao então se for ver pelo inspect element ira ver que sempre será gerado um elemento 'span' independente se já existe um parent encapsulando o mesmo range mas pra um exemplo acho que esse script já vai ajudar muito HTML: <div class="main-container"> <span>text 1</span> <p>text 2</p> <p> this is text, select and right click to high light me! if you can`t see the option, please use this <p> </div> <button onclick="highlightSelection('red')">red</button> <button onclick="highlightSelection('blue')">blue</button> JS: function highlightSelection(color) { var userSelection = window.getSelection(); for(var i = 0; i < userSelection.rangeCount; i++) { highlightRange(userSelection.getRangeAt(i), color); } } function highlightRange(range, color) { var newNode = document.createElement("span"); newNode.className = 'text-color'; newNode.setAttribute( "style", "color:"+color+"; display: inline;" ); range.surroundContents(newNode); } JSBin: https://jsbin.com/haciyozezi/edit?html,js,output
  20. terra

    Pegar value de um select data-bind

    Olá, Preciso pegar o valor desse select aqui nessa query Agradeço qualquer ajuda
  21. Olá meus caros! Eu gostaria de pergunta a vocês, se é possível alterar o endereço do Cpanel, por exemplo: site.com/cpanel para um outro endereço. Porque não é legal qualquer pessoa ter acesso a está pagina do meu site, mesmo precisando de autenticação. Recentemente eu acessei um site, e por curiosidade , acessei o endereço /cpanel , e vi que a pagina me redirecionou para 404. Será que posso fazer isso, dando acesso a determinado IP? Ou existe outra maneira, no qual somente o administrador saiba o caminho do Cpanel.
  22. Prog

    Codeigniter - Orientação referente pasta MODELS

    https://www.codeigniter.com/userguide3/general/models.html#loading-a-model
  23. Caros amigos, saudações... Gostaria de tirar uma dúvida com os amigos se tem a possibilidade de fazer e como fazer. A pasta MODELS tem como fazer separado como a pasta CONTROLLERS, por exemplo: a pasta controller consigo fazer assim: PASTA e SUBPASTAS. controller |__ Admin |_____ Estoque |_______ Financeiro na pasta Models, fica tudo junto as funções, como por exemplo: admin_model.php caixa_model.php vendas_model.php e etc na Models, tem como fazer como na pasta controller, assim: |__ Admin |__ admin_model.php |_____ Estoque |__ estoque_model.php |_______ Financeiro |__ caixa_model.php para chamar uma função no controller, faço desta forma: <?php $this->load->model('categorias_model'); $this->data['categorias'] = $this->categorias_model->getActive('categorias', 'categorias.idCategorias,categorias.categoria'); ?> Conforme minha dúvida acima, como seria o caminho para chamar esta função: $this->load->model('categorias_model'); Grato, Cesar
  24. michel a. medeiros

    Curso Java Para Iniciantes

    Curso de Java para iniciantes. https://www.udemy.com/curso-java-para-iniciantes/?couponCode=IMASTER Acesse
  25. houseinf

    Paginação Moderna Bootstrap

    olá Marcelo. aquele código que você postou lá em cima que começa com: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <style> .wrapper { seria para o início do código ? digo, para o início do default.asp (arquivo principal do site) definindo tudo isso ele se torna responsivo ? Obrigado. Mario
  26. Olá, estou montando um layout para uma atividade da faculdade, o layout está pronto, mas está com um problema na estrutura, quando diminui o tamanho do navegador o página fica mais uma margem a direita e as div's não ficam fixas, segue o código html e css: Página HTML <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"/> <title>Aula 07</title> <link rel="stylesheet" type="text/css" href="style.css"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <header> <div class="contatos"> <div class="cont"> <p> <img src="Icones/telefone.png" width="20" height="20"> (41) 3019-7838</p> </div> <div class="cont"> <p> <img src="Icones/email.png" width="20" height="20"> contato@email.com</p> </div> <div class="cont"> <p> <img src="Icones/locationmarker.png" width="20" height="20"> R. Rua, 00 - Curitiba </p> </div> </div> </header> <div class="topo"> <div class="contatos2"> <div class="cont2"> <img align="right" src="logo.png"> </div> <div class="cont2"> <p> HOME </p> </div> <div class="cont2"> <p> EMPRESA </p> </div> <div class="cont2"> <p> SERVIÇOS </p> </div> <div class="cont2"> <p> HOSPEDAGEM </p> </div> <div class="cont2"> <p> PORTIFÓLIO </p> </div> <div class="cont2"> <p> CONTATO </p> </div> </div> </div> <div class="banner"> </div> <div class="banner2"> <div class="banneresq"> <h1> <font color="#2B47AE">BEM-VINDO AO</font> <br> <font color="#A11606">NOSSO SITE</font> </h1> <div class="linhatexto"> </div> <p> Especialista em desenvolvimento de sites o Projeto Web oferece oque há de melhor<br> no mercado para construção de site, tecnologia avançada e modernismo nos Layouts<br> são as principais caracteristicas de nossos Layouts, com a Metodologia de Atender<br> Bem para Atender Sempre.<br> </p> <div class="botaoentrar" > <h1>Entrar</h1> </div> </div> <div class="bannerdir"> <img src="Imagens/bannerdireita2.jpg" width="320" height="280"> </div> </div> <div class="banner3"> <div class="caixamaior"> <div class="caixa1"> <img src="Imagens/box1.jpeg" width="250" height="200"> <div align="center"> <p> CRIAÇÃO DE SITES </p> </div> <div class="caixa1texto"> <h1> Temos desde sites simples de 1 página,<br> modelos padrões e personalizados<br> com páginas internas. Confira nossos<br> modelos ou solicite um.<br> </h1> </div> <div class="botaosaibamais"> <h1>Saiba Mais</h1> </div> </div> <div class="caixa2"> <img src="Imagens/box2.jpg" width="250" height="200"> <div align="center"> <p> HOSPEDAGEM DE SITES </p> </div> <div class="caixa2texto"> <h1> Hospede um site em um servidor<br> confiável e de qualidade, que sempre<br> lhe dê suporte necessário. Deixe seu<br> site 100% online.<br> </h1> </div> <div class="botaosaibamais"> <h1>Saiba Mais</h1> </div> </div> <div class="caixa3"> <img src="Imagens/box3.jpg" width="250" height="200"> <div align="center"> <p> MANUTENÇÃO DE SITES </p> </div> <div class="caixa3texto"> <h1> Mantenha seu site sempre atualizado,<br> passando credibilidade aos seus<br> clientes e ganhando ponto com o<br> Google e outros buscadores.<br> </h1> </div> <div class="botaosaibamais"> <h1>Saiba Mais</h1> </div> </div> </div> </div> </body> </html> PÁGINA CSS @import url('https://fonts.googleapis.com/css?family=Muli:300,400,700'); @import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700'); @import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700'); @import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700'); @import url('https://fonts.googleapis.com/css?family=Scada:400,400i,700'); @import url('https://fonts.googleapis.com/css?family=Karla:400,700'); header{ width: 100%; height: auto; overflow: hidden; background-color: #023180; margin: auto; } body{ margin: 0px; } .contatos{ width: 100%; max-width: 900px; height: auto; overflow: hidden; margin: auto; } .cont{ width: 33.3%; height: 40px; float: left; } .cont p{ color:#ffffff; font-family: 'Muli'; font-weight: 400; } .topo{ width:80%; height:120px; float:right; } .cont2{ font-family:'Cabin'; color:#023180; width:13.3%; height:40px; float:left; } .cont2 p{ font-size:15px; margin-left:100px; margin-top:30px; } .logo{ margin-left:350px; margin-top:10px; } .banner{ width:100%; height:500px; background:url(Imagens/banner.jpg); float:left; margin-top:30px; } .banner3{ width:100%; height:500px; background-color:#083875; float:left; margin-top:50px; vertical-align: middle; } .caixamaior{ width:100%; height:auto; } .caixamaior p{ color:#FFFFFF; font-family:'Scada'; } .caixa1texto h1{ font-size:12px; font-family:'Karla'; text-align:center; color:#FFFFFF; } .caixa2texto h1{ font-size:12px; font-family:'Karla'; text-align:center; color:#FFFFFF; } .caixa3texto h1{ font-size:12px; font-family:'Karla'; text-align:center; color:#FFFFFF; } .botaosaibamais{ width:150px; height:50px; background-color:#21588E; text-align:center; vertical-align: middle; line-height: 3; margin-left:45px; margin-top:20px; } .botaosaibamais h1{ font-family:'Scada'; font-size:15px; color:#ffffff; vertical-align: middle; } .caixa1{ margin-left:15%; margin-top:5%; float:left; } .caixa2{ margin-left:10%; margin-top:5%; float:left; } .caixa3{ margin-left:10%; float:left; margin-top:5%; } .banneresq{ float:left; margin-left:120px; margin-top:65px; } .banneresq h1{ font-family: 'Oxygen'; } .banneresq p{ color:#3F3B3B; font-family: 'Oxygen'; font-size:16px; } .linhatexto{ width:75px; height:4px; background-color:#A11606; margin-top:-5px; } .botaoentrar{ width:150px; height:50px; background-color:#800000; text-align:center; vertical-align: middle; line-height: 3; } .botaoentrar h1{ font-family:'Oxygen'; font-size:15px; color:#ffffff; vertical-align: middle; } .bannerdir{ float:left; margin-top:60px; margin-left:70px; } @media only screen and (max-width: 600px){ .cont{ width: 100%; } .cont p{ text-align: center; } .banner{ width:100%; } }
  27. Bom dia, Estou aprendendo lógica de programação e isso tem gerado muitos arquivos. Gostaria de saber se é uma ''boa prática'' colocar algoritmos simples no github? Apesar de ser coisa muito simples, são meus primeiros passos no mundo da programação.
  28. <div class="fab"> <button class="main"> </button> <ul> <li> <label for="opcao1">Opção 1</label> <button id="opcao1"> ⎈ </button> </li> <li> <label for="opcao2">Opção 2</label> <button id="opcao2"> ⎗ </button> </li> <li> <label for="opcao3">Opção 3</label> <button id="opcao3"> ☏ </button> </li> </ul> </div> body{ font-family: sans-serif; } .fab{ position: fixed; bottom:10px; right:10px; } .fab button{ cursor: pointer; width: 48px; height: 48px; border-radius: 30px; background-color: #cb60b3; border: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 24px; color: white; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button:focus{ outline: none; } .fab button.main{ position: absolute; width: 60px; height: 60px; border-radius: 30px; background-color: #5b19b7; right: 0; bottom: 0; z-index: 20; } .fab button.main:before{ content: '⏚'; } .fab ul{ position:absolute; bottom: 0; right: 0; padding:0; padding-right:5px; margin:0; list-style:none; z-index:10; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab ul li{ display: flex; justify-content: flex-start; position: relative; margin-bottom: -10%; opacity: 0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; transition: .3s ease-out; } .fab ul li label{ margin-right:10px; white-space: nowrap; display: block; margin-top: 10px; padding: 5px 8px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius:3px; height: 18px; font-size: 16px; pointer-events: none; opacity:0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button.main:active, .fab button.main:focus{ outline: none; background-color: #7716ff; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .fab button.main:active:before, .fab button.main:focus:before{ content: '↑'; } .fab button.main:active + ul, .fab button.main:focus + ul{ bottom: 70px; } .fab button.main:active + ul li, .fab button.main:focus + ul li{ margin-bottom: 10px; opacity: 1; } .fab button.main:active + ul li:hover label, .fab button.main:focus + ul li:hover label{ opacity: 1; } Como faço pra movimentar meu botão flutuante pra qualquer lado da tela igual o messenger?
  1. Load more activity
×

Important Information

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