Question 106240 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Need to insert HTML, CSS, JS code in a wordpress page

I have this code to perform vertical+horizontal scroll. When I run this code alone as a HTML file, it works perfect. But If I add this code inside a wordpress page, the output looks weird. Below are the ways in which I’ve tried to insert the code into the wordpress page.

  1. Added the code inside custom HTML block in Gutenberg Editor.
  2. Used Raw HTML and Raw JS blocks in WP Bakery Editor.
  3. Tried in a simple Text block.
  4. Used a plugin called WP Coder.
    Unfortunately, nothing worked for me.

Here is my code

var windowWidth = window.innerWidth;
var horLength = document.querySelector(".elementt-wrapper").scrollWidth;
var distFromTop = document.querySelector(".horizontall-section").offsetTop;
var scrollDistance = distFromTop + horLength - windowWidth;
document.querySelector(".horizontall-section").style.height = horLength + "px";

window.onscroll = function() {
  var scrollTop = window.pageYOffset;
  if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
    document.querySelector(".elementt-wrapper").style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
  }
}
.horizontall-section {
  padding: 100px 0;
  background-color: pink;
}

.stickyy-wrapper {
  position: sticky;
  top: 100px;
  width: 100%;
  overflow: hidden;
}

.elementt-wrapper {
  position: relative;
  display: flex;
}

.elementt {
  width: 500px;
  height: 400px;
  background-color: purple;
  margin: 0 20px 0 0;
  flex-shrink: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="horizontall-section">
  <div class="stickyy-wrapper">
    <div class="elementt-wrapper">
      <div class="elementt"></div>
      <div class="elementt"></div>
      <div class="elementt"></div>
      <div class="elementt"></div>
      <div class="elementt"></div>
    </div>
  </div>
</div>


<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>


<div class="horizontall-section2">
  <div class="stickyy-wrapper2">
    <div class="elementt-wrapper2">

    </div>
  </div>
</div>

<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

I’m a newbie to wordpress, Kindly guide me to achieve this.

Tags:

2

Answers


  1. 0

    actually WordPress is a visual editing site and html blocks are for inserting small elements. So if you want to code the whole thing manually, i would suggest you to either buy a domain and hosting and add the code files using ftp. or if you don’t want to spend money, u can always do so in GitHub Pages as long as it is a normal html, css and javascript file and not a nodejs webapp or something

    Login or Signup to reply.
  2. 0

    According to the comment section, the issue seems to be that WordPress is adding <p> tags to your HTML, which is the default behavior, in order to fix that you’ll only need to add one line of code to your theme’s function.php

    remove_filter( 'the_excerpt', 'wpautop' );

    that should fix it. Read more here https://wordpress.stackexchange.com/questions/109481/remove-p-tags-from-the-content

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search