Jump to content
VCastilho

Deformação JavaScript no Wordpress

Recommended Posts

Bom Dia
Estou tentando aplicar um HTML com Javascript no Portifólio do Meu Wordpress
Mas assim que coloco ele deforma, como as imagens no final: 
Em vez de modificar apenas horizontalmente, modifica também verticalmente, iguais as imagens, conferi o código e não localizei algo que causa isso, sendo que se visualizar o código no navegador, esta normal.
A parte que esta desalinhado creio que consigo arrumar depois com o CSS
Segue o código completo:
<!doctype>
<html>

<head>
  <meta charset="utf-8">
  <style>
* {
  font-size: 16px;
  box-sizing: border-box;
}

button {
  display: block;
  margin: auto;
}

article {
  position: relative;
  display: inline-block;
}

aside {
  height: 200px;
  max-width: 260px;
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 200px;
  display: inline-block;
  vertical-align: bottom;
}

aside#left {
  text-align: right;
  padding-right: 2rem;
}

aside#right {
  text-align: left;
  padding-left: 2rem;
}

.img-comp-container {
  height: 200px;
  min-width: 820px;
  position: relative;
  text-align: center;
}

.img-comp-img {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: absolute;
}

.img-comp-img img {
  display: block;
  vertical-align: middle;
}

.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;
  width: 24px;
  height: 24px;
  background-image: url("http://images.tcdn.com.br/678962/themes/37/img/clicker1.png?325.80026377726244");
  opacity: 1;
}
  </style>
</head>

<body>
  <button onclick="initComparisons()">Centralizar ajustes</button>
  <div class="img-comp-container">
    <aside id="left">Antes</aside>
    <article>
      <div class="img-comp-img ">
        <img src="https://www.lupadigital.info/wp-content/uploads/2018/05/imagens-gratis.jpg" width="280" height="200" alt="" /> </div>
      <div class="img-comp-img img-comp-overlay">
        <img src="http://s2.glbimg.com/7B_srQyXERP_NoJCHSzgOnuwsyc=/smart/e.glbimg.com/og/ed/f/original/2017/07/26/best-sapce-photos-2017-designboom-10.jpg" width="280" height="200" alt="" /> </div>
    </article>
    <aside id="right">Depois</aside>
  </div>
<script>
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
console.log(getId('right'));
getId('right').style.width = getId('left').offsetWidth;

function initComparisons() {
  var x, i, c, cc;
  getId('left').style.color = "#808080";
  getId('right').style.color = "#808080";
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    x[i].style.width = "300px";
    compareImages(x[i]);
  }

  function compareImages(img) {
    var clicked = 0,
      w = img.offsetWidth,
      h = img.offsetHeight;
    img.style.width = (w / 2) + "px";
    img.parentElement.insertBefore(slider, img);
    img.parentElement.style.width = w;
    img.parentElement.style.height = h;
    slider.style.top = (h / 1) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    slider.addEventListener("mousedown", slideReady);
    window.addEventListener("mouseup", slideFinish);
    slider.addEventListener("touchstart", slideReady);
    window.addEventListener("touchstop", slideFinish);

    function slideReady(e) {
      e.preventDefault();
      clicked = 1;
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }

    function slideFinish() {
      clicked = 0;
    }

    function slideMove(e) {
      var pos;
      if (clicked == 0) return false;
      pos = getCursorPos(e)
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      slide(pos);
    }

    function getCursorPos(e) {
      var a, x = 0;
      e = e || window.event;
      a = img.getBoundingClientRect();
      x = e.pageX - a.left;
      x = x - window.pageXOffset;
      return x;
    }

    function slide(x) {
      c = 225 * x / w;
      cc = 225 - c;
      getId('right').style.color = "rgb(" + c + ',' + c + ',' + c + ")";
      getId('left').style.color = "rgb(" + cc + ',' + cc + ',' + cc + ")";
      img.style.width = x + "px";
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}

function getId(ref) {
  return document.getElementById(ref);
}
initComparisons();
  </script>

</body>

</html>
Sendo que estou tentando utilizar tudo no mesmo arquivo, com o e o Estou fazendo errado? Há uma forma correta?

1.png

3.png

Share this post


Link to post
Share on other sites

Você não definiu um tamanho para o elemento Article, e sua declaração do doctype está incorreta.

Modifique seu css de:

article {
      position: relative;
      display: inline-block;
}

Para:

article {
      position: relative;
      display: inline-block;
      width: 280px;
      height: 200px;
}

image.thumb.png.7d2c812c41f96fedf1ac303240811da0.png

Share this post


Link to post
Share on other sites

Realmente resolveu o problema da organização, porém quando coloco no Wordpress ainda continua deformando, sendo que em vez de quando eu uso o botão de mover ele mover a parte horizontal, esta movendo o horizontal e vertical, conforme na foto anterior
Agradeço pela resposta

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By David Samu
      let total_entradas = 3//ai virar total de colunas
      let total_linhas   = 0
      let tabela         = []
      for(let coluna=total_entradas; coluna>0; coluna-- )
      {
          let repeticao = 1
          for(let x=1; x<=coluna; x++)
          {
              repeticao = (2 * repeticao)
          }
          if( total_linhas === 0 )
          {
              total_linhas = repeticao
          }
          if(repeticao != 1) 
          {
              repeticao = (repeticao / 2)
          }
          let valores = []
          let vdd     = 1
          let lastBoo = 'v'
          for( let linha=0; linha < total_linhas; linha++ )
          {
              if( vdd <= repeticao )
              {
                  val = lastBoo
              }
              else
              {
                  if( lastBoo == 'v' )
                  {
                      lastBoo = 'f'  
                  }
                  else 
                  {
                      lastBoo = 'v'
                  }
                  val = lastBoo
                  vdd=1
              }
              vdd++
              valores.push(val)
          }
          tabela[ (coluna - 1) ] = valores   
      }
      let countCol = 1
      for(let coluna=tabela.length - 1; coluna>=0; coluna--)
      {
          console.log("Coluna ", countCol++)
          for(let linha = 0; linha < tabela[coluna].length; linha ++)
          {
              console.log( tabela[coluna][linha] )
          }
      }
    • By andrelimaverde
      Pessoal preciso de uma ajuda, desde já agradeço à todos.
      "Site teste, estudos..."
      Tenho um formulário com 3 etapas, ele está trabalhando em php normalmente e salvando os dados preenchidos em .txt (para testes apenas).
      Vamos lá, nas 3 etapas o form está com action="1.php" (2.php,  3.php) e method="post". [Não vou colocar muito código para simplificar, pois é um formulário básico fácil de entender]
      Exemplo:  Pagina 1 - envia para action '1.php'
      Nome: 
      Telefone:
      <input type="submit" value="Continuar">
      (
       O arquivo 1.php armazena os dados e redireciona => header( 'Location:Pagina2.php' ) ;   
       Assim como os outros php's
      )
      Pagina 2 - action 2.php armazena os dados e redireciona => header( 'Location:Pagina3.php' ) ; 
      Cidade:
      Endereço:
      <input type="submit" value="Continuar">
       
      A questão está na 3ª página
      Página 3 -
      Email:
      (Preciso que após preencher o campo da página 3 no caso "Email:",  ao clicar no botão, neste caso não sei se seria um submit ou button. O formulário não redirecionar para pagina 4, ao clicar ele enviar e salvar normalmente, mas aparecer um novo input na mesma pagina por Exemplo:"Twitter:"  ) 
      No caso preciso que ele não redirecione , gostaria de colocar um gif de carregando por 15 segundos por exemplo como se estivesse processando as informações... e em seguida ele apresentar o novo input do "Twitter:" , onde ai sim enviaria normalmente...
    • By Wilson Fernandes
      Olá! Preciso de ajuda para começar a construir gráficos de funções quadráticas em plano cartesiano. Já procurei várias fontes, mas nenhuma explica como construir um bom gráfico.
    • By luigiferrari
      Criei um Form para fazer Cadastro, sempre que o usuário clica no botão para cadastrar é enviado um e-mail para o ADM.
      O meu problema é o seguinte, quando tem algum campo não preenchido e o usuário clica em cadastrar, o email é enviado e só depois o alert do campo obrigatório aparece.
      Gostaria de um JS que desativa o botão cadastrar até todos os campos estarem preenchidos corretamente.
      E também que quando a pessoa clicasse no Botão cadastrar, ele iria desativar novamente, para evitar o usuário de clicar mais de uma vez e acabar enviando mais emails...
       
      Segue o meu form...
       
    • By penelopevitoria_
      Pessoal,
       
      estou com muitos problemas de layout em minhas páginas AMP. O que rola é que vários elementos estão saindo compridos ou esticados. Enfim, o AMP estraga coisas como formulário também. Vocês sabem se existe uma maneira massiva de corrigir esses problemas pelo plugin? Tenho muitas páginas com o layout comprometido e não achei nada na internet que me ajudasse a corrigir. 
       
      Aguardo retorno :D
×

Important Information

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