Sapinn
-
Total de itens
159 -
Registro em
-
Última visita
Tudo que Sapinn postou
-
Vlw cara!!! Eu nem tinha me tocado que era praticamente um básico para um carrinho de compras, vlw mesmo!!!
-
Fala galera tudo beleza? Então alguém sabe como adicionar e remover campos de texto com js. Tipo teria um botão com um + "mais" para adicionar novos campos e junto a estes campos teria um ícone com um lixeira para remover, toda vez que fosse clicado nesse ícone o campo seria removido, apenas aquele campo. Encontrei um código para adicionar um campo mas a parte de remover ta dando dor de cabeça <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pagina</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> </head> <body> <form id="myForm"> <div id="lines"></div> <button type="button" onclick="addInput('lines')">+</button> <input type="submit" value="Enviar"> </form> <script> var formLine = 1; function addInput(divName) { var newdiv = document.createElement('div'); newdiv.innerHTML += '<input type="text" name="produto" id='+formLine+'>'; newdiv.innerHTML += ' <i class="bi bi-trash-fill"></i>'; document.getElementById(divName).appendChild(newdiv); formLine++; } addInput('lines'); </script> </body> </html>
-
Montando Dashboard ajustes para templete e reponsividade
Sapinn postou um tópico no fórum Desenvolvimento frontend
Fala galera, tudo blz? Então estou com uma dúvida um pouco boba mas que não consegui resolver o problema ainda. Estou desenvolvendo um site para agendamento de serviços e resolvi fazer a pagina principal como uma dashboard (área de administrador) onde seria muito mais fácil para o usuário registrar os serviços entre outras coisas, enfim, estou com um problema quanto ao layout da página. Normalmente o dashboard tem um menu à esquerda e o conteúdo fica à direita quando ocorre o clique no botão hambúrguer( Aquele que tem três tracinhos) esse menu é recolhido e esse conteúdo que fica a direita fica centralizado, às vezes, em muitos dashboard esse menu só é um pouco recolhido ficando amostra apenas os ícones enquanto o conteúdo da direita fica um pouco mais centralizado. A pergunta é como eu posso fazer isso? Outra coisa, na responsividade quando a página diminui o menu da uma retraída e o conteúdo fica centralizado quando é clicado no botão hambúrguer o menu não afasta o conteúdo de volta e sim fica por cima desse conteúdo. Não sei como fazer isso, eu estou melhorando quando ao desenvolvimento front-end mas ainda não é muito a minha praia. Eu tentei fazer isso com css grid (que por sinal é algo que eu não tenho tanta pratica, já que eu sou melhor com flebox) mas não funcionou e o código só ficou ruim e confuso. Se alguém puder me ajudar ficaria muito grato Não tem muito coisa ainda mas irei disponibilizar o código que desenvolvi até agora: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sistema de Gerenciamento</title> <link rel="stylesheet" href="assets/css/style.css"> <link rel="icon" href="assets/images/icone-logo.png"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css"> </head> <body> <header> <div class="bar-header"> <i class="bi bi-list"></i> </div> </header> <nav class="menu"> <div class="user"> <i class="bi bi-person-circle"></i> <p>Nome do Usuário</p> </div> <ul> <li class="active"><a href=""><i class="bi bi-house-fill"></i> Inicio</a></li> <li><a href=""><i class="bi bi-calendar-plus-fill"> </i>Adicionar Serviço</a></li> <li><a href=""><i class="bi bi-person-plus-fill"></i> Adicionar Admin</a></li> <li><a href=""><i class="bi bi-file-earmark-post-fill"></i> Configurações de Nota</a></li> <li><a href=""><i class="bi bi-file-person"></i> Configurações da Conta</a></li> <li><a href=""><i class="bi bi-box-arrow-right"></i> Sair</a></li> </ul> </nav> <main></main> <footer></footer> </body> </html> *{ padding: 0; margin: 0; } body{ font-family: Arial, Helvetica, sans-serif; background-color: #e5e5e5; } .bar-header{ background-color: #4285f4; position: fixed; color: #fff; width: 100%; height: 40px; font-size: 37px; padding: 8px 16px; z-index: 1; } .menu{ background-color: #26353e; width: 260px; height: 100vh; position: fixed; padding-top: 65px; } .menu ul li{ list-style: none; padding: 15px; cursor: pointer; border-bottom: 1px solid #26353e; } .menu ul li:hover{ background-color: #4285f4; } .menu li a{ color: #fff; font-size: 18px; text-decoration: none; } .menu i{ font-size: 27px; } .menu .active{ background-color: #4285f4; } .user{ margin-left: 50px; padding-bottom:10px ; } .user i{ font-size: 120px; color: #4285f4; } .user p{ font-weight: bold; font-size: 18px; color: #fff; } -
Fala galera existe algum meio que eu possa usar para saber automaticamente o tamanho da tela usando apenas javascript???? Eu sei como saber o tamanho da tela usando: if (window.matchMedia("(max-width:800px)").matches) { console.log('Menos que 800') } else { console.log('Mais que 800') } Ainda assim, preciso atualizar a pagina para conseguir obter o resultado, existe alguma maneira de fazer isso sem atualizar a página.
-
Cara muito obrigado mesmo eu consegui desenvolver um código que pode fazer o que eu preciso o problema ta sendo que tá gerando um erro que é: Uncaught TypeError: Cannot read property 'matches' of undefined at mudaMenu at HTMLElement.onclick. Não sei porquê isso acontece Esse é meu código eu coloquei pra mudar a cor de fundo para que eu pudesse verificar quando a mudança na tela function mudaMenu(x){ var menu = document.querySelector(".menu"); var content = document.querySelector(".content"); if (x.matches) { document.body.style.backgroundColor = "yellow"; if(!menu.classList.contains("esconder-menu")){ menu.classList.add("esconder-menu"); setTimeout(function(){ content.style.marginLeft = "0px"; },400); }else{ menu.classList.remove("esconder-menu"); menu.style.transition = '0.8s'; setTimeout(function(){ content.style.marginLeft = "240px"; },400); } }else{ document.body.style.backgroundColor = "pink"; } } var x = window.matchMedia("(max-width: 800px)") mudaMenu(x) x.addListener(mudaMenu)
-
Fixar menu lateral e barra css grid
Sapinn respondeu ao tópico de Sapinn em Desenvolvimento frontend
Funcionou perfeitamente, muito obrigado. -
Opa galera tudo beleza? Então criei um layout de um dashboard com css grid e eu gostaria de fixar o menu lateral na esquerda e a barra que está em cima e quando eu rolasse para baixo a unica coisa que mexesse fosse o conteúdo da direita. Já tentei usar o position fixed mas ele quebra a página, tentei usar o position: sticky mas ele não funciona. Alguém sabe como resolver isso ?
-
Fixar menu lateral e barra css grid
Sapinn respondeu ao tópico de Sapinn em Desenvolvimento frontend
Acho que me expressei mal sobre a quebra da página, não é como se todo o site ficasse torno com os componentes em lugares errados o real problema é que os componentes acabam ficando um por cima do outro devido ao fixed. Existe exemplos disso em dashboard (área do admin) nos templetes em que existe uma barra o menu lateral, geralmente à esquerda, e todo o conteúdo a direita, quando há uma rolagem apenas esse conteúdo localizado nessa parte se move. O exemplo de código que você mostrou funciona perfeitamente mas eu gostaria de fazer isso com o css grid. -
Existe alguma maneira de fazer um transition em javascript??
Sapinn respondeu ao tópico de Sapinn em Javascript
Deu certo agora vlw meu patrão. -
Existe alguma maneira de fazer um transition em javascript??
Sapinn postou um tópico no fórum Javascript
Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda. Codigo js window.onscroll = function(){ var top = window.pageXOffset || document.documentElement.scrollTop var barra = document.querySelector(".barra"); if(top > 900){ barra.style.display = 'flex'; //aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso. barra.classList.add('transition'); }else{ barra.style.display = 'none'; } } Codigo css .barra{ width: 100%; height: 70px; background-color: #090b13; display: none; justify-content: space-between; position: fixed; opacity: 0; } .transition{ transition: 1s; opacity: 0.7; } codigo HTML <div class="barra" > <img src="assets/images/logo-nopad.svg" alt=""> <button class="botao-assinatura-header">Assine Agora</button> </div> -
Vlw meu parceiro agora deu certo
-
Tenho um código de um balão de borda feito com html e css mas gostaria de saber como fazer para colocar a seta que está virada para baixo em cima do balão <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { padding: 140px 10px; text-align: center; } /* Criando o balão */ .bubble { background-color: #fff; border: 2px solid #333; border-radius: 5px; color: #333; display: inline-block; font: 16px/24px sans-serif; padding: 12px 24px; position: absolute; } /* Criando o triângulo */ .bubble.active:after, .bubble.active:before { border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #fff; bottom: -15px; content: ''; left: 80%; margin-left: -15px; position: absolute; } /* Criando a borda do triângulo */ .bubble.active:before { border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 18px solid; border-top-color: inherit; bottom: -18px; margin-left: -18px; } </style> </head> <body> <span class="bubble active">Balão com borda</span> </body> </html>
-
Tenha um menu hamburguer que abre a esquerda mas eu gostaria que ele abrisse a direita(O menu ficaria retrátil a direita ) para meu site se adequar a responsividade codigo do menu que fica a esquerda <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu vertical reponsivo com html e css</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css"> <style> *{ margin:0; padding:0; } .menuMobileVertical a{ text-decoration:none; color:white; display:block; padding:20px 5px; } .menuMobileVertical a:hover{ background:rgba(176,224,230); color:black; } body{ font-family:arial; } input[type="checkbox"]:checked ~ nav{ transform: translateX(350px); } .menuMobileVertical ul{ list-style:none; position:absolute; top:70px; width:100%; } .icone-menu{ font-size:40px; } input[type="checkbox"]{ display:none; } .menuMobileVertical{ background:rgba(16,16,16,.5); width: 350px; height: 100vh; left:-350px; position: absolute; transition:all 0.5s; } label{ padding:15px; position:absolute; z-index:1; } </style> </head> <body> <div class="menuMobile"> <input type="checkbox" id="check"> <label for="check"><i class="bi bi-list icone-menu"></i></label> <nav class="menuMobileVertical"> <ul> <li><a href="">HOME</a></li> <li><a href="">LOGIN</a></li> <li><a href="">ALUNO</a></li> <li><a href="">PROFESSOR</a></li> <li><a href="">CONTATO</a></li> </ul> </nav> </div> </body> </html>
-
Poxa cara muito obrigado mesmo estava a dias tentando fazer isso mas sem sucesso, muito obrigado mesmo.
-
Fala galera blz? Então preciso de ajuda numa coisa aqui que não sei de jeito nenhum como resolver. Eu encontrei na W3School um menu tab vertical perfeito para minha página que é one page. Segui o link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs Mas estou me encontrando com um problema! Eu gostaria que esse menu permanece-se na mesma tag mesmo atualizando a página, por exemplo, se eu escolher a segunda opção do menu ela permanecerá ativada mesmo se eu atualizar a página. Na opção oferecida pela W3Shool, toda vez que a página é atualizada ele volta para a primeira tag que tem por padrão a primeira opção com um active. Não sei como resolver ou se tem uma solução para algo assim mas se alguém puder me ajudar eu agradeceria muito.
-
Estou retornando agora mas o erro continua <?php class Conexao{ public $db_name = 'pessoa'; public $host = 'localhost'; public $user = 'root'; public $pass = ''; public function __construct() { try { $pdo = new PDO("mysql:db_name=".$this->db_name.";host=".$this->host,$this->user,$this->pass); return $pdo; } catch (PDOException $e) { echo "Erro no banco ".$e->getMessage(); exit(); } } }
-
Iai galera beleza? Estou com um erro simples aqui como eu faço para estender minha conexão para outros arquivos ? Estou tentado fazer mas está dado um erro aqui arquivo connection.php <?php class Conexao{ public $db_name = 'pessoa'; public $host = 'localhost'; public $user = 'root'; public $pass = ''; public function __construct() { try { $pdo = new PDO("mysql:db_name=".$this->db_name.";host=".$this->host,$this->user,$this->pass); } catch (PDOException $e) { echo "Erro no banco ".$e->getMessage(); exit(); } } } arquivo Pessoa.php <?php include 'connection.php'; class Pessoa { private $pdo; public function __construct() { $this->pdo = new Conexao(); } public function buscarDados(){ $stmt = []; $sql = $this->pdo->query("SELECT * FROM pessoa order by id desc"); $stmt = $sql->fetchAll(PDO::FETCH_ASSOC); return $stmt; } } arquivo index.php <?php require_once 'models/Pessoa.php'; $p = new Pessoa(); ?> <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="assets/css/style.css"> <title>Crud PDO </title> </head> <body> <section id="esquerda"> <form action=""> <h2>Cadastrar Pessoa</h2> <label for="nome">Nome: </label> <input type="text" name="nome" id="nome"> <label for="telefone">Telefone: </label> <input type="text" name="telefone" id="telefone"> <label for="email">Email:</label> <input type="text" name="email" id="email"> <input type="submit" value="Cadastrar"> </form> </section> <section id="direita"> <?php $p->buscarDados(); ?> <table> <tr id="titulo"> <td>Nome</td> <td>Telefone</td> <td colspan="2">Email</td> </tr> <tr> <td>Maria</td> <td>00000000</td> <td>maria@gmail.com</td> <td><a href="">Editar</a> <a href="">Excluir</a></td> </tr> </table> </section> </body> </html> Erro que é apresentado: Fatal error: Uncaught Error: Call to undefined method Conexao::query()
-
Como mudar o cor da letra de um active em um menu no boostrtrap <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#"> <img src="icone.png" height="60px" alt="Logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent" style="font-size: 20px;"> <ul class="navbar-nav" > <li class="nav-item active" > <a class="nav-link" href="#">Inicio</a> </li> <li class="nav-item" > <a class="nav-link" href="#">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Aluno</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Professor</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Fale Conosco</a> </li> </ul> </div> </div> </nav>
-
[Resolvido] Internal Server Error - Erro ao atualizar xampp no htacess
Sapinn postou um tópico no fórum PHP
Resolvi atualizar meu xampp para a versão 7.4.14 e estou com um erro de Internal Server Error que fica em um projeto que estou usando htacess para fazer urls amigáveis o arquivo usados são: Arquivo externo: <IfModule mod_rewrite.c> RewriteEngine on RewriteRule ^$ public/ [L] RewriteRule (.*)public/$1 [L] </IfModule> Dentro da pasta public: <IfModule mod_rewrite.c> Options -Multiviews RewriteEngine On RewriteBase /unset_mvc/public RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.+)$ index.php?url=$1 [QSA,L] </IfModule> Dentro da pasta app: Options -Indexes Preciso de ajuda porquê não sei o que fazer, já tentei apagar algumas coisas no httpd.conf dentro do xampp mas não funcionou. -
[Resolvido] Internal Server Error - Erro ao atualizar xampp no htacess
Sapinn respondeu ao tópico de Sapinn em PHP
Desinstalei e instalei de novo e funcionou, muito obrigado cara -
[Resolvido] Internal Server Error - Erro ao atualizar xampp no htacess
Sapinn respondeu ao tópico de Sapinn em PHP
Poxa cara obrigado pela resposta mas não funcionou -
Acredito que o que deve ser feito é uma ligação entre o jogador e o time ou seja uma chave estrangeira ligando o jogador ao time que ele pertence, sendo assim, toda vez que o jogador marcar um gol automaticamente seu time recebera tbm
-
Como fazer para o menu ficar fixo quando rolar para baixo
Sapinn respondeu ao tópico de Sapinn em Javascript
Vlw cara. Agr sim vou só fazer uns ajustes no css mas já ta dando certo -
Como fazer para o menu ficar fixo quando rolar para baixo
Sapinn postou um tópico no fórum Javascript
Quero que quando o usuario chegue em uma parte do menu site ele o menu fique fixo no topo da pagina. Como fazer isso??? -
Eu tenho um form e toda vez que alguém clicar no input eu quero que a borda de baixo mude a cor e quando ele clicar fora quero que volte ao normal quero isso para todos os campo de todos os foms que eu tiver