Jump to content

Conflicting code blocks

Recommended Posts

Hey, I'm setting up a website, and I use code blocks for some features I can't build on the platform. For instance I found a gallery that works better on mobile, so I want to use that. It works fine with one, but when I insert two on the same page, they somehow conflict with each other, so only one works.


The same thing happens, when I use two very different code blocks, something in one of them seems to conflict with the other one.
Any good pieces of advice for how to handle this? Maybe rename some identical elements there might be across the blocks, so names become unique?

Other tips?

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

10 minutes ago, YOLOfar said:

Hey, I'm setting up a website, and I use code blocks for some features I can't build on the platform. For instance I found a gallery that works better on mobile, so I want to use that. It works fine with one, but when I insert two on the same page, they somehow conflict with each other, so only one works.


The same thing happens, when I use two very different code blocks, something in one of them seems to conflict with the other one.
Any good pieces of advice for how to handle this? Maybe rename some identical elements there might be across the blocks, so names become unique?

Other tips?

NOTE:  I am asuming you have some Css/Html knowledge as it's necessary for this.

Hi , There could be any conflict which we cann't tell without looking at code. But here are few tips:

1 - Chage The elements Id/class(IN HTML) in your code block , keep them sepetrated from each other.

2 - Look for Css if same elements are have same Id's change them to different Id's (IN CSS)

3 - Look for missing ending and closing of HTML tags (Most Important One ) this can cause huge conflicts then anything. Must have proper opening/closing tags.

I think That's all  , If you do each  these  conflicts wil go away , Otherwise you can post the code below so we can look in to this and make corretcion for you 🙂

Link to comment

 I know a bit, and am struggling to learn more 😅. Thanks so much 🌻! This is the code I use for the gallery. Anything you would be able to suggest based on this?
   

 <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
    .mySlides {display:none;}
    </style>
    <body>
    <div class="w3-content w3-display-container">
      <img class="mySlides" src="https://images.com/car.jpg" style="width:100%">
     <img class="mySlides" src="https://images.com/cat.jpg" style="width:100%">
     <img class="mySlides" src="https://images.com/apple.jpg" style="width:100%">
     <img class="mySlides" src="https://images.com/hat.jpg" style="width:100%">
 
      <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"></button>
      <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"></button>
    </div>

    <script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length} ;
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      x[slideIndex-1].style.display = "block";
    }


    var slideIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > x.length) {slideIndex = 1}
      x[slideIndex-1].style.display = "block";
      setTimeout(carousel, 4000); // Change image every 4 seconds
    }
    </script>

    </body>
    </html>

 

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.