Search the Community

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ê?

Boas pessoal, Estou a implementar um dialog de login utilizando um JQuery dialog no entanto quando clico no botão Login não acontece nada. Pedia caso alguém pudesse que me ajudasse com esta questão. Código do dialogo: <script> $( function() { var dialog, form, name = $( "#name" ), email = $( "#email" ), password = $( "#password" ), allFields = $( [] ).add( name ).add( email ).add( password ); function loginUser() { var imgSrc = email; jQuery.ajax({ type: 'post', url:'admin/bd/login.php', data:{"imgSrc" : imgSrc}, dataType:'json', }); } dialog = $( "#dialog-form" ).dialog({ autoOpen: false, height: 400, width: 350, modal: true, buttons: { "Login": loginUser, Cancel: function() { dialog.dialog( "close" ); } }, close: function() { form[ 0 ].reset(); allFields.removeClass( "ui-state-error" ); } }); form = dialog.find( "form" ).on( "submit", function( event ) { event.preventDefault(); addUser(); }); $( "#login" ).button().on( "click", function() { dialog.dialog( "open" ); }); } ); </script> Na função loginUser faço um pedido AJAX que é responsável por chamar o ficheiro php passando-lhe os parâmetros. Estou a fazer um desenvolvimento usando o WAMP (não sei se tem influência).