I have created a webpage which when you press 'down' automatically scrolls down
to the next ID (a section which isn't visible due
to overflow: hidden) When you press 'up' it scrolls back up.
At the moment each arrow simply tells the webpage
to go
to a specific div e.g. the 'down arrow' says
<a class="tab" href="#page2">Down</a>
This is ok for just two pages however as I will be having more pages what I would like is
to be able
to specify the amount of pages and for the arrows
to automatically change which link it needs
to go
to next.
For example, on page 1 the 'up arrow' is not visible and when you press the 'down arrow' it scrolls
to #page2 whereupon the 'up arrow' is then visible. If you now press the down arrow again it will take you
to #page3 whereupon it then becomes hidden as page 3 is the last page.
I'm guessing I need
to create a 'var' which specifies the amount of pages and that
to make the arrows invisible it will change the css property 'display'
to none yet I don't know how
to do this nor
to make the links work out which
number to go
to next!
edit:
Just botched together some code which hides the arrows based on the page
number however still need
to work out how
to update the variables and change the links the arrows go
to.
(please exclude the coding, it's my first time trying
to write script as opposed
to just editing plugins!)
var PageNumber = 1;
var PageAmount = 2;
function getPageNumber() {
}
function hideUpArrow() {
if(PageNumber==1) {
$("#up_arrow").css({
"display": "none"
});
}
}
function hideDownArrow() {
if(PageNumber==PageAmount) {
$("#down_arrow").css({
"display": "none"
});
}
}
$(document).ready(function(){
hideUpArrow();
});
