SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Pennsylvania
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pull down menu problem

    The options in one of my pull down menus link to other sections of the same
    page. I've noticed that selecting one of these links opens a new instance of
    the entire page instead of just scrolling down to the appropriate section.
    How can I make the menu do what I want?

    <form name="f1">
    <select name="s1" class="hnhjumpbox">
    <option value="#">See our Policies...</option>
    <option value="#">----------</option>
    <option value="#service">Service</option>
    <option value="#payment">Payment</option>
    <option value="#packing">Packing</option>
    <option value="#shipping">Shipping</option>
    <option value="#returns">Returns</option>
    </select>&nbsp;<input type="button" name="test" class="hnhjumpboxbutton"
    value="Go" title="Select a link from the drop-down menu first!"
    onClick="location=document.f1.s1.options[document.f1.s1.selectedIndex].value
    ;"></form>

    For instance, I have an anchor at the Payment section. When I select the
    Payment link from the pull down menu, a new instance of the page opens and
    then jumps down to the Payment section. I want it to jump down to the
    payment section without opening a new page.

    Thanks!

  2. #2
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of just using location=URL, use the following on your button's Click event:

    PHP Code:
    location.replace(document.f1.s1.options[document.f1.s1.selectedIndex].value); 
    That causes the document to jump to the selected option without reloading the page.
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Pennsylvania
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. I appreciate it!

    Another question: when using your code, is it necessary to include a <script> tag somewhere on the page, or can the code be used without it?

  4. #4
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Pennsylvania
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pip - tried your code, and it works 50/50. It doesn't reload the page, which is good, but it also doesn't recognize the anchors.

    For example, when I click on the Payment link -

    <option value="#payment">Payment</option>

    it jumps to the top of the page, not to the #payment anchor.

    Can that be fixed?

  5. #5
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tested it in both IE and FireFox. It worked perfectly fine on both.

    How do you name your acnhors?

    PHP Code:
    <A NAME="payment"></A
    Alternatively, and unless you're using a different browser to the two mentioned above, copy and paste your code here so that I can see if there's maybe something else going on.

    As for the script tag question, when you put something like the location.replace statement into any event attribute of any tag, it's already seen as a script, since event functionality in HTML is generally programmed in a scripting language such as JavaScript, and not in HTML. You can either call a function defined within SCRIPT tags or just execute a one line statement, like the code below.
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.


Bookmarks

Posting Permissions

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