Search the Community

Olá, Estou a usar dataTable dentro de um loop PHP, em cada linha tem uma ação com Jquery. Essa ação elimina a linha. O problema é que elimina a linha apenas nas 10 primeiras linhas, ou seja, nos registos da primeira página. O que estou eu a fazer mal? O Jquery está fora do loop PHP, está no rodapé. <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <tr> <th colspan="5">Concluidos</th> </tr> <tr> <th>ID</th> <th>Descrição</th> <th>Local</th> <th>Grau</th> <th><i class="fas fa-fw fa-cog"></i></th> </tr> </thead> <tfoot> <tr> <th>ID</th> <th>Descrição</th> <th>Local</th> <th>Grau</th> <th><i class="fas fa-fw fa-cog"></i></th> </tr> </tfoot> <tbody> <?PHP $sql = "SELECT id, descr, localiz, grau, estado, addpor, dataadd FROM trabalhos WHERE estado = 1"; $result = $conn->query($sql); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { //Cor da urgencia de grau // 1 = urgente || 2 = Semi-urgente || 3 = Não Urgente $g = $row["grau"]; if ($g == "1"){ $gclas = "border-left-danger"; } else if ($g == "2"){ $gclas = "border-left-warning "; } else if ($g == "3"){ $gclas = "border-left-success "; } ?> <tr id="linha_<?PHP echo $row["id"]; ?>"> <td class="<?PHP echo $gclas; ?>"><?PHP echo $row["id"]; ?></td> <td><?PHP echo $row["descr"]; ?></td> <td><?PHP echo $row["localiz"]; ?></td> <td><?PHP echo $row["grau"]; ?></td> <td> <a href="#" class="btn btn-success btn-circle btn-sm foiFeito" id="<?PHP echo $row["id"]; ?>" data-id="<?PHP echo $row["id"]; ?>"> <i class="fas fa-check"></i> </a> </td> </tr> <?PHP } } else { echo "<tr><td>Não há trabalhos por fazer</td></tr>"; } $conn->close(); ?> </tbody> </table> //Trabalho efetuado $(".foiFeito").click(function(){ var idFeito=$(this).attr("data-id") $.ajax({ url:'../insertTrab.php?cmd=feito', method:'POST', data:{ idFeito:idFeito }, success:function(data){ $("#linha_"+idFeito).css("background", "#f9e79f"); $("#linha_"+idFeito).fadeOut(1000); } }); });

Bom dia! Estou a fazer um secript que me permita esconder e mostrar o conteudo do meu site baseado em ajax e jquery. O meu objetivo é mostrar o conteudo sem fazer reload à página e, se a página já tiver sido carregada, simplesmente esconder a outra e mostrar essa. divs: <div id="content"> <div class="loader1" style="display: none"> <img src="~/img/dragon.gif" alt="Loading..." /> </div> <div id="content1"> @RenderBody() </div> <div id="content2"> </div> </div> Script: <script> $(".teste a").on("click", function () { var sel = $(this).attr("data-sub"); if ($(this).attr('data-loaded') == 'true') { //VERIFICAR SE JA FOI CARREGADO ✓ console.log('esta div já existe!'); console.log($(this).attr("data-sub")); if (($("div." + sel).attr("class")) != sel) { //SE SIM ESCONDE ANTERIOR E MOSTRA ATUAL $(sel).hide(); console.log('Esconder esta div'); } else { $(sel).show(); console.log('Mostrar esta div'); } } else { console.log('esta div NÃO existe!'); $(this).attr('data-loaded', 'true'); $(".loader1").show(); //ATIVA LOADING ✓ $.ajax({ //SE NAO PEDIDO AJAX AO URL CORRESPONDENTE DINAMICAMENTE ✓ type: 'GET', url: '/' + $(".main a").attr('data-main') + '/' + $(this).attr('data-sub'), success: function (data) { if ($(data).text() != '') { //VERIFICAR SE TRAZ RESULTADO ✓ $("#content2").add('<div id="cont" class="' + sel + '"' + '>' + data + '</div>').appendTo('#content2'); //SE SIM ADICIONA AO CONTAINER ✓ $("#content1").hide(); } else { alert('O container está vaziu!'); } }, complete: function () { $(".loader1").hide(); //DESATIVA LOADING ✓ }, return: false, }); } }); </script> navbar: <div class="sidebar-header"> <a href="../home"><img src="/img/logodrakoons.png" alt="Alternate Text" class="imgresponsive" /></a> </div> <ul class="list-unstyled components"> <i class="fas fa-home paddingleft" style="font-size: 20px"></i><a href="../home"> Início</a> <li class="main"> <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" data-main="portfolio">Portfólio</a> <ul class="dro collapse list-unstyled" id="homeSubmenu"> <li class="teste"> <a href="#" data-url="/portfolio/artworks" data-loaded="false" data-sub="artworks"> Artworks</a> </li> <li class="teste"> <a href="#" data-url="/portfolio/logotipos" data-loaded="false" data-sub="logotipos">Logótipos</a> </li> <li class="teste"> <a href="#" data-url="/portfolio/banners" data-loaded="false" data-sub="banners">Banners</a> </li> <li class="teste"> <a href="#" data-url="/portfolio/videos" data-loaded="false" data-sub="videos">Videos</a> </li> </ul> </li> <li class="main"> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle art" id="teste" data-main="artistas">Artistas</a> <ul class="drop collapse list-unstyled" id="pageSubmenu"> <li> <a id="art" href="/artistas/daxter">Daxter</a> </li> <li> <a id="art" href="/artistas/darkangel">DarkAngel</a> </li> </ul> </li> </ul> Obrigado!

boas malta tenho aqui uma dúvida tenho uma div que esta a ler conteúdo vindo por LOAD em jquery $("#plano").load(urls+"/cnt/plano.php?cl="+clubes, function (){ $("#plano").show(); }); so que não consigo aceder por jquery aos inputs dentro desse load ou seja por jquery tenho: $( 'input:radio' ) . change( function (e) { var $this = $( this ); var $id = $this . attr( 'name' ); switch ( $id ) { case "plano": $( '#plano li' ) . removeClass( 'w3-yellow' ); $( '#plano li' ) . addClass( 'w3-light-grey' ); $this . closest( '#plano li' ) . removeClass( 'w3-light-grey' ); $this . closest( '#plano li' ) . addClass( 'w3-yellow' ); break; mas não esta a conseguir ler o input:radio que esta no ficheiro externo em cima mencionado.... como se pode fazer isso? obrigado

Tem como Bloquear digitação em campo date e manter a popup que carrega o calendário? O problema é o seguinte: <input type='date' id='data' name='data' max="<?php echo date('Y-m-d'); ?>" required /> Adicionei data limite ao input date. Quando o usuário escolhe no calendário a data, lá, as datas posteriores à data limite estão desativadas para a seleção. No entanto, se o usuário resolver digitar a data ao invés de escolhê-la no calendário, então ele conseguirá digitar uma data posterior à data limite. Como contornar esse problema?

Bom dia pessoal, Estou com o seguinte problema StackOverflow - Dúvida. Muito resumidamente pretendo dar hipótese ao utilizador de cancelar o upload de um, ou mais, ficheiros antes de fazer upload dos mesmos. Sei que apagar do input não é possível por este ser readonly. Já tentei gravar os ficheiros para upload num array mas não estou a obter sucesso no submit.... Alguém consegue ajudar? Obrigado

Tenho o seguinte código: $("div.conteudo div.administrador form.administradorEdita") Que é um form Quero fazer referência a um label dele; var for = $("div.conteudo div.administrador form.administradorEdita"); Como seria? form label#consulta OU $("form label#consulta")? OU $("form').label#consulta")? ? Gostaria de pegar por exemplo o texto do label Mas não tem apenas esse elemento label. São vários. Isso é um formulário esse formulário tem vários campos aonde cada campo ganha um estilo próprio. Então: $("div.conteudo div.administrador form.administradorEdita") Seria um encurtamento de endereço para o formulário.Preciso entende a dinâmica de como fazer para encurtar esse endereço. – Carlos Rocha 24 minutos atrás

Estou fazendo um upload de arquivos com html5, ajax e php. Tudo vai bem, a gravação no banco é feita, o upload é feito, mas a imagem, quando vê ela no windows explorer, ainda que ela esteja lá, mas não dá para visualiza-la. O nome está correto, está com a extensão. Está parecendo uma falha do uploader. O que pode ser feito? Segue o código: FORM <div class="plano"> <h1 class="titulos">Cadastro de Plano</h1> <form method="post" class="planoCadastrar" method="post" enctype="multipart/form-data"> <input type="text" name="nomePlano" id="nomePlano" class="typeTextMedio" placeholder="Nome" required /><br /><br /> <textarea placeholder="Descrição" class="textarea" name="descricao" id="descricao" cols="93" rows="15" required></textarea><br /> <br /> <div id="multiple_upload"> <input type="hidden" id="arquivos" name="arquivos" /> <input type="file" multiple id="fotos" name="fotos[]" accept=".jpg, .png, image/jpg, image/png" /> <div id="message">Selecionar fotos</div> <div id="lista"></div> </div> <img class="spinner" src="../_img/_bannerImgs/spinner.gif" /> <input type="submit" class="btnAcesso" value="Enviar" /> <label class="resposta"></label> </form><br /><br /> <script> $('.elevate-image').ezPlus({ zoomType: 'inner', cursor: 'crosshair' }); </script> </div> JQuery // JavaScript Document $(document).ready(function(e) { $("div.conteudo div.plano form.planoEditar").on("submit", function() { var idPlano = $("div.conteudo div.plano form.planoEditar input[type=hidden]#idPlano").val(); var nomePlano = $("div.conteudo div.plano form.planoEditar input[type=text]#nomePlano").val(); var descricao = $("div.conteudo div.plano form.planoEditar textarea#descricao").val(); if ( nomePlano == "" || idPlano == "" || descricao == "") { alert("Algum campo está vazio!"); return false; } $("div.conteudo div.plano form.planoEditar input[type=submit].btnAcesso").css('display', 'none'); $("div.conteudo div.plano.planoEditar form img").css('display', 'block'); $("div.conteudo div.plano form input[type=submit].btnAcesso").css('display', 'none'); $("div.conteudo div.plano form img").css('display', 'block'); var formData = new FormData(this); $.ajax({ url: "../_requeridos/editaPlano.php", type: 'POST', data: formData, beforeSend: function() { }, success: function (retorno) { $("div.conteudo div.plano form.planoEditar input[type=submit].btnAcesso").css('display', 'block'); $("div.conteudo div.plano.planoEditar form img").css('display', 'none'); if (retorno == 1) { resposta = "Plano cadastrado com sucesso!"; } else { resposta = "Erro no cadastro do Plano"; } $(".resposta").css("display", "block"); $(".resposta").html(resposta); }, cache: false, contentType: false, processData: false }); return false; }); }); php <?php require_once "../_controles/_conexao/Conexao.php"; require_once "../_controles/_util/PhpUtil.php"; require_once "../_controles/_util/Constantes.php"; require_once "../_controles/_models/Planos.php"; require_once "../_controles/_models/Fotos.php"; require_once "../_controles/_models/Upload.php"; require_once "../_controles/_daos/PlanosDao.php"; require_once "../_controles/_daos/FotosDao.php"; require_once "../_controles/_daos/UploadDao.php"; $connection = new Conexao(); $conexao = $connection->abreConexao(); $phpUtil = new PhpUtil(); $constantes = new Constantes(); $planosDao = new PlanosDao($conexao); $fotosDao = new FotosDao($conexao); $nomePlano = $_POST["nomePlano"]; $descricao = $_POST["descricao"]; $plano = new Planos( $nomePlano, $descricao); $cadastro = $planosDao->cadastrar($plano); $ultimoId = $planosDao->ultimoIdCadastrado(); require_once "upload.php"; echo $cadastro ? 1 : 2; ?> upload.php <?php ///////////////////////////UPLOAD DAS FOTOS//////////////////////////////////// $arquivos1 = explode ("|", $_POST["arquivos"]); $arquivos2 = $_FILES["fotos"]; $arquivos = $fotosDao->arrayFotos($arquivos1, $arquivos2); if(sizeof($arquivos)) { foreach($arquivos as $fotografia) { $upload = new Upload($fotografia, "../_img/_fotos"); $uploadDao = new UploadDao($upload); // tamanho de erro 5MB = 5 1024 1024 = 5242880 $erro = $uploadDao->erro(5242880); if($erro[0] == 0) { $envio = $uploadDao->uploadFile(); if($envio[0]==0) ; $nomeImagem = $upload->getNomeBanco(); } else { $phpUtil->erro($erro[1]); } $fotosDao->cadastrar ($ultimoId, $upload->getNomeBanco()); } } ////////////////////////////UPLOAD DAS FOTOS//////////////////////////////////// ?> Veja como está no Windows Explorer UploadDao.php <?php class UploadDao { private $arquivo; public function __construct($_upload) { $this->arquivo = $_upload; } /* Erros do arquivo; erro ($_tamanho) Onde $_tamanho é em bits, ou seja, 5MB - 5 * 1024 * 1024= */ public function erro ($_tamanho) { $mensagem = "Sem erros!"; $erro = 0; if(isset($this->arquivo)) { if ( $this->arquivo->getExtensao() != "JPG" && $this->arquivo->getExtensao() != "jpg" && $this->arquivo->getExtensao() != "JPEG" && $this->arquivo->getExtensao() != "jpeg" && $this->arquivo->getExtensao() != "PNG" && $this->arquivo->getExtensao() != "png" ) { $mensagem = "Imagem precisa ser nos formatos: jpg, JPG, jpeg, JPEG, png, PNG"; $erro = 1; } else if ($this->arquivo->getTamanho() >= $_tamanho ) { $mensagem = "Tamanho máximo da Imagem é de ".($_tamanho/(1024*1024))." MB"; $erro = 2; } } return array($erro, $mensagem, $this->arquivo->getTamanho()/(1024*1024)); } public function uploadFile() { $erro = 0; $mensagem = "Sucesso"; try { $urlEnvio = $this->arquivo->getEndereco()."/".$this->arquivo->getNomeBanco(); move_uploaded_file($this->arquivo->getNomeTemporario(), $urlEnvio); } catch (Exception $e) { $erro = 1; $mensagem = "falha no envio"; } return array($erro, $mensagem); } private function geraMiniatura ($_largura, $_url) { //CRIA UMA NOVA IMAGEM if( $this->arquivo->getExtensao() == "JPG" || $this->arquivo->getExtensao() == "jpg" ) { $imagem_orig = ImageCreateFromJPEG($this->arquivo->getNomeTemporario()); } else if( $this->arquivo->getExtensao() == "JPEG" || $this->arquivo->getExtensao() == "jpeg") { $imagem_orig = ImageCreateFromJPEG($this->arquivo->getNomeTemporario()); } else if( $this->arquivo->getExtensao() == "PNG" || $this->arquivo->getExtensao() == "png") { $imagem_orig = ImageCreateFromPNG($this->arquivo->getNomeTemporario()); } //LARGURA $pontoX = ImagesX($imagem_orig); //ALTURA $pontoY = ImagesY($imagem_orig); //DEFINE OS PARÂMETROS DA MINIATURA $largura = $_largura; $altura = ($pontoY * $largura) / $pontoX; //CRIA O THUMBNAIL $imagem_fin = ImageCreateTrueColor($largura, $altura); //COPIA A IMAGEM ORIGINAL PARA DENTRO ImageCopyResampled($imagem_fin, $imagem_orig, 0, 0, 0, 0, $largura+1, $altura+1, $pontoX, $pontoY); //SALVA A IMAGEM ImageJPEG($imagem_fin, $_url,100); //LIBERA A MEMÓRIA ImageDestroy($imagem_orig); ImageDestroy($imagem_fin); } } ?> Upload.php <?php class Upload { private $nome; private $nomeBanco; private $nomeTemporario; private $largura; private $altura; private $tamanho; private $endereco; private $extensao; public function __construct ($_file, $_url) { $dimensoes = getimagesize($_file["tmp_name"]); $this->extensao = pathinfo($_file["name"], PATHINFO_EXTENSION); $this->nome = $_file["name"]; $this->nomeBanco = $this->setNomeBanco(); $this->nomeTemporario = $_file["tmp_name"]; $this->largura = $dimensoes[0]; $this->altura = $dimensoes[1]; $this->tamanho = $_file["size"]; $this->endereco = $_url; } public function setNomeBanco () { return md5(uniqid(time())).".". $this->extensao; } public function getNome() { return $this->nome; } public function getNomeBanco() { return $this->nomeBanco; } public function getNomeTemporario() { return $this->nomeTemporario; } public function getLargura() { return $this->largura; } public function getAltura() { return $this->altura; } public function getTamanho() { return $this->tamanho; } public function getEndereco() { return $this->endereco; } public function getExtensao() { return $this->extensao; } } ?>

Tenho lido muita coisa à respeito do assunto e estou ficando mais confuso. Tenho o form abaixo: <div class="plano"> <h1 class="titulos">Cadastro de Plano</h1> <form method="post" class="planoCadastrar"> <input type="text" name="nomePlano" id="nomePlano" class="typeTextMedio" placeholder="Nome" required /><br /><br /> <textarea placeholder="Descrição" class="textarea" name="descricao" id="descricao" cols="93" rows="15" required></textarea><br /> <br /> <div id="multiple_upload"> <input type="hidden" id="arquivos" name="arquivos" onChange="alert(this.value)" /> <input type="file" multiple id="fotos" name="fotos[]" /> <div id="message">Selecionar fotos</div> <div id="lista"></div> </div> <img class="spinner" src="../_img/_bannerImgs/spinner.gif" /> <input type="submit" class="btnAcesso" value="Enviar" /> <label class="resposta"></label> </form><br /><br /> <script> $('.elevate-image').ezPlus({ zoomType: 'inner', cursor: 'crosshair' }); </script> </div> Nele eu tenho um campo FILE para envio de arquivos. Estou usando $.post() do jQuery para enviar esse formulário para uma página php sem refresh. Tudo vai bem e consigo pegar no php mas o campo FILE não vai. Estou tentando meio que uma gabiarra mas mesmo assim tive que parar para pedir ajuda. O jQuery: // JavaScript Document $(document).ready(function(e) { $("div.conteudo div.plano form.planoCadastrar").on("submit", function() { var nomePlano = $("form.planoCadastrar input[type=text]#nomePlano").val(); var descricao = $("form.planoCadastrar textarea#descricao").val(); var arquivos = $("form.planoCadastrar input[type=hidden]#arquivos").val(); var fotosPost = $("form.planoCadastrar input[type=file]")[0].files; fotos = new Array(); for (var i=0; i < fotosPost.length; i++) { fotos[i]["name"] = fotosPost[i].name fotos[i]["type"] = fotosPost[i].type fotos[i]["size"] = fotosPost[i].size fotos[i]["tmp_name"] = fotosPost[i].tmp_name } return false; if ( nomePlano == "" || descricao == "") { alert("Algum campo está vazio!"); } $("div.conteudo div.plano form.planoCadastrar input[type=submit].btnAcesso").css('display', 'none'); $("div.conteudo div.plano form.planoCadastrar img").css('display', 'block'); $.post ("../_requeridos/cadastraPlano.php", { nomePlano : nomePlano, descricao : descricao, arquivos : arquivos, fotos : fotos }, function(retorno){ $("div.conteudo div.plano form.planoCadastrar input[type=submit].btnAcesso").css('display', 'block'); $("div.conteudo div.plano form.planoCadastrar img").css('display', 'none'); if (retorno == 1) { resposta = "Plano cadastrado com sucesso!"; } else { resposta = "Erro no cadastro do Plano"; } $(".resposta").css("display", "block"); $(".resposta").html(resposta); } ); return false; }); }); Tentei fazer a tal gabiarra com o código abaixo: for (var i=0; i < fotosPost.length; i++) { fotos[i]["name"] = fotosPost[i].name fotos[i]["type"] = fotosPost[i].type fotos[i]["size"] = fotosPost[i].size fotos[i]["tmp_name"] = fotosPost[i].tmp_name } Mas quand o chego no fotos[i]["tmp_name"] = fotosPost[i].tmp_name Não consigo pegar o valor. Será que existe um recurso para isso? Ou terei mesmo que submeter o formulário. A ideia é pegar o array do FILE e criar um array javascript, enviar ara o php e converter novamente em array php para ver se consigo fazer o upload do arquivo.

Estou tentando fazer um slide show personalizado para fins de aprendizagem. Avancei bastante já. Porém estou tendo um erro do qual não estou conseguindo me livrar. O slide corre bem, mas quando chega na ultima imagem, ele acha uma imagem em branco e bota ela no lugar em que deveria ser exibida a primeira imagem novamente. Cada imagem do slide tem uma legenda feito com um label e ambos dentro de uma div. O link abaixo mostra o slide em funcionamento. http://funerariasaopedro.net.br/novo/index6.php Vou postar abaixo o código completo. Se alguém puder me ajudar desde já agradeço. CSS <style> * { margin: 0; padding: 0; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } div.slider { overflow: hidden; position: relative; width: 100vw; height: 300px; } div.slider:hover { animation-play-state: paused; } div.slider > div.slide { display: none; position: absolute; top: 0; left: 0; width: 100%; height: auto; } div.slider div.slide img { width: 100%; } div.slider div.ativa { display: block; } div.slider div.ativa img { animation: slider 1s linear; animation-fill-mode: forwards; } div.slider div.ativa img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } @keyframes slider { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } div.slider div.slide span { position: absolute; width: 100%; line-height: 40px; bottom: 0; z-index: 500; color: rgb(255,255,255); text-align: center; } div.slider nav { position: absolute; bottom: 0; width: 100%; height: 40px; background-color: rgb(0, 0, 0, .5); z-index: 400; text-align: center; } div.slider nav button.anterior, div.slider nav button.proximo { position: absolute; width: 100px; height: 40px; text-align: center; } div.slider nav button.anterior { left: 10%; } div.slider nav button.proximo { right: 10%; } div.slider nav button.proximo label { top: calc(50%-20px); } </style> JAVASCRIT <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(e) { //$("div.slider").height($("div.slider div.slide").height()) const blocos = $("div.slider div.slide"); function startslider() { ativa = $("div.slider div.ativa") if (!$(ativa).next().length) { ativa = blocos[0] } $(ativa) .removeClass("ativa") .next() .addClass("ativa") setTimeout(startslider, 5000) } setTimeout(startslider, 5000) $("nav button.anterior").click(function(){ prev = $("div.slider div.ativa").prev(); // alert (blocos.length); prev = prev.length ? prev : blocos[ blocos.length - 1 ]; mostraBloco(prev); }) $("nav button.proximo").click(function(){ next = $("div.slider div.ativa").next(); next = next.length ? next : blocos[0]; mostraBloco(next); }) /* Função para exibir as imagens */ function mostraBloco(next) { ativa = $("div.slider div.ativa") $(ativa).removeClass("ativa") $(next).addClass("ativa") } }); </script> HTML <div class="slider"> <div class="slide fade ativa"> <img src="_img/_banner/_site/bg_1.jpg" /> <span>Este é 1</span> </div> <div class="slide fade"> <img src="_img/_banner/_site/bg_2.jpg" /> <span>Este é 2</span> </div> <div class="slide fade"> <img src="_img/_banner/_site/bg_3.jpg" /> <span>Este é 3</span> </div> <nav> <button class="anterior">Anterior</button> <button class="proximo">Próximo</button> </nav> </div>

boas, Tenho esta function que é chamada quando crio um novo elemento (span), e tem como parametro esse novo elemento que criei (span): function selectColor(e) { myDataToSave.colorID = $(e).data("id"); //$("span#selected-color").css("background-color", e.style.backgroundColor); // TypeError: e.style is undefined $("span#selected-color").css("background-color", $(e).css('backgroundColor')); } quando tento mudar o background-color de outra span para o background-color da span que estou a passar pelo parametro (e), só consigo mudar através de jquery, com js não consigo, dá o erro que mostra em cima: TypeError: e.style in undefined Qual o motivo? Estou a criar a span assim: $('<span/>', { id: objLabels.IdPreFix + objResult.id, // ex: 'category_' + '1' class: objLabels.htmlClass, title: objResult.name, text: objResult.name }).appendTo(objLabels.append); var spanID = 'span#' + objLabels.IdPreFix + objResult.id; $(spanID).data("id", objResult.id); if (objResult.hasOwnProperty('hex')) { $(spanID).css("background-color", objResult.hex); $(spanID).html(" "); } $(spanID).click(function () { window[objLabels.functionName]($(spanID)); }); // chamar function com o nome em string window[objLabels.functionName]($(spanID)); Outra coisa, é como posso inserir logo valores no atributo data quando crio a span? $(spanID).data("id", objResult.id); // não ter esta linha $('<span/>', { // ... data: 'id' + objResult.id // inserir logo o valor aqui }).appendTo(objLabels.append); Obrigado desde já!

Boa tarde, sou novo em javascript e tenho duvida de como resolver o seguinte problema: Tenho dois select, imaginando que o primeiro tem como opções "localA" e "localB" e cada um destes locais tem um id associado. Depois, dependendo da primeira seleção quero apresentar só os nomes da segunda lista que tenham esse "id" associado. Estou a usar jquery, alguem me consegue orientar sff? deixo aqui um código html exemplo do que tenho: <div class="row col-lg-12" style="margin-top:15px; margin-bottom: 5px;"> <label for="teste1">Selected teste1:</label> <select id="teste1" class="select2" data-placeholder="null"> <option></option> <option th:each="r : ${lista1}" th:value="${r.id}" th:inline="text"> [[${r.name}]] </option> </select> <div class="row col-lg-12" style="margin-top:15px; margin-bottom: 5px;"> <label for="teste2">Selected teste2:</label> <select id="teste2" class="select2" data-placeholder="null"> <option></option> <option th:each="r : ${lista2}" th:value="${r.id}" th:inline="text"> [[${r.name}]] </option> </select> Já vi alguns exemplo com arrays estáticos, mas como aqui tenho uma lista, vou ter de fazer algo do género "SE r.name = "listaA" em lista1 mostra em teste2 SE r.id=1" Obrigado

Como inserir esse keyframe via jQuery? Tentei da forma abaixo mas não funcionou: var tempoTransicao = 5; var quantasImagens = $("ul.slider li img").size(); var tamanhoIntervalos = Math.round(100/quantasImagens); var t = 0; $('<style> @keyframe animacao', function() { for (i = 1; i <= quantasImagens; i++) { tMin = t + tempoTransicao; tMax = t + tamanhoIntervalos; t+=tamanhoIntervalos; document.write( tMin+"%" {margin-left: 0} tMax+"%" {margin-left: 0} ); if(i==0) tMin=0; if(i==quantasImagens) tMax=100; } }).appendTo('document'); HTML <ul class="slider"> <li> <img src="_imgs/_slideShow/1.png" /> <img src="_imgs/_slideShow/2.png" /> <img src="_imgs/_slideShow/3.png" /> <img src="_imgs/_slideShow/4.png" /> </li> </ul>

Bom, criei um plugin de uma ul que preenche suas li's com os options de algum select. Tudo OK. Mas de repente estou com 4 problemas para resolver e dependo da ajuda de vocês. À principio, esse select pode ser visto em http://www.hotplateprensas.com.br/estilos/. 1) De uma forma geral, qualquer select, quando clicado, caso dê para abir suas options na vertical e para baixo, beleza, é a prioridade. No entando, quando é o caso em que o select está no fim da página, nesse cado, as options abrem para o alto aparecendo acima dos elementos html que estão em cima dela. O que eu preciso fazer é exatamente esse comportamento quando abrir a ul que está substituindo o select. Como fazer? 2) Se notarem bem no select, perceberam que quando abre o overflow scroll dele, dá para notar que existe um buraco entre o final da li e o inicio do scroll e dá para ver os elementos sobrescritos que estão abaixo por essa brecha. Como corrigir isso? 3) Quando abro a ul, aparece o scrool. Note que a ul abre como efeito de slideDown(), slideUp(). Será que existe uma forma de adicionar esse plugin também ao scroll? 4) O scrool, não aparece quando fecho a ul. Está certo, pois coloquei overflow: hidden. Mas Gostaria de fazer da mesma forma que a ul se retrai com efeito, o scroll também se retraisse da mesma forma. Será que trem jeito? HTML <div class="selectOptions"> <select required> <option value="1">Um</option> <option value="2">Dois</option> <option value="3">Três</option> <option value="4">Quatro</option> <option value="5">Cinco</option> <option value="6">Seis</option> <option value="7">Sete</option> <option value="8">Oito</option> </select> <label class="selecionada"></label> <ul> </ul> </div> CSS @charset "utf-8"; /* CSS Document */ .selectOptions { display:block; position:relative; width:200px; height:35px; } .selectOptions select { display:none; } .selectOptions .selecionada { display:block; } .selectOptions .selecionada:after { display: block; position: absolute; content: ""; top: 1px; right: 1px; width: 33px; height: 33px; background-image: url(../_imgs/setaBaixo.jpg); } .selectOptions .selecionada.setaBaixo:after { background-image: url(../_imgs/setaBaixo.jpg); } .selectOptions .selecionada.setaCima:after { background-image: url(../_imgs/setaCima.jpg); } .selectOptions ul { display:none; width:100%; } .selectOptions ul li{ cursor:pointer; } .selectOptions ul li, .selectOptions .selecionada { position:relative; width:94%; height:34px; line-height:34px; padding:0 3% 0 3%; border-bottom: rgb(200,200,200) 1px solid; background-color:rgb(240,240,240); } .selectOptions ul li:hover, .selectOptions .selecionada { background-color: rgb(200,200,200); } jQuery $(document).ready(function(e) { // entrega o primeiro elemento da select option à div .selecionada $(".selectOptions .selecionada").html($(".selectOptions select > option:first-child").html()); /*popula as li's*/ $(".selectOptions select > option").each(function() { //Não exibe a primeira li pois esta já está sendo exibida na .selecionada if($(this).is(':first-child')) $(".selectOptions ul").append("<li value='"+this.value+"' style='display:none;'>"+this.text+"</li>"); else $(".selectOptions ul").append("<li style='display:block;' value='"+this.value+"'>"+this.text+"</li>"); }); function exibeSelectUl () { $(".selectOptions ul > li").each(function() { if($.trim($(this).text()) === $.trim($(".selectOptions .selecionada").html())) $(this).css("display","none", "important"); else $(this).css("display","block","important"); }); $(".selectOptions ul").css("display","block"); } contador=0; $(".selectOptions .selecionada").click(function(e) { exibeSelectUl(); quantasLis = $(".selectOptions ul li").length; if(contador % 2 == 0) { $(".selectOptions .selecionada").addClass("setaCima").removeClass("setaBaixo"); $(".selectOptions ul li").css("display","none").slideDown(400); if(quantasLis > 4) { $(".selectOptions ul").css('height', '175px'); $(".selectOptions ul").css("overflow-y", "scroll"); } else { $(".selectOptions ul").css('height', 'auto'); $(".selectOptions ul").css("overflow-y", "auto"); } } else { $(".selectOptions .selecionada").addClass("setaBaixo").removeClass("setaCima"); $(".selectOptions ul li").slideUp(400, function(){ $(".selectOptions ul").css("overflow-y", "hidden"); }); } contador++; e.stopPropagation(); }); // ao clicar em qualquer coissa, fecha a ul caso ela esteja aberta $(document).on('click',function(e){ if( $(".selectOptions ul").css("overflow-y") == "auto" || $(".selectOptions ul").css("overflow-y") == "scroll") { $(".selectOptions .selecionada").trigger("click"); } }); /*ai clicar na li, busca correspondência na select option e o checa (marca)*/ //$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){ $( '.selectOptions ul li' ).on( 'click', function( evt ){ /*Joga a li selecionada a label*/ $(".selectOptions .selecionada").html($(this).html()); /*Joga a li selecionada ao topo da ul*/ $($(this).closest('ul')).prepend($(this)); // Armazena nome do maos que quer selecionar var li = $(this).attr("value"); // Guarda em opcao o elemento que retornar do filtro que vai testar entre as // options possíveis var opcao = $('.selectOptions select option').filter(function() { // testa entre as options qual delas tem o mesmo conteúdo que o desejado return $(this).attr('value') === li; }); exibeSelectUl(); // Redefine o atributo do elemento encontrado pra selecionado. opcao.attr('selected', true); }); });

Boas, Tenho o seguinte php: $paginaCorrente = parse_url($_SERVER['REQUEST_URI'], PHP_URL_QUERY); e o seguinte HTML <ul class="menu"> <li><a href="?l1">Link 1</a></li> <li><a href="?l2">Link 2</a></li> <li><a href="?l3">Link 3</a></li> <li><a href="?l4">Link 4</a></li> </ul> E o seguinte JS $(document).find( "ul.menu a[href='<?php echo "?".$paginaCorrente ?>']" ).addClass( 'linkVisitado' ); Isso permite eu encontrar os parâmetros da url e saber qual item de menu vou marcar. Atualmente estou fazendo com JQuery. Gostaria de saber se há como fazer uma condicional em CSS de forma que consiga varrer o url e comparar com o href do elemento a. Encontrando, altera o seu estilo. Na verdade adiciona Class='linkVisitado' a esse href. Tentei das formas abaixo mas não funcionou. ul.menu li a { @if (ul.menu li a:href='?l1') background-color: rgb(0,0,0); @if ul.menu li a[href='?l1'] { background-color: rgb(0,0,0)}; }

Estou a construir um site em Wordpress, então gostaria de usar o plugin Download Monitor para gerir e visualizar os conteúdos numa pagina, o problema é que quero que ele filtre em categoria, pois a componente só é valida quando usar um add on, então gostaria de desenvolver à unha, na minha filosofia eu usaria jQuery para filtrar conteúdos via CSS, mas a classe ou "esse algo escrito em PHP" que me da acesso as toxonomias => terms para colocar numa array dentro de jQuery eu não sei ou não faço ideia de como chamá-la e usá-la. Gostaria de entender qual é a lógica destes arquivos, se é possível eu chamar do jQuery uma class ou função escrita em PHP? Agradecia a ajuda. Código PHP de registo de toxonomias que me parece ser uma class. // Register Download Category register_taxonomy( 'dlm_download_category', array( 'dlm_download' ), apply_filters( 'dlm_download_category_args', array( 'hierarchical' => true, 'update_count_callback' => '_update_post_term_count', 'label' => __( 'Categories', 'download-monitor' ), 'labels' => array( 'name' => __( 'Categories', 'download-monitor' ), 'singular_name' => __( 'Download Category', 'download-monitor' ), 'search_items' => __( 'Search Download Categories', 'download-monitor' ), 'all_items' => __( 'All Download Categories', 'download-monitor' ), 'parent_item' => __( 'Parent Download Category', 'download-monitor' ), 'parent_item_colon' => __( 'Parent Download Category', 'download-monitor' ), 'edit_item' => __( 'Edit Download Category', 'download-monitor' ), 'update_item' => __( 'Update Download Category', 'download-monitor' ), 'add_new_item' => __( 'Add New Download Category', 'download-monitor' ), 'new_item_name' => __( 'New Download Category Name', 'download-monitor' ) ), 'show_ui' => true, 'query_var' => true, 'capabilities' => array( 'manage_terms' => 'manage_downloads', 'edit_terms' => 'manage_downloads', 'delete_terms' => 'manage_downloads', 'assign_terms' => 'manage_downloads', ), 'rewrite' => false, 'show_in_nav_menus' => true ) ) ); Código jQuery para imprimir o índice [0] do array. jQuery(document).ready(function ($) { var allterms = get_terms( 'dlm_download_category' ); $("#btnTestar").click(function(){ alert(allterms[0].name); }); }); No PHP seria algo assim e funciona. <?php $terms = get_terms( 'dlm_download_category' ); foreach ( $terms as $term ) { // imprime lista de todas as categorias ou terms // Get the URL of this category $tercat_link = get_term_link( $term ); echo " $term->name"; } ?> Então manipular o CSS da forma mais fácil seria no jQuerry.

Boas pessoal, Estou a começar a utilizar a framework chart.js para desenvolvimento de gráficos. Deparei-me com um problema de interação. Não consigo elaborar um click a não ser com um console.log igual para todos. Queria um console-log que me individualiza-se cada um deles, alguma ideia? (segue o código partindo do principio que o html é um simples canvas) var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); document.getElementById("myChart").onclick = function(evt){ console.log(123) };

Olá, estou a criar um site onde o adminstrador pode mudar o estado de uma encomenda: criei uma form onde tenho o dropdown menu: <form name="changestatus" id="changestatus" action="status_update.php" method="POST"> <td> <input type="text" name="orderID" value=" <?php echo $row['order_id'];?>" readonly></td> <td> <?php echo $row['ISBN'];?></td> <td> <?php echo $row['quantity']; ?></td> <td> <?php echo $row['customer_id'];?></td> <td> <?php echo $row['created']; ?></td> <td> <select name="status" onchange="change()"> <option <?php echo (strcmp($row['status'], 'Shipped') == 0 ? 'selected' : '');?> value="Shipped">Shipped</option> <option <?php echo (strcmp($row['status'], 'Cancelled') == 0 ? 'selected' : '');?> value="Cancelled">Cancelled</option> <option <?php echo (strcmp($row['status'], 'Refunded') == 0 ? 'selected' : '');?> value="Refunded">Refunded</option> <option <?php echo (strcmp($row['status'], 'Completed') == 0 ? 'selected' : '');?> value="Completed">Completed</option> <option <?php echo (strcmp($row['status'], 'Progress') == 0 ? 'selected' : '');?> value="Progress">In progress</option> </select></td> </form> Depois usando Jquery, tentei fazer que ao selecionar a opção pretendida a pagina fosse redirecionada para a pagina status_update.php. Jquery código: <script> function change(){ $.post("status_update.php", $("#changestatus").serialize()); } </script> Código status_update.php: <?php $_SESSION['message'] =''; include("config.php"); if($_SERVER['REQUEST_METHOD'] == 'POST') { $sql= "UPDATE orders SET status = 'a'";.//mysqli_escape_string($_POST['status'])."'where"; if($conn->query($sql)===TRUE) { echo "<script>window.location.href='showOrders.php';</script>"; } else { echo 'Error'; echo $sql; } } ?> Infelizmente ainda não consegui perceber muito o que não esta funcionando aqui, se e o Jquery ou o PHP. Talvez o problema seja aqui nesta linha:"$.post("status_update.php", $("#changestatus").serialize());" Alguem que possa ajudar?

boas tenho aqui uma questão... estou a fazer um site com url amigaveis a minha questão é que estou a abrir uma pagina atraves do load o jquer....só que essa pagina não reconhece os url amigaveis existe alguma forma para sejam lidos? o meus jquery esta $("#lista_normal").on("click", function (){ $("#lista").load(url+"/cnt/listas_viaturas.php"); $(this).addClass("active-view-btn"); $("#lista_grelha").removeClass("active-view-btn"); }) a ideia é que a pagina listas_viaturas.php consiga ler o url amigavel o meu codigo de url amigavel é este define('url', 'omeusite'); $url = explode('/', $_GET['url']); $pasta1 = $url[0]; $pasta2 = $url[1]; $file= $url[2]; obrigado

boas tenho aqui uma questão... estou a fazer um site com url amigaveis a minha questão é que estou a abrir uma pagina atraves do load o jquer....só que essa pagina não reconhece os url amigaveis existe alguma forma para sejam lidos? o meus jquery esta $("#lista_normal").on("click", function (){ $("#lista").load(url+"/cnt/listas_viaturas.php"); $(this).addClass("active-view-btn"); $("#lista_grelha").removeClass("active-view-btn"); }) a ideia é que a pagina listas_viaturas.php consiga ler o url amigavel o meu codigo de url amigavel é este define('url', 'omeusite'); $url = explode('/', $_GET['url']); $pasta1 = $url[0]; $pasta2 = $url[1]; $file= $url[2]; obrigado

boas tenho aqui uma questão... estou a fazer um site com url amigaveis a minha questão é que estou a abrir uma pagina atraves do load o jquer....só que essa pagina não reconhece os url amigaveis existe alguma forma para sejam lidos? o meus jquery esta $("#lista_normal").on("click", function (){ $("#lista").load(url+"/cnt/listas_viaturas.php"); $(this).addClass("active-view-btn"); $("#lista_grelha").removeClass("active-view-btn"); }) a ideia é que a pagina listas_viaturas.php consiga ler o url amigavel o meu codigo de url amigavel é este define('url', 'omeusite'); $url = explode('/', $_GET['url']); $pasta1 = $url[0]; $pasta2 = $url[1]; $file= $url[2]; obrigado

boa tarde eu estou a criar umas div dinamicamente depois de carregar a pagina que necessito de ocultar, amostrar e carregar, que suspeito que o jquery tem dificuldade em encontra-las e por isso queria utilizar o método (document) no jquery. eu uso assim para ocultar : $('#idCatOrigemProduto').hide(); como seria usando o método document? eu necessito tipo isto que dispara o click, $(document).on('click','#idCatOrigemProduto div',function(){

Boas. É o primeiro tópico que crio. Estou a desenvolver o meu primeiro projecto web. É uma webpage dinâmica e responsiva em que uso jQuery e Bootstrap, e alguns efeitos parallax scrolling. Tenho uma <section> com background fixo que contem um título (<h2>) e texto com vários paragrafos (<p>). O que pretendo é que estes não estejam visíveis até que o utilizador faça scroll para essa secção. A animação deve ter um fade-in e mover-se de baixo para cima. Encontrei um JSFiddle que executa o fade-in: https://jsfiddle.net/tcloninger/e5qaD/ Tentei implementar no meu projecto, mas sem sucesso. O que poderei estar a fazer de errado? Obrigado. Aqui deixo o meu HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>xxxxxxxx</title> <!-- Bootstrap Core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <!-- Theme CSS --> <link href="css/grayscale.css" rel="stylesheet"> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- Navigation --> <nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> Menu <i class="fa fa-bars"></i> </button> <div class="navbar-brand page-scroll"> <a href="#page-top"> <span style="float:left;display: block;"> <img id="logo" src="img/small_140x146_EBP_logo.png"/> </span> <span id="brandname" style="float:left; display: block;"> <span>xxxxxx <span class="light">xxxxxxx</span> </span> <span class="clear-fix"></span> </a> </div> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-right navbar-main-collapse"> <ul class="nav navbar-nav"> <!-- Hidden li included to remove active class from project link when scrolled up past project section --> <li class="hidden"> <a href="#page-top"></a> </li> <li> <a class="page-scroll hidden-sm" href="#project">Project</a> </li> <li> <a class="page-scroll" href="#news">News</a> </li> <li> <a class="page-scroll" href="#download">Download</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Intro Header --> <!-- background video whit letters on top --> <!-- responsive embed video --> <div class="embed-responsive embed-responsive-16by9"> <!-- header class with intro from bootstrap --> <header class="intro "> <!-- video tag, autoplayed with no loop and no sound --> <video preload="true" autoplay="autoplay" loop="loop" volume="0" poster="sources/videos/website_intro.png" style="opacity:0.7"> <source src="img/intro_web_temp.mp4" type="video/mp4"> <source src="img/intro_website.ogv" type="video/ogg"> <source src="img/intro_website.webm" type="video/webm"> </video> <!-- end of video --> <!-- here goes whatever you want to put on top of video --> <!-- container of text --> <div class="intro-text-container"> <!-- container of row from bootstrap --> <div class="row" style="margin-top: 42%"> <!-- another class of bootstrap for responsive text --> <div class="col-md-8 col-md-offset-2"> <a href="#project" class="btn btn-circle page-scroll"> <i class="fa fa-angle-double-down animated"></i> </a> </div> <!-- end of bootstrap's responsive text div --> </div> <!-- end of row --> </div> <!-- end of container of text --> </header> <!-- end of header --> </div> <!-- end of responsive embed video --> <!-- project Section --> <section id="project" class="container content-section text-center"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h2 class="hideme">Our Project</h2> <p class="hideme">xxxxxxxxxxxxxx<span class="highlight">best</span>xxxxxxxxxxx</p> <p class="hideme">xxxxxxxxxxx <span class="highlight">veterans</span> or <span class="highlight">xxxxxxxxxx</span> athletes.</p> <p class="hideme"><span class="highlight">xxxxxx</span>, <span class="highlight">xxxxxxxxxx</span>, xxxxxx <span class="highlight">xxxxxxxxxx</span> xxxxxxxxxxxx</p> <p class="hideme">xxxxxxxxxx<span class="highlight">xxxxxx</span>, <span class="highlight">skills</span>, <span class="highlight">xxxxxxxxx</span>xxxxxxxxx<span class="highlight">xxxxxxxxxxxxxxx <span class="highlight">better</span>.</p> </div> </div> </section> <section id="news"> <div id="carousel-example-generic" class="carousel carousel-fullscreen slide carousel-fade" data-ride="carousel" data-interval="4000" data-pause="null"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active" style="background-image: url('img/nuno_fire_effect.png');"> <div class="overlay"></div> <div class="carousel-caption"> <h1 class="super-heading">Bootstrap Carousel Guide</h1> <p class="super-paragraph">This is a demo for the Bootstrap Carousel Guide by <a href="https://bootstrapious.com">Bootstrapious.com</a>.</p> </div> </div> <div class="item" style="background-image: url('img/dora_bg_in-game_benfica_sandstorm.png');"> <div class="overlay"></div> <div class="carousel-caption"> <h1 class="super-heading">Lorem ipsum dolor color</h1> <p class="super-paragraph">This is a demo for the Bootstrap Carousel Guide.</p> </div> </div> <div class="item" style="background-image: url('img/arnette_bg_sandstorm.png');"> <div class="overlay"></div> <div class="carousel-caption"> <h1 class="super-heading">Lorem ipsum dolor color</h1> <p class="super-paragraph">This is a demo for the Bootstrap Carousel Guide.</p> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </section> <!-- Download Section --> <section id="download" class="content-section text-center"> <div class="download-section"> <div class="container"> <div class="col-lg-8 col-lg-offset-2"> <h2>Download Grayscale</h2> <p>You can download Grayscale for free on the preview page at Start Bootstrap.</p> <a href="http://startbootstrap.com/template-overviews/grayscale/" class="btn btn-default btn-lg">Visit Download Page</a> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="container content-section text-center"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h2>Contact Start Bootstrap</h2> <p>Feel free to email us to provide some feedback on our templates, give us suggestions for new templates and themes, or to just say hello!</p> <p><a href="mailto:feedback@startbootstrap.com">feedback@startbootstrap.com</a> </p> <ul class="list-inline banner-social-buttons"> <li> <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> </li> <li> <a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> </li> <li> <a href="https://plus.google.com/+Startbootstrap/posts" class="btn btn-default btn-lg"><i class="fa fa-google-plus fa-fw"></i> <span class="network-name">Google+</span></a> </li> </ul> </div> </div> </section> <!-- Map Section --> <div id="map"></div> <!-- Footer --> <footer> <div class="container text-center"> <p>Copyright &copy; Your Website 2016</p> </div> </footer> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>"></script> <!-- Bootstrap Core JavaScript --> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <!-- Plugin JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script> <!-- Theme JavaScript --> <script src="js/grayscale.min.js"></script> </body> </html> Aqui o CSS: body { width: 100%; height: 100%; font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; color: white; background-color: black; } html { width: 100%; height: 100%; } h1, h2, h3, h4, h5, h6 { margin: 0 0 35px; text-transform: uppercase; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: 1px; } p { margin: 0 0 25px; font-size: 18px; line-height: 1.5; } @media (min-width: 768px) { p { margin: 0 0 35px; font-size: 20px; line-height: 1.6; } } a { color: #42DCA3; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a:hover, a:focus { text-decoration: none; color: #1d9b6c; } .light { font-weight: 400; } .navbar-custom { margin-bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); text-transform: uppercase; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #111111; } .navbar-custom .navbar-toggle { color: white; background-color: rgba(255, 255, 255, 0.2); font-size: 12px; } .navbar-custom .navbar-toggle:focus, .navbar-custom .navbar-toggle:active { outline: none; } .navbar-custom .navbar-brand { font-weight: 700; } .navbar-custom .navbar-brand:focus { outline: none; } .navbar-custom a { color: white; } .navbar-custom .nav li a { -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .navbar-custom .nav li a:hover { color: rgba(255, 255, 255, 0.8); outline: none; background-color: transparent; } .navbar-custom .nav li a:focus, .navbar-custom .nav li a:active { outline: none; background-color: transparent; } .navbar-custom .nav li.active { outline: none; } .navbar-custom .nav li.active a { background-color: rgba(255, 255, 255, 0.3); } .navbar-fixed-top a{ margin-top: 10px; } @media (min-width: 768px) { .navbar-custom { padding: 20px 0; border-bottom: none; letter-spacing: 1px; background: transparent; -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; } .navbar-custom.top-nav-collapse { padding: 0; background: black; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } } .intro { display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: white; } .intro .intro-body { display: table-cell; vertical-align: middle; } .intro .intro-body .brand-heading { font-size: 40px; } .intro .intro-body .intro-text { font-size: 18px; } @media (min-width: 768px) { .intro { height: 100%; padding: 0; } .intro .intro-body .brand-heading { font-size: 100px; } .intro .intro-body .intro-text { font-size: 26px; } } .btn-circle { width: 40px; height: 40px; margin-top: -5%; padding: 0px 0px; border: 2px solid white; border-radius: 100% !important; font-size: 30px; color: white; background: transparent; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .btn-circle:hover, .btn-circle:focus { outline: none; color: white; background: rgba(255, 255, 255, 0.1); } .btn-circle i.animated { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; } .btn-circle:hover i.animated { -webkit-animation-name: pulse; -moz-animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform: scale(1); } 50% { -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -moz-transform: scale(1); transform: scale(1); } } .content-section { padding-top: 100px; padding-bottom: 100px; } .download-section { width: 100%; padding: 50px 0; color: white; background: url(../img/downloads-bg.jpg) no-repeat center center scroll; background-color: black; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } #map { width: 100%; height: 200px; margin-top: 100px; } @media (min-width: 767px) { .content-section { padding-top: 250px; } .download-section { padding: 100px 0; } #map { height: 400px; margin-top: 250px; } } .btn { text-transform: uppercase; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-radius: 0; } .btn-default { border: 1px solid #42DCA3; color: #42DCA3; background-color: transparent; } .btn-default:hover, .btn-default:focus { border: 1px solid #42DCA3; outline: none; color: black; background-color: #42DCA3; } ul.banner-social-buttons { margin-top: 0; } @media (max-width: 1199px) { ul.banner-social-buttons { margin-top: 15px; } } @media (max-width: 767px) { ul.banner-social-buttons li { display: block; margin-bottom: 20px; padding: 0; } ul.banner-social-buttons li:last-child { margin-bottom: 0; } } footer { padding: 50px 0; } footer p { margin: 0; } ::-moz-selection { text-shadow: none; background: #fcfcfc; background: rgba(255, 255, 255, 0.2); } ::selection { text-shadow: none; background: #fcfcfc; background: rgba(255, 255, 255, 0.2); } img::selection { background: transparent; } img::-moz-selection { background: transparent; } body { webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); } .embed-responsive { height: 60%; width: 100%; } .embed-responsive-16by9 { top:-100px; } video { position: absolute; z-index: -1000; opacity: 0.8; width: 100%; overflow: hidden; } .clear-fix { clear: both !important; display: block !important; font-size: 0 !important; line-height: 0 !important; border: none !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } #logo { height: 38px; width: 38px; margin-top:-17%; margin-left:-3%; margin-right:16%; transition: all 0.3s ease-in-out; } #brandname { margin-top: 2%; font-size: 20px; } .nav.navbar-nav li { margin-top: -1%; } .content-section { margin-top: -100px; } @media (min-width:1119px) { .embed-responsive { height: 100%; } .content-section { padding-top: 100px; margin-top: 0px; padding-bottom: 100px; } } @media (min-width:768px) { .navbar-custom.navbar-fixed-top.top-nav-collapse{ background-color: #111111; } .navbar-custom.navbar-fixed-top.top-nav-collapse #logo { height: 38px; width: 38px; margin-top:-17%; margin-left:-3%; margin-right:16%; transition: all 0.3s ease-in-out; } #logo { height: 82px; width: 80px; margin-top: -35%; margin-left: -20%; margin-right: 15%; transition: all 0.3s ease-in-out; } .embed-responsive { height: 85%; } .content-section { padding-top: 100px; margin-top: 100px; padding-bottom: 100px; } #download { padding-top: 0px; margin-top: 0px; } .btn-circle { width: 70px; height: 70px; margin-top: 15px; padding: 7px 16px; border: 2px solid white; border-radius: 100% !important; font-size: 40px; color: white; background: transparent; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } } .highlight { color: #42DCA3; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #project { background-image: url("../img/elite_logo_small.png"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* carousel fullscreen */ .carousel-fullscreen .carousel-inner .item { height: 100vh; min-height: 600px; background-position: center center; background-repeat: no-repeat; background-size: cover; } /* carousel fullscreen - vertically centered caption*/ .carousel-fullscreen .carousel-caption { top: 50%; bottom: auto; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } .overlay { position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.3; transition: all 0.2s ease-out; } /* controls hidden except on hover */ .carousel .carousel-control { visibility: hidden; } .carousel:hover .carousel-control { visibility: visible; } .hideme { opacity:0; } Aqui o Javascript: // jQuery to collapse the navbar on scroll function collapseNavbar() { if ($(".navbar").offset().top > 50) { $(".navbar-fixed-top").addClass("top-nav-collapse"); } else { $(".navbar-fixed-top").removeClass("top-nav-collapse"); } } $(document).ready(function(){ $(window).scroll(function(){ collapseNavbar(); /* Check the location of each desired element */ $('.hideme').each( function(i){ var bottom_of_object = $(this).offset().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); /* If the object is completely visible in the window, fade it it */ if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':'1'},500); } }); }); }); // jQuery for page scrolling feature - requires jQuery Easing plugin $(function() { $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); }); }); // Closes the Responsive Menu on Menu Item Click $('.navbar-collapse ul li a').click(function() { $(this).closest('.collapse').collapse('toggle'); }); $('#carousel-example-generic').carousel({ interval: 3000, pause: null }) // Google Maps Scripts var map = null; // When the window has finished loading create our google map below google.maps.event.addDomListener(window, 'load', init); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(new google.maps.LatLng(40.6700, -73.9400)); }); function init() { // Basic options for a simple Google Map // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions var mapOptions = { // How zoomed in you want the map to start at (always required) zoom: 15, // The latitude and longitude to center the map (always required) center: new google.maps.LatLng(40.6700, -73.9400), // New York // Disables the default Google Maps UI components disableDefaultUI: true, scrollwheel: false, draggable: false, // How you would like to style the map. // This is where you would paste any style found on Snazzy Maps. styles: [{ "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 17 }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 20 }] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#000000" }, { "lightness": 17 }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": 29 }, { "weight": 0.2 }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 18 }] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 16 }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 21 }] }, { "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#000000" }, { "lightness": 16 }] }, { "elementType": "labels.text.fill", "stylers": [{ "saturation": 36 }, { "color": "#000000" }, { "lightness": 40 }] }, { "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 19 }] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#000000" }, { "lightness": 20 }] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": 17 }, { "weight": 1.2 }] }] }; // Get the HTML DOM element that will contain your map // We are using a div with id="map" seen below in the <body> var mapElement = document.getElementById('map'); // Create the Google Map using out element and options defined above map = new google.maps.Map(mapElement, mapOptions); // Custom Map Marker Icon - Customize the map-marker.png file to customize your icon var image = 'img/map-marker.png'; var myLatLng = new google.maps.LatLng(40.6700, -73.9400); var beachMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image }); }

Olá estou com problemas para clicar no seguinte span <a class="ui-dialog-titlebar-close ui-corner-all" role="button" href="#" unselectable="on"> <span class="ui-icon ui-icon-closethick" unselectable="on">close</span></a> ele gera uma imagem de informativo que cobre a página principal e desabilita todos os campos e inputs da página e só libera depois dar o click nesse span acima. alguém sabe como posso fechar esse span via javascript/jquery?

Boas estou a tentar efectuar a conversão de um preço 8,9 para 8.9 e para isso estou a usar o parseFloat + .replace juntamente com uma função ASP classic para retornar o preço do artigo mas esta a dar erro $("#qkItem").change(function(){ if($(this).val().length == 6) { var item = $(this).val(); var preco = parseFloat("<%= PrecoArtigo(251212) %>".replace(',','.') ); // este valor está forçado pois esse código retorna o preço de 8,9 $("#codPreco").text(preco); } }); esse código está a simular o valor obtido do input da variavel item, gostaria que me ajudassem como colocar o item no meio daquela função. Obrigado

Gostaria de uma orientação. Em se tratando de formulários, post envio, qual seria a forma mais indicada para se trabalhar? Usando $.post $.post ("_required/email.php", { assunto : $("#assunto").val(), nome : $("#nome").val(), email : $("#email").val(), telefone : $("#telefone").val(), descricao : $("#descricao").val(), qual : $("#qual").val(), }, function(retorno){ if (retorno == "OK") { resposta = "E-mail enviado com sucesso!"; } else { resposta = "Erro no envio do E-mail"; } $(".resposta").css("display", "block"); $(".resposta").html(resposta); } ); Ou usando $.ajax $.ajax({ url: "_required/email.php", type: "POST", data: $("#contato").serialize(), success: function(retorno){ if (retorno == "OK") { resposta = "E-mail enviado com sucesso!"; } else { resposta = "Erro no envio do E-mail"; } $(".resposta").css("display", "block"); $(".resposta").html(resposta); } }); E porquê?