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

  1. Postado

    Para esse caso a tecnica mais indicada seria, condicionar a funcionalidade de envio assim o usuário terá uma visão clara de processo obrigatório.

     

    Adicionando a propriedade disabled o campo irá ficar desabilitado, deste modo pode condicionar ao carragamento do campo input file a ativação desse botão 

    <input type="submit" onClick="funcAAA();" value="Enviar" disabled>

     

    Então no javascript inclui-se um metodo listening para observar alterações no input file assim habilitando o botão de envio 

    // Listener
document.querySelector("input[type='file']").addEventListener("change", () => 
     document.querySelector("input[type='submit']").disabled = false
);

    Jsbin: https://jsbin.com/faqugeteje/edit?html,js,output

  2. Postado

    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/

  3. Postado

    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

  4. Postado

    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

  5. Postado

    55 minutos atrás, Biel. disse:

    O que você postou tem ligação com meu post anterior, mas serve. Valeu. O tema desse post é: parar ação

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

  8. Postado

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

     

  9. Postado

    59 minutos atrás, Biel. disse:

    Ótima dica. Vou colocar o manipulador de evento sempre depois do document e nunca antes. Obrigado !

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

     

  10. Postado

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

     

  11. Postado

    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)

     

  12. Postado

    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

  15. Postado

    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

  18. Postado

    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

  19. Postado

    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

  20. Postado

    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

     

  22. Postado

    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

  24. Postado

    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

×

Informação importante

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

  Aceito