#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Adelaide
    Posts
    72
    Rep Power
    14

    Javascript drop down menus


    Hi,
    I am trying to make this menu which has a listbox with different options. When you choose an option it automatically displays 2 more listboxes. I have done the first part of creating the listbox and writing a function to get the value selected by the user. But am having some trouble doing to other part which is to display the other 2 listboxes based on what the user chooses.

    Let me give you an example:

    This is actually a conversion calculator. So if I want to convert meters to feet I would first choose "Length" from my main category and once I choose this it will give me 2 listboxes on for meters and the other for feet. In the same way it will do this for other things too.

    Any help will be much appreciated.

    Thank,

    Yoshi
    thats why i'm easy.....easy like sunday morning!
  2. #2
  3. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    25
    Is it not possible to simply give the list boxes IDs and then simply use:

    document.getElementById("[listboxID]").style.visibility = "visible"

    ??
  4. #3
  5. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    yoshi -

    can't exactly tell where you're going with this, but here's something to chew on anyway:

    Code:
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    .abs {position:absolute; visibility:hidden;}
    form{font:400 14px Courier,monospace; border:3px darkred groove; background-color:#fff7d7;}
    select{font:400 14px Courier,monospace; background-color:#fff7d7;}
    input{font:400 14px Courier,monospace;}
    body {font:600 14px Courier,monospace; margin:50px;}
    </style>
    
    <script type="text/javascript" language="JavaScript">
    
    var formLayer = new Array();
    formLayer[0] = '';
    formLayer[1] = '<form name="f1">meters: <select name="s1"><option>10</option>' +
    '<option>20</option><option>30</option><option>40</option><option>50</option></select>' +
    '<br>&amp;nbsp;&amp;nbsp;feet: <select name="s2"><option>10</option><option>20</option>' +
    '<option>30</option><option>40</option><option>50</option></select></form>';
    formLayer[2] = '<form name="f2">&amp;nbsp;liters: <select name="s1"><option>10</option>' +
    '<option>20</option><option>30</option><option>40</option><option>50</option></select>' +
    '<br>gallons: <select name="s2"><option>10</option><option>20</option>' +
    '<option>30</option><option>40</option><option>50</option></select></form>';
    formLayer[3] = '<form name="f3">&amp;nbsp;kilos: <select name="s1"><option>5</option>' +
    '<option>10</option><option>15</option><option>20</option><option>25</option></select>' +
    '<br>pounds: <select name="s2"><option>11</option><option>22</option>' +
    '<option>33</option><option>44</option><option>55</option></select></form>';
    formLayer[4] = '<form name="f4">&amp;nbsp;&amp;nbsp;celsius: <select name="s1"><option>10</option>' +
    '<option>20</option><option>30</option><option>40</option><option>50</option></select>' +
    '<br>farenheit: <select name="s2"><option>10</option><option>20</option>' +
    '<option>30</option><option>40</option><option>50</option></select></form>';
    formLayer[5] = '<form name="f5">&amp;nbsp;pagans: <select name="s1"><option>10</option>' +
    '<option>20</option><option>30</option><option>40</option><option>50</option></select>' +
    '<br>loonies: <select name="s2"><option>10</option><option>20</option>' +
    '<option>30</option><option>40</option><option>50</option></select></form>';
    
    function getCell() {
    var l = document.layers?document.dispOuter.document.dispInner:document.all?
    document.all('disp'):document.getElementById?document.getElementById('disp'):null;
    return l;
    }
    
    function setCell(formLayerNum) {
    var l = getCell(); 
    if (document.layers) {
    l.document.write(formLayer[formLayerNum]);
    l.document.close();
    document.dispOuter.clip.width = l.document.width;
    document.dispOuter.clip.height = l.document.height;
    } else {
    l.innerHTML = formLayer[formLayerNum];
    } 
    } 
    
    </script> 
    </head>
    <body bgcolor="#fcce8e">
    <br><br><br><br><br>
    <table cellspacing="0" cellpadding="3" border="0"><tr><td valign="top">
    <form name="mainform" method="post" action="javascript&#58;alert('nada...')">
    Convert <select onchange="setCell(this.selectedIndex)">
    <option>measures</option>
    <option>lengths</option>
    <option>volume</option>
    <option>weights</option>
    <option>temperatures</option>
    <option>heathen</option>
    </select>
    <input name="text1" type="hidden" value="">
    <input name="text2" type="hidden" value="">
    <input name="text3" type="hidden" value="">
    <input name="text4" type="hidden" value="">
    <input name="text5" type="hidden" value="">
    <input type="submit" value="SEND">
    </form></td>
    <td width="40" valign="top"><br></td>
    <td id="disp" valign="top">
    <ilayer id="dispOuter"><layer id="dispInner">
    </layer></ilayer></td></tr></table>
    </body>
    </html>
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Adelaide
    Posts
    72
    Rep Power
    14
    Thanks Adios I had no idea you replied. Just saw your reply.

    Thanks
    thats why i'm easy.....easy like sunday morning!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Adelaide
    Posts
    72
    Rep Power
    14

    Thumbs up Thanks


    Adios you're a freakin Genius!!

    Yoshi
    thats why i'm easy.....easy like sunday morning!
  10. #6
  11. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    yoshi-san, excellent judge of character....

    wait a bit, just now working on a much more elegant solution -

    rob
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Adelaide
    Posts
    72
    Rep Power
    14
    Dude never mind about that scrolling thing in the IE browser!! I got some other code of the internet that kinda does the same thing but works better.

    You working on that list box thing???

    You're the man!!

    Yoshi
    thats why i'm easy.....easy like sunday morning!
  14. #8
  15. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    I have a serious headache....

    Seemed to me what would be more useful would be a conversion form that allowed text entry of values with simultaneous conversion (to various measures) in another textfield. Sounds easy, huh? Anyway, this is what I've got so far; length conversion is the only one even remotely wired up. I suppose I could just cadge some posted conversion scripts but I'd rather figure it out myself....

    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    .abs {position:absolute; visibility:hidden;}
    form{font:400 14px Courier,monospace; border:3px darkred groove; background-color:#fff7d7;}
    select{font:400 14px Courier,monospace; background-color:#fff7d7;}
    input{font:400 14px Courier,monospace;}
    body {font:600 14px Courier,monospace; margin:50px;}
    </style>

    <script type="text/javascript" language="JavaScript">

    function getKeyVal(code) {
    var OK = '0123456789';
    var key = String.fromCharCode(code);
    return (OK.indexOf(key) != -1) ? key : null;
    }

    function convert(e,convertTo,fromField,toField) {
    if (document.layers && e.which == 8) return true;
    var fieldVal = getKeyVal(document.layers?e.which:e.keyCode);
    if (fieldVal == null) return false;
    fieldVal = (!fromField.value) ? eval(fieldVal) : eval(fromField.value + fieldVal);
    switch (convertTo) {
    case 'feet' :
    toField.value = Math.round(fieldVal*32.8)/10;
    break;
    case 'meters' :
    toField.value = ((fieldVal*.3048) + '').substring(0,((fieldVal*.3048) + '').indexOf('.')+4);
    break;
    }
    }

    var formLayer = new Array();
    formLayer[0] = '';

    formLayer[1] = '<form name="lengths">' +
    'meters: ' +
    '<input name="t1" type="text" size="12" value="" ' +
    'onkeypress="return convert(event,&#92;'feet&#92;',this,this.form.t2)">' +
    '<br>' +
    '&amp;nbsp;&amp;nbsp;feet: ' +
    '<input name="t2" type="text" size="12" value="" ' +
    'onkeypress="return convert(event,&#92;'meters&#92;',this,this.form.t1)">' +
    '<br><div align="right">' +
    '<input type="button" value="clear" onclick="this.form.reset()">' +
    '<input type="button" value="close" onclick="toggleCell();' +
    'self.document.mainform.reset()">' +
    '</div></form>';

    function getCell() {
    var l = document.layers?document.dispOuter.document.dispInner:document.all?
    document.all('disp'):document.getElementById?document.getElementById('disp'):null;
    return l;
    }

    function toggleCell() {
    var l = getCell();
    if (document.layers) {
    l.visibility = (l.visibility == 'show') ? 'hide' : 'show';
    } else {
    l.style.visibility = (l.style.visibility == 'visible') ? 'hidden' : 'visible';
    }
    }

    function setCell(formLayerNum) {
    if (formLayerNum>1) return; //just temporary!
    var l = getCell();
    if (document.layers) {
    l.document.write(formLayer[formLayerNum]);
    l.document.close();
    document.dispOuter.clip.width = l.document.width;
    document.dispOuter.clip.height = l.document.height;
    } else {
    l.innerHTML = formLayer[formLayerNum];
    }
    toggleCell();
    }

    </script>
    </head>
    <body bgcolor="#fcce8e">
    <br><br><br><br><br>
    <table cellspacing="0" cellpadding="10" border="0"><tr height="100"><td valign="top">
    <form name="mainform" method="post" action="javascript&#58alert('nada...')">
    Convert <select onchange="setCell(this.selectedIndex)">
    <option>measures</option>
    <option>lengths</option>
    <option>volume</option>
    <option>weights</option>
    <option>temperatures</option>
    <option>heathen</option>
    </select>
    </form></td>
    <td width="40" valign="top"><br></td>
    <td id="disp" valign="top" style="visibility:hidden;">
    <ilayer id="dispOuter"><layer id="dispInner" visibility="hide">
    </layer></ilayer></td></tr></table>
    </body>
    </html>
    Last edited by adios; November 7th, 2001 at 02:11 AM.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Adelaide
    Posts
    72
    Rep Power
    14
    How the heck do you come with stuff like this???
    thats why i'm easy.....easy like sunday morning!
  18. #10
  19. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    toomuchcoffee

IMN logo majestic logo threadwatch logo seochat tools logo