Skip to main content
Deaf_Guy
Deaf_Guy
Inspiring
August 15, 2017
Answered

Strange JS behavior - any assistance appreciated?

  • August 15, 2017
  • 3 replies
  • 1317 views

I have a nice little slideshow I got and added to my site.  I'm sorry I cannot post the links to it here as it's a private site.  Anyway, here is the code that makes it work:

<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.style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>

There is the strangest thing.  When I use the code above and the CSS and HTML it works great.  The slider does not work automatically; you have to click on the left or right arrows to advance it manually, which is what I want.  But then when I take the same code and integrate it into a SharePoint page, everything works except one thing...

When you click the arrows on it,  it advances but then in 1 or 2 seconds, it bounces back to the first slide.  It's almost as if it suddenly has a mind of its own.  Outside of SharePoint and it does not do this at all.

By looking at the JS can anyone see where I could tweak that code so it will not bounce back like it is - even though it does NOT bounce back when it's not in SP?  Weird, I know but am just hoping someone can help me.

Thanks.

    This topic has been closed for replies.
    Correct answer osgood_

    Ebay - thank you and I know this is going to sound outrageous but can you please tell me what you mean by "changing a function name?" Maybe even a tiny example of what you mean? Thank you.


    Change the function names from 'showDivs' to 'show' and 'plusDivs' to 'prevNext':

    <script>

    var slideIndex = 1;

    show(slideIndex);

    function prevNext(n) {

    show(slideIndex += n);

    }

    function show(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.style.display = "none";

      }

      x[slideIndex-1].style.display = "block";

    }

    </script>

    Then change the onclick events to reflect the new function name:

    <button class="w3-button w3-light-grey" onclick="prevNext(-1)">❮ Prev</button>

        <button class="w3-button w3-light-grey" onclick="prevNext(1)">Next ❯</button>

    3 replies

    Deaf_Guy
    Deaf_GuyAuthor
    Inspiring
    August 15, 2017

    This is a really tough one and I think you're all right - I think there is a conflict with SP somwehere because when I host HTML, CCC, and JS files on just the server it works perfectly.  Then when I try to integrate everything into SP everything EXCEPT that weird bounce back to the previous slide occurs after clicking on the advance button. I'm going to try to see if that other W3 link at the top bounces back too and maybe I will get lucky and it won't.

    E
    EbaySeller
    Inspiring
    August 16, 2017

    Try naming your functions to something different. SP might be using the same function names for something else that's conflicting with your function.

    Deaf_Guy
    Deaf_GuyAuthor
    Inspiring
    August 16, 2017

    Ebay - thank you and I know this is going to sound outrageous but can you please tell me what you mean by "changing a function name?" Maybe even a tiny example of what you mean? Thank you.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 15, 2017

    I'm not familiar with Sharepoint as I don't use it.  But is there any chance the Sharepoint site is refreshing the page load at regular intervals?

    Nancy

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    August 15, 2017

    That script looks similar to the one found at the link below, maybe try it and see if it makes any difference.

    Tryit Editor v3.5

    Your script doesnt have the below included:

    function currentDiv(n) {

      showDivs(slideIndex = n);

    }

    EDITED.........

    Actually it's exactly the same as you don't need the above function, that is only for the numbers in that example.

    Do you have the onclick functions correct on your buttons:

    <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>

    <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>

    E
    EbaySeller
    Inspiring
    August 15, 2017

    It would appear that the click event is being triggered given the fact that OP mentioned that when they click the slide advances. I speculate that SharePoint, the apparent contributing factor to the issue at hand, is the culprit in some regard. Perhaps SP is using a same function method that is conflicting with the OP's slide script?

    One can not know for sure without seeing all of the code involved since it's a private site? Not sure what private means. If it's really private it should be locked down with server authentication. Otherwise it's not private, just obscured. That's another topic of discussion though that I'm sure someone like Patrick Bateman would be happy to discuss.

    OP might get better results asking in a forum that is focused on SharePoint discussions.

    O
    osgood_
    Legend
    August 15, 2017

    EbaySeller  wrote

    I speculate that SharePoint, the apparent contributing factor to the issue at hand, is the culprit in some regard.

    OP might get better results asking in a forum that is focused on SharePoint discussions.

    I would agree with that.......some kind of conflict going on. Find another script and test that or post in a SharePoint discussion orientated forum for further advice....

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices