Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Conflicting code blocks


YOLOfar

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0
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 post
  • 0

 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 post

Create an account or sign in to comment

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


×
×
  • Create New...