Ir para conteúdo

wanderval

Members
 Perfil  Explorar Conteúdo

  • Total de itens

    409

  • Registro em

  • Última visita

  • Dias vencidos

    2

Posts postados por wanderval

  2. Postado

    Em 14/02/2021 at 16:59, Biel. disse:

    O link que postei foi 19_5a  e não 19_5 

     

    Fiz algumas modificações para tentar resolver o problema de alguma forma. 

    Você me apresentou uma  ideia de como resolver o problema. Entendi sua ideia e fiz vários testes para encontrar a solução; não conseguir !   É desnecessário postar novamente todo o código na integra CSS + dois input type="radio" + javascript  uma vez que o mesmo já foi postado  na integra neste fórum e . Nesta URL . Se eu conseguisse fazer a coisa funcionar com um input type="radio" ,  conseguiria fazer funcionar com 2,3,4 ou mais inputs.

     

    Não existe valor fixo. É como disse: Fiz algumas modificações para tentar resolver o problema de alguma forma. Se eu conseguisse fazer a coisa funcionar com um input type="radio" ,  conseguiria fazer funcionar com 2,3,4 ou mais inputs.

    Wanderval,  a solução virá rapidamente. Vamos resolver este problema juntos? Estou animado !

     

     

     

    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();

     

  3. Postado

    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

  4. Postado

    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 

  5. Postado

    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.

  6. Postado

    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

  7. Postado

     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

  9. Postado

    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:

    imaster_format.PNG?1613180666

     

    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

  10. Postado

    Em 05/08/2019 at 13:32, AMANDIANDO disse:

     

    Funcionou! Muito obrigada!

     

    Fiquei com uma dúvida.. A descrição aparece somente quando o mouse passa em cima da palavra "Configurações".. Tem como expandir para que a descrição apareça conforme eu coloque o mouse em qualquer lugar do "quadrado rosa"?

     

    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/

  11. Postado

    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

  12. Postado

    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

     

  14. Postado

    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!

  16. Postado

    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

  17. Postado

    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

  18. Postado

    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!

  19. Postado 

    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

  21. Postado

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

     

  22. Postado

    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

  24. Postado

    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

  25. Postado

    4 horas atrás, Sapinn disse:

    Já havia tentado isso mas não funcionou.

    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;
}  
    
 
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito