JavaScript - Create A Linkable List From Another List With Js
Similar Tutorials09-01-10 Not sure exactly where to post this thread as it involves HTML, Javascript and embedded media players. It probably would be more appropriate here as there is much Javascript involved.... Hello, I am trying to construct a Jukebox for my website. I have spent considerable time all over the WEB and at this forum which addressed the issue in a 50 page thread. Please see: http://codingforums.com/showthread.php?t=50666 I got a lot of ideas from this thread but still cannot figure a way to do the following within the Jukebox. These are my main two questions for everything below: 1. How can I have the Jukebox cycle through all tunes and then start over from the beginning? 2. How can I allow the user to select a tune from a list but not a drop down list, have the Jukebox start from the user’s selection and then play all songs to the end. Then as in #1, start over from the beginning? Per this thread I came away with basically two ways to assemble the jukebox. One uses links in a drop down list which the user can choose from. The other is to use an .m3u playlist. The user can only select a “playlist” from the drop down. Below, I have included the code for each Jukebox. To see the Jukeboxes in action please go to my website where I have posted some test pages exhibiting the jukeboxes that I am referring to. The following is the Jukebox which utilizes an .m3u playlist. If I end up using this idea I would like the tunes in the .m3u playlist to be displayed and allow the user to be able to choose a tune in the list. Then have the list play to the end of all tunes in the list. Then start over from the beginning of the list. After this code is the .m3u playlist. Go to url removed and click on the link that says: “Media Player Using an .M3U Playlist” Jukebox utilizing an .m3u playlist: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> body { text-align:center; } </style> <script type="text/javascript"> function PlayIt(what){ player.document.getElementById('music').innerHTML='<object width="300" height="300" ' +'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" ' +'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ' +'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">' +'<param name="url" value="'+what+'">' +'<param name="uiMode" value="full">' +'<param name="autoStart" value="true">' +'<param name="loop" value="true">' +'<embed type="application/x-mplayer2" ' +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" ' +'showcontrols="true" uimode="full" width="300" height="45" ' +'src="'+what+'" autostart="true" loop="true">' +'</object>'; } </script> </head> <body> <div id="music"> <object width="300" height="300" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject"> <param name="url" value=""> <param name="uiMode" value="full"> <param name="autoStart" value="true"> <param name="loop" value="true"> <embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showcontrols="true" uimode="full" width="300" height="45" src="" autostart="true" loop="true"> </object> </div> <br> <br> <select name="player" onchange="PlayIt(this.value)"> <option value="none">::Choose a Song::</option> <option value="JukeboxList.m3u">Jukebox List</option> </select><br> </html> Here is the .m3u playlist for the above code: Code: #EXTM3U #EXTINF:Bill Evans - G Waltz media/G Waltz.mp3 #EXTINF:Dan Pincus - In Your Time media/In Your Time.mp3 The following code is for the Jukebox that has a list of links in a dropdown list. If I go with this idea, I would like for the list not to be a dropdown list but just a list of tunes. The user should be able to click on any tune in the list and the player should start from that point, play all the remaining tunes in the list and then start from the beginning. Go to url removed and click on the link that says: “Media Player Using Links” Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> body { text-align:center; } </style> <script type="text/javascript"> function PlayIt(what){ player.document.getElementById('music').innerHTML='<object width="300" height="300" ' +'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" ' +'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ' +'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">' +'<param name="url" value="'+what+'">' +'<param name="uiMode" value="full">' +'<param name="autoStart" value="true">' +'<param name="loop" value="true">' +'<embed type="application/x-mplayer2" ' +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" ' +'showcontrols="true" uimode="full" width="300" height="45" ' +'src="'+what+'" autostart="true" loop="true">' +'</object>'; } </script> </head> <body> <select name="player" onchange="PlayIt(this.value)"> <option value="none">::Choose a Song::</option> <option value="media/GWaltz.mp3">G Waltz</option> <option value="media/InYourTime.mp3">In Your Time</option> <option value="http://urltosong3.mp3">Song 3</option> <option value="http://urltosong4.mp3">Song 4</option> <option value="http://urltosong5.mp3">Song 5</option> </select><br> <div id="music"> <object width="300" height="300" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject"> <param name="url" value=""> <param name="uiMode" value="full"> <param name="autoStart" value="true"> <param name="loop" value="true"> <embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showcontrols="true" uimode="full" width="300" height="45" src="" autostart="true" loop="true"> </object> </div> </html> Another idea I found on the WEB also uses an .m3u playlist. The good thing about it is that it lists all the tunes in the playlist which the user can then select from. This jukebox calls up an entire Windows Media Player. If I was to use this idea I would like to be able to disable the left side of the player where the user has options such as burning to CD, Media Guide, Radio Tuner etc… Go to url removed and click on the link that says: “Media Player Within an IFrame Using .m3u Playlist”” Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>JukeBox</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> </head> <body> <IFRAME name="frame" src="JukeboxList.m3u" width="100%" height="347" scrolling="no" frameborder="0"> [Your user agent does not support frames or is currently configured not to display frames.] </IFRAME> </body> </html> Thanks! Dan Hey everyone I'm new here and I have a question about the best way to execute this task. I am trying to create a page with a dropdown list where the user selects the state. A drop down list below that can have the specific schools to that state to choose from. Now I need a way for the user to click on a school and then be taken to a page that has website URL's from all the fraternities in that school. Do I need php and mysql? I don't want to create a million pages unless I have to. What is the easiest way to do this. Maybe some kind of central form things where it outputs the fraternity you want at a particular school and state. Also I am using tumblr but can just link it to a normal html or php page just throwing that out there. Thanks guys! Thomas Hi all, I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County). I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database. This piece of code is working well . . . . Code: <?php $link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error()); mysql_select_db('mydatabase') or die('Could not select database'); if(isset($_GET["County"]) && is_numeric($_GET["County"])) { $County = $_GET["County"]; } if(isset($_GET["Region"]) && is_numeric($_GET["Region"])) { $Region = $_GET["Region"]; } ?> <script language="JavaScript"> function autoSubmit() { var formObject = document.forms['theForm']; formObject.submit(); } </script> <form name="theForm" method="get"> <!-- County SELECTION BASED ON city VALUE --> <?php ?> <select name="County" onChange="autoSubmit();"> <option value=''</option> <?php //POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city $sql = "SELECT * FROM county_regions"; $counties = mysql_query($sql,$link); while($row = mysql_fetch_array($counties)) { echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>"); } ?> </select> <?php ?> <br><br> <?php if($County!= null && is_numeric($County)) { ?> <select name="Region" onChange="autoSubmit();"> <?php //POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County $sql = "SELECT * FROM county_regions WHERE CountyID = $County "; $Regions = mysql_query($sql,$link); while($row = mysql_fetch_array($Regions)) { echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>"); } ?> </select> <?php } ?> What follows is my form where the javascript is not working - edited quite a bit to save on space! Code: <head> <script language="JavaScript"> function autoSubmit() { var formObject = document.forms['subform']; formObject.submit(); } </script> </head> <form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName"> <input type="hidden" name="MAX_FILE_SIZE" value="32768" /> <label for="Business_name">Business Name</label> <input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;" <id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br /> <label for="StreetAddress">Address</label> <input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br /> <label for="Town">Town</label> <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br /> <?php $link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error()); mysql_select_db('mydatabase') or die('Could not select database'); if(isset($_GET["County"]) && is_numeric($_GET["County"])) { $County = $_GET["County"]; } if(isset($_GET["Region"]) && is_numeric($_GET["Region"])) { $Region = $_GET["Region"]; } ?> <form name = "subform" method="get"> <select name="County" onChange="autoSubmit();"> <option value=''</option> <?php $sql = "SELECT * FROM county_regions"; $counties = mysql_query($sql,$link); while($row = mysql_fetch_array($counties)) { echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>"); } ?> </select> <?php ?> <br><br> <?php if($County!= null && is_numeric($County)) { ?> <select name="Region" onChange="autoSubmit();"> <?php $sql = "SELECT * FROM county_regions WHERE CountyID = $County "; $Regions = mysql_query($sql,$link); while($row = mysql_fetch_array($Regions)) { echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>"); } ?> </select> <?php } ?> <input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br /> <br/> <input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/> </form> </body> </html> It's probably obvious to you guys!! Thanks in advance for your help. I would like to make an ordered list, for example: 1. Airplane 2. Boat 3. Car I'd like one of the words to be displayed on my webpage, for example: Boat Then I'd want an up button, and a down button. The up button would display Airplane instead of Boat, and the down button would display Car instead of Boat. Once it got to Car, the same up button would change it back to boat. How do I do this? Thanks. I have two lists/menus that are start and end times and I want to make the end time list/menu advance 2 hours from whatever is chosen in start list/menu. The values in both of the list/menu are [CODE] <select name="Time" class="Body" id="Time"> <option value="">Choose Start Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC........ <select name="Time2" class="Body" id="Time2"> <option value="">Choose End Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC........ [ICODE] any ideas on how to accomplish this? you can find my file at http://www.crazywayno.com/startend.php ---------------------------------------------------------------- I also tried this javascript but it doesn't add the additional 2 hours it just repeats the first value. [CODE] <script type="text/javascript"> function cfunc() { document.getElementById("Time2").value=document.ge tElementById("Time").value } </script> <select name="Time" type="text" id="Time" onmouseup="cfunc()"> <option value="">Choose Start Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC.......... <select name="Time2" class="Body" id="Time2"> <option value="">Choose End Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> ETC........... [ICODE] You can find this at http://www.crazywayno.com/2fields.php Thanks Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) { if (val > 1) { var box = 'lie[' + field + ']'; document.form1.box.disabled == false; } else { document.form1.box.disabled == true; } } Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe Hello! I have a code that shows a very fancy linkable menu. But the problem is that the dropdown menu, isn't linkable. I have tried in all possible way, but when the class="makemefancy" is in the code. The linkable function will not be possible. Code: <form method="post" action=""> <select name="fancySelect" class="makeMeFancy"> <option value="0" selected="selected" data-skip="1">Fastlinks</option> <option value="1" data-icon="img/img.png" data-html-text="Facebook<i>Text</i>">Facebook</option> <option value="2" data-icon="img/yee.png" data-html-text="Twitter<i>Text</i>">Twitter</option> <option value="3" data-icon="img/aa.png" data-html-text="Live<i>Text</i>">Live</option> <option value="4" data-icon="img/h.png" data-html-text="Text<i>Text</i>">Text</option> </select> </form> Thankful for help! I want when you click on the option u will get linked to another page. I need help with this js... this is dropdown list...if user choose okc in first list(vrsta) in second (celik) user can choose C0270 and C0370...if chosen pc in first list in second user can choose C1330 and C1530 etc... There are two boxes...ans15 and ans14...and button which user clicks The idea is that user choose one option(okc,pc or cc) and choose option (C0270 or something else) onclick some values should be written in boxes example: chosen okc and C0270 in ans15 "hello" and in ans14 "goodbye" should be writen if chosen okc and C0370 in ans15 "hi" and in ans14 "bye" should be writen Code: <script type="text/javascript"> function setOptions(chosen) { var izbor = document.form3.celik; izbor.options.length = 0; if (chosen == " ") { izbor.options[izbor.options.length] = new Option('choose',' '); } if (chosen == "okc") { izbor.options[izbor.options.length] = new Option('C0270','C0270'); izbor.options[izbor.options.length] = new Option('C0370','C0370'); } if (chosen == "pc") { izbor.options[izbor.options.length] = new Option('C1330','C1330'); izbor.options[izbor.options.length] = new Option('C1530','C1530'); } if (chosen == "cc") { izbor.options[izbor.options.length] = new Option('C1120','C1120'); izbor.options[izbor.options.length] = new Option('C1220','C1220'); } } </script> </head> <body> <FORM name="form3"> <table width="439" height="139" border="1"> <tr> <td width="200" height="33"> <div align="center"> <select name="vrsta" size="1" onchange="setOptions(document.form3.vrsta.options [document.form3.vrsta.selectedIndex].value);"> <option value=" " selected="selected"> </option> <option value="okc">Opsti konstrukcijski celici</option> <option value="pc">Poboljsani celici</option> <option value="cc">Cementirani celici</option> <option value="cl">Celicni liv</option> <option value="sl">Sivi liv</option> </select> <br> <br> </div></td> <td width="108" rowspan="3"> </td> <td width="109" rowspan="3"> </td> </tr> <tr> <td height="33"><div align="center"> <select name="celik" size="1"> <option value=" " selected="selected">Izabrati prvo vrstu</option> </select> </div></td> </tr> <tr> <td height="23" rowspan="2"><div align="center"> <input type="button" value=" ok " onclick="beta(this.form)" /> </div> </div> <div align="center"></div> </td> </tr> <tr> <td><input type="type" "number" value="" name="ans15" size="9" /></td> <td><input type="type" "number" value="" name="ans14" size="9" /></td> </tr> </table> </FORM> </body> </html> Sorry I just realized this should have been in server side... I'm trying to create a list of twitter users with a follow button next to each user. The user names are being pulled from a mysql database. Here's the code I have so far. I can get a list of user names from my database, put it into an array and I can replace the user name in the first follow button. I need to sequentially replace the $row variable in the script at the bottom so the follow button points to the users account each time it iterates through the array? I'm stuck on how to iterate this so that I get a list of all the users in the array with a follow button next to each user name. Any help or ideas would be greatly appreciated! I'm stuck and on a deadline. Code: <?php // Connect to database server mysql_connect("localhost", "root", "") or die (mysql_error ()); // Select database mysql_select_db("tewxadb") or die(mysql_error()); // SQL query $strSQL = "SELECT * FROM users"; // Execute the query (the recordset $rs contains the result) $rs = mysql_query($strSQL); // Loop the recordset $rs // Each row will be made into an array ($row) using mysql_fetch_array while($row = mysql_fetch_array($rs)) { // Write the value of the column username (which is now in the array $row) echo $row['username'] . "<br />"; } // Close the database connection mysql_close(); ?> <a href="https://twitter.com/" +$row(text) class="twitter-follow-button" data-show-count="true" data-lang="en">Follow </a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> I am trying to implement a linked list in javascript. So far i have: Code: function linkedList(){ var llNode=function(value){ this.next=null; this.previues=null; this.value=value; } var that=this; this.length=0; this.head=null; this.tail=null; this.add=function(value){ if(length==0){ var tmp=new llNode(value) that.head=tmp; that.tail=tmp; } else{ var tmp=new llNode(value); tmp.previues=that.tail; that.tail.next=tmp; that.tail=that.tail.next; } that.length++; } } } When I use: Code: var ll=new linkedList(); ll.add(1); ll.add(2); both the head and tail of ll point to the node whose value is to, and the next and previues pointer on that node are both null. Hi, am trying to populate my second list box from the 1st. I have done the folowing code, iam trying to call a function in the onchange event of my 1st listbox, but it does not change the URL however if i manually change my URL then the thing works fine. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <SCRIPT language=JavaScript> function reload(){ var val=form1.make.options[form1.make.options.selectedIndex].value; window.location='upload.php?cat=' + val ; } </script> </head> <body> <?php $host="localhost"; // Host name $username="******"; // Mysql username $password="******"; // Mysql password $db_name="******"; $con= mysql_connect("$host", "$username", "$password"); if (!$con){ die("cannot connect"); } mysql_select_db($db_name, $con); $sql1 = mysql_query("select * from make"); $cat=$_GET['cat']; //This line is added to take care if your global variable is off if(strlen($cat) > 0 and !is_numeric($cat)){//check if $cat is numeric data or not. echo "Data Error"; exit; } if(isset($cat) and strlen($cat) > 0){ $sql2=mysql_query("SELECT * FROM model where id=$cat"); }else{$sql2=mysql_query("SELECT * FROM model"); } echo "<form id='form1' name='form1' method='post' action=''>"; echo "<p>"; echo "<label>"; echo "<select name='make' id='make' onchange='reload()'>"; while($row1 = mysql_fetch_array($sql1)){ //echo "<option value=\"${row1['name']}\">${row1['name']}</option>"; echo "<option value='$row['name']'>$row['name']</option>"; } echo "</select>"; echo "</label>"; echo "</p>"; echo "<p>"; echo "<label>"; echo "<select name='model' id='model'>"; while($row2 = mysql_fetch_array($sql2)){ echo "<option value=\"${row2['name']}\">${row2['name']}</option>"; } echo "</select>"; echo "</label>"; echo "</p>"; echo "</form>"; ?> </body> </html> Thanks I play a text game that allows you to input javascript into a "QuickBar" set up for links. I currently have a couple of short "links" set up to fill in a form for me, but I am trying to do something else now. An example for one I use that fills in a specific blank text area: javascript: var doc=document; if(window.frames.length>0) doc=window.main.document; doc.getElementsByName('light')[0].value=40; doc.getElementsByName('Okay')[0].click(); end(); On a different page than the empty text areas, there is a fixed drop down select with 5 choices, and I would like to set up a 6th choice using the same insert javascript "link" system. Code: <tr> <td>Map size:</td> <td><select name="map_size"> <option label="7x7" value="7">7x7</option> <option label="9x9" value="9">9x9</option> <option label="11x11" value="11">11x11</option> <option label="13x13" value="13">13x13</option> <option label="15x15" value="15" selected="selected">15x15</option> </select></td> </tr> What I would like to do is set up another javascript "link" that will add a "30x30" option to that list and be able to select it after clicking the javascript "link." Hi There. I've been reading this forum for quite sometime, but today is my first post, hope you guys can help. Here is how the code works: (its like a phone directory) -User first selects the dept. -Once selected, a second drop down populates with the names of each person in that department. -I want the contact info to show on the page once they select this last step. I need for when the user selects this second options for a link to open inside a iFrame inside of the same html page. I uploaded the file here for you to see: www.pioneer-energy.us/tf2/contact-us.html Here is the code for the HTML doc: Code: <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();"> <FORM name="drop_list" action="yourpage.php" method="POST" > <SELECT NAME="Department" onChange="SelectSubCat();" > <Option value="">Select Department</option> </SELECT> <SELECT id="SubCat" NAME="SubCat"> <Option value="">SubCat</option> </SELECT> </form> Here is the .js file code Code: function fillCategory(){ // this function is used to fill the category list on load addOption(document.drop_list.Department, "Executive-Management", "Executive Management"); addOption(document.drop_list.Department, "Marketing", "Marketing", ""); addOption(document.drop_list.Department, "Annuities", "Annuities", ""); addOption(document.drop_list.Department, "Underwriting/Case Management", "Underwriting/Case Management", ""); addOption(document.drop_list.Department, "Human Resources", "Human Resources", ""); addOption(document.drop_list.Department, "Commissions", "Commissions", ""); addOption(document.drop_list.Department, "Policy Owner Services", "Policy Owner Services", ""); addOption(document.drop_list.Department, "Information Technology", "Information Technology", ""); addOption(document.drop_list.Department, "APS", "APS", ""); } function SelectSubCat(){ // ON selection of category this function will work removeAllOptions(document.drop_list.SubCat); addOption(document.drop_list.SubCat, "", "SubCat", ""); if(document.drop_list.Department.value == 'Executive-Management'){ addOption(document.drop_list.SubCat,"MartyGreenberg", "Marty Greenberg - President"); addOption(document.drop_list.SubCat,"LisaGreenberg ", "Lisa Greenberg - Vice President"); addOption(document.drop_list.SubCat,"CraigBrown", "Craig Brown - CFO"); addOption(document.drop_list.SubCat,"RitaBogan", "Rita Bogan - Executive Secretary & Case Management"); addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager"); } if(document.drop_list.Department.value == 'Marketing'){ addOption(document.drop_list.SubCat,"RonBielefelt", "Ron Bielefelt - Chief Marketing Officer"); addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager"); addOption(document.drop_list.SubCat,"MarkRBugli", "Mark R. Bugli - CLU, ChFC "); addOption(document.drop_list.SubCat,"HowardMandel", "Howard Mandel - Director of Business Development"); addOption(document.drop_list.SubCat,"DeborahSanchez", "Deborah Sanchez - Brokerage Supervisor "); addOption(document.drop_list.SubCat,"SylviaMariscal", "Sylvia Mariscal - Life Settlements"); addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager"); addOption(document.drop_list.SubCat,"JosephTanner", "Joseph Tanner - Brokerage Manager Assistant", ""); } if(document.drop_list.Department.value == 'Annuities'){ addOption(document.drop_list.SubCat,"SethMoses", "Seth Moses - Director of Annuities"); addOption(document.drop_list.SubCat,"SteveAvila", "Steve Avila - Assistant to Seth Moses"); } if(document.drop_list.Department.value == 'Underwriting/Case Management'){ addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager"); addOption(document.drop_list.SubCat,"KimberlyFleming", "Kimberly Fleming - Case Manager "); addOption(document.drop_list.SubCat,"LarissaBurton", "Larissa Burton - Case Manager Assistant to Kimberly Fleming"); addOption(document.drop_list.SubCat,"MariaAntebi", "Maria Antebi - Case Manager"); addOption(document.drop_list.SubCat,"LilianaGalvan", "Liliana Galvan - Case Manager"); addOption(document.drop_list.SubCat,"KimberlyKoontz", "Kimberly Koontz - Case Manager Assistant to Liliana Galvan"); addOption(document.drop_list.SubCat,"ChastaSpikes", "Chasta Spikes - Case Manager"); addOption(document.drop_list.SubCat,"SylviaMarsicalShank", "Sylvia Marsical-Shank - Case Manager"); addOption(document.drop_list.SubCat,"TriciaRomain ", "Tricia Romain - Case Manager"); addOption(document.drop_list.SubCat,"BetoRuiz", "Beto Ruiz - Case Manager"); addOption(document.drop_list.SubCat,"DavidGarcia", "David Garcia - Case Manager Assistant"); } if(document.drop_list.Department.value == 'Human Resources'){ addOption(document.drop_list.SubCat,"MarieOkamura", "Marie Okamura - Human Resources Director"); } if(document.drop_list.Department.value == 'Commissions'){ addOption(document.drop_list.SubCat,"WalterHelbig", "Walter Helbig, FLMI - Licensing"); addOption(document.drop_list.SubCat,"KenFong", "Ken Fong - Licensing"); addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Commissions"); } if(document.drop_list.Department.value == 'Licensing'){ addOption(document.drop_list.SubCat,"TessSlezak ", "Tess Slezak - Licensing"); addOption(document.drop_list.SubCat,"ArleneAuerhan ", "ArleneAuerhan - Licensing"); addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Forms & Supplies"); } if(document.drop_list.Department.value == 'Policy Owner Services'){ addOption(document.drop_list.SubCat,"LanTran", "Lan Tran - Policy Services"); addOption(document.drop_list.SubCat,"GianSanchez ", "Gian Sanchez - Receptionist"); addOption(document.drop_list.SubCat,"ArmonTodd ", "Armon Todd - Office Support"); } if(document.drop_list.Department.value == 'Information Technology'){ addOption(document.drop_list.SubCat,"HenryCholakyan ", "Henry Cholakyan - IT Director"); } if(document.drop_list.Department.value == 'APS'){ addOption(document.drop_list.SubCat,"CarmenAllen ", "Carmen Allen - APS Supervisor"); } } ////////////////// function removeAllOptions(selectbox) { var i; for(i=selectbox.options.length-1;i>=0;i--) { //selectbox.options.remove(i); selectbox.remove(i); } } function addOption(selectbox, value, text ) { var optn = document.createElement("OPTION"); optn.text = text; optn.value = value; selectbox.options.add(optn); } Thanks for any help in advanced! Hi I've been working on a listbox full of employees for our company intranet. Each name has an onchange tag that calls up a floor map and that part works fine but I'd really like to populate the names from an XML list so it's easier for non-IT people to maintain. I've been doing alot of web searches on the subject which comes up alot but it's mostly just fragments of what I need being that I've got no javascript background. I found a helpful tutorial on javascriptkit but that wasn't for creating listboxes so I'm only part of the way there. This is the XML file I've got (there will eventually be 400 entries): <?xml version="1.0"?> <list> <employee> <name>##########</name> <office>1656</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>##########</email> </employee> <employee> <name>#########</name> <office>1657</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>###########</email> </employee> </list> The most important parts are the name which will be used as the text of the box and the office number which will determine which floorplan is displayed. I added the other information so I can potentially put it in a div display later but that can wait. Can anyone help point me to some good resources on this subject? Thanks. I have a list where I want to reorder the list on each user click. for example, Code: <ul> <li name="li_one"><a href="one.html">one </a></li> <li name="li_two"><a href="two.html">two</a></li> <li name="li_three"><a href="three.html">three</a></li> </ul> If the user selects "two", then the list order should be sorted as follows Code: <ul> <li name="li_two"><a href="two.html">two</a></li> <li name="li_one"><a href="one.html">one </a></li> <li name="li_three"><a href="three.html">three</a></li> </ul> the selected item should always appear first in the list. Could any one suggest me a method or a code snippet. Is it possible to do with javascript?. please help. Code: <script type="text/javascript"> function checkAll(field) { for (i = 0; i < field.length; i++) field[i].checked = true ; } function uncheckAll(field) { for (i = 0; i < field.length; i++) field[i].checked = false ; } </script> <body> <form name="myform" action="checkboxes.asp" method="post"> <input type="checkbox" name="list" value="1">Java<br> <input type="checkbox" name="list" value="2">Javascript<br> <input type="checkbox" name="list" value="3">Active Server Pages<br> <input type="button" name="CheckAll" value="Check All" onClick="checkAll(document.myform.list)"> <input type="button" name="UnCheckAll" value="Uncheck All" onClick="uncheckAll(document.myform.list)"> <br> </form> This code snippet is not clear to me...I didn't understand what is happening in the "for loop" within the script tag...what does 'field' refer to? In the onclick event of button the argument passed is "document.myform.list"..If I am writing javascript in a separate file how will I pass those arguments? Here are my Two classes and a tester. I need help outputting a sub-list of all the Highly Paid employees. public class Pay2 { private String name; private char gender; private double hours; private double payRate; /** * Constructor for objects of class Pay */ public Pay2(String n, char g, double h, double r) { // initialise instance variables name = n; gender = g; hours = h; payRate = r; } /** * An example of a method - replace this comment with your own * * @param y a sample parameter for a method * @return the sum of x and y */ public double computeGrossPay () { return hours * payRate; } public char getGender () { return gender; } public double getRate () { return payRate; } } _____________________________ import java.util.*; public class Salary { private ArrayList theSalary; public Salary() { ArrayList theSalary = new ArrayList (); } public void addSalary (Pay2 p) { theSalary.add (p); } public double computeSalary() { double total = 0; for (int i = 0; i < theSalary.size(); i++) { Pay2 p =(Pay2) theSalary.get (i); total = total + p.computeGrossPay(); } return total; } public double computeMale() { double total = 0; for (int i = 0; i < theSalary.size();i++) { Pay2 p =(Pay2) theSalary.get (i); if (p.getGender() == 'm') total = total + p.computeGrossPay(); } return total; } public double computeFemale() { double total = 0; for (int i = 0; i < theSalary.size();i++) { Pay2 p =(Pay2) theSalary.get (i); if (p.getGender() == 'f') total = total + p.computeGrossPay(); } return total; } public int highPay(double i) { double pay = i; int number = 0; for( int s = 0; s < theSalary.size(); s++) { Pay2 p =(Pay2) theSalary.get (s); if (p.getRate() >= pay) number++; } return number; } public ArrayList highPaid(double b) { double pay = b; ArrayList a = new ArrayList(); for (int i = 0; i < theSalary.size(); i++) { Pay2 p =(Pay2) theSalary.get (i); if (p.getRate() >= pay) a.add(p); } return a; } } _____________________________________ import java.util.*; public class Tester { public static void main (String [] args) { Salary s = new Salary(); Pay2 p = new Pay2("Bob", 'm', 30, 10.50); s.addSalary(p); p = new Pay2("Jen", 'f', 30, 12.00); s.addSalary(p); p = new Pay2("Tom", 'm', 20, 9.50); s.addSalary(p); p = new Pay2("Pat", 'f', 40, 15.65); s.addSalary(p); p = new Pay2("Nick", 'm', 45, 12.00); s.addSalary(p); p = new Pay2("Mike", 'm', 35, 15.00); s.addSalary(p); p = new Pay2("Barb", 'f', 20, 25.00); s.addSalary(p); p = new Pay2("Katie", 'f', 30, 14.00); s.addSalary(p); p = new Pay2("John", 'm', 45, 12.00); s.addSalary(p); p = new Pay2("Mark", 'm', 40, 7.75); s.addSalary(p); Scanner sc = new Scanner(System.in); System.out.println("What is the threshold for high Pay?"); double a = sc.nextDouble (); double w = s.computeSalary(); double m = s.computeMale(); double f = s.computeFemale(); int h = s.highPay(a); System.out.println("The weekly salarys for all employees is $" + w); System.out.println("The weekly salarys for all males is $" + m ); System.out.println("The weekly salarys for all females is $" + f); } } Any feedback will help. Thanks, Allusive i need help on designing a drop down list menu. this rolls down and shows other list of options to click on. i work in dreamweaver so javascripts and others can be incorporated. thanks all |