Pesquisar na Comunidade

Olá turma, beleza? Tenho bom conhecimento em HTML, CSS, mas não sei fazer coisas dinâmicas com javascript, jquary etc. Eu estou montando um projeto, estou responsável pelo design e um amigo pela programação. A página do produto vende em grosso, ao invés de adicionar 1 produto ao carrinho, adiciona 12. Desses 12, precisa definir os tamanhos das sandálias, são 3 tamanhos disponíveis. 35/36 37/38 39/40 Dai o usuário precisa dizer quantos pares de cada tamanho ele deseja, precisa fechar em 12. Montei o HTML com bootstrap, ficou assim: O usuário insere a quantidade e o campo QNT DISPONIVEL subtrai o valor do 12, exemplo: QNT DISPONIVEL: 9 35/36 = 3 37/38 = 39/40 = QNT DISPONIVEL: 4 35/36 = 3 37/38 = 5 39/40 = QNT DISPONIVEL: 0 35/36 = 3 37/38 = 5 39/40 = 4 E se não for pedir demais, alguma limitação para o usuário não poder inserir um valor maior que o permitido. Algum ninja do javascript ou outra linguagem consegue me dar uma dica sobre isso? Realmente não sei javascript. Segue o código que estou utilizando: <div class="form-contato"> <form action="" method="post" name="formcontato" onSubmit="return validar();" class="form-horizontal"> <script language="JavaScript" src="javascripts/cadastro.js" type="text/javascript"></script> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">QNT. DISPONÍVEL</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_nome2" value="12" name="cad_nome" size="2" disabled> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 35/36</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade..."> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 37/38</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade..."> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 39/40</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade..."> </div> </div> </form> <br><br> <div class="btn-group"> <div class="adicionar-ao-carrinho"> {botao} </div> </div> </div> Gratidão!!!

Olá Colegas.... Tenho o código abaixo que funciona perfeitamente, fiz algumas modificações no CSS e também no JQUERY, segue abaixo... O PROBLEMA é que ao dar um refresh na página, F5 no brownser, ele como DEFAULT se perde o background, ficando TRANSPARENT. 1) Que é o modo que ele deve começar; 2) Mas como ele muda após se o window for maior >=20, no jquery; 3) Ao dar refresh, dependendo do lugar da página, ele deveria ficar o mesmo, mas fica sempre transparente; CODIGO HTML <nav class="navbar navbar-light navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_menu" aria-expanded="false"> <span class="fa fa-bars"></span> </button> <a href="http://" class="navbar-brand brand-centered"> <img src="img/logo.png" class="img-responsive"> </a> </div> <div class="collapse navbar-collapse" id="navbar_menu"> <ul class="nav navbar-nav navbar-right"> <li><a href="#mn_empresa">EMPRESA</a></li> <li><a href="#mn_clientes">CLIENTES</a></li> <li><a href="#mn_formulario">CONTATO</a></li> </ul> </div> </div> </nav> CODIGO CSS /* NAVBAR */ .navbar { padding-top: 5px; padding-bottom: 12px; background-color: transparent; margin: 0px; color: #333; transition: all 0.3s; z-index: 9999; -webkit-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); -moz-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); } /* NAVBAR - efeito simples dos itens do menu */ .navbar-nav a, .navbar-nav a.active { color: #00224b !important; background-color: transparent; font-size: 15px; font-weight: 600; width: 100%; -moz-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: white; font-weight: 600; width: 100%; } /* NAVBAR - toggle button */ .navbar-light .navbar-toggle { border: none; border-radius: 40px; width: 40px; height: 40px; font-size: 20px; z-index: 12; background-color: dodgerblue; color: white; cursor: pointer; -moz-transition: all .8s; -o-transition: all .8s; -webkit-transition: all .8s; transition: all .8s; } .navbar-light .navbar-toggle:hover { background-color: #f6761c; border-radius: 40px 0px 40px 40px; color: white; } /* NAVBAR - mudanças jquery */ .navbar-brand.nav_corlogo { height: auto; filter: brightness(0) invert(1) !important; } .navbar-nav.nav_cormenu a, .navbar-nav.nav_cormenu a.active { color: white !important; } .navbar-nav.nav_cormenu li a:hover, .navbar-nav.nav_cormenu li.active a { color: #ff9326 !important; background-color: transparent; } .navbar.nav_sombra { -webkit-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); -moz-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); border-bottom: 2px solid rgba(118, 0, 191, 0.56); } .navbar.nav_comprime { padding-top: 10px; padding-bottom: 10px; background: #002a5c; color: white; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); -moz-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .navbar.nav_slide { background-color: transparent !important; } /* NAVBAR - config do logotipo imagem e logo texto */ .navbar-brand { padding: 4px; position: absolute; font-size: 1.25rem; white-space: nowrap; } .navbar-brand>img { padding: 0px; width: 16%; } .navbar-brand:focus, .navbar-brand:hover { text-decoration: none; color: white } CODIGO JQUERY $(function () { $(window).on('scroll', function () { if ($(this).scrollTop() >= 20) { $('.navbar').addClass('nav_comprime'); $('.navbar').addClass('nav_sombra'); $('.navbar-nav').addClass('nav_cormenu'); $('.navbar-brand').addClass('nav_corlogo'); } else { $('.navbar').removeClass('nav_comprime'); $('.navbar').removeClass('nav_sombra'); $('.navbar-nav').removeClass('nav_cormenu'); $('.navbar-brand').removeClass('nav_corlogo'); } }); $('.navbar a').on('click', function () { if (window.innerWidth <= 768) { $('.navbar-toggle').trigger("click"); } }); //função que troca em resoluções menores o logotipo $(window).resize(function () { if ($(window).width() < 481) { $('#logotipo').attr('src', '../site/img/simbolo.png'); } else { $('#logotipo').attr('src', '../site/img/logo_-_original.png'); } }); $(".navbar a, footer a[href='#wrapper']").on("click", function (event) { event.preventDefault(); var hash = this.hash; $("html, body").animate({ scrollTop: $(hash).offset().top }, 800, function () { window.location.hash = hash; }); }); }); Se conseguirem me dar uma luz, agradeço. Posso estar errando no CSS ou JQUERY. Obrigado.

Estou desenvolvendo um site Onepage com bootstrap. Implementei este Collapse Menu <nav class="navbar navbar-expand-sm bg-nav navbar-dark fixed-top"> <a class="navbar-brand" href="#"> <img class="logo" src="images/logo.jpg" alt="logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Quem Somos</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Nossos Serviços</a> </li> <li class="nav-item"> <a class="nav-link" href="#section4">Nossos Clientes</a> </li> <li class="nav-item"> <a class="nav-link" href="#section5">Contatos</a> </li> </ul> </div> </nav> O CSS e Javascript são estes: <head> <title>Meu Site.</title> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <style> body {height: 100%;width: 100%;} html {height: 100%;width: 100%;} form{height: 100%;padding-bottom: 250px;} .bg-nav{background-color:#077877!important} @media (max-width:667px) { img.logo{width: auto; height: 40px;} .desfault-section{padding-top: 65px;padding-bottom: 20px;} } @media (min-width:668px) { img.logo{width: auto; height: 60px;} .desfault-section{padding-top: 90px;padding-bottom: 20px;} } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> Quando é exibido em tela de celular, o menu abre ao clicar nas 3 barras, porém, ao escolher um item do menu, o mesmo deveria recolher automaticamente sem ter que clicar nas 3 barras e, isto não está acontecendo. Alguém me dá uma luz de como resolver?

Minha Pagina que desenvolvi. <!DOCTYPE html> <html lang="pt-br"> <head> <title>Emissao de comprovantes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container form-group col-md-12"> <div class="row"> <div class="form-group col-md-3"></div> <div class="form-group col-md-5"> <div class="clearfix"></div> <div class="form-group"> </div> <div class="panel panel-danger"> <div class="panel-heading"><img src="http://internet.sefaz.es.gov.br/imagens/topo_brasao.png" class="img-responsive center-block" alt="Cinque Terre"><h4 class="text-center">BNES SA</h4></div> <h5 class="text-center"><strong>BNES CORPORATIVO</strong></h5> <h5 class="text-center"><strong>Pagamento e Transferencias Eletrônicas</strong></h5> <h5 class="text-center"><strong>PAGAMENTO: Deposito</strong></h5> <form class="form-horizontal" action="/action_page.php"> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Titular: </label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Codigo de Barras:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Data de Pagamento:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Valor Documento:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Protocolo:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Registro:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Emissao:</label> </div> </form> </div> <div class="pull-right"> <button class="btn btn-success" id="btnImprimir" type="button"><p>IMPRIMIR <span class="glyphicon glyphicon-print"></span></p></button> </div> </div> <div class="form-group col-md-3"></div> </div> </div> </body> </html> A ideia é que quando eu clicar no botão de imprimir dentro de uma gridview ele chama essa pagina que postei logo acima e exibir os dados via label trazendo do banco, mas até o momento eu estou agarrada na parte da modal. Classe do evento click do meu botão que chama a pagina de cima. protected void ImgImprimir_Click(object sender, EventArgs e) { Response.Redirect("frmImprimir.aspx"); } Meu html da minha pagina: meu html do botão referente ao metodo: <ItemTemplate> <asp:LinkButton ID="imgImprimir" runat="server" CausesValidation="false" CommandArgument='<%#Eval("Flag")%>' CommandName="Imprimir" CssClass="iconesTabelas icon_imprimir" OnClick="ImgImprimir_Click" ToolTip="Imprimir" /> </ItemTemplate>

Boa tarde caros amigos do fórum. Comecei a trabalhar com sites responsivos (bootstrap) há pouco tempo e ainda não tenho pleno domínio no assunto. Bom, desenvolvi um site (não responsivo) pra um cliente há alguns meses e o proprietário pediu recentemente para que eu o torna-se responsivo. Acontece que o site tem um sub-menu pra o link Produtos. Causam-me dois problemas: 1) Quando o site é visualizado em aparelhos móveis os links não ficam um embaixo do outro, como deveriam ficar; 2) Os links do sub-menu não pode aparecer da forma que está aparecendo, pois dessa maneira só os dois primeiros são mostrados. Pra ajudar vou disponibilizar o link do site. Peço que vejam ele no 'Responsive Mode Design', pois o problema é só quando ele é exibido em dispositivos móveis. Importante: para fazer o sub-menu, utilizei um arquivo CSS (menu.css), provavelmente é isso que está dando o problema, mas não consigo descobrir como corrigir. Link para o site Qualquer ajuda é bem vinda e agradeço desde já à todos que se propuserem a ajudar.

Olá pessoal, estou desenvolvendo uma loja virtual e cadastrei os produtos de meu desejo em uma tabela dentro de um banco de dados com MySQL para depois mostrar todos automaticamente na página, dentro da tabela produtos no atributo preço cadastrei tudo desta maneira: "9.90", mas agr que fiz aparecer tudo na página todos os preços estão aparecendo com ponto e quero mudar isso para o preço aparecer com vírgula assim: "9,90", mas só aparecer para na página mesmo e quero que no banco de dados continue com ponto. Expliquei de um jeito sem muitos termos técnicos, desculpem-me se está de um jeito difícil de entender. Se alguém puder me ajudar, agradeço!

Bom dia pessoal, estou voltando a desenvolver sites, e desatualizado, muito, mas principalmente com Jquery, bootstrap, enfim, quase tudo depois de 2015, estou com um site de cliente que pediu um Player de músicas MP3, implantei o JPlayer ( http://jplayer.org ) e funciona, porém se nenhuma forma estou conseguindo o mesmo executar o "autoPlay" na playlist... segue o link do player (http://www.gessohouse.com.br/v2018/player.php) segue abaixo o código do arquivo player.php com URL completa de todos os arquivos requeridos(CSS, JS e MP3) <link href="http://www.gessohouse.com.br/v2018/js/jPlayer/estilo_tema4.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jquery.js"></script> <script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jPlayer/jquery.jplayer.min.js"></script> <script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jPlayer/jplayer.playlist.min.js"></script> <script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jPlayer/jquery.jplayer.inspector.js"></script> <script type="text/javascript"> $(document).ready(function(){ var myPlaylist = new jPlayerPlaylist({ jPlayer: "#PlayerHtml5", cssSelectorAncestor: "#jp_container_N" }, [ { title:'Gesso House - Design & Elegância (Faixa 01)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_8_0_30082018083521.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 02)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_10_0_30082018084115.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 03)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_12_0_30082018085004.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 04)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_14_0_30082018092756.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 05)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_15_0_03092018103923.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 06)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_16_0_03092018104018.mp3', oga:'', poster:'' }, ], { playlistOptions: { enableRemoveControls: false, loopOnPrevious: false, shuffleOnLoop: false, autoPlay: true }, swfPath: "js/jPlayer/", supplied: "mp3", wmode: "window", volume: .99, smoothPlayBar: true, keyEnabled: true, audioFullScreen: true }); // The remove commands $("#playlist-remove").click(function() { myPlaylist.remove(); }); // The shuffle commands $("#playlist-shuffle").click(function() { myPlaylist.shuffle(); }); $("#playlist-shuffle-false").click(function() { myPlaylist.shuffle(false); }); $("#playlist-shuffle-true").click(function() { myPlaylist.shuffle(true); }); // The next/previous commands $("#playlist-next").click(function() { myPlaylist.next(); }); $("#playlist-previous").click(function() { myPlaylist.previous(); }); // The play commands $("#playlist-play").click(function() { myPlaylist.play(); }); // The pause command $("#playlist-pause").click(function() { myPlaylist.pause(); }); //$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#PlayerHtml5")}); /* added Dustin Blake code 01-11-2013 */ $("#PlayerHtml5").bind($.jPlayer.event.play, function (event) { var current = myPlaylist.current, playlist = myPlaylist.playlist; $.each(playlist, function (index, obj) { if (index == current) { $('.NomeDaMusica').text(obj.title); } }); }); }); </script> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td> <div id="jp_container_N" class="jp-video jp-video-270p"> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <table width="460" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td> <div class="jp-type-playlist"> <div id="PlayerHtml5" class="jp-jplayer"></div> <div class="jp-gui"> <div class="jp-video-play"> <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a> </div> <div class="jp-interface"> <div id="NomeDaMusica" class="NomeDaMusica"></div> <div class="jp-divisor">/</div> <div class="jp-current-time"></div> <div class="jp-duration"></div> <div class="jp-controls-holder"> <ul class="jp-controls"> <li><a href="javascript:;" class="jp-previous" tabindex="1" title="Voltar Música">voltar</a></li> <li><a href="javascript:;" class="jp-play" tabindex="1" title="Play" id="BotaoPlay">play</a></li> <li><a href="javascript:;" class="jp-pause" tabindex="1" title="Pausar">pause</a></li> <li><a href="javascript:;" class="jp-next" tabindex="1" title="Avançar Música">proxima</a></li> <li><a href="javascript:;" class="jp-stop" tabindex="1" title="Parar">stop</a></li> <li><a href="javascript:;" class="jp-mute" tabindex="1" title="Mudo">mudo</a></li> <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="Desativar Mudo">mudo off</a></li> <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="Volume Máximo">volume maximo</a></li> </ul> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <ul class="jp-toggles"> <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="Repetir">repeat</a></li> <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="Desligar Repetir">repeat off</a></li> </ul> </div> <div class="jp-title"> <ul> <li></li> </ul> </div> </div> </div> <div class="jp-playlist"> <ul> <li></li> </ul> </div> </div> </td></tr></table> </div> </td></tr></table>

Pessoal, boa noite. Sou novato no Bootstrap, estou seguindo a W3School e implementei um slide show com legendas. Queria mudar a posição das legendas para o topo das imagens do corrossel, tentei alterar parâmetros de margin, padding no CSS mas, não surtiu efeito Alguém me dá uma luz, please! O exemplo do tutorial é o W3School Bootstrap exemplo Meu código baseado neste exemplo ficou: <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .carousel-inner img {height: 100%;} </style> <body> <!-- The slideshow --> <div id="demo" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/slide1.jpg" alt="slide 1" width="100%"> <div class="carousel-caption"> <h3>texto1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel elementum erat. In pharetra turpis.</p> </div> </div> <div class="carousel-item"> <img src="images/slide2.jpg" alt="slide 2" width="100%"> <div class="carousel-caption"> <h3>texto2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel elementum erat. In pharetra turpis.</p> </div> </div> <div class="carousel-item"> <img src="images/slide3.jpg" alt="slide 3" width="100%"> <div class="carousel-caption"> <h3>texto3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel elementum erat. In pharetra turpis.</p> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </body>

Boa noite! Como faço pra evitar que sejam realizado cadastros com as mesmas informações? Atualmente meu "processa.php" está desta forma, e queria incluir a função citada acima... <?php session_start(); include_once ("conexao.php"); $nome = filter_input($INPUT_POST, 'nome', FILTER_SANITIZE_STRING); $email = filter_input($INPUT_POST, 'email', FILTER_SANITIZE_EMAIL); $senha = filter_input($INPUT_POST, 'senha', FILTER_SANITIZE_STRING); $cargo = filter_input($INPUT_POST, 'cargo', FILTER_SANITIZE_STRING); $setor = filter_input($INPUT_POST, 'setor', FILTER_SANITIZE_STRING); $result_usuario = "INSERT INTO usuarios (nome, email, senha, cargo, setor, created) VALUES ('$nome', '$email', '$senha', '$cargo', '$setor', NOW())"; $resultado_usuario = mysqli_query($conn, $result_usuario); if(mysqli_insert_id($conn)){ $_SESSION['msg'] = "<p style='color:green;'>Usuário cadastrado com sucesso</p>"; header("Location: cadastrar-usuario.php"); }else{ $_SESSION['msg'] = "<p style='color:red;'>Usuário não foi cadastrado com sucesso</p>"; header("Location: cadastrar-usuario.php"); } ?>

Bom dia. Eu estou na fase de entrega de um projeto e estou com uma dificuldade. Tenha na primeira linha da minha table onde trago todas as etapas, que hoje são 24 e coloquei essa table dentro de um iframe. Na primeira coluna tenho as datas. eu preciso que a primeira linha e a primeira coluna seja bloqueada para a pessoa ter um norte de onde ele esta, pois da maneira que fiz ele some e a pessoal não sabe qual processo e qual data ele esta olhando a produção. Como me auxiliariam a fazer?

Tenho uma página onde dados de um banco são exibidos em uma table, eu gostaria de criar um filtro que o usuário seleciona a categoria (via select) e depois há uma opção para ele escrever e buscar algo dentro daquela categoria(a categoria vai de acordo com as colunas) e aparecer os dados na tabela. Por onde começo? <div class="op"> <select name="opcao_filtro" class="form-control" style="width:150px; height:30px;"> <option value="nulo">---</option> <option value="titulo">Título</option> <option value="autor">Autor</option> <option value="tema">Tema</option> <option value="editora">Editora</option> <option value="indice">Índice</option> </select> </div> <input type="search" class="form-control" name="busca" id="busca" placeholder="Busca" style="width:200px; float:left;" autocomplete="off"> <input type="submit" value="Procurar" class="btn btn-default btn-info" style="float:right;">

Boa noite, estou com uma dúvida. Estou elaborando um controle de estoque web para minha empresa, desenvolvido com PHP, MySQLi e Bootstrap, e antes do desenvolvimento de fato, estou esboçando tudo, e surgiu a seguinte questão Desejo ter uma tela, onde sejam exibidos todos os produtos (com quantidades mínimas, e atuais). E que de forma automática, este site me dê um alert, ou apresente uma espécie de notificação, quando determinado produto ficar menor que a quantidade mínima. Como seria a forma mais "fácil" de idealizar?

Eu gostaria de um carrousel responsivo com o bootstrap e que mostre no tamanho máximo de 800x600 no desktop que é o tamanho original das imagens. Usando o código abaixo, no celular, ele fica responsivo porém no computador ele mostra resoluções maiores que 800x600. O meu código é o: <div class="container"> <div id="myCarousel2" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel2" data-slide-to="0" class="active"></li> <li data-target="#myCarousel2" data-slide-to="1"></li> <li data-target="#myCarousel2" data-slide-to="2"></li> <li data-target="#myCarousel2" data-slide-to="3"></li> <li data-target="#myCarousel2" data-slide-to="4"></li> <li data-target="#myCarousel2" data-slide-to="5"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="PH01.jpg" alt="01" style="width:100%;"> <div class="carousel-caption"> <h3>01</h3> </div> </div> <div class="item"> <img src="PH02.jpg" alt="02" style="width:100%;"> <div class="carousel-caption"> <h3>02</h3> </div> </div> <div class="item"> <img src="PH03.jpg" alt="03" style="width:100%;"> <div class="carousel-caption"> <h3>03</h3> </div> </div> <div class="item"> <img src="PH04.jpg" alt="04" style="width:100%;"> <div class="carousel-caption"> <h3>04</h3> </div> </div> <div class="item"> <img src="PH05.jpg" alt="05" style="width:100%;"> <div class="carousel-caption"> <h3>05</h3> </div> </div> <div class="item"> <img src="PH06.jpg" alt="06" style="width:100%;"> <div class="carousel-caption"> <h3>06</h3> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- Carousel --></div><BR>

Galera, estou desenvolvendo uma aplicação nova e estou com problemas no front end. Quando estou incluindo ou alterando registros o BootBox não mantém o modal aberto para exibir o erro, ele fecha como se tivesse retornado true meu back end. Tem algo errado na minha chamada? Eu não consigo visualizar o erro, já vi que o hidden.bs.modal aguarda um evento no client e hide.bs.modal fecha imediatamente, em teoria estou usando o correto. bootbox.dialog({ title: '@ViewBag.Title', message: modal_form }) .on('shown.bs.modal', function (){ modal_form.show(0, function (){ $('#txt_tipo').focus(); }); }) .on('hidden.bs.modal', function () { modal_form.hide().appendTo('body'); });

Estou com o seguinte problema: Criei um código PHP que monta perfeitamente o carousel com o nome das imagens em meu banco de dados, porém o carousel fica congelado na primeira imagem, sei que é apenas um detalhe mas não estou conseguindo rodar. <?php // Parte que chama o slider como o id das fotosextras $idp = $imovel; $sqls = mysql_query("SELECT * FROM imovelfotoextra WHERE idimovel='".$idp."' order by id desc LIMIT 16"); $numRegistros = mysql_num_rows($sqls); $contador = $numRegistros; ?> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <?php If ($numRegistros != 0){ // <!-- Indicators --> echo "<ol class=\"carousel-indicators\">"; $reg = 0; while ($dadoss=mysql_fetch_array($sqls)){ if ($contador == 1 || $reg == 0){ echo "<li data-target=\"#myCarousel\" data-slide-to=\"".$reg."\" class=\"active\"></li>"; $contador = $contador + 1; $reg = $reg + 1; } else { echo "<li data-target=\"#myCarousel\" data-slide-to=\"".$reg."\"></li>"; $contador = $contador + 1; $reg = $reg + 1; } } echo "</ol> <div class=\"carousel-inner\">"; $sqltris = mysql_query("SELECT * FROM imovelfotoextra WHERE idimovel='".$idp."' order by id asc LIMIT 16"); $flagtris = 0; while($dadostris=mysql_fetch_array($sqltris)){ if ($flagtris == 0){ echo "<div class=\"item active\"> <img src=\"paginas/midias/images/".$dadostris[foto]."\" Alt=\"".$dadostris[foto]."\" border=\"0\" /></div>"; } else { echo "<div class=\"item\"> <img src=\"paginas/midias/images/".$dadostris[foto]."\" Alt=\"".$dadostris[foto]."\" border=\"0\" /></div>"; } $flagtris = 1; } echo "</div>"; } else { echo "<ol class=\"carousel-indicators\">"; echo "<li data-target=\"#myCarousel\" data-slide-to=\"0\" class=\"active\"></li>"; echo "</ol> <div class=\"carousel-inner\">"; echo "<div class=\"item active\"><img src=\"paginas/thumbs.php?w=200&h=125&imagem=midias/images/".$mostra[foto]."\" border=\"0\"></div>"; echo "</div>"; } ?> <!-- Left and right controls --> <a class=\"left carousel-control\" href=\"#myCarousel\" role=\"button\" data-slide=\"prev\"> <span class=\"glyphicon glyphicon-chevron-left\" aria-hidden=\"true\"></span> <span class=\"sr-only\">Anterior</span> </a> <a class=\"right carousel-control\" href=\"#myCarousel\" role=\"button\" data-slide=\"next\"> <span class=\"glyphicon glyphicon-chevron-right\" aria-hidden=\"true\"></span> <span class=\"sr-only\">Próximo</span> </a> </div>Um exemplo do que ocorre pode ser localizado em http://www.forsterimoveis.com.br/index.php?p=imovel&id=1071 ao clicar no carousel ele não vai para a próxima imagem do imóvel. Agradeço desde já. Cordialmente. Leandro Mesquita

Olá amigos do imasters, sou novo por aqui então se eu postei em uma área errada desculpem. Sou Front-end mas tem pouco tempo que comecei a mexer com Bootstrap, queria uma avaliação para ver o que vocês acham Link: http://brunohenrique.esy.es/movie/ esse é um dos meus primeiros projetos, criticas construtivas serão bem-vindas PS: não está 100% responsivo.

Estou colocando botões flutuantes no meu formulário para servirem como âncoras (a página é extensa), porém não manjo muito de javascript e só consigo colocar esses botões para irem para o topo. O objetivo era quando deslizar o scroll do mouse com Unidade 1, Unidade 2 e Unidade 3, respectivamente. E ao clicar neles, irem pras suas respectivas sessões. Vejam o JS: $(document).ready(function(){ window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) { document.getElementById("navegacao1").style.display = "block"; document.getElementById("navegacao2").style.display = "block"; document.getElementById("navegacao3").style.display = "block"; } else { document.getElementById("navegacao1").style.display = "none"; document.getElementById("navegacao2").style.display = "none"; document.getElementById("navegacao3").style.display = "none"; } } $(function(){ $("#navegacao1,#navegacao2,#navegacao3").click(function(){ document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }); }); }); O id das tags no html para cada sessão que os botões devem redirecionar são: unidade1, unidade2 e unidade3. Link do github: https://goo.gl/hvkpZa

Estou estudando o framework mencionado e tenho dificuldade de encontrar conteúdos que ensinem como usá-lo de forma customizada e consistente. Nesse sentido, cheguei a ler alguns livros, mas eles sempre abordam o assunto de forma rasa. Ainda assim, consegui aprender alguns princípios, como importar somente os partials necessários. No entanto, nem sempre eu uso todo código de um partial. Assim, sempre acaba sendo importado algum trecho desnecessário. Devido a isso, me pego questionando se isso é normal ou, mesmo, se estou usando todo o poder do Sass. Dado isso gostaria do esclarecimento de vocês, quanto ao seguinte: É comum "sobrar" CSS, importando um partial Bootstrap? Se sim: Então, devo usar alguma ferramenta como o UnCSS? Se não: O que posso estar fazendo errado? Conhecem algum conteúdo voltado a ensinar de forma ampla, como usar Bootstrap e seus partials?

Bom dia amigos. Estou desenvolvendo um site para um cliente e estou fazendo uso do bootstrap para tal. Utilizo a versão 3.3.7 (e gostaria de mantê-la). Bom, o problema é que não consigo mudar a cor dessa div. O trecho abaixo é da div <nav> <nav class="navbar navbar-default navbar fixed-top navbar-height navbar-zindex"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#bona-navbar"></button> <a class="navbar-brand" href="index.php"><img class="navbar-brand-" src="image/logo.jpg" alt="" /></a> </div> <ul id="bona-navbar" class="nav navbar-nav navbar-right collapse navbar-collapse navbar-zindex" data-toggle="collapse" data-target="#bona-navbar"> <li><a class="navbar-link" href="empresa.php">Empresa</a></li> <li><a class="navbar-link" href="servicos.php">Serviços</a></li> <li><a class="navbar-link" href="links.php">Links Úteis</a></li> <li><a class="navbar-link" href="orcamento.php">Orçamento</a></li> <li><a class="navbar-link" href="contato.php">Contato</a></li> <li><a class="navbar-link" href="localizacao.php">Localização</a></li> </ul> </div> </nav> Agora o css: .navbar-brand-{ height: 80px; } .navbar-height{ height: 110px; } .navbar-zindex{ z-index: 99; background: #f8f8f8; } .navbar-link{ font-family: 'Poppins', sans-serif; font-size: 18px; margin-top: 45px; } .navbar-link:hover{ font-size: 18px; background: #007cc2; } li:hover{ background: #e57716; height: 10px } E por fim, como fica no site: Gostaria de saber se alguém consegue me ajudar nessa? Ah, tbm não consigo mudar a cor dos links quando passo o mouse; do jeito que está não é como eu quero. Qualquer ajuda é bem vinda amigos. Obrigado a todos desde já, um grande abraço e até mais. Att.

gostaria de posicionar a divs, igual está na imagem, estou usando html, css e bootstrap. oq eu quero fazer é colocar um video(o bloco maior) e video menores(blocos menores).

Não estou conseguindo adicionar o usuario ou senha incorretos no formulário. Não aparece. Codigo html <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Pagina de login "> <meta name="author" content="RXCad"> <link rel="icon" href="images/favicon.ico"> <title>RXCad - Login</title> <!-- AREA DE BOOTSTRAP --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--AREA DE CSS --> <link href="css/style.css" rel="stylesheet"> </head> <body class="text-center"> <!-- Fim container --> <form class="form-signin" method="POST" action="valida_login.php"> <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">Área restrita</h1> <!-- CAMPO DE USUARIO--> <label for="inputEmail" class="sr-only">Usuario</label> <input type="text" id="inputEmail" name="usuario" class="form-control" placeholder="Digite seu usuário" required autofocus> <!-- CAMPO DE SENHA--> <label for="inputPassword" class="sr-only">Senha</label> <input type="password" id="inputPassword" name="senha" class="form-control" placeholder="Digite sua senha" required> <!-- CAMPO DE LEMBRAR - ME--> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Lembrar-me </label> <!--USUARIO OU SENHA INCORRETOS --> <p class="text-center text-danger"> <?php if(isset($_SESSION['loginErro'])){ echo $_SESSION['loginErro']; unset($_SESSION['loginErro']); } ?> </p> </div> <!-- BOTAO DE LOGIN--> <button class="btn btn-lg btn-primary btn-block" type="submit">Acessar</button> <p class="mt-5 mb-3 text-muted">© 2018-2029</p> </form><!-- Fim container--> </body> </html> PHP PARA VALIDAÇÃO DE DADOS <?php session_start(); $usuariot = $_POST['usuario']; //capta o usuario $senhat = $_POST['senha']; // capta senha //echo $usuariot." - ".$senhat; include_once("conexao.php"); $result = mysqli_query($conectar,"SELECT * FROM usuarios WHERE login = '$usuariot' AND senha = '$senhat' LIMIT 1" ); $resultado = mysqli_fetch_assoc($result); // echo $resultado['nome']; // tras o nome do usuario if(empty($resultado)){ //Mensagem de Erro $_SESSION['loginErro'] = "Usuário ou senha Inválido";// variavel global //Manda o usuario para a tela de login header("Location: login.php"); } ?> PHP DE CONEXÃO <?php $conectar = mysqli_connect("localhost","root","","rxcad") or die ("Erro de conexão"); mysqli_select_db($conectar,"rxcad") or die ("Base de dados não encontrada"); ?>

