CODEWITHSUNDEEP
javascriptjquery
AspiringCanadian
AspiringCanadian

Reputation: 1665

Keep variable's value constant when used in two functions

The project I am working on is a single page website :

http://50.87.144.37/~projtest/team/design/yellowmedia/

There are two things, first, the left and right arrow and then the navigation on the right side of these arrows (please visit the link if it is not clear). The right arrow and left arrow are controlled by .click() and the navigation is controlled by the function navClick(). Variable 'currentPage' is the variable that controls/gathers what page the user is on. Now, both of these functions work just fine individually, but suppose, you click on any navigation icon, the currentPage variable remains zero, what I want to do is to pass its value so that the right/left arrows get the value, so that these two functionalities could work together. If the user clicks on suppose, 3rd navigation icon, the currentPage should become 2 and so on.

You can test this 'bug' by click on the last navigation icon which will show an image of the map, after that, click on the right arrow icon for 6 times, which will make deactivate it. What is happening is, that the currentPage is being increased from 0 to 6 when you are clicking, whereas it should have been 6 when the 6th navigation icon was clicked.

On page 1: currentPage = 0
On page 2: currentPage = 1
On page 3: currentPage = 2
On page 4: currentPage = 3
On page 5: currentPage = 4
On page 6: currentPage = 5

var currentPage = 0;

$(document).ready( function() {

navclick();

$('.rightArrow').stop().click(function () {
currentPage++;

if(currentPage > $(".section").length - 1){
   currentPage = $(".section").length - 1;
}

$('.section').eq(currentPage-1).animate({
    left: '-100%'
}, 200);
$('.section').eq(currentPage).animate({
    left: '0%'
}, 200);
$('.section').eq(currentPage-1).animate({
    left: '-100%'
}, 200);}

});

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

currentPage--;

if(currentPage < 0){
   currentPage = 0;
   $('.leftArrow').removeClass('leftArrow').addClass('leftDeactive');
}


$('.section').eq(currentPage+1).animate({
    left: '-100%'
},  200);
$('.section').eq(currentPage).animate({
    left: '0%'
},  200);

$('.section').eq(currentPage+1).animate({
    left: '-100%'
},  200);

});

}

function navclick(){

var a=2;
$('.clickNav').click(function(){
var targetId = $(this).attr('href');

$(targetId).animate({
    left: '0%'
},  500);

$(targetId).siblings('.section').animate({
    left: '-100%'
},  500);

$(targetId).css('z-index',a);
a = a+1;



if(currentPage>5){
    currentPage=5;
    } else if(targetId =="#section-5"){
    currentPage = 6;
    }
});
}

Upvotes: 0

Views: 118

Answers (1)

EdenSource
EdenSource

Reputation: 3387

try to update your variable each time you click a nav button :

function navclick(){

var a=2;
$('.clickNav').click(function(){
var targetId = $(this).attr('href');
currentPage = targetId.substring(9);   //Get your new page without string "section-"

$(targetId).animate({
    left: '0%'
},  500);

You could also try something like this. I think it's more simple and optimized (even if it should be lways more optimized): http://jsfiddle.net/3TxjF/3/

Upvotes: 1

Related Questions