wanderval

sei que esse topico é antigo mas quero contribuir, acredito que aplicações front-end profissionais geralmente usam frameworks e a maioria dos frameowrk da suporte uma biblioteca de gerenciamento de arquvos do projeto como o "webpack", sendo que o mesmo suporta configurações para ambiente de dev e produção assim os arquivos ficam com sua forma original para desenvolvimento ao rodar o coamando build além dos arquivos serem ofuscados são unidos em um unico arquivo criando um bundle. ref:https://webpack.js.org/

Para o seu problema 'necessário 2 alterações: 1 - A primeira alteraçao deve ser feita no html adicionando a propriedade "multiple" na tag "select"para que haja a possibilidade de multipla seleção: <select id="mySelect1" size='3' multiple> <option >aa</option> <option >bb</option> <option >cc</option> </select> <select id="mySelect2" size='3' multiple> <option >dd</option> <option >ee</option> <option >ff</option> </select> <select id="mySelect3" size='3' multiple> <option >gg</option> <option >hh</option> <option >ii</option> </select> 2 - asegunda alteração e que se deve pegar a informação de forma que torne o objeto retornado um array para que possa ser iterado: assim pode ser usado o querySelectorAll var options = document.querySelectorAll('option'); para iteração existem 2 foramas simples usando o for usado em programação procedural ou o forEach mas usados apos ES5 //using forEach Array.from(options).forEach(option => option.selected = true); // using for for (let i = 0; i < options.length; i++) { options[i].selected = true; } link jsbin: https://jsbin.com/fowedegodu/edit?html,js,console,output

Eu faria diferente a implementação no caso de banner, dependendo da posição se for estilo propaganda usar esse metodo de display/hidden até funciona mas se o objetivo final é um carrosel as paginas utilizando uma abordagem de nos para que a troca de imagens seja suave e realmente deslizando e não imediata apenas exibindo. Mas contudo eu mudaria um pouco esse código para ter uma leitura melhor e não sobrecarregaria o dom inserindo a cada segundo uma nova imagem obrigando o browser a carregar a imagem novamente. CSS .container-slider{ width:300px; height: 60px; margin:0 auto; padding:0px; background:pink; text-align:center; } img { height: 100%; } img:not([active=true]) { display:none; } HTML <div class="principal container-slider"> <a> <img src="https://img.freepik.com/free-vector/flat-horizontal-sale-banner-template-with-photo_23-2149015614.jpg?t=st=1658791924~exp=1658792524~hmac=ac9992d18f718682ae9b0a894abbd160b831d4aa407878aabe530061da113bcf&w=1480" active="true"/> </a> <a> <img src="https://img.freepik.com/free-vector/flat-horizontal-sale-banner-template-with-photo_23-2149000923.jpg?t=st=1658785975~exp=1658786575~hmac=3cbf700fc07f962a3d7a6f5e06670b131aa47833b9d08033bdd3f8079dd68915&w=1480" /> </a> <a target="_blank" href="https://www.selectvacationproperties.com/wp-content/uploads/2020/02/AdobeStock_265268314.jpeg"> <img src="https://www.selectvacationproperties.com/wp-content/uploads/2020/02/AdobeStock_265268314.jpeg"/> </a> <a target="_blank" href="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-facebook-banner-design-template-7471ce255b02886530d575e1b4029e63_screen.jpg?ts=1584732765"> <img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-facebook-banner-design-template-7471ce255b02886530d575e1b4029e63_screen.jpg?ts=1584732765"/> </a> </div> JS function showSlides(containerId, intervalTime) { let elementSlider = document.querySelector(containerId); let intervalRef = setInterval('setActiveSlide("'+ containerId +'")', intervalTime); enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime); } function enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime) { elementSlider.addEventListener("mouseover", function(event){ clearInterval(intervalRef); }); elementSlider.addEventListener("mouseleave", function(event){ intervalRef = setInterval('setActiveSlide("'+ containerId +'")', intervalTime); }); } function setActiveSlide(container) { let images = document.querySelectorAll(`${container} img`); let removeActiveAttribute = () => { images.forEach(image => image.removeAttribute("active")); }; let toggleSlide = (indexImageToActive) => { removeActiveAttribute(); images[indexImageToActive].setAttribute("active", true); }; let indexActive = Array.from(images).findIndex((image, index) => { return image.getAttribute("active") === "true"; }); if(indexActive == images.length - 1){ toggleSlide(0); } else { toggleSlide(indexActive+1); } } showSlides(".principal", 1000); JSBin ex: https://jsbin.com/finipeponi/edit?html,js,output

sim o outro era start e stop então ja havia a aprte de parar so adaptei

