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 Robson Barros da Rocha
      Boa noite.
       
      Estou com problemas para exibir dados pelo .JSON :( No banco de dados, tenho 3 rows (três resultados), mas, ele mostra somente um. Alguém poderia me dizer o que posso ter errado?
       
      O JSON retornado é:
      [ { "id": 7, "linha": "TESTE", "chegada": "18:45:00", "saida": "19:05:00", "tempoTabela": "0:20", "tempoParada": "TESTE", "previsao": "TESTE", "status": "<span data-viagem=\"1\" class=\"label label-warning\"><i class=\"fa fa-clock\" title=\"Pendente\"></i> Pendente</span>" }, { "id": 8, "linha": "TESTE", "chegada": "18:45:00", "saida": "19:05:00", "tempoTabela": "0:20", "tempoParada": "TESTE", "previsao": "TESTE", "status": "<span data-viagem=\"1\" class=\"label label-warning\"><i class=\"fa fa-clock\" title=\"Pendente\"></i> Pendente</span>" } ] O scrip:
      $.ajax({ type: "GET", url: web +"include/ajax.php", timeout: 3000, datatype: 'JSON', contentType: "application/json; charset=utf-8", cache: false, beforeSend: function() { $('#loading').show(); }, error: function() { $('#loading').hide(); }, success: function(s) { var tr = s; $.each(tr,function(i, data){ if(data.emptyDay) { var item = '<tr><td colspan="10" align="center"><i class="fa fa-times text-danger"></i> <b>'+ data.emptyDay +'</b></td></tr>'; } else { var item = '<tr tr-id="'+ data.id +'"><td>#'+ data.id +'</td><td>'+ data.linha +'</td><td class="center">'+ data.chegada +'</td><td class="center">'+ data.saida +'</td><td class="center">'+ data.tempoTabela +'</td><td class="center">'+ data.tempoParada +'</td><td class="center">'+ data.previsao +'</td><td class="center">'+ data.status +'</td><td><i class="fa fa-pencil text-info" onclick="edit('+ data.id +')" style="cursor:pointer;"></i> | <i class="fa fa-times text-danger" onclick="deletes('+ data.id +')" style="cursor:pointer;"></i></td></tr>'; } $("#trHorarios").html(item); finalizar_viagem(data.id); NProgress.done(); }); } });  
    • By henriquers
      Bom Dia,
       
      Estou fazendo um sistema para armazenar documento e tenho algumas tabelas de consulta onde a mesma aparece algumas informações necessarias como ID , Nome etc
      e estou tentando Ocultar a coluna que esta o ID para que o usuario não consiga ver,estou utilizando o seguinte codigo para ocultar a coluna.
      <script> $("#tabela_cons").ready(function () { $('td:nth-child(1),th:nth-child(1)').hide(); }); </script>  
      A coluna fica oculta certinho do modo que eu quero, mas esse código esta afetando as outras tabelas que eu tenho na pagina também, e não sei como ocultar apenas na tabela que eu desejo que seja oculta no caso a tabela com ID = tabela_cons;
    • By Kelven
      Bom dia pessoal, estou tendo um problema com uma requisição que estou tentando fazer em javascript (tem que ser em javascript pq a página q faz a requisição é html) de um arquivo em php que está em um servidor php, porém aparece esse erro:
       
      "Access to XMLHttpRequest at 'http://nomedosite.com.br/teste/contador.php' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
       
      Pesquisei no google e até agora nada, como posso resolver o problema do CORS não permitir fazer requisições GET/POST no servidor??
    • By felp10
      Para que você possa resolver este exercício, definimos para você as funções maeDe e paiDe, que, recebendo um filho (string), retorna o nome (string) da mãe ou pai conforme apropriado. Exemplo:
      paiDe(cleoPires) "Fábio Júnior" maeDe(cleoPires) "Glória Pires"
      Agora é a sua vez de criar as funções: temAMesmaMae que tem dois filhos por parâmetro e retornará true oufalse se eles realmente compartilharem a mesma mãe. Sabendo disso você pode usar a função que nós lhe damos maeDe.
      temOMesmoPai que como o anterior, pega dois filhos por parâmetro e retorne true oufalse se eles compartilharem o mesmo pai. Sabendo disso você pode usar a função que nós lhe damos paiDe.
      E saoMeioIrmaos, que, recebendo dois filhos por parâmetro, nos diga se de fato são meio-irmãos. Você deve usar as duas funções anteriores aqui. Lembre-se que os meios irmãos são dados quando, dois filhos compartilham a mesma mãe, mas NÃO o mesmo pai ou vice-versa. Bem, se ambos têm a mesma mãe e o mesmo pai, nesse caso eles seriam irmãos! 
      O teste me da esse resultado e não estou conseguindo entender o porque minha lógica está errada quero ajuda para entender não solução por favor, obrigado.
       Sua solução não passou as provas
      Resultados do teste:  cleoPires e fiuk são meio irmãos Ver detalhes  sandy e junior não são meio irmãos  sandy e fiuk não são meio irmãos  junior e fiuk não são meio irmãos Ok, vamos a minha solução!
       
      function maeDe(filho){ return "Glória Pires" } function paiDe(filho){ return "Fábio Júnior" } function temAMesmaMae(filho1, filho2){ return maeDe(filho1) == maeDe(filho2); } function temOMesmoPai(filho1, filho2){ return paiDe(filho1) == paiDe(filho2); } function saoMeioIrmaos(filho1, filho2){ return temAMesmaMae(filho1, filho2) != temOMesmoPai(filho1, filho2); }  
    • By Kelven
      Bom dia pessoal tudo bem?!
      Então eu estou com o seguinte problema, fiz a integração do API do PayPal para poder ter o retorno do email do pagamento, ai eu pego o email do pagamento da seguinte forma: 
      document.getElementById('demo').innerHTML = details.payer.email_address; o problema é que eu queria pegar também o valor q foi pago, mas já tentei de todas as formas pegar esse object mas não consigo, os retornos do api são assim:
      { "id": "5O190127TN364715T", "status": "COMPLETED", "payer": { "name": { "given_name": "John", "surname": "Doe" }, "email_address": "customer@example.com", "payer_id": "QYR5Z8XDVJNXQ" }, "purchase_units": [ { "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b", "shipping": { "address": { "address_line_1": "2211 N First Street", "address_line_2": "Building 17", "admin_area_2": "San Jose", "admin_area_1": "CA", "postal_code": "95131", "country_code": "US" } }, "payments": { "authorizations": [ { "id": "0AW2184448108334S", "status": "CREATED", "amount": { "currency_code": "USD", "value": "100.00" ESSE É O VALOR QUE EU QUERIA PEGAR }, "seller_protection": { "status": "ELIGIBLE", "dispute_categories": [ "ITEM_NOT_RECEIVED", "UNAUTHORIZED_TRANSACTION" ] }, "expiration_time": "2018-05-01T21:20:49Z", "create_time": "2018-04-01T21:20:49Z", "update_time": "2018-04-01T21:20:49Z", "links": [ { "href": "https://api.paypal.com/v2/payments/authorizations/0AW2184448108334S", "rel": "self", "method": "GET" }, { "href": "https://api.paypal.com/v2/payments/authorizations/0AW2184448108334S/capture", "rel": "capture", "method": "POST" }, { "href": "https://api.paypal.com/v2/payments/authorizations/0AW2184448108334S/void", "rel": "void", "method": "POST" }, { "href": "https://api.paypal.com/v2/payments/authorizations/0AW2184448108334S/reauthorize", "rel": "reauthorize", "method": "POST" } ] } ] } } ], "links": [ { "href": "https://api.paypal.com/v2/checkout/orders/5O190127TN364715T", "rel": "self", "method": "GET" } ] } alguém sabe me dizer como posso pegar o Value ??
×

Important Information

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