Prev/next function is not working properly


#1

Hi, I have question on the prev/next function.

On our website www.yart.be/publiek/#artist the previous and next function is not working properly. It jumps from the 1st to the 3rd item. When I open the html on my computer it’s working like it should and jumps from 1st to 2nd and back. I already re-uploaded everything through FileZilla and through the server One.com but it doesn’t change anything.

Our website-builder is hiking for 5 months in the middle of nowhere, so I was wandering how I can solve this prev/next problem? Is it the javascript-file that doesn’t work properly? Or could it also be the html? Can someone help me on this. I know some basics but don’t have any idea what can possible be wrong…

The javascript is code is slider.js

var aIndex = 0;

$(document).ready(function() {

// Scroll to selected artist
$(’.s1’).click(function() { scrollToAnchor(’#artist’); showArtist(0); aIndex = 0; });
$(’.s2’).click(function() { scrollToAnchor(’#artist’); showArtist(1); aIndex = 1; });
$(’.s3’).click(function() { scrollToAnchor(’#artist’); showArtist(2); aIndex = 2; });
$(’.s4’).click(function() { scrollToAnchor(’#artist’); showArtist(3); aIndex = 3; });
$(’.s5’).click(function() { scrollToAnchor(’#artist’); showArtist(4); aIndex = 4; });
$(’.s6’).click(function() { scrollToAnchor(’#artist’); showArtist(5); aIndex = 5; });

// artist slider
var numItems = $(’.artist’).length;
showArtist(0);

$(’#prev’).click(function() {
aIndex–;
if(aIndex < 0)
aIndex = numItems-1;
showArtist(aIndex);
});

$(’#next’).click(function() {
aIndex++;
if(aIndex >= numItems)
aIndex = 0;
showArtist(aIndex);
});
});

// artist fader
function showArtist(index) {
$(’.artist’).each(function() {
$(this).fadeOut(100);
});
$(’.artist’).each(function(i) {
if(i==index)
$(this).delay(120).fadeIn(100);
});
}


#2

When code begins to look like this it suggests a parent-child relationship. That means only one listener is needed for the entire group.

<ul id="artists">

</ul>

At run time, cache this element node. It will remain in memory for the full session. What’s more, it can be dynamically updated. Added elements come with listeners since all events bubble up to the parent.

const artists = document.querySelector('#artists');

The only thing that needs to happen at load time is to register the event listener on the parent element.

function main() {
    artists.on('click', 'li', callback);
}

The object in scope will be the child-element that is clicked. That makes it, this.

function callback() {
    scrollToAnchor(this.attr('class'));
    showArtist(this.attr('aIndex'));
}

Obvious will it be that there is an intentional error, but you should get the gist of the methodology. This whole process is known as delegation.

We can only use an id on one element. It won’t throw any errors if we break this rule, but it will screw with your scripts, you can be sure of that. To use the scroll function as given above, each element needs a unique id attribute; i.e., `id=“s1”, id=“s2”, &c. Then,

scrollToAnchor(`#${this.attr('id')}`);

Note:

Without seeing your HTML all the above is simply example code. It would be easier to model if we saw the document it is binding to.


#3

The scrolling function works perfectly. It’s only the when clicking on PREV or NEXT that it jumps from the 1st to the 3rd artist. That’s why I thought it has something to do with the javascript? So but if I understood your answer, working with a different ‘id=…’ for each artist would be better, then with and aIndex?

This is the html code of the header:

YART
publiek - platform

 Kunst in de publieke ruimte

<ul id='largemenu'>
  <li><a name='#info' href='#info' class='active'>info</a></li>
  <li><a name='#program' href='#program'>program</a></li>
  <li><a name='#artist' href='#artist'>artists</a></li>
  <li><a name='#gallery' href='#gallery'>gallery</a></li>
  <li class='editions'>
    <img src='../icon/back-icon.png'/>
    <ul>
      <li><a href='../2017/'>2017</a></li>
      <li><a href='../2016/'>2016</a></li>
    </ul>
  </li>
</ul>

<nav role="navigation">
  <div id="menuToggle">
    <input type="checkbox" />
    <span></span>
    <span></span>
    <span></span>
    <ul id="menu">
      <a name='#info' href="#info"><li>info</li></a>
      <a name='#program' href="#program"><li>program</li></a>
      <a name='#artist' href="#artist"><li>artists</li></a>
      <a name='#gallery' href="#gallery"><li>gallery</li></a>
    </ul>
  </div>
</nav>

And the code of the section #artists:

<div class='controls'>
  <div id="prev"><img src='../icon/left-arrow.png'/>previous</div><div id="next">next<img src='../icon/right-arrow.png'/></div>
</div>

<div class='slider'>

  <div class='artist'>
    <div class='column'>
      <div class='image'><h1>Elias Cafmeyer</h1><img src='thumb/01-Elias- Cafmeyer.jpg'/><a href='http://www.eliascafmeyer.com' target='_new'>www.eliascafmeyer.com</a></div>
    </div>
    <div class='column'>
      <div class='description'>
      <p>Elias Cafmeyer (1990) graduated in ...</p></div>
    </div>
  </div>
    
  <div class='artist'>
    <div class='column'>
      <div class='image'><h1>Eva Dinneweth</h1><img src='thumb/02-Eva-Dinneweth.jpg'/><a href='http://evadinneweth.tk' target='_new'>evadinneweth.tk</a></div>
    </div>
    <div class='column'>
      <div class='description'>
      <p>Eva (1995) graduated in 2017 from ...</p></div>
    </div>
  </div>
    
  <div class='artist'>
    <div class='column'>
      <div class='image'><h1>Karl Philips</h1><img src='thumb/03-Karl-Philips.jpg'/><a href='http://www.karlphilips.org' target='_new'>www.karlphilips.org</a></div>
    </div>
    <div class='column'>
      <div class='description'>
      <p>From 2011 onwards, Belgian artist Karl Philips (1984) ...</p></div>
    </div>
  </div>
  
  <div class='artist'>
    <div class='column'>
      <div class='image'><h1>Jòhanna Kristbjorg</h1><img src='thumb/04-Johanna-Kristbjorg.jpg'/><a href='http://cargocollective.com/johannakristbjorg' target='_new'>cargocollective.com/johannakristbjorg</a></div>
    </div>
    <div class='column'>
      <div class='description'>
      <p>Jóhanna Kristbjorg (1982) work is best ...</p></div>
    </div>
  </div>
    
  <div class='artist'>
    <div class='column'>
      <div class='image'><h1>Johannes Langkamp - Marc Claeijs</h1><img src='thumb/05-Johannes-Langkamp.jpg'/><a href='http://www.joway.eu' target='_new'>www.joway.eu</a></div>
    </div>
    <div class='column'>
      <div class='description'>
      <p>The work of Johannes Langkamp (1985) is ...</p></div>
    </div>
  </div>

  <div class='artist'>
    <div class='column'>
      <div class='image'><h1>Nel Bonte</h1><img src='thumb/06-Nel-Bonte.jpg'/><a href='http://www.nelbonte.com' target='_new'>www.nelbonte.com</a></div>
    </div>
    <div class='column'>
      <div class='description'>
      <p>Nel Bonte (1984) her work ...</p></div>
    </div>
  </div>
</div>

#4

That is a subjective question that can only have a subjective answer. Less is often better, simple is often better. It comes down to how the document is structured and what behaviors we wish to give it. When we have a group of elements all with something (or a lot) in common, then grouping them in terms of assigning a listener IS better than having a listener on each item.

Once we have a parent container, no id’s or class’s are needed as we can traverse the siblings and their common structures.

For instance,

<div class="slider" id="artists">

  <div> <!-- direct child element -->
    <div>
      <div><h1></h1><a><img>www.eliascafmeyer.com</a></div>
    </div>
  </div>
  <div>
    <div>
      <p></p>
    </div>
  </div>
    
  . . .

</div>

We can hook the direct children in our delegation…

artists.on(`click`, `artists > div`, callback);

and then traverse on this.

The above structure is a bit complex, but that can be more to do with styling than behavior.