mas eu fiz o teste é está funcionando, poste o codigo html e javascript seu para que eu possa comparar meu testes jsbin: https://jsbin.com/saqidocane/edit?html,js,console,output

mas eu fiz o teste é está funcionando, poste o codigo html e javascript seu para que eu possa comparar meu testes jsbin: https://jsbin.com/saqidocane/edit?html,js,console,output

tenho uma observação porque não reusou o codigo sugerido pelo Omar no outro post relacionado ao meso tema? e pelo que vejo das suas tentativas você apenas precisava incluir uma condição a funcionalidade das funóes dele já proporcionavam isso var executa, intervalo = 1000, maximo = 20, element = document.getElementById('idggg'); function func1() { let contador = 0; executa = setInterval(function () { contador++; element.innerHTML += ' Count: ' + contador; if(contador == maximo){ func2(); } }, intervalo); } function func2() { clearInterval(executa); } func1();

Da pra você usar varias coisas dependendo do cenario, pode usar class com metodos internos, pode cria rum metodo generico como disse, pode fazer web component. tipo assim nesse caso eu extrai o evento e o html ficou com um component mais enxuto HTML <button is="button-action" name="Aluno" content="Aluno"></button> <button is="button-action" name="Professor" content="Professor"></button> <button is="button-action" name="Aprendiz" content="Aprendiz"></button> <p id="toto"></p> JS class ButtonAction extends HTMLButtonElement { constructor() { super(); this.textContent = this.name; this.textDescription = this.getAttribute("content"); this.addEventListener("click", () => { document.querySelector('#toto') .innerHTML = this.textDescription; }); } } customElements.define("button-action", ButtonAction, {extends: 'button'});

Mas imagina o cenario você carrega esses 2 elementos e seus respectivos metodos, ao carregar o navegador vai ler o código linha a linha eu outras linguagens daria erro de duplicidade, mas no seus caso ele está dando um override certo? O que quer fazer quebra um principio importante de javascript funcional e simple responsability que focam muito na reusabilidade, então porque você precisa ter 2 metodos que executam da mesma forma so que tendo dados diferentes, não seria melhor ter o mesmo metodo recebendo dados diferentes ao invez de estarem sendo setados de forma estatica? Poderia fazer assim tb: EX1 <button id="bt1">botao1</button> <p id="toto"></p> <script> document.getElementById("bt1").addEventListener("click", function() { var x = document.getElementById("toto").innerHTML = 'aprendiz'; }); </script> <hr> EX2 <button id="bt2">botao2</button> <p id="toto"></p> <script> document.getElementById("bt2").addEventListener("click", function() { var x = document.getElementById("toto").innerHTML = 'aluno'; });

Acho que está faltando mais detalhes na sua explicação, você está descrevendo o que quer involvendo a ação, mais está faltando o objetivo real dessa manipulação. ex: você pode chmar o mesmo metodo deforma generica sem problema, mas o código precisa de uma referência para tratar essa diferença de forma particular e a unica coisa que vejo de diferente e o text do botão "botao1 , botao2", então você poderia ao invocar myFunction1() verificar o text assim tratar de forma diferente ou passar parametro para o metodo myFunction1(parm)

Antes de comentar, gostaria de ressaltar que você não deve usar o mesmo "id" em diferentes elementos HTML nesse caso você deve usar "." class. Em relação a sua dúvida, normalmente você precisa usar flag, por essa razão eu adicionei um attribute "active" inicialmente e um dos seus elementos img, e no script fiz um if/else simples mas caso fosse mais de 2 imagens deveria haver um for para tratar o retorno do querySelectorAll HTML - adicionado attributo active - substituido o attribute "id" por "class" <div class="principal"> <img src="banner01.png" class="imgTete" active/> <img src="banner02.png" class="imgTete" /> </div> CSS - adicionado uma nova regra que aplica display:none no elemento img que não possui o attribute "active" - alterado "#" por "." para se tratar de uma rereferência class .principal{ width:300px; height: 60px; overflow:hidden; margin:0 auto; padding:0px; background:pink; text-align:center; } .imgTete{ width:190px; height: 60px; } img:not([active=true]) { display:none; } JS -adicionado a chamada do metodo showSlides no final do script para que ocorra a inicialização desta forma removendo do body function showSlides() { setInterval("setActiveSlide()", 1000); } function setActiveSlide() { let [ firstImage, secondImage ] = document.querySelectorAll('.principal img'); let toggleSlide = (imageToActive, imageToDisable) => { imageToDisable.removeAttribute("active"); imageToActive.setAttribute("active", true); }; let isFirstImageActive = firstImage.hasAttribute("active"); if(isFirstImageActive){ toggleSlide(secondImage, firstImage); }else{ toggleSlide(firstImage, secondImage); } } showSlides() Exemple Jsbin: https://jsbin.com/totilasicu/edit?html,css,js,output

So passando pra dar uma opinião, como foi dito o mais aceitavel hoje é o uso de font-icon por ser leve e bem padronizado, mas dependendo do tipo de projeto e se houver nicho alguns UXs usam icones em formato svg, então fica havendo uma mescla entre font-icon e svg icon, mas o mais indicado continua sendo o font-icon

Olha esse tipo de validação involve logica de negocio, então provavelmente está sendo feito no back-end, esse html não possui validação, mas possui campos do tipo hidden que enviando informações pro backend no final do script

Olha sua duvida está muito confusa: o fluxo ideal seria: js -> php- > js -> html se o erro está no script php, você deve debugar o php certifica se ele está montando o obejto esperado, utiliza comando echo, mesmo que o javascript esteja quebrado esse script tem que retornar corretamente, pela forma que explicou nem mesmo seria uma alternativa já que você quer que um script que é feito para manipular uma resposta execute primeiro que a resposta, não tem sentido. - tem que verificar se o servidor que tá usando tá configurado corretamente - se ele estiver se conectando com banco verificar se os dados do banco estão sendo retornados a ultima coisa que vai verificar e o script jquery, já que você mesmo constatou que o erro está no script php

Isso você so vai conseguir criando uma extension do navegador, pois isso involve segurança! link: doc chrome sobre extension https://developer.chrome.com/docs/extensions/reference/tabs/ chrome.tabs.query({}, function(tabs) { var urls = tabs.map(function() { return tab.url; }); // do something with urls });

isso deve estar ocorrendo porque você deve ter um container principal que tem um height com tamanho definido

Existe outro position que poderia ser usado o sticky, tente usa-lo e verifique nos principais browsers se haverá incompatibilidade Principais alterações: CSS: /*Apenas para teste*/ #content { height: 2000px; } #navbar { box-sizing: border-box; width: 100%; /*position: static;*/ position: sticky; top: 0; height: 50px; padding: 1rem; display: flex; align-items: center; justify-content: space-around; background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .navbar { width: 100%; /*position: fixed;*/ top: 0; background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } Exemplo: JsBin:https://jsbin.com/qevavudeca/edit?html,css,output Outras formas sem utilizar sticky: https://stackoverflow.com/questions/63458661/how-to-make-a-sticky-navbar-without-js

Olha o inout de entrada eu olharia se teria como trocar para o tipo date HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <section> <h3>Input Data</h3> <input type="date" id="input-date"/> </section> <section> <h3>Calendar</h3> <input type="date" id="first-day" readonly/> </section> <section> <h3>Week Day</h3> <input type="text" id="week-day" readonly/> </section> </body> </html> JS let inputDate = document.getElementById("input-date"); let firstDayMonth = document.getElementById("first-day"); let weekDay = document.getElementById("week-day"); inputDate.addEventListener("change", function(event) { const day = handleDateValue(this.value); const firstDay = setFirstDayFromMonth(day); firstDayMonth.value = firstDay.join("-"); weekDay.value = getDayOfWeek(day); }); function handleDateValue(dateValue) { return dateValue.split("-"); } function setFirstDayFromMonth(day) { const positionDay = 2; day[positionDay] = "01"; return day; } function getDayOfWeek(day) { const dayWeek = new Date(day[0], day[1]-1, day[2]).getDay(); return ['DOM','SEG', 'TER', 'QUA', 'QUI', '---', 'SÁB'][dayWeek]; } Ex jsBin: https://jsbin.com/celaciwuva/edit?html,js,console,output

1 - Uma ideia mas nessa ideia, deve se levar em conta a fonte para o input e elemento auxiliar // Usando apenas Javascript var inputRef = document.getElementById("input"); inputRef.addEventListener("keyup", function(event) { const inputBaseSize = event.target.offsetWidth; const handlerSizeText = document.getElementById("handlerSizeText"); const minimalSize = inputRef.getAttribute("minimal-size"); handlerSizeText.innerText = inputRef.value; console.log("result:", handlerSizeText.offsetWidth, minimalSize) if(inputBaseSize < handlerSizeText.offsetWidth) { inputRef.style.width = handlerSizeText.offsetWidth + "px"; } if(inputBaseSize >= handlerSizeText.offsetWidth ) { inputRef.style.width = handlerSizeText.offsetWidth + "px"; if(handlerSizeText.offsetWidth < minimalSize) { inputRef.style.width = minimalSize + "px"; } } }); Jsbin: https://jsbin.com/logituhefa/edit?html,css,js,output 2 - Essa ideia é uma mescla com classes mas ainda não estão bem encapsuladas var inputRef = document.getElementById("input"); inputRef.addEventListener("keyup", function(event) { const inputBaseSize = event.target.offsetWidth; const auxiliarSizeText = document.getElementById("auxiliarSizeText"); const input = new Input(inputRef); const auxElement = new AuxiliarSizeText(auxiliarSizeText); const dinamicInputSize = new DinamicInputSize(input, auxElement); dinamicInputSize.handlerInputWithCurrentValue(inputBaseSize); }); class DinamicInputSize { constructor(inputReference, auxiliarElement){ this.inputReference = inputReference; this.auxiliarElement = auxiliarElement; this.auxiliarElement.setValue(this.inputReference.getValue()); } handlerInputWithCurrentValue(currentValue) { if(currentValue < this.auxiliarElement.getWidth()) { this.inputReference.setWidth(this.auxiliarElement.getWidthInPixelFormat()); } if(currentValue >= this.auxiliarElement.getWidth()) { this.inputReference.setWidth(this.auxiliarElement.getWidthInPixelFormat()); if(this.auxiliarElement.getWidth() < this.inputReference.getMinimalSize()) { this.inputReference.setWidth(this.inputReference.getMinimalSizeInPixelFormat()); } } } } class AuxiliarSizeText { constructor(auxElementReference) { this.auxElementReference = auxElementReference; } setValue(value) { this.auxElementReference.innerText = value; } getWidth() { return this.auxElementReference.offsetWidth; } getWidthInPixelFormat() { return this.auxElementReference.offsetWidth + "px"; } } class Input { constructor(inputReference) { this.inputReference = inputReference; } getValue() { return this.inputReference.value; } getWidth() { return this.inputReference.style.width; } setWidth(width) { this.inputReference.style.width = width; } getMinimalSize() { return this.inputReference.getAttribute("minimal-size"); } getMinimalSizeInPixelFormat() { return this.inputReference.getAttribute("minimal-size") + "px"; } } Jsbin: https://jsbin.com/gejiyenogo/edit?html,js,output 3- Outra ideia use contenteditable property jsBin: https://jsbin.com/lazotoxife/edit?html,css,output

Eu tentaria substituir essa linha, afinal se está usando ajax, e usando o change para escutar a alteração nos campos select tentaria pegar os valores do form de outra forma, acredito que seja devido ao submit seu problema $('form').submit(function(){

No seu caso é somente adicionar um replace da virgula para ".". ex: var tar = parseFloat($('#tarifa').val().replace(",", ".")); Codigo inteiro: $(function(){ $('#valorVenda').on('input', function() { calculate(); }); $('#tarifa').on('input', function() { calculate(); }); function calculate(){ var pPos = parseFloat($('#valorVenda').val()); var tar = parseFloat($('#tarifa').val().replace(",", ".")); var result = " "; if(isNaN(pPos) || isNaN(tar)){ }else{ result = ((pPos - ((13.00 * pPos) / 100.00)) - tar).toFixed(2); } $('#total').val(result); } }); Link Jsbin: https://jsbin.com/jeresaqamo/edit?html,css,js,output

Acredito que você terá que ver alguma documentação da vimeo pra ver como você pode manipular o video, assim poderá analisar o script que forneça o tempo de execução exato. Talvez isso ajude: https://developer.vimeo.com/player/sdk/basics

JS: function truncateMidlle(text, maxLength = 9, numberOfLetters = 3) { if(text.length >= maxLength) { const startPart = text.slice(0, numberOfLetters); const endPart = text.slice(-(text.length-numberOfLetters)); return startPart +'...'+ endPart.slice(endPart.length-numberOfLetters, endPart.length); } return text; } console.log(truncateMidlle('abcdefghijklmn', 3, 5)); console.log(truncateMidlle('bala', 3)); console.log(truncateMidlle('Text para recuperar', 18)); // OUTPUT // "abcde...jklmn" // "bal...a" // "Tex...rar" JSBin: https://jsbin.com/rivocadaso/edit?html,js,console,output

Talvez seja essa parte: // Tente isso if (x && x.matches) // Ao invez disso if (x.matches)

function cartomante(sons, partner, city, job) { return `Você ocupará a função ${job} na cidade de ${city}, vai se casar com ${partner} e terá ${sons} filhos`; } console.log(cartomante(2, 'Yasmin', 'New York', 'empresário')); const cartomanteArrow = (sons, partner, city, job) => { return `Você ocupará a função ${job} na cidade de ${city}, vai se casar com ${partner} e terá ${sons} filhos`; } console.log(cartomanteArrow(2, 'Yasmin', 'New York', 'empresário')); Jsbin: https://jsbin.com/yawojoqote/edit?html,js,console,output