The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Css broken - dots not updating
Coding fanatic
post Aug 6 2020, 06:22 AM
Post #1





Group: Members
Posts: 1
Joined: 6-August 20
Member No.: 27,477





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.


demo page Glitch
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 6 2020, 10:33 AM
Post #2


Computer says no.
********

Group: WDG Moderators
Posts: 19,186
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 6 2020, 11:50 AM
Post #3


Computer says no.
********

Group: WDG Moderators
Posts: 19,186
Joined: 9-August 06
Member No.: 6



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);
    }
  }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 7 2020, 03:52 PM
Post #4


Computer says no.
********

Group: WDG Moderators
Posts: 19,186
Joined: 9-August 06
Member No.: 6



Not what you wanted? rolleyes.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th October 2020 - 12:33 PM