Question

I’ve this jsfiddle here and it work fine as expected:
http://jsfiddle.net/fdjQs/1/

Then I’ve tried to adjust the height size as below:

 #wrapper {width:320px;height:480px;background-color:#eee}
 #pageWrapper {width:320px;height:440px;overflow:hidden;position:relative}
 #pages {width:320px;height:1320px;background-color:#fed;position:absolute}
 #nav {width:320px;height:40px}
 div.pageDiv {width:320px;height:440px}
 #page2 {background-color:#666666}
 #page3 {background-color:#999999}
 #pagesNav {display:none}

It goes funny and it doesn’t look like what is should look of a working result (BUT, with a corrected height size as above) http://jsfiddle.net/fdjQs/1/

UPDATE:

Overall size 320px width x 480px height

nav (top) 320px width x 40px height

content 320px x 440px height

Can anyone enlighten?

Answer 1

The onclick handler onclick="movePage(250,2);" for each link in the HTML passes a y value which needs to be modified, too.

<a href="javascript:void(0)" onclick="movePage(440,2);">Page 2</a>
<a href="javascript:void(0)" onclick="movePage(880,2);">Page 3</a>