CODEWITHSUNDEEP
jqueryhtml
user4381058
user4381058

Reputation:

jQuery Scroll Next/Previous Div With Image Buttons

I just found this code which allows me to navigate between divs with the same class with just a click on the next/prev buttons instead of scrolling, but the thing is, the buttons are trigged through a specific text and I want to make trigger through classes instead, something like this:

<a href="#" class="nextButton">next</a>
<a href="#" class="prevButton">prev</a>

Although the jquery seems to be trigger the class .display and then checks the text if it is "next" or "prev" here's the jsfiddle and the code below:

$('div.section').first();

$('a.display').on('click', function(e) {
e.preventDefault();

  var t = $(this).text(),
  that = $(this);

if (t === 'next' && $('.current').next('div.section').length > 0) {
    var $next = $('.current').next('.section');
    var top = $next.offset().top;

    $('.current').removeClass('current');     
    $(function () {
           $next.addClass('current');
           $('html, body').animate({scrollTop: $('.current').offset().top }, 'slow');

    });
} else if (t === 'prev' && $('.current').prev('div.section').length > 0) {
    var $prev = $('.current').prev('.section');
    var top = $prev.offset().top;

    $('.current').removeClass('current');

    $(function () {
           $prev.addClass('current');
           $('html, body').animate({scrollTop: $('.current').offset().top }, 'slow');
    });
} 
});

I want to trigger these buttons by classes so I can Exchange it from text to images, to insert images to be the navigator instead the text.

Upvotes: 1

Views: 1367

Answers (2)

vozaldi
vozaldi

Reputation: 97

It's quite simple. The key is on var t = $(this).text(), this var t used as the checker. If var t's value was next, it'll scroll down and also prev will scroll up.

So you just have to give var t value next or prev. Here I declare next and prev as image id.

This is the change of the script var t = $(this).attr('id'). It's mean $(this) refer to a whose clicked with these function. And attr('id') refering to a's id

Now you can add img tag inside a link with id value next and prev

I updated the fiddle http://jsfiddle.net/ufaLefjw/2/

Upvotes: 0

MrPickles
MrPickles

Reputation: 949

the simple way to do this is to add IDs to the <a> tags 

<a href="#" class="nextButton" id="next">next</a>
<a href="#" class="prevButton" id="prev">prev</a>

and then update the var t to like to the IDs 

var t = $(this).attr('id');

pay attention to the if else if as it checks the value of t so whatever you set the IDs to you need to edit the ifs

e.g.

HTML:
<a href="#" id="foo" class="display Next">next1</a><br>
<a href="#" id="bar" class="display Prev">prev2</a>

JS:
var t = $(this).attr('id');
...
if (t === 'foo' && $('.current').next('div.section').length > 0) {
...
} else if (t === 'bar' && $('.current').prev('div.section').length > 0) {
...

Upvotes: 1

Related Questions