Jump to content

wanderval

Members
  • Content count

    321
  • Joined

  • Last visited

  • Days Won

    2

wanderval last won the day on June 10 2018

wanderval had the most liked content!

Community Reputation

19 Levemente Bom

6 Followers

About wanderval

  • Birthday 03/30/1984

Informações Pessoais

  • Sexo
    Masculino

Recent Profile Visitors

2813 profile views
  1. wanderval

    scroll javascript

    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!
  2. wanderval

    pegar resultado de outra function

    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
  3. wanderval

    Verificar valor em um Json com JS

    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
  4. wanderval

    Proteger dados .env ou variáveis de configuração [dúvida]

    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
  5. wanderval

    Chrome memory leak on dispatchEvent

    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!
  6. wanderval

    Ancora Scroll

    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
  7. wanderval

    NodeJS - Erro

    É 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
  8. wanderval

    Erro Rota com React

    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> </> ); }
  9. wanderval

    Como mudar a cor de um campo quando clicar nele

    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
  10. wanderval

    Como mudar a cor do active

    .navbar-nav .nav-item.active .nav-link{ color: red; } https://jsbin.com/kanoqiyuxa/edit?html,css,output
  11. wanderval

    Alternar valor de variavel com setInterval é possivel?

    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
  12. wanderval

    Como mudar a cor do active

    olha essa é a forma! o que deve estar acontecendo é que está sendo subscrito já que o css da bilbiotéca que está usando deve ter mais definições de classes para definir a cor. .navbar.navbar-expand-lg.navbar-light.bg-light .container .navbar-collapse .navbar-nav .nav-item.active { color: red; }
  13. wanderval

    Como mudar a cor do active

    .nav-item.active { color: red; }
  14. wanderval

    Somar checkbox resultado fora de input text

    Sugestão de melhoria no layout Layout original Alternativa 1 Alternativa 2 Layout original lista Alternativa Links imagem: https://imghub.io/i/sCktV https://imghub.io/i/sChi2 https://imghub.io/i/sC0Gm https://imghub.io/i/sC1aT https://imghub.io/i/sCtgS Link jsbin https://jsbin.com/zisivoquma/1/edit?html,css,output
  15. wanderval

    Somar checkbox resultado fora de input text

    Primeiro ponto seu HTML está utilizando tabela pra montar o layout, isso é desaconselhável considerado uma má pratica atualmente e utilizar atributos de estilização no html so quando é um framework, mas se você está fazendo manualmente então isso deixa o html muito confuso, vai começar a ficar complexa a manutenção. Ex de html pro card: <div class="box-container custom" product-id="01" > <div class="container-image"> <img src="https://pizzariadesucesso.com/wp-content/uploads/2018/05/pizza_R_l5_3.jpg" style="border-radius: 10px;" width="75px" height="75px" /> </div> <div class="container-info"> <div class="container-description"> <span class="title">MODA DA CASA</span> <span class="description">Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.</span> </div> <div class="container-currency"> <span class="currency-value-displayed">28.00</span> <input type="checkbox" name="sabor" id="evento_value2" class="currency-check" value="28.00" /> <select name="qntdade" onchange="changedQuantity(event, '01')"> <option value="1">1</option> <option value="2">2</option> </select> </div> </div> </div> JS var total = 0; var itemsDoPedido = []; $(":checkbox").click(function () { var cardContainer = $(this).parents('.box-container'); var id = $(cardContainer).attr('product-id'); if ($(this).is(":checked")) { addItem(this, cardContainer, id) } else { removeItem(cardContainer, id); } updateTotal(id, cardContainer); }); function addItem(itemRef, cardContainer, id) { var valor = $(itemRef).val(); var quantity = $(cardContainer).find('select').val(); var pedido = itemsDoPedido.find(item => item.id == id); if(pedido) { pedido.quantidade = quantity; itemsDoPedido = [...itemsDoPedido, pedido]; } else { var produto = createProductObject(id, quantity, valor); itemsDoPedido.push(produto); } } function removeItem(cardContainer, id) { var pedido = itemsDoPedido.find(item => item.id == id); if(pedido) { itemsDoPedido = itemsDoPedido.filter(item => item.id != id); } } function changedQuantity(event, id) { var cardContainer = $('.box-container[product-id="'+id+'"]'); var isChecked = $(cardContainer).find(":checkbox").is(":checked"); var quantity = $(cardContainer).find('select').val(); if(isChecked) { itemsDoPedido.find(item => { if(item.id === id){ item.quantidade = quantity; } }); } updateTotal(id, cardContainer); } function updateTotal(id, cardContainer) { total = calcValue(itemsDoPedido); const pedido = itemsDoPedido.filter(item => item.id === id); const totalValueItem = calcValue(pedido); $(cardContainer).find('.total-value').val(totalValueItem); $("#resultado").text(formatPrice(total)); } function calcValue(productList) { return productList.reduce(function(acumulador, valorAtual) { return acumulador + (parseInt(valorAtual.quantidade) * parseFloat(valorAtual.valor)); },0); } function createProductObject(id, quantity, valor){ var produtoModel = { id: id, quantidade:quantity, valor: valor }; return produtoModel; } function formatPrice(value, currency = true) { var valor = parseFloat(value); let valorFormatado = null; if(currency) { //Valor com cifrão valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }); } else { //Valor sem cifrão valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2}); } return valorFormatado; } https://jsbin.com/gikewuvesi/edit?html,js,output
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.