YOLOfar Posted May 13, 2020 Share Posted May 13, 2020 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
humxahafeex Posted May 13, 2020 Share Posted May 13, 2020 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
YOLOfar Posted May 13, 2020 Author Share Posted May 13, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.