Boa tarde galera. Alguém sabe me dizer como faço para o input range aparecer como a imagem? Preciso criar uma busca com intervalos de valores, gostaria de utilizar essa barra. Já procurei varios materiais na internet e não encontrei nada. Lembrando que estou utilizando Bootstrap.

<!DOCTYPE html> <head> <meta charset="utf-8"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <form name="form" action="" method="post" data-toggle="validator" role="form"> <div class="row"> <div class="help-block with-errors"></div> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <input type="text" placeholder="CPF" name="CPF" data-error="Por favor, informe seu CPF." required> </div> <input type="submit" value="Cadastrar" /> </div> </form> <!--jQuery--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!--Bootstrap--> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!--validator--> <script src="js/validator.min.js"></script> </body> </html>

Eu precisava de implementar um link para o possível cliente entrar diretamente no meu whatsapp. Eu queria colocar uma imagem "fixa", quando o cliente rolar a barra de rolagem a imagem continua aparecendo no monitor, no canto inferior direito mas eu gostaria que esta imagem fosse responsiva usando o bootstrap.

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="curso de bootstrap 3"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <title>3° site com bootstrap tabelas</title> <style> .table-striped > tbody > tr{ background-color:red; } .table-hover > tbody >tr:hover{ background-color:blue; color:white; } </style> </head> <body> <div class="container-fluid"> <h3 class="text-center">Tabelas</h3> </div> <div class="row"> <div class="col-md-6"> <table class="table table-striped table-condensed table-hover table-bordered"> <thead> <tr > <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0001-00</td> </tr> <tr > <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </tbody> </table> </div> <div class="col-md-6"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td class="success">0001</td> <!--linhas decoradas--> <td class="danger">Bootstrap essencial - ME</td> <td class="warning">00.000.000/0001-00</td> </tr> <tr class="success"> <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr class="warning"> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr class="active"> <td>0005</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0005-00</td> </tr> <tr class="info"> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </table> </div> <!--tabela responsiva--> </div> </div> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html> acima site usando a versão antiga <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="curso de bootstrap 3"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <title>3° site com bootstrap tabelas</title> <style> .table-striped > tbody > tr{ background-color:red; } .table-hover > tbody >tr:hover{ background-color:blue; color:white; } </style> </head> <body> <div class="container-fluid"> <h3 class="text-center">Tabelas</h3> </div> <div class="row"> <div class="col-md-6"> <table class="table table-striped table-condensed table-hover table-bordered"> <thead> <tr > <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0001-00</td> </tr> <tr > <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </tbody> </table> </div> <div class="col-md-6"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td class="success">0001</td> <!--linhas decoradas--> <td class="danger">Bootstrap essencial - ME</td> <td class="warning">00.000.000/0001-00</td> </tr> <tr class="success"> <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr class="warning"> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr class="active"> <td>0005</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0005-00</td> </tr> <tr class="info"> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </table> </div> <!--tabela responsiva--> </div> </div> <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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> </body> </html> o que denunciou a falha do framework foi a table-striped não ter funcionado e o estados nas linhas da tabela.