...

View Full Version : Next and Prev buttons using a drop box



Alex Piotto
03-02-2003, 04:59 PM
Hi,
I wrote this frameset menu with next and previouws arrow buttons, combined with a drop down menu box.

Everything seems to works fine, but I have a problem fixing the "sides" of the arrow buttons... :(

...to understand what I mean, look here

http://piotto.f2g.net/test_menu_bar/index.html

and click the previous arrow button while you are in the first page, or click the next arrow button while you are in the last (10th) page and you will see... obviously an error pops up.

How can I fix that?

I would like to send the users to a credit page that will cover the screen (top frame) if they click the next button from the last page (10th) and I would like nothing happend if they try to go back from the first page... :)

Any help will be wonderful!

Alex

x_goose_x
03-02-2003, 05:57 PM
Try:


<script>

function surfnext() {
var myindex=select1.selectedIndex
if (myindex != select1.options.length) {
myiframe.location=select1.options[myindex+1].value;
select1.selectedIndex = myindex+1;}
}

function surfprev() {
var myindex=select1.selectedIndex
if (myindex != "0") {
myiframe.location=select1.options[myindex-1].value;
select1.selectedIndex = myindex-1;}
}

</SCRIPT>

Alex Piotto
03-02-2003, 06:05 PM
Hi x_goose_x
thank you for answer :)
Your code works for the previous button from page 1, but still get an error after the last page :(

where is the problem?

Alex

x_goose_x
03-02-2003, 06:14 PM
I didn't test it at all I just wrote it quickly, but the idea is right, try to do a little debugging.



function surfnext() {
var myindex=select1.selectedIndex;
var len = select1.options.length;
alert("if "+myindex+" equals "+len+", click disabled.")
if (myindex != len) {
myiframe.location=select1.options[myindex+1].value;
select1.selectedIndex = myindex+1;}
}


go to the last page and see what pops up. Your goal is to get them to be equal on the last page. Play around with the line:

var len = select1.options.length;

by adding/subtracting 1 till you get a match.

Alex Piotto
03-02-2003, 06:17 PM
Thanks again!
I'll work out this right now... :)
Alex

Alex Piotto
03-02-2003, 06:37 PM
FOR EVERYBODY!
here is the final code :)
May be is useful for someone...
-----------------------------------------
<html>

<head>
<script>
function surfto() {
var myindex=select1.selectedIndex
if (select1.options[myindex].value != "0") {
myiframe.location=select1.options[myindex].value;
myiframe.focus();}
}

function surfnext() {
var myindex=select1.selectedIndex;
var len = select1.options.length-1;
//alert("if "+myindex+" equals "+len+", click disabled.")
if (myindex != len) {
myiframe.location=select1.options[myindex+1].value;
select1.selectedIndex = myindex+1;}
}

function surfprev() {
var myindex=select1.selectedIndex
if (myindex != "0") {
myiframe.location=select1.options[myindex-1].value;
select1.selectedIndex = myindex-1;}
}

</SCRIPT>

<title>Website</title>
</head>

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">

<div align="center"><table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%">
<tr><td width="100%" height="100%">

<iframe name="myiframe" src="testpage1.html" marginwidth="5" marginheight="5" frameborder="0" scrolling="auto" height="100%" width="100%"></iframe>

</td></tr>
<tr><td width="100%" height="28" bgcolor="#E7E7E7" style="border-top: 2 solid #000000">

<div align="center"><table border="0" cellspacing="0" cellpadding="0" bgcolor="#E7E7E7" height="28" >
<tr><td>
<p style="margin-left: 5; margin-right: 2; margin-top: 4">
<img name="prev" border="0" src="images/arrow_reverse.gif" width="16" height="16" onfocus="blur()" onclick="surfprev()" onmouseover="document.prev.src='images/arrow_reverse_red.gif'" onmouseout="document.prev.src='images/arrow_reverse.gif'">
</td>
<td>
<p align="center" style="margin-top: 2">

<select size="1" name="select1" onChange="surfto()" style="font-family: Verdana; font-size: 10 px">
<option value="testpage1.html">Test Page 1</option>
<option value="testpage2.html">Test Page 2</option>
<option value="testpage3.html">Test Page 3</option>
<option value="testpage4.html">Test Page 4</option>
<option value="testpage5.html">Test Page 5</option>
<option value="testpage6.html">Test Page 6</option>
<option value="testpage7.html">Test Page 7</option>
<option value="testpage8.html">Test Page 8</option>
<option value="testpage9.html">Test Page 9</option>
<option value="testpage10.html">Test Page 10</option>
</select>

</td>
<td><p style="margin-right: 5; margin-top: 4">
<img name="next" border="0" src="images/arrow.gif" width="16" height="16" onfocus="blur()" onclick="surfnext()" onmouseover="document.next.src='images/arrow_red.gif'" onmouseout="document.next.src='images/arrow.gif'">
</td></tr></table></div></td></tr></table></div>
</body>
</html>

------------------------------------------

For this to works, we need 4 images for the arrows (for the onmouseover function) and all the pages called from the links.

If we don't want the scroll br of the main page, we put the page inside a frameset (with only one frame) and adjust the frame proporties accordly

Alex



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum