-
Total de itens
407 -
Registro em
-
Última visita
-
Dias vencidos
2
wanderval venceu o dia em Junho 10 2018
Teve o conteúdo mais curtido
Reputação
19 Levemente BomSobre wanderval
- Data de Nascimento 03/30/1984
Informações Pessoais
-
Sexo
Masculino
Contato
- Github
Últimos Visitantes
6129 visualizações
-
Configuração de página para impressão
wanderval respondeu ao tópico de ment0r em Desenvolvimento frontend
Bom amigo, eu citei a borda pq com o css que forneceu, não fica igual ao que seria a estrutura da pagina contendo bordas, como na sua pergunta você não especificou se esta usando um css separa para mediaquery de print, eu pressuponho que esse css está sendo usado em comum tanto pela pagina quando com o que é esperado da impressão. Então ajudaria que colocasse uma estrutura básica com a estrutura inicial antes do que é esperado da impressão. Obs: Ao usar o seu css com uma estrutura de html feita por mim sua tabela fica conforme está sendo imprimido https://jsbin.com/hafecayiwi/edit?html,css,output -
wanderval começou a seguir quebrar texto dentro do option, Configuração de página para impressão, alterar permanentemente valor do atributo href e e 5 outros
-
Configuração de página para impressão
wanderval respondeu ao tópico de ment0r em Desenvolvimento frontend
Fica difícil compreender seu problema apenas com o CSS, não tendo nem mesmo a estrutura básica do html, pq com esse css as tables ficam sem bordas mesmo, então se você está colocando a bordar com as properties da table acredito que seja melhor fazer essa mudança para o css. -
criando um método que implement o fetch e alterando pra async/await você consegue o que quer, mas manipulando arquivo você só conseguira executar o html dentro de um servidor não vai conseguir abrindo o html direto no browser. async function loadHtmlFile(pathFile) { try { const response = await fetch(pathFile); const html = await response.text(); return html; } catch (error) { console.error('Error on load file:', error); return null; } } ai você chamaria dessa forma e adicionando o async para que consiga lidar com a promise com await, nesse exemplo criei uma pasta "template" on de vai conter todos os arquivos html abstraidos desse metodo: async function drop(event) { event.preventDefault(); var type = event.dataTransfer.getData("text"); var content = ""; if (type === "menu") { content = await loadHtmlFile('./template/menu.html'); } else if (type === "header") { content = await loadHtmlFile('./template/header.html'); } else if (type === "content") { content = await loadHtmlFile('./template/content.html'); } else if (type === "footer") { content = await loadHtmlFile('./template/footer.html'); } Uma sugestão de melhoria de codigo, em casos masi simples: async function drop(event) { event.preventDefault(); var type = event.dataTransfer.getData("text"); var content = ""; /*if (type === "menu") { content = await loadHtmlFile('./template/menu.html'); } else if (type === "header") { content = await loadHtmlFile('./template/header.html'); } else if (type === "content") { content = await loadHtmlFile('./template/content.html'); } else if (type === "footer") { content = await loadHtmlFile('./template/footer.html'); }*/ template = { "menu": './template/menu.html', "header": './template/header.html', "content": './template/content.html', "footer": './template/footer.html' } content = await loadHtmlFile(template[type]);
-
você não vai conseguir alterar no documento por se tratar de um avento dinâmico, tudo acontece em memoria, a unica forma de alterar uma definição de arquivo é reescrevendo o arquivo! Mas dependendo do que quer implementar existe alternativas para armazenar o valor em um cachestore ou indexDB que são forma de armazenamento de dados no browser, mas como disse é algo dinâmico e só funciona localmente
-
Seria algo dessa maneira no html tente deixar um nome comum apenas o id precisa ser um valor unico class deve ser usado para definir padrões visuais pensando em um grupo HTML: <div id="divPai"> <div id="bannerA" class="banner"> <a href="link1"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/225865593/rmu3bewcv3pqkzx32hjk-qe5uzhcwvt.jpg" alt="Imagem 1"></a> <a href="link2"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/217352435/rfl14_off_pk_1-v2ofz4r0h3.jpg" alt="Imagem 2"></a> <a href="link3"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/77172972/45c63850c8.jpg" alt="Imagem 3"></a> </div> <hr> <div id="bannerB" class="banner"> <a href="link4"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/225865593/rmu3bewcv3pqkzx32hjk-qe5uzhcwvt.jpg" alt="Imagem 4"></a> <a href="link5"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/217352435/rfl14_off_pk_1-v2ofz4r0h3.jpg" alt="Imagem 5"></a> <a href="link6"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/77172972/45c63850c8.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="banner"> <a href="link7"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/225865593/rmu3bewcv3pqkzx32hjk-qe5uzhcwvt.jpg" alt="Imagem 7"></a> <a href="link8"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/217352435/rfl14_off_pk_1-v2ofz4r0h3.jpg" alt="Imagem 8"></a> <a href="link9"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/77172972/45c63850c8.jpg" alt="Imagem 9"></a> </div> </div> CSS: /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; } /*#bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; }*/ .banner img { position: absolute; top: 0; left: 0; animation-name: smooth-effect; animation-duration: 4s; } /*#bannerA img.active { opacity: 1; }*/ /* The animation code */ @keyframes smooth-effect { from {opacity: 0;} to {opacity: 1;} } JS: foi criado a function makeSliderKind e alterado o metodo showrandomImage para uma arrow function function makeSliderKind(containerClass, intervalTime){ var images = document.querySelectorAll(containerClass+" img"); // Função para exibir uma imagem aleatória const showRandomImage = () => { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; }; // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, intervalTime); } makeSliderKind('#bannerA', 2000); makeSliderKind('#bannerB', 10000); makeSliderKind('#bannerC', 3000); Jsbin: https://jsbin.com/qimajoyuna/edit?html,css,js,output
-
somar colunas da tabela que estão em um loop
wanderval respondeu ao tópico de gersonab em Javascript
Pelo que entendi da critica do tetsuo é apenas em relação a logica de business não em relação alteração da database, acredito que ele apenas se referiu a modificar a query usada pelo backend para construir um response com menor complexidade para que seja enviada ao front, pra não delegar logica de business ao front -
Coloca o html amigo ai ajudo alguém a simular o problema!
-
H1 que preencha toda a largura da container
wanderval respondeu ao tópico de Alessandro Bodão em Desenvolvimento frontend
Tem alguns novos padrões de tipografia fluida no css, pode consultar esse artigo aqui https://moderncss.dev/container-query-units-and-fluid-typography/ CSS container queries - CSS: Cascading Style Sheets | MDN (mozilla.org) ex: https://jsbin.com/qesenuzese/edit?html,css,output -
Seu problema está no javascript quando está adicionando style.display='block', "block" irá tornar os elementos em coluna neste caso poderia ser "inline-block" ou "inline-flex" JS: // Problema if(itemSelecionado.value == "Sim"){ document.getElementById("divPai").style.display='block'; } // Solução if(itemSelecionado.value == "Sim"){ document.getElementById("divPai").style.display='inline-flex'; } Alteração de código HTML - alterado nome da classe para reaproveitamento <!--Removido methodo de invocação onchange passado para o script--> <select id="itemSelecionado" required> <option value=""></option> <option value="Sim" style="font-size:18px;">Sim</option> <option value="Não" style="font-size:18px;">não</option> </select> <!--Alterado nome das classes para reaproveitamento--> <div id="divPai"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> <div class="item">item5</div> <div class="item">item6</div> </div> CSS: #divPai { display: inline-flex; flex-wrap: wrap; gap: 12px; border: 1px solid red; padding: 6px; align-items: center; } #divPai .item { max-width: 90px; border: 1px solid green; } JS: document.getElementById("divPai").style.display='none'; // Substituido if/else por condicional ternário function funcAprendiz(){ var itemSelecionado = document.getElementById("itemSelecionado"); var elementStyle = document.getElementById("divPai").style; elementStyle.display = itemSelecionado.value == "Sim" ? 'inline-flex' : 'none'; } // Listener document.getElementById('itemSelecionado').addEventListener('change', funcAprendiz); JsBin: https://jsbin.com/geyeqahuqi/edit?html,css,js,output
-
Tá ai uma versão refatorada minha desse código, tava de bobeira achei interessante esses ifs ai, então decidi partir pra ignorancia e começar a destruir esse código kk,a constant é pq to mexendo com java ai surgiu a ideia rs. HTML modificado <div id="container"> <textarea maxlength="100"></textarea> <p id="idToto"></p> </div> JS modificado function constant() { return { COUNTER_PLURAL_MESSAGE: " caracteres digitados - máximo ", COUNTER_SINGLE_MESSAGE: " caracter digitado - máximo ", LIMIT_MESSAGE: "Limite de caracteres atingido!" }; } function characterCounter() { const max = 100; const container = document.getElementById('container'); const [textArea, inputMessage] = container.children; const amountCharacterTyped = textArea.value.length; const selectMessage = () => amountCharacterTyped === 1 ? constant().COUNTER_SINGLE_MESSAGE : constant().COUNTER_PLURAL_MESSAGE; if (amountCharacterTyped === 0){ inputMessage.innerHTML = ''; } else if (amountCharacterTyped > 0 && amountCharacterTyped < max) { inputMessage.innerHTML = amountCharacterTyped + selectMessage() + max; } else { inputMessage.innerHTML = constant().LIMIT_MESSAGE; } } function clear() { document.querySelector('#container p').inputMessage.innerHTML = ""; } document.querySelector('textarea').addEventListener("keyup", characterCounter); document.querySelector('textarea').addEventListener("focusout", clear); JSbin: https://jsbin.com/yaduyigomo/edit?html,js,output
-
A funcionalidade esperada não tá muito clara! A respeito do loop está sendo feito sim um "forEach" na qual sempre quando você clica no checkbox com o id "reason_all_velongings" é executado o forEach que adiciona no mesmo select os item contidos do array "optionReason" optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr',' Inspeção', 'Manobra', 'Venda' ]; optionsReason.forEach((reason) => { option = new Option(reason, reason.toLowerCase()); movementsSelect.options[movementsSelect.options.length] = option; }); Possível problema: 1- Está usando o mesmo ID "check-belongings" em diferentes checkbox
-
Bom Biel é um pouco difícil você mudar o comportamento dos componentes nativos, tanto que o Bootstrap usa um dropdown customizado. A melhor maneira realmente e customizando um. Ex: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here Something else here Something else here Something else here Something else here Something else here Something else here</a> </div> </div> JsBin: https://jsbin.com/haqejeqefe/edit?html,css,output
-
wanderval começou a seguir VSCode mover bloco para esquerda
-
VSCode mover bloco para esquerda
wanderval respondeu ao tópico de Sherlock02 em Desenvolvimento frontend
Como não sei o seu Sistema Operacional fica dificil: - Pressione Ctrl + Shift + P: para abrir a lista de comando - Procure por "Indent Line" e "Outdent Line" -
CSS *{ margin: 0; padding: 0; } .divPrincipal{ width: 200px; display: flex; flex-wrap: wrap; align-items: center; border: 2px solid blue;} .divPaiCor{ flex:1; margin-right: 10px; } .h1_1{ padding: 4px 4px; margin-bottom: 2px; background-color:#c1c1c1; cursor: default; } .divPaiSeta{ flex:0.5; font-size: 30px; text-align: center;} .b_1{ padding: 0px 4px; margin: 8px 10px; background-color:#cfcfcf; display: block; border: 1px solid green; cursor: default; } .divPaiSeta b:hover { background: #000; color: #fff; cursor: pointer; } .divPaiSeta b:active { background: gray; color: #000; user-select: none; } .divPaiCor h1:hover{ background: #000; color: #fff; cursor: pointer; } .selectedItem { background: #000; color: #fff; } JS let indexSelected; let elementSelected; let divPaiCor = document.querySelector(".divPaiCor"); let arrowUp = document.querySelector("#id1"); let arrowDown = document.querySelector("#id2"); function setaPraCima(){ let x = document.querySelectorAll(".h1_1"); indexSelected = returnPositionIndex(indexSelected - 1); divPaiCor.insertBefore(elementSelected, x[indexSelected]); } function setaPraBaixo(){ let y = document.querySelectorAll(".h1_1"); indexSelected = returnPositionIndex(indexSelected + 1); divPaiCor.insertBefore(elementSelected, y[indexSelected].nextSibling); } function returnPositionIndex(index) { let min = 0, max = 3; if(index <= min){ return min; } if(index >= max){ return max; } if(index > min || index < max){ return index; } } function selectItem(refItem) { let allElements = [...refItem.target.parentNode.children]; let index = allElements.indexOf(refItem.target); allElements.map(item => item.classList.remove("selectedItem")); refItem.target.classList.add("selectedItem"); indexSelected = index; elementSelected = refItem.target; } divPaiCor.addEventListener("click", selectItem); arrowUp.addEventListener("click", setaPraCima); arrowDown.addEventListener("click", setaPraBaixo); Jsbin: https://jsbin.com/wuwusinoro/edit?html,css,js,output
-
Biel, vou frizar mais uma vez a propriedade "id" deve ser único, por ser uma identidade, acho que você faz um copy/paste e fica duplicando essa informação, quando for usar elementos similares sempre será "class" Ex de código funcional function funcAprendiz(){ var itemSelecionado = document.getElementById('id1'); var ggInput = document.querySelectorAll(".toto"); const hasInputValue = () => itemSelecionado.value === "item1"; const mapInputValue = item => hasInputValue() ? "aluno" : ""; ggInput.forEach(inputItem => inputItem.value = mapInputValue(inputItem)); } JS Bin - JS Bin