Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Css broken - dots not updating

Posted by: Coding fanatic Aug 6 2020, 06:22 AM



I have a manual and automatic slideshow. I have uploaded the project to Glitch. It works in terms of animation, the dots colour turquoise when you click or hover on them but it does not display the active as turquoise when it is cycling though manually.

How do I fix this please? Not sure if it's a css or js issue.


https://glitch.com/edit/#!/join/99788bca-8b50-4e34-a076-eb5585a17b21

Posted by: pandy Aug 6 2020, 10:33 AM

You have a class .active in the CSS, but I don't see it referred to in the HTML or JS.

I think you need to "add" that class with JS, but only for the relevant dot. I got a bit on the way, by adding the three lines marked with comments below.

CODE
  var slideIndex = 0;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot"); /* added line 1 */

  showSlides();

  function showSlides() {
    var i;
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) { slideIndex = 1 }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].classList.add("active");  /* added line 2 */
    setTimeout(showSlides, 5000); // Change image every 5 seconds
  }

  function currentSlide(no) {
    var i;
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slideIndex = no;
    slides[no - 1].style.display = "block";
    dots[slideIndex - 1].classList.add("active");  /* added line 3 */
  }



But with only that, once colored the dot's color of course stays. I thought I could remove it where it shouldn't be in the same way, using...
CODE
dots[slideIndex - 1].classList.remove("active");

... but that messed up the whole thing, I'm afraid. blush.gif

I move this to the JavaScript forum since it is a JS problem. Christian can probably help you. He's much better with JS than I am.

Also, I fiddled with your stuff at glitch. It seems the changes were saved. I didn't know that, haven't used glitch before. I think I've cleaned it up, but you'd better check.

Posted by: pandy Aug 6 2020, 11:50 AM

Jesus christ I'm rusty! dots[i] not dots[slideIndex - 1] should of course be used for the remove part. blush.gif

Now it should fully work (I hope).


CODE

  var slideIndex = 0;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");  /* added line 1 */

  showSlides();

  function showSlides() {
    var i;
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
      dots[i].classList.remove("active"); /* added line 4 */
    }
    slideIndex++;
    if (slideIndex > slides.length) { slideIndex = 1 }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].classList.add("active");  /* added line 2 */
    setTimeout(showSlides, 5000); // Change image every 5 seconds
  }

  function currentSlide(no) {
    var i;
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
      dots[i].classList.remove("active"); /* added line 5 */
    }
    slideIndex = no;
    slides[no - 1].style.display = "block";
    dots[slideIndex - 1].classList.add("active");  /* added line 3 */
  }

  function plusSlides(n) {
    var newslideIndex = slideIndex + n;
    if (newslideIndex < 4 && newslideIndex > 0) {
      currentSlide(newslideIndex);
    }
  }

Posted by: pandy Aug 7 2020, 03:52 PM

Not what you wanted? rolleyes.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)