here is the basic gist of what I am trying to do, once i get this working ill worry about database calls and such
the menu on the right, I want to dispaly 4 menu items and an up and down arrow
when clicking up
onload you see 1-4
click up arrow, you see 2-5, click again you see 3-6
click down arrow you are back to 2-5, etc
seems to work, but in the lowest function the var i seems to keep resetting.. I assume i have it in the wrong spot or something.. but my thinking was that if the page didnt reload then the i++ and i-- result would stick no matter where it is, guess i am wrong... can someone finish this off for me (maybe throw in an if i=1 it cant go to 0, if i=6 (or whatever i set the max items to) it cant go above?
<div>
<div id="thumbs" style="float:left; width: 135px;">
<a href="javascript:void(0)" onclick="changeThumb('up'); return false;">^ up ^</a><br />
<a id="1" href="javascript:void(0)" onclick="changeDesc('1a'); return false;">1</a><br />
<a id="2" href="javascript:void(0)" onclick="changeDesc('2a'); return false;">2</a><br />
<a id="3" href="javascript:void(0)" onclick="changeDesc('3a'); return false;">3</a><br />
<a id="4" href="javascript:void(0)" onclick="changeDesc('4a'); return false;">4</a><br />
<a id="5" href="javascript:void(0)" onclick="changeDesc('5a'); return false;">5</a><br />
<a id="6" href="javascript:void(0)" onclick="changeDesc('6a'); return false;">6</a><br />
<a href="javascript:void(0)" onclick="changeThumb('down'); return false;">v dn v</a><br />
</div>
<div id="special" style="float:left; border: 1px solid #000; width: 500px; height: 400px;">
</div>
</div>
<script type="text/javascript" language="javascript">
function changeDesc(desc){
var obj = document.getElementById("special");
if (desc == '0'){
obj.innerHTML=""
}
else if (desc == '1a'){
obj.innerHTML='<p>line 1.1</p>'
obj.innerHTML+='<p>line 1.2</p>'
obj.innerHTML+='<p>line 1.3</p>'
}
else if (desc == '2a'){
obj.innerHTML='<p>line 2.1</p>'
obj.innerHTML+='<p>line 2.2</p>'
obj.innerHTML+='<p>line 2.3</p>'
}
else if (desc == '3a'){
obj.innerHTML='<p>line 3.1</p>'
obj.innerHTML+='<p>line 3.2</p>'
obj.innerHTML+='<p>line 3.3</p>'
}
else if (desc == '4a'){
obj.innerHTML='<p>line 4.1</p>'
obj.innerHTML+='<p>line 4.2</p>'
obj.innerHTML+='<p>line 4.3</p>'
}
else if (desc == '5a'){
obj.innerHTML='<p>line 5.1</p>'
obj.innerHTML+='<p>line 5.2</p>'
obj.innerHTML+='<p>line 5.3</p>'
}
else if (desc == '6a'){
obj.innerHTML='<p>line 6.1</p>'
obj.innerHTML+='<p>line 6.2</p>'
obj.innerHTML+='<p>line 6.3</p>'
}
else{
obj.innerHTML = "";
}
}
function doHide(elementId) {
document.getElementById(elementId).style.display = "none";
}
function doShow(elementId) {
document.getElementById(elementId).style.display = "block";
}
function changeThumb(thmb){
var i = 1;
var obj = document.getElementById("thumbs");
if (thmb == 'up'){
doHide(i);
doShow(i+4);
i++;
}
else{
doHide(i+3);
doShow(i--);
i--;
}
}
</script>
