Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    Maputo, Mozambique
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Next and Prev buttons using a drop box

    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
    "COGITO, ERGO SUM"

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try:
    Code:
    <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>

  • #3
    New Coder
    Join Date
    Jun 2002
    Location
    Maputo, Mozambique
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "COGITO, ERGO SUM"

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't test it at all I just wrote it quickly, but the idea is right, try to do a little debugging.

    Code:
    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.

  • #5
    New Coder
    Join Date
    Jun 2002
    Location
    Maputo, Mozambique
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again!
    I'll work out this right now...
    Alex
    "COGITO, ERGO SUM"

  • #6
    New Coder
    Join Date
    Jun 2002
    Location
    Maputo, Mozambique
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    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
    "COGITO, ERGO SUM"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •