Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member
    Join Date
    Jul 2007
    Posts
    10
    Member #
    15460
    Hi guys, I need to create a drop down menu that has dependencies. And I have no idea how.

    What I want is:

    Choose A or B (tick boxes?)

    If you choose A, the drop down list is 1.htm, 2.htm or 3.htm. If you choose B, the drop down list is 4.htm, 5.htm , 6.htm.

    So if I select A, the list changes to 1,2,3 and selecting one of those takes me to that page. How do I do that? Thanks in advance!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,732
    Member #
    5580
    Liked
    718 times
    Probably Javascripting, but I would most likely use PHP.
    Or a mixture of PHP and Javascripting.

    Javascripting to detect the selection, and PHP to redisplay the correct list(s).

    Does the "Choose A or B" part need to be instant?
    example, when they click A, it immediately provides drop down list 1,2,3

    Or, do they choose a checkbox and further down, there's a submit button?

    Can you change the extension of your page from .html to .php ?


  4. #3
    Junior Member
    Join Date
    Jul 2007
    Posts
    10
    Member #
    15460
    Thanks for the help.

    I could change the pages to PHP but it would be every page of the site, as this menu is in the corner of each...its probably easier to give you the context! It's for a property search i.e. they choose Sales or Lettings, then the drop down menu changes.

    Select Sales, drop men becomes

    Manchester ---> manchestersales.htm
    Edinburgh ---> edinburghsales.htm

    Select Lettings, drop men becomes

    Manchester ---> manchesterlettings.htm
    Edinburgh ---> edinburghlettings.htm

    The selecting one of tose offices jumps to the page. I am open on how to implement it, I assume the above means it needs to be instant though?

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Through javascript, as I understand it. I'd say pick up a library you're comfortable with, and implement a system to drop down the correct menu depending on which check box is ticked.

    If you've used jQuery, I can help you there. Others are proficient in Mootools and Prototype, should you pick them.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,732
    Member #
    5580
    Liked
    718 times
    Go with all Javascript then, and if you need to, we can move
    this thread to Javascripting ... but it sounds like someone may
    already have a solution that might work for you?


  7. #6
    Junior Member
    Join Date
    Jul 2007
    Posts
    10
    Member #
    15460
    Thanks for the info. I can edit scripts to my needs but not write them....thankfully a friend has put some together for me and I now ammended it to get this:

    http://www.i-agentscorporate.co.uk/newer/

    However...

    1) It does not jump to the pages when you select one, what am I missing?

    2) Is there a way to generate the drop downs with an external source file? So I don't need to change every page, every time I add a new office, just add it to the source file?

    Thanks in advance

  8. #7
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    To make it jump, try something like this:

    Change:
    Code:
    <select name="menu" disabled>
    </select>
    To:
    Code:
    <select name="menu" disabled onChange="location.href=myForm.menu.options[selectedIndex].value">>
    </select>
    ...You can find this kind of code all over, just try a Google search.

    As for your second question, you can put the Javascript (I mean the stuff you have in your head section, not the drop-down box itself) in a separate file, like dynamic_menu.js, and include it like this:

    HTML Code:
    <script type="text/javascript" language="javascript" src="dynamic_menu.js"></script>
    choosy developers choose gif!
    website | paintings | blog

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,732
    Member #
    5580
    Liked
    718 times
    Put all of this part in a file called "selection.js" and upload that file
    into the same directory as your pages.

    Code:
    function loadMenu(intMenu)
    {
        if(intMenu==1)
        {
            myForm.menu.disabled = false;
            document.forms['myForm'].menu.options[0] = new Option('Altrincham','sales/sales-altrincham.htm');
            document.forms['myForm'].menu.options[1] = new Option('Canterbury','sales/sales-canterbury.htm');
            document.forms['myForm'].menu.options[2] = new Option('Nantwich','sales/sales-nantwich.htm');
            document.forms['myForm'].menu.options[3] = new Option('Crowborough','sales/sales-crowborough.htm');
            document.forms['myForm'].menu.options[4] = new Option('Leamington Spa','sales/sales-leamington.htm');
            document.forms['myForm'].menu.options[5] = new Option('Maidstone','sales/sales-maidstone.htm');
    		document.forms['myForm'].menu.options[6] = new Option('Manchester East Central','sales/sales-manchester-ec.htm');
            document.forms['myForm'].menu.options[7] = new Option('Manchester South','sales/sales-manchester-south.htm');
            document.forms['myForm'].menu.options[8] = new Option('Medway','sales/sales-medway.htm');
            document.forms['myForm'].menu.options[9] = new Option('Milton Keynes','sales/sales-miltonkeynes.htm');
            document.forms['myForm'].menu.options[10] = new Option('Muswell Hill','sales/sales-muswellhill.htm');
    		document.forms['myForm'].menu.options[11] = new Option('Nantwich','sales/sales-nantwich.htm');
            document.forms['myForm'].menu.options[12] = new Option('Preston','sales/sales-preston.htm');
            document.forms['myForm'].menu.options[13] = new Option('Ramsgate','sales/sales-ramsgate.htm');
            document.forms['myForm'].menu.options[14] = new Option('Sevenoaks','sales/sales-sevenoaks.htm');
            document.forms['myForm'].menu.options[15] = new Option('Stratford','sales/sales-stratford.htm');
    	    document.forms['myForm'].menu.options[16] = new Option('Sydenham','sales/sales-sydenham.htm');
    		document.forms['myForm'].menu.options[17] = new Option('Tunbridge','sales/sales-tunbridge.htm');
            document.forms['myForm'].menu.options[18] = new Option('Welling','sales/sales-welling.htm');
            document.forms['myForm'].menu.options[19] = new Option('Wirral','sales/sales-wirral.htm');
            document.forms['myForm'].menu.options[20] = new Option('Worcester','sales/sales-worcester.htm');
            document.forms['myForm'].menu.options[21] = new Option('National','sales/sales-national.htm');
        }
        else
        {
            myForm.menu.disabled = false;
            document.forms['myForm'].menu.options[0] = new Option('Altrincham','lettings/lettings/-altrincham.htm');
            document.forms['myForm'].menu.options[1] = new Option('Canterbury','lettings/lettings/-canterbury.htm');
            document.forms['myForm'].menu.options[2] = new Option('Nantwich','lettings/lettings/-nantwich.htm');
            document.forms['myForm'].menu.options[3] = new Option('Crowborough','lettings/lettings/-crowborough.htm');
            document.forms['myForm'].menu.options[4] = new Option('Leamington Spa','lettings/lettings/-leamington.htm');
            document.forms['myForm'].menu.options[5] = new Option('Maidstone','lettings/lettings/-maidstone.htm');
    		document.forms['myForm'].menu.options[6] = new Option('Manchester East Central','lettings/lettings/-manchester-ec.htm');
            document.forms['myForm'].menu.options[7] = new Option('Manchester South','lettings/lettings/-manchester-south.htm');
            document.forms['myForm'].menu.options[8] = new Option('Medway','lettings/lettings/-medway.htm');
            document.forms['myForm'].menu.options[9] = new Option('Milton Keynes','lettings/lettings/-miltonkeynes.htm');
            document.forms['myForm'].menu.options[10] = new Option('Muswell Hill','lettings/lettings/-muswellhill.htm');
    		document.forms['myForm'].menu.options[11] = new Option('Nantwich','lettings/lettings/-nantwich.htm');
            document.forms['myForm'].menu.options[12] = new Option('Preston','lettings/lettings/-preston.htm');
            document.forms['myForm'].menu.options[13] = new Option('Ramsgate','lettings/lettings/-ramsgate.htm');
            document.forms['myForm'].menu.options[14] = new Option('Sevenoaks','lettings/lettings/-sevenoaks.htm');
            document.forms['myForm'].menu.options[15] = new Option('Stratford','lettings/lettings/-stratford.htm');
    	    document.forms['myForm'].menu.options[16] = new Option('Sydenham','lettings/lettings/-sydenham.htm');
    		document.forms['myForm'].menu.options[17] = new Option('Tunbridge','lettings/lettings/-tunbridge.htm');
            document.forms['myForm'].menu.options[18] = new Option('Welling','lettings/lettings/-welling.htm');
            document.forms['myForm'].menu.options[19] = new Option('Wirral','lettings/lettings/-wirral.htm');
            document.forms['myForm'].menu.options[20] = new Option('Worcester','lettings/lettings/-worcester.htm');
            document.forms['myForm'].menu.options[21] = new Option('National','lettings/lettings/-national.htm');
        }
    
    }

    Then remove it from your page existing pages ...

    Then add this line:

    <html>
    <head>
    <title>Welcome to I-Agent UK, a revolutionary new kind of estate agency service offering property sales and lettings</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script src="selection.js" type="text/javascript"></script>
    <style type="text/css">


    Now, you will change "selection.js" to add or delete things and it will automatically
    show up on all of the pages.


    .


  10. #9
    Junior Member
    Join Date
    Jul 2007
    Posts
    10
    Member #
    15460
    You guys are great, thanks so much. Uploaded your changes to the index page and it seems to be working well. However I do have a problem....

    There are 3 sub folders - each contains about 12 pages. As the relative URLs for the jump menus will be different depending on which folder you are in, I am pointing to three different scripts. For example if you are viewing folderA/index.htm, to jump to folderB/index.htm you need to go up one tier. Hence the URL is no longer 'folderB/index/htm' as it was on the home page - it is now ../folderB/index.htm'. Thats right yeah?

    So...I am pointing the code to the scripts folder (which is at the top level), i.e.

    Folder A pages go to <script src="../scripts/folderA.js" type="text/javascript"></script>
    Folder B pages go to <script src="../scripts/folderB.js" type="text/javascript"></script>
    Folder C pages go to <script src="../scripts/folderC.js" type="text/javascript"></script>

    ...and the URLs in the scripts are changed to reflect which folder you are in. But whenever you use the menu on any page in one of these folders, it tries to open that page from within the folder (it isn't there) rather than go up one level then look for it. What am I messing up?

  11. #10
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    In the Javascript that you have in your external file, you define the URL to jump to like this:

    document.forms['myForm'].menu.options[0] = new Option('Altrincham','lettings/lettings/-altrincham.htm');

    So in your subdirectories, it won't have the ../ that it needs. So, I think it would work if instead, you did it like this:

    document.forms['myForm'].menu.options[0] = new Option('Altrincham','/lettings/lettings/-altrincham.htm');

    - Putting a '/' before the URL to tell it to go to the root directory of the site. That way it doesn't matter whether you are in a subdirectory or not.
    choosy developers choose gif!
    website | paintings | blog


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:08 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com