wanderval
-
Total de itens
412 -
Registro em
-
Última visita
-
Dias vencidos
2
Tudo que wanderval postou
-
Math.round( ) javascript em mais de uma div na mesma página
wanderval respondeu ao tópico de daviassumpcao em Javascript
Acho que isso pode ajudar, basicamente você somente precisa fazer parser pra inteiro! <button onclick="porcentagem()">Porcentagem</button> <button onclick="porcentagemAll()">Porcentagem All Items</button> <div class="prateleira-label-desconto">-50.02</div> <div class="prateleira-label-desconto">-20.02</div> JS: function porcentagem(){ var a = document.getElementsByClassName('prateleira-label-desconto')[0].innerText; b = Math.round(a); console.log(b); var shortDescountValue = parseInt(b); console.log(shortDescountValue); document.getElementsByClassName("prateleira-label-desconto")[0].innerHTML= shortDescountValue; } function porcentagemAll(){ var list = document.getElementsByClassName('prateleira-label-desconto'); Array.from(list).forEach(item => { const porcentageValue = Math.round(item.innerText); item.innerText = parseInt(porcentageValue); }); } -
Alguém pode me ajudar com a plataforma Plone?
wanderval respondeu ao tópico de guialacerda em Desenvolvimento frontend
Acho que faz a pergunta na categoria errada! Deveria ter feito essa na categori PHP já que se trata de wordpress! lá terá mais sucesso te conseguir essa resposta! -
Bom Biel eu não faria dessa forma, eu havia lhe perguntado qual é o motivo do seu objetivo, e havia dito que a resposta é importante! Motivo é: Se você é um estudante de tecnologia existem outras formas de obter esse resultado pensando em aplicações, agora se você é apenas uma pessoa que estuda por hobby existe uma forma sim de contornar a situação usando GET e parâmetros na URL. <div class="box2"> <a href="19_5a.php?category=1">verde</a><br> <a href="19_5b.php?category=1">azul</a><br> <a href="19_5c.php?category=1">violeta</a><br> </div> PHP: <?php $categoryId = $_GET['category']; ?> JS: var categoryId = <?php echo json_encode($categoryId); ?>; document.getElementById(categoryId).checked=true; para aplicações existe o conceito de SPA (Single Page Aplication), isso foi um dos problemas no passado para remover a dependência de tecnologias de back-end como o PHP. então basicamente o que você esta tentando fazer é reproduzir um cenário que era comum alguns anos atras mas hoje, deveria ser evitada. Mas quando se fala de paginas e não aplicações sim é usado o php, mas sendo bem especifico frameworks php vou deixar um exemplo de código muito básico que mostra um pouco do que seria o SPA, mas evidente que frameworks como vue.js, react.js são mais indicados, atualmente é usado o conceito de rotas nesses frameworks e não apenas nomes de arquivos e diretórios. ex: HTML <html> <head>Router test</head> <body> <ul id="route-links"> <li route="/" page="home">Home</li> <li route="/Contact" page="contact">Contact</li> <li route="/Product" page="product">Products</li> <li route="/Category" page="category">Category</li> </ul> <div class="page" id="home"> home </div> <div class="page" id="contact"> contato </div> <div class="page" id="product"> product </div> <div class="page" id="category"> category </div> <script src="./script.js"></script> </body> </html> JS: // Handler Route Redirect function activeRouteLinkListening() { const link = document.getElementById("route-links"); link.addEventListener("click",function(e) { let id = e.target.attributes[0].value; let page = e.target.attributes[1].value; setCurrentState(id, page); }); } function setCurrentState(id, page) { history.pushState({id, page}, `Selected: ${id}`, `#${id}`) displayCurrentPage(page); } // Handler Default Route function displayCurrentPage(historyPage) { if(!history.state) { setDefaultState(); } const pages = Array.from(document.getElementsByClassName('page')); const statePage = historyPage || history.state.page; pages.forEach(page => { page.style.display = statePage !== page.id ? 'none' : 'block'; }); } function setDefaultState() { history.replaceState({id: '/', page: 'home'}, 'Default state', './'); } function activePopStateListening() { window.addEventListener('popstate', e => { displayCurrentPage(e.state && e.state.page); }); } function init() { displayCurrentPage(); activeRouteLinkListening(); activePopStateListening(); } init();
-
Isso acho que resolve usa duvida, mas tem em mente uma coisa - "select" é um input nativo nos browsers, então existem eventos já agregados a ele - "datalist" embora seja nativo foi criado para dar liberdade de customização isso inclui tb os eventos HTML: <body> <p> using default structure</p> <input list="browsers" /> <datalist id="browsers"> <option value="Chrome">Chromezinho</option> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist> <p> custom label and value</p> <input list="browsers2" /> <datalist id="browsers2"> <option data-value="chrome">Chrome</option> <option data-value="firefox">Firefox</option> <option data-value="internet-explorer">Internet Explorer</option> <option data-value="opera">Opera</option> <option data-value="safari">Safari</option> </datalist> </body> JS: // versão padrão sem label var datalist = document.querySelector('[list="browsers"]'); datalist.addEventListener('change', function(){ console.log(this.value); }); // versão com label var datalistInput = document.querySelector('[list="browsers2"]'); var datalistOptions = document.getElementById('browsers2'); datalistInput.addEventListener('change', function(){ const optionSelected = Array.from(datalistOptions.children).find(option => option.label === this.value); console.log(optionSelected.dataset.value); }); JsBin test: https://jsbin.com/popibocawo/edit?html,js,output
-
javascript Como recuperar os valores usando sortable! do (id) de uma li e a posição atual do (id) da nova (ul)
wanderval respondeu ao tópico de cfandrade em Javascript
Seu script sortable deveria ser parecido com isso: - o método 'stop' não é adequado no seu caso! o motivo e que ele é executado mesmo você realizando o drag/drop na mesma lista, entretanto o receive so será executado se um item for movido de uma lista para outra, que acredito ser o valido para uma atualização de Banco assim não precisa realizar uma validação manual. se houver algum outra dúvida, talvez seja mais fácil utilizar a documentação do Jquery: https://api.jqueryui.com/sortable/#event-stop mas qualquer coisa só mandar aqui sua dúvida. mas um detalhe que pode ser um bug, esse é único "li" identificado com o id "prontuario" e não um valor númerico: <li id="prontuario" data-id="243" Solução: $(document).ready(function() { $("ul").sortable({ delay: 150, connectWith: ".parent", cursor: 'move', receive( event, ui ) { const [ item ] = ui.item; const caixaAtual = item.parentElement.id; const prontuario = item.id; console.log(prontuario, caixaAtual); updateOrder(prontuario, caixaAtual); } }); function updateOrder(id,caixa) { $.ajax({ url:"documentos/alterar_prontuario", type:'post', data:{id:id,caixa:caixa}, success:function(data){ toastr.success('Alterado com sucesso.'); } }) } }); Jsbin test: https://jsbin.com/moyotaxila/edit?html,js,output -
você precisa primeiro identificar as dependência desse script de modal e com a lógica anterior, que o seu script interviu, é impossível pra qualquer um responder isso já que é algo relacionado a implementação e não uma lógica especifica. Não tem como amigo vai ter que analisar e debugar.
-
Pelo que colocou ai o código que fiz você copiou errado faltando a segunda condição e ainda modificou a validação! '19_5' para '19_5a.php'. -Outro ponto nesse ex você apenas mostrou um código relacionado a rádio e no anterior no servidor existem 2. -Outro ponto você está confundindo as coisas o método func_2 não esta fazendo nada! essa execução de código deveria ocorrer no carregamento da pagina, assim lendo a url e setando radio correto, nessa lógica atual após você clicar em um link você é redirecionado e tudo e carregado novamente que é o esperado, dessa forma essa chamada de método nunca surtira efeito. Uma pergunta porque quer fazer isso? Acho que essa resposta é importante Código: var radioSelected = pathname.includes('19_5') ? '1' ; '2'; Atual: // var radioSelected = x.includes('19_5a.php') ? '1'; // <- teitei assim Não entendo sua insistência em um valor fixo, o que espera conseguir de diferente se sua lógica sempre for '1'? Logo sempre será o primeiro radio! document.getElementById('1').checked=true; // <- teitei assim
-
Cara mostre códigos aqui, apenas argumentar, não é o objetivo desse forum! Mostre sua implementação ou analise o problema atual! a lógica passei faz sentido, então está dando algum erro suba no servidor pra eu poder ajudar
-
Bom você poderia usar a URl como base JS: var pathname = location.pathname; var radioSelected = pathname.includes('19_5') ? '1' ; '2'; document.getElementById(radioSelected).checked=true;
-
Sua descrição tá muito confusa, você menciona que está usando uma função que ao digitar 10400 fa uma chamada ao texto! Mas seu código mostra que qualquer coisa digitada invoca um método e apenas valores fixos são usados nem mesmo sendo usado o objeto dados. Sobre a formatação é possível, mas que nível de formatação você tem em mente? se for algo básico que envolva todo o texto é algo simples, agora se for formatação de palavras individuais, ai é mais complexo e não conseguira fazer com o textarea Um código para tirar alguma ideia! EX: HTML: <body> <div class="form"> <span>Name</span> <input name="nome"/> <span>Text</span> <textarea id="ta" name="nome pessoal" value="asas"></textarea> </div> <div> <input name="btn-bold" type="checkbox">negrito</input> <input name="btn-centralize" type="checkbox">centralize</input> <input name="btn-italic" type="checkbox">italico</input> </div> </body> JS: function initialize() { listeningInputName(); formatToBold(); formatCentralize(); formatItalic(); } function formatToBold() { _buildListening('btn-bold', ['bold', 'normal'], 'font-weight'); } function formatCentralize() { _buildListening('btn-centralize', ['center', 'left'], 'text-align'); } function formatItalic() { _buildListening('btn-italic', ['italic', 'normal'], 'font-style'); } function _buildListening(idField, options, css) { const [ firstOption, secondOption ] = options; $('input[name="'+idField+'"]').change(function() { const toggle = $(this)[0].checked; const option = toggle ? firstOption : secondOption; $('textarea[name="nome pessoal"]').css(css, option); }); } function _buscaTextoPorCodigo(codigo) { var dados = [ {"codigo": "10400", "nome": ["testando texto não formatado"]}, {"codigo": "2020", "nome": ["acontecimento covid"]}, {"codigo": "2021", "nome": ["esperança de um ano melhor"]}, ]; return dados.find(item => item.codigo === codigo); } function listeningInputName() { $('input[name="nome"]').change(function(){ var nome = $(this).val(); const resultadoBusca = _buscaTextoPorCodigo(nome); if(resultadoBusca) { $('textarea[name="nome pessoal"]').val(resultadoBusca.nome); } }); } initialize(); JsBin: https://jsbin.com/xozapadoce/edit?html,js,output
-
Lamento pela demora: fui avisado pelo imasters apenas agora da sua duvida você somente precisa substituir um trecho do css: // ATUAL /*.caption:hover { bottom: 0; transition: 1s; }*/ .container:hover .caption{ bottom: 0; transition: 1s; } link:https://jsfiddle.net/vord24f3/2/
-
Cálculo dinâmico utilizando valor recuperado de uma api
wanderval respondeu ao tópico de biakelly em Javascript
Legal ficar sabendo disso, Abaixo eu vou deixar um código com uma lógica básica manipulando o primeiro input! Html: <body> <div> <input id="currency" onBlur="calcBitCoinValue()"/> <input id="bitcoin"/> </div> </body> JS: let currentBitcoinValue = 0; let currentCurrencyValue = 0; function fetchBitcoinTickerJSON() { const url = "https://www.mercadobitcoin.net/api/btc/ticker"; fetch(url) .then(response => response.json()) .then(data => { currentBitcoinValue = data.ticker.buy; }); } function init() { fetchBitcoinTickerJSON(); } function calcBitCoinValue() { const bitCoin = document.getElementById("bitcoin"); const realValue = parseFloat(document.getElementById("currency").value); bitCoin.value = realValue/currentBitcoinValue; } init(); Link JsBin: https://jsbin.com/yunimovuda/edit?html,js,output -
Cálculo dinâmico utilizando valor recuperado de uma api
wanderval respondeu ao tópico de biakelly em Javascript
Manipular o input não é dificil, mas não acho que essa API de o suporte que você precisa! Pelo que entendi você quer enviar um currency de "Real" BRL e receber o valor calculado de bitcoin. A API que você colocou acredito que somente informe dados de bitcoin, relacionado a transações de mercado. não vi na doc uma forma de enviar um currency, então se esse é seu objetivo então vai ter que usar outra API -
Cálculo dinâmico utilizando valor recuperado de uma api
wanderval respondeu ao tópico de biakelly em Javascript
const url = "https://www.mercadobitcoin.net/api/btc/ticker"; async function fetchBitcoinTickerJSON() { const response = await fetch(url); return await response.json(); } fetchBitcoinTickerJSON().then(data => { console.log(data) }); -
pelo que entendi você definiu no seu exemplo apenas pagina1 mas olhando seu código você tem pagina1 e pagina2. o que concluo que você está tentando clicar em um link que leva para pagina diferente da atual, e mesmo assim quer manter a posição da scroll bar. Acho que você deveria ler sobre SPA(Single Page Application). Motivo: Se o meu raciocínio está correto em relação a sua intenção, tudo que fizer para contornar isso, exceto se utilizar ajax será um workaround ou de forma chula "gambiarra". o motivo do scroll não permanecer no mesmo local e que após o linkser clicado isso irá redirecionar, o browser executa um recarregamento da página então para o browser sempre será como a primeira vez ou como um reload. para resolver isso foi utilizado o ajax por muito tempo, para evitar o recarregamento de paginas e por sua evolução hoje existem os famosos frameworks SPA como "Angular, React, Vue". Então se quer fazer com Javascript vanilla ou puro então pesquise sobre Ajax!
-
Essa é a maneira que entendi da sua duvida: function func_1() { var a = 900; document.getElementById ("tete1").innerHTML = "func_1 = " + a + "px"; } function func_2() { var b = 200; document.getElementById ("tete2").innerHTML = document.getElementById ("tete1").innerHTML; } link jsbin: https://jsbin.com/bocucayusa/1/edit?html,js,output
-
seu script tem alguns erros: const jsonCat = vtxctx.categoryId; const catProd = JSON.parse(jsonCat); // não existe id no html apenas class="faq-connect" var divProd = document.getElementById('faq-connect'); // catProd já contem o valor 10103 que foi adicionado na referencia "const catProd = JSON.parse(jsonCat);" // jsonCat recebeu o valor 10103 if (catProd.categoryId == 10103) { divProd.style.display = 'block'; } else{ divProd.style.display = 'none'; } SOLUTION JS // objeto para teste var vtxctx = {"categoryId": "10103"}; const jsonCat = vtxctx.categoryId; const catProd = JSON.parse(jsonCat); var divProd = document.getElementById('faq-connect'); if (catProd == 10103) { divProd.style.display = 'block'; } else{ divProd.style.display = 'none'; } HTML <div id="faq-connect" style="display:none"> <p>Sucesso!</p> </div> link jsbin: https://jsbin.com/vozawoceca/1/edit?html,js,console,output
-
Proteger dados .env ou variáveis de configuração [dúvida]
wanderval respondeu ao tópico de paulinhosupriano em Javascript
Eu entendo que você está mencionando um cliente que consome uma API, pq se o cliente compra o produto ele tem sim que ter acesso a configuração. Eu fiquei um pouco confuso com a sua definição de dados públicos. No caso esses dados de configuração não deveriam ser públicos, caso seja uma API de serviço. A forma que ela vai ser lida não acho que tenha uma importância tão relevante, acredito que tenha que seguir boas praticas da tecnologia que está usando. algumas pessoas usam variáveis de ambiente, algumas arquivos que carregam no build da aplicação. mas sim deve haver uma estrutura de segurança em relação a esse file, essa é minha opnião -
Bom eu vi que você explicou o que está acontecendo de problema mas não se atentou em explicar o funcionamento da sua logica e sua intensão relacionado a business acho que faltou saber qual o seu objetivo em disparar e chamar o método searchList a cada 100 ms sendo que explicou chamar um await mas ele não retorna uma promise? assim você estaria chamando varias vezes o método asyncronous de forma syncrono e nunca espera a resposta do método await sua explicação está muito confusa!
-
function listeningToActiveLink() { $('a[href*="#"]').click(function(event) { var classList = event.target.classList; if(classList.contains("scrollSuave")) { var allLinks = document.querySelectorAll(".scrollSuave"); Array.from(allLinks).forEach((el) => el.classList.remove('active')); classList.add('active'); } }) } function activeSmoothScroll() { var $doc = $('html, body'); $('.scrollSuave').click(function() { $doc.animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 2000); }); } $( document ).ready(function() { activeSmoothScroll(); listeningToActiveLink(); }); JsBin: https://jsbin.com/cugebiqato/edit?html,js,output
-
É uma bela descrição, mais seria melhor se estivesse acompanhada de código né, sou meio cético pra confiar somente na suas palavras! Ass: Diógenes de Sinope
-
você não postou seu component Main! stackblitz: https://stackblitz.com/edit/react-ib1f3e?file=src%2Fpages%2Fcategory.js App.js import React from "react"; import "./style.css"; import Routes from "./routes"; import Header from "./components/Header"; function App() { return ( <div className="App"> <Header /> <Routes /> </div> ); } export default App; routes.js import React from "react"; import { BrowserRouter, Switch, Route } from "react-router-dom"; import Main from "./pages/main"; import Product from "./pages/product"; import Categories from "./pages/category"; const Routes = () => ( <BrowserRouter> <Switch> <Route path="/" exact component={Main} /> <Route path="/products" component={Product} /> <Route path="/categories" component={Categories} /> </Switch> </BrowserRouter> ); export default Routes; main.js import React from "react"; import { Link } from "react-router-dom"; export default function Main() { return ( <> <header> <h1>Main</h1> </header> <ul> <li> <Link to="/products">Products</Link> </li> <li> <Link to="/categories">Categorias</Link> </li> </ul> </> ); } product.js import React, { Component } from "react"; import { Link } from "react-router-dom"; export default class Product extends Component { render() { return ( <> <h1>Product</h1> <ul> <li> <Link to="/">Home</Link> </li> </ul> </> ); } } category.js import React from "react"; import { Link } from "react-router-dom"; export default function Categories() { return ( <> <header> <h1>Categories</h1> </header> <ul> <li> <Link to="/">Home</Link> </li> </ul> </> ); }
-
Como mudar a cor de um campo quando clicar nele
wanderval respondeu ao tópico de Sapinn em Javascript
HTML <form> <label> <span>Input 1</span> <input type="text"/> </label> <label> <span>Input 2</span> <input type="text"/> </label> <label> <span>Input 3</span> <input type="text"/> </label> </form> CSS form { display: flex; flex-direction: column; } form label { margin: 5px; } input { outline: none; border: 1px solid #ccc; box-sizing: border-box; } input:focus { border-bottom: 1px solid red; } JSBin: https://jsbin.com/vewuwerolo/edit?html,css,output -
.navbar-nav .nav-item.active .nav-link{ color: red; } https://jsbin.com/kanoqiyuxa/edit?html,css,output
-
Alternar valor de variavel com setInterval é possivel?
wanderval respondeu ao tópico de RickSilva em Javascript
Eu faria diferente, assim você não aplica lógica para cores e sim de forma generica e pode mudar a cor e a velocidade e a sequencia de cores HTML: <body> <span id="text-highlight">TEST OPA</span> <span id="text-highlight2">TEST OPA 2</span> </body> JS: function highlightTextColor(palleteColor, fieldId, time=5000) { let index = 0; setInterval(()=> { changeColor(palleteColor[index], fieldId); index++; if(index === palleteColor.length) { index = 0; } }, time); } function changeColor(color, fieldId) { document.getElementById(fieldId).style.color = color; } highlightTextColor(['pink', 'red', 'purple', 'blue', 'darkblue'], 'text-highlight', 1000); highlightTextColor(['darkred', 'darkblue', 'red'], 'text-highlight2', 200); JsBin: https://jsbin.com/viyerefiwu/edit?html,js,output