2

I am building a website with pages that are displayed as a slider. Each page has a unique ID, but all have a class named 'section'. Now what I cant seem to do is, finding the ID of the div which is being displayed on screen, the ID of "CURRENT PAGE" (see the image attached). The next/right button would horizontally scroll the website to the right and prev/left button would scroll website to the left.

Website/screen layout:
Website/screen layout

Fiddle 1

Fiddle 2

Fiddle one has next/prev button inside every div but I want to control the motion of the divs with one set of next and prev buttons.

This is the Javascript I'm using for the Prev/next buttons:

$('.next').stop().click(function () {

    if($(this).closest('.checkout').next().css('display') == 'none'){ 
        alert('a');
    }else{
        $(this).parent().animate({
            marginLeft: '-100%'
        }, 500);
        $(this).parent().next().animate({
            marginLeft: '0%'
        }, 500);
        $(this).parent().animate({
            marginLeft: '-100%'
        }, 500);
    }

});

$('.prev').click(function () {

    $(this).stop().parent().animate({
        marginLeft: '0%'
    },  500);
    $(this).stop().parent().prev().animate({
        marginLeft: '0%'
    },  500);

    $(this).stop().parent().animate({
        marginLeft: '0%'
    },  500);

});
1
  • 1
    Maybe you could add an empty class to the active screen. And use that to find the next and previous screens... Sep 5, 2013 at 10:09

2 Answers 2

3

Method 1

How about looping over your checkout divs and checking which is the first one to have margin-left: 0px; ?

function getCurrentPage(){
   var current = "";
   $.each($(".checkout"), function(){
      if($(this).css("margin-left") == "0px"){
          current = this.id;
          return false;
      }
   });
   return current;
}

Fiddle 1: http://jsfiddle.net/rSuc6/3/

Fiddle 2: http://jsfiddle.net/SxBZx/3/

Method 2

Working further on Barthosz's answer, you can also use a global variable to keep track of your page:

Fiddle: http://jsfiddle.net/SxBZx/5/

Method 3

You can also work with an active class.

On each next / prev click:

//remove current active
$(".active").removeClass("active");
//set new current to active
$(this).addClass("active");
//retrieve ID of active
$(".active").attr("id");
7
  • Thanks for that, now I need to do this with only one set of next/prev button. Currently, each div is having next/prev in it. Did you visit my project link? You will get an idea from that. The next and prev buttons are at the bottom in the navigation, they cannot be included on every page, but only in the navigation so $(this).parent wont work in this. Sep 5, 2013 at 10:23
  • Updated my answer with more methods. As for your buttons, simply create a single #prev and #next div, and position them absolutely over your container. Their positions should not be animated. Sep 5, 2013 at 10:24
  • This is a responsive design, I would rather not position absolute the buttons, or else I am sure client will find device(s) that wont show the buttons correctly. :/ Sep 5, 2013 at 10:25
  • You can position them absolutely and responsive. Set your container to position: relative; and position your buttons for example left: 50px; and right: 50px; Sep 5, 2013 at 10:27
  • You mean position:relative? Sep 5, 2013 at 10:28
1

Simplest way (for me):

add this to your html to see result:

<span id="whichid"></span>

add this in front of your js

var page=0;

inside your if statements add:

page=page+1;
$('#whichid').text(page);

for next page and:

page=page-1;
$('#whichid').text(page);

for previous page.

You can use :nthoftype or :child or some similar selector to get your page id.

1
  • Adding a global jQuery variable would work better than a hidden element. Sep 5, 2013 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.