JavaScript - Multiple Dropdown Boxes To Call Function
Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question.
Here's what I'm trying to do. I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated. S Similar TutorialsHi, I have a problem with my script, I have a php request and the result is shown in a div, so there is several divs and their id is the "id" in the database, and I want that if we click on a link, it hides every divs... Here is how I tried to do that: Code: <script type="text/javascript"> function visibilite(thingId) { var targetElement; targetElement = document.getElementById(thingId) ; targetElement.innerHTML = "" ; } </script> Code: $hide = ""; while($ligne=mysql_fetch_array($ress)){ $hide.= "visibilite('$ligne[id]'); "; $return.= "<tr><td>$ligne[heure] - $ligne[fin]</td><td>$ligne[sport]</td><td>$ligne[salle]</td><td>$ligne[ville]</td><td>$dispo/$ligne[place]</td><td><div id=$ligne[id]>"; $return.= "<a href=# onClick=\"maFonctionAjax($ligne[id],$tennis); $hide return false\">Reserver</a>"; $return.= "</div></td></tr>"; } Every div'id is the id in the database, with the onClick we call an ajax function and $hide which is the call for the function visibilite for each div It works for some request, I don't know how is it possible because I can have the same number of results and sometimes it works, and sometimes not... Does somebody can help me? Thanks a lot! Jeff I am trying to make a unit converter with two dropdown boxes, two textfields and a button. I want to enter a number into the first textfield, select a unit option, then select another appropriate unit option based on the first selection, press the button and get the result in the second textfield. What would be the best approach for this. So far I have: <html> <head> <script type="text/javascript"> function convertUnit () { // convert pound to kilogram document.unitForm.toField.value = document.unitForm.fromField.value / 2.2; // convert kilogram to pound document.unitForm.toField.value = document.unitForm.fromField.value * 2.2; // convert inch to centimeter document.unitForm.toField.value = document.unitForm.fromField.value / 2.54; // convert centimeter to inch document.unitForm.toField.value = document.unitForm.fromField.value * 2.54; } </script> </head> <body style="background-color:lightgray"> <form action="" name="unitForm"> <input type="text" name="fromField" onfocus="this.form.fromField.value=''; style.background='lightyellow';" onblur="style.background='white';" /> <select name="fromList" > <option value="" selected="selected">Unit</option> <option id="fromPound" value="2.2">lb</option> <option id="fromKilogram" value="1.0">kg</option> <option id="fromInch" value="1.0">in</option> <option id="fromCentimeter" value="2.54">cm</option> </select> <input type="button" value="Convert" onclick="convertUnit()" /> <input type="text" name="toField" readonly="readonly" /> <select name="toList"> <option value="" selected="selected">Unit</option> <option name="toKilogram" id="toKilogram" value="1.0">kg</option> <option name="toPound" id="toPound" value="2.2">lb</option> <option name="toCentimeter" id="toCentimeter" value="2.54">cm</option> <option name="toInch" id="toInch" value="1.0">in</option> </select> <input type="reset" value="Reset" /> </form> </body> </html> Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. i keep getting error Call to undefined function codeandurl() below is my code PHP Code: <?php $value= strip_tags(get_field('link',$post)); $resultid=get_field('resultid',$post); codeandurl($resultid,$value); ?> <div id="result"></div> <script type="text/javascript"> function codeandurl(resultid,url){ $( "#result" ).text(resultid); $( "#result" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); window.open(url); return false; } </script> <p> <script type="text/javascript">// <![CDATA[ var metrics = { "mm" : 1, "cm" : 10, "m" : 1000, "inch" : 25.4, "foot" : 304.8 }; function convert(num, dec){ var val = document.getElementById("fromVal").value; if(isNaN(val)){ return } function roundNumber(num, dec) { var result = Math.round( Math.round( num * Math.pow( 10, dec + 1 ) ) / Math.pow( 10, 1 ) ) / Math.pow(10,dec); return result; } document.getElementById("toVal").value = val * metrics[document.getElementById("fromSystem").value]/ metrics[document.getElementById("toSystem").value]; } var interval = null; function watchChanges(){ interval == null ? setInterval("convert()", 500) : clearInterval(interval); } // ]]></script> </p> <table> <tbody> <tr> <td><input id="fromVal" style="width: 100px;" onfocus="watchChanges()" onblur="watchChanges()" type="text" /><select id="fromSystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select></td> </tr> <tr> <td colspan="1" align="center">=</td> </tr> <tr> <td><input id="toVal" style="width: 100px;" type="text" disabled="disabled" /><select id="toSystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select></td> Code: <html> <head> <title>TESTING</title> <script type="text/javascript"> <!-- document.write("<input type='submit' value='submit' onclick='func()'>"); function func() { document.write("<input type='submit' value='New Button' onclick='func()'>"); window.alert("THIS"); } --> </script> </head> <body> <!--input type="button" value="Read" onclick="ReadFiles()"--> </body> </html> This is a very basic version of what I am trying to do. I have a dynamic list which is set in a table. When clicked, a function is run to set up a new list.. The reason I explain that, is that I need to keep it dynamic. Now for the problem: When I run this page, I have the button made right away, then when clicked it creates the new button. The new button should also run the function to create the new button again, but when I click it, I only receive "error on page". I don't know if there is a better way to go about this, but as for this route, I am stuck. Any help is greatly appreciated! -Shane I'm trying to "progressively enhance" one of my surveys using javascript. Basically, I have rating scales that make use of radio buttons as each point on the scale. Each radio button occupies its own cell in a table. I wrote some functions that will highlight cells on mouseover in a color corresponding to its position on the scale (e.g. the lowest point is red, the midpoint is yellow, the highest point is green). When a radio button is clicked, the background of the button's cell and preceding cells in the same row will be colored accordingly. The functions are working well in FireFox and Chrome (I just have to add a few lines using the addEvent function to make it compatible with IE). The effect looks a lot nicer when I add a function that makes the visibility of the radio buttons hidden. However, I want to make sure that there is a fallback option in case the functions that color the cells don't work for whatever reason. I would not want the radio buttons hidden in this case. Is there a method whereby I can call the "hideRadiobuttons" function only if the other functions are successfully executed? hello everyone im coding a website at the moment using aspx and i have came to a snag. im trying to make a dropdown list which is populated by an array call my chaletDetails.aspx page - each item in the array will be directed to this page. ive diffled abit, but the more i do the more im afraid of breaking something lol. if someone could maybe look at the code and show me how this could be achieved id appriciate it very much. The code i have for my dropdown list is as follows... this is in divResorts.js var resorts = new Array("Adelboden", "Auron", "Oppdal", "Las Lenas", "La Pierre St Martin", "Val Ceneis", "Les Menuires", "Champex-Lac", "Puy St Vincent"); function populateSelectList() { var mystring = document.getElementById('divResort').innerHTML mystring += "<h4>Our Resorts</h4><select name='resorts'>" mystring += "<option>Choose a Resort</option>" for (i = 0; i < resorts.length; i++) { mystring += "<option value='" + resorts[i] + "'>" mystring += resorts[i] + "</option>" } mystring += "</select>" mystring += "<h4>Our Chalets</h4>" document.getElementById('divResort').innerHTML = mystring } within the body i have this called as: <div id="divResort"> <script type="text/javascript">populateSelectList();</script> </div> I set up my javascript so that it shows a hidden div box from an array when i click on a link. To show only one hidden box, the code is <a href="javascript:showOnlyThis('divIDgoeshere')"> how do i show multiple hidden div boxes with one link? Thanks! hello, I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/> xxxx = random number the page may contain only one text box id=product or more i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box Code: var price = document.getElementById('price').value; var allElements = document.form1.product; var len=allElements.length; if(allElements.length){ for (i = 0; i < len; i++){ allElements[i].value = price; } I'm not a javascript expert so i don't know if this code is the right way to accomplish this. Thank you very much for your help I have a script which allows me to select random users from one select field to another and works like a charm, but... I want to be able to get random users from one select field to multiple (lets say 2) other select fields... So lets say that I have 5 users in the first field (select1): James Bill Jennifer Bob Karen Now when I press a button: <input value="" type="button" onClick="randomusers();" /> 2 users should be moved to select2 and other 2 users moved to select3. My current script is as follows: Code: function randomusers(){ var given = 2, used = {}, randnum, opts = $('#select1 option'), olen = opts.length, hiddiv = $('#hiddendiv'); function ran() { // generate a unique random number randnum = Math.floor(Math.random() * olen); return used['u'+randnum] ? ran() : randnum; } for (var i = 0; i < given; i++) { // get the correct quantity of randoms used['u'+ran()] = true; } var players = opts.filter(function(index) { // remove all options that are not one of the randoms return !!used['u'+index]; }).appendTo('#select2'); } Hoping for help... Thanks in advance :-) Hello, I have some code to open 1 dialog box. Could someone please help me manipulate this code to open multiple boxes with different contents. I would like to do this with out duplicating the existing code, maybe setting a variable. The least amount of code the better. Thanks in advance. 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"> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> </head><body> <div id="dialog" title="Example dialog"> <p>Some text that you want to display to the user.</p> </div> <script type="text/javascript"> $(document).ready(function() { $("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 100, modal: true }); }); </script> <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click here to see the popup</a> </body> </html> Hi all, please help... There is a small, but very usability script - Multiple Dynamic Combo Boxes by Elviro Mirko (http://www.javascriptkit.com/script/...plecombo.shtml). Since there are many versions of this script. One of them, which I did. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> New Document </title> <script type="text/javascript"> <!-- /* *** Multiple dynamic combo boxes *** by Mirko Elviro, 9 Mar 2005 *** Script featured and available on JavaScript Kit (http://www.javascriptkit.com) *** ***Please do not remove this comment */ // This script supports an unlimited number of linked combo boxed // Their id must be "combo_0", "combo_1", "combo_2" etc. // Here you have to put the data that will fill the combo boxes // ie. data_2_1 will be the first option in the second combo box // when the first combo box has the second option selected // first combo box // data_1 = new Option("All Models", "#"); data_2 = new Option("Model 1", "#"); data_3 = new Option("Model 2", "#"); // second combo box // //All data_1_1 = new Option("All Types", "#"); data_1_2 = new Option("Type 1", "#"); data_1_3 = new Option("Type 2", "#"); //Model 1 data_2_1 = new Option("All Types", "#"); data_2_2 = new Option("Type 1", "#"); data_2_3 = new Option("Type 2", "#"); //Model 2 data_3_1 = new Option("All Types", "#"); data_3_2 = new Option("Type 1", "#"); data_3_3 = new Option("Type 2", "#"); // third combo box // //All Models data_1_1_1 = new Option("All Sizes", "#"); data_1_1_2 = new Option("Size 1", "#"); data_1_1_3 = new Option("Size 2", "#"); data_1_2_1 = new Option("All Sizes", "#"); data_1_2_2 = new Option("Size 1", "#"); data_1_2_3 = new Option("Size 2", "#"); data_1_3_1 = new Option("All Sizes", "#"); data_1_3_2 = new Option("Size 1", "#"); data_1_3_3 = new Option("Size 2", "#"); //Model 1 data_2_1_1 = new Option("All Sizes", "#"); data_2_1_2 = new Option("Size 1", "#"); data_2_1_3 = new Option("Size 2", "#"); data_2_2_1 = new Option("All Sizes", "#"); data_2_2_2 = new Option("Size 1", "#"); data_2_2_3 = new Option("Size 2", "#"); data_2_3_1 = new Option("All Sizes", "#"); data_2_3_2 = new Option("Size 1", "#"); data_2_3_3 = new Option("Size 2", "#"); //Model 2 data_3_1_1 = new Option("All Sizes", "#"); data_3_1_2 = new Option("Size 1", "#"); data_3_1_3 = new Option("Size 2", "#"); data_3_2_1 = new Option("All Sizes", "#"); data_3_2_2 = new Option("Size 1", "#"); data_3_2_3 = new Option("Size 2", "#"); data_3_3_1 = new Option("All Sizes", "#"); data_3_3_2 = new Option("Size 1", "#"); data_3_3_3 = new Option("Size 2", "#"); // fourth combo box // //All Models data_1_1_1_1 = new Option("All color","http://special.link"); data_1_1_1_2 = new Option("Color 1","http://special.link"); data_1_1_1_3 = new Option("Color 2","http://special.link"); data_1_1_2_1 = new Option("All color","http://special.link"); data_1_1_2_2 = new Option("Color 1","http://special.link"); data_1_1_2_3 = new Option("Color 2","http://special.link"); data_1_1_3_1 = new Option("All color","http://special.link"); data_1_1_3_2 = new Option("Color 1","http://special.link"); data_1_1_3_3 = new Option("Color 2","http://special.link"); data_1_2_1_1 = new Option("All color","http://special.link"); data_1_2_1_2 = new Option("Color 1","http://special.link"); data_1_2_1_3 = new Option("Color 2","http://special.link"); data_1_2_2_1 = new Option("All color","http://special.link"); data_1_2_2_2 = new Option("Color 1","http://special.link"); data_1_2_2_3 = new Option("Color 2","http://special.link"); data_1_2_3_1 = new Option("All color","http://special.link"); data_1_2_3_2 = new Option("Color 1","http://special.link"); data_1_2_3_3 = new Option("Color 2","http://special.link"); data_1_3_1_1 = new Option("All color","http://special.link"); data_1_3_1_2 = new Option("Color 1","http://special.link"); data_1_3_1_3 = new Option("Color 2","http://special.link"); data_1_3_2_1 = new Option("All color","http://special.link"); data_1_3_2_2 = new Option("Color 1","http://special.link"); data_1_3_2_3 = new Option("Color 2","http://special.link"); data_1_3_3_1 = new Option("All color","http://special.link"); data_1_3_3_2 = new Option("Color 1","http://special.link"); data_1_3_3_3 = new Option("Color 2","http://special.link"); //All Model 1 data_2_1_1_1 = new Option("All color","http://special.link"); data_2_1_1_2 = new Option("Color 1","http://special.link"); data_2_1_1_3 = new Option("Color 2","http://special.link"); data_2_1_2_1 = new Option("All color","http://special.link"); data_2_1_2_2 = new Option("Color 1","http://special.link"); data_2_1_2_3 = new Option("Color 2","http://special.link"); data_2_1_3_1 = new Option("All color","http://special.link"); data_2_1_3_2 = new Option("Color 1","http://special.link"); data_2_1_3_3 = new Option("Color 2","http://special.link"); data_2_2_1_1 = new Option("All color","http://special.link"); data_2_2_1_2 = new Option("Color 1","http://special.link"); data_2_2_1_3 = new Option("Color 2","http://special.link"); data_2_2_2_1 = new Option("All color","http://special.link"); data_2_2_2_2 = new Option("Color 1","http://special.link"); data_2_2_2_3 = new Option("Color 2","http://special.link"); data_2_2_3_1 = new Option("All color","http://special.link"); data_2_2_3_2 = new Option("Color 1","http://special.link"); data_2_2_3_3 = new Option("Color 2","http://special.link"); data_2_3_1_1 = new Option("All color","http://special.link"); data_2_3_1_2 = new Option("Color 1","http://special.link"); data_2_3_1_3 = new Option("Color 2","http://special.link"); data_2_3_2_1 = new Option("All color","http://special.link"); data_2_3_2_2 = new Option("Color 1","http://special.link"); data_2_3_2_3 = new Option("Color 2","http://special.link"); data_2_3_3_1 = new Option("All color","http://special.link"); data_2_3_3_2 = new Option("Color 1","http://special.link"); data_2_3_3_3 = new Option("Color 2","http://special.link"); //All Model 2 data_3_1_1_1 = new Option("All color","http://special.link"); data_3_1_1_2 = new Option("Color 1","http://special.link"); data_3_1_1_3 = new Option("Color 2","http://special.link"); data_3_1_2_1 = new Option("All color","http://special.link"); data_3_1_2_2 = new Option("Color 1","http://special.link"); data_3_1_2_3 = new Option("Color 2","http://special.link"); data_3_1_3_1 = new Option("All color","http://special.link"); data_3_1_3_2 = new Option("Color 1","http://special.link"); data_3_1_3_3 = new Option("Color 2","http://special.link"); data_3_2_1_1 = new Option("All color","http://special.link"); data_3_2_1_2 = new Option("Color 1","http://special.link"); data_3_2_1_3 = new Option("Color 2","http://special.link"); data_3_2_2_1 = new Option("All color","http://special.link"); data_3_2_2_2 = new Option("Color 1","http://special.link"); data_3_2_2_3 = new Option("Color 2","http://special.link"); data_3_2_3_1 = new Option("All color","http://special.link"); data_3_2_3_2 = new Option("Color 1","http://special.link"); data_3_2_3_3 = new Option("Color 2","http://special.link"); data_3_3_1_1 = new Option("All color","http://special.link"); data_3_3_1_2 = new Option("Color 1","http://special.link"); data_3_3_1_3 = new Option("Color 2","http://special.link"); data_3_3_2_1 = new Option("All color","http://special.link"); data_3_3_2_2 = new Option("Color 1","http://special.link"); data_3_3_2_3 = new Option("Color 2","http://special.link"); data_3_3_3_1 = new Option("All color","http://special.link"); data_3_3_3_2 = new Option("Color 1","http://special.link"); data_3_3_3_3 = new Option("Color 2","http://special.link"); // other parameters displaywhenempty=""; valuewhenempty=-1; displaywhennotempty="-select-"; valuewhennotempty=0; function change(currentbox) { numb = currentbox.id.split("_"); currentbox = numb[1]; i=parseInt(currentbox)+1; // I empty all combo boxes following the current one while (document.getElementById("combo_"+i)) { son = document.getElementById("combo_"+i); // I empty all options except the first one (it isn't allowed) for (m=son.options.length-1; m>0; m--) son.options[m]=null; // I reset the first option son.options[0]=new Option(displaywhenempty,valuewhenempty); i++; } // now I create the string with the "base" name ("stringa"), ie. "data_1_0" // to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill stringa='data'; i=0; while (document.getElementById("combo_"+i)) { stringa=stringa+'_'+document.getElementById("combo_"+i).selectedIndex; if (i==currentbox) break; i++; } // filling the "son" combo (if exists) following=parseInt(currentbox)+1; if (document.getElementById("combo_"+following)) { son = document.getElementById("combo_"+following); stringa=stringa+"_"; i=0; while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) { // if there are no options, I empty the first option of the "son" combo // otherwise I put "-select-" in it if ((i==0) && eval("typeof("+stringa+"0)=='undefined'")) if (eval("typeof("+stringa+"1)=='undefined'")) son.options[0]=new Option(displaywhenempty,valuewhenempty); else son.options[0]=new Option(displaywhennotempty,valuewhennotempty); else son.options[i]=new Option(eval(stringa+i+".text"),eval(stringa+i+".value")); i++; } //son.focus() i=1; combostatus=''; cstatus=stringa.split("_"); while (cstatus[i]) { combostatus=combostatus+cstatus[i]; i++; } return combostatus; } } function go(elementName){ var newUrl=document.forms[0].elements[elementName].options[document.forms[0].elements[elementName].selectedIndex].value; if(newUrl.indexOf("http://")>=0){//rudamentary url checker! So don't go to a blank page if select box not populated. location.href=newUrl; } } //--> </script> </head> <body> <form> Model: <br /> <select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;"> <option value="value1">-select-</option> <option value="value2">All Models</option> <option value="value3">Model 1</option> <option value="value4">Model 2</option> </select> <br /> Type: <br /> <select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;"> <option value="value1"> </option> </select> <br /> Size: <br /> <select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;"> <option value="value1"> </option> </select> <br /> Color: <br /> <select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;"> <option value="value1"> </option> <br /> <input type="button" value="Go" onclick="go('combo3')"> <!-- could be changed for onchange event handler on select box --> </select> </form> <p align="center"><font face="arial" size="-2">This free script provided by</font><br> <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript Kit</a></font></p> </body> </html> But I need to when you first start the script immediately showed the first value and its associated down decaying values without - select - immediately show combo first values All Models All Types All Sizes All Сolor (and after next for various behaviors the user's manipulation choice) **Or are there any other JS solutions that satisfy my request I would be grateful for any aid.... I'm trying to use this code to create 6 sets of (each set 2 Dynamic List boxes). However I have the problem that Category 1-6 selection does not select the correct (adjacent) subcateory list box and instead populates the last selection in subcategory list box 1. How can I set the Java/HTML code so that for example Category #3, populates the selection/case into SubCategory#3 list box? Form Code (only with 2 Category, SubCategory) this when working will be expanded to 6. Code: <table border="0" width="560"> <tbody> <tr> <td align="center"><strong>Item#</strong></td> <td align="center">Paint Type</td> <td align="center">Colour</td> <td align="center">Litres</td> </tr> <tr> <td width="56%" align="left" valign="middle">1.<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);"> <option value="">Select Range</option> <option value="New Paint">New Paint</option> <option value="Recycled Paint">Recycled Paint</option> </select></td><td name="cell1"> <script type="text/javascript" language="JavaScript" > document.write('<select name="subcategory1" id="subcategory1" name="cell1" ><option value="" name="subcategory1">Select Product</option></select>') </script> <noscript><select name="subcategory1" id="subcategory1" > <option value="">Select Product</option> </select> </noscript> </td><td> <input class="formbox" size="20" name="01_colour" /></td><td> <input class="formbox" size="5" name="01_litres" /></td> </tr><br> <tr> <td width="56%" align="left" valign="middle">2.<select name="category2" id="category2" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);"> <option value="">Select Range</option> <option value="New Paint2">New Paint</option> <option value="Recycled Paint2">Recycled Paint</option> </select></td><td name="cell2"> <script type="text/javascript" language="JavaScript"> document.write('<select name="subcategory" id="subcategory"><option value="" name="subcategory">Select Product</option></select>') </script> <noscript><select name="subcategory" id="subcategory" > <option value="">Select Product</option> </select> </noscript> </td><td> <input class="formbox" size="20" name="02_colour" /></td><td> <input class="formbox" size="5" name="02_litres" /></td> </tr> </table> Java Script which I think is the problem, I cant work out how to name the relevant cell the selection should display in. Code: <script language="javascript" type="text/javascript"> function dropdownlist(indexlist) { document.SampleForm.subcategory1.options.length = 0; switch(indexlist) { case "New Paint" : document.SampleForm.subcategory1.options[0]=new Option("Select Product",""); document.SampleForm.subcategory1.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers"); document.SampleForm.subcategory1.options[2]=new Option("Audio/Video","Audio/Video"); document.SampleForm.subcategory1.options[3]=new Option("Beddings","Beddings"); document.SampleForm.subcategory1.options[4]=new Option("Camera","Camera"); document.SampleForm.subcategory1.options[5]=new Option("Cell Phones","Cell Phones"); break; case "Recycled Paint" : document.SampleForm.subcategory1.options[0]=new Option("Select Product",""); document.SampleForm.subcategory1.options[1]=new Option("Interior, Flat/Matt","Interior, Flat/Matt"); document.SampleForm.subcategory1.options[2]=new Option("Interior, Low Sheen","Interior, Low Sheen"); document.SampleForm.subcategory1.options[3]=new Option("Interior, Semi Gloss, Acrylic","Interior, Semi Gloss, Acrylic"); document.SampleForm.subcategory1.options[4]=new Option("Interior, Gloss, Acrylic","Interior, Gloss, Acrylic"); document.SampleForm.subcategory1.options[5]=new Option("Interior, High Gloss, Acrylic","Interior, High Gloss, Acrylic"); document.SampleForm.subcategory1.options[6]=new Option("Interior, Suede","Interior, Suede"); document.SampleForm.subcategory1.options[7]=new Option("Exterior, Flat/Matt","Exterior, Flat/Matt"); document.SampleForm.subcategory1.options[8]=new Option("Exterior, Low Sheen","Exterior, Low Sheen"); document.SampleForm.subcategory1.options[9]=new Option("Exterior, Semi Gloss, Acrylic","Exterior, Semi Gloss, Acrylic"); document.SampleForm.subcategory1.options[10]=new Option("Exterior, Gloss, Acrylic","Exterior, Gloss, Acrylic"); document.SampleForm.subcategory1.options[11]=new Option("Exterior, High Gloss, Acrylic","Exterior, High Gloss, Acrylic"); document.SampleForm.subcategory1.options[12]=new Option("Paving/Concrete","Paving/Concrete"); document.SampleForm.subcategory1.options[13]=new Option("Dulux Acratex","Dulux Acratex"); break; } return true; } </script> Thanks Daniel Hi, I think the problem I am having is an event not a css issue, so I hope I posted in the right forum. What I am trying to achieve is the capability to provide multiple instant chat messages. I have the php/ajax for the instant messages, what I am not sure is how to be able to view multiple chats. What I have started to do is limit it to five possible instant chat messages and have five divs in place with visibility hidden. It works fine for one. But if someone clicks on the name of a person they wish to chat with, the way I am currently doing it, I would need to find out: 1. which divs were free to start an instant chat in (I have no idea how to do this with divs)? 2. Having identified it I will need to change the visibility so it suddenly becomes visible I guess firstly am I going about this the right way to be able to host/view multiple chats? My code is below. Main Page PHP Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function (){ $('#submitchat').live('click',function(){ var data = $('#chatmessage').serialize(); $.post ('insertChat.php',data, function(){ $('#chatmessage').each (function(){ this.reset(); }); return false; }); }); }); </script> <script type="text/javascript"> function loadChat(File,ID,Msg,TID,Cile){ loadXMLDoc1(File,ID,Msg); delay = setTimeout(function(){loadChatRefresh(Cile,TID,Msg)},5000); } </script> <script type="text/javascript"> function loadChatRefresh(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; timer = setInterval(function(){loadChatRefresh(File,ID,Msg)},3000); } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> <script type="text/javascript"> function loadXMLDoc1(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> </head> <body> <h1>Test</h1> <?php include("dbconnect.php"); $result = mysql_query("SELECT *, signedin.PId as SIPId FROM signedin INNER JOIN friends ON signedin.PId=friends.invited OR signedin.PId=friends.invitee WHERE ((friends.invitee={$_SESSION['MyPId']} AND friends.statae='accepted') OR (friends.invited={$_SESSION['MyPId']} AND friends.statae='accepted')) AND signedin.LogOff IS NULL AND signedin.PId !={$_SESSION['MyPId']}"); while($row = mysql_fetch_array($result)){ $mugwort= $row['SIPId'] . ';'; } $motherwort=explode(';',$mugwort); foreach ($motherwort as $mulberry){ $result = mysql_query("SELECT * FROM allusers WHERE PId='{$mulberry}'"); while($row = mysql_fetch_array($result)){ $nosegay=rand(). rand(). rand(). rand(). rand(); $nightshade="{$_SESSION['MyPId']};{$mulberry};{$nosegay}"; echo '<div class="img"><img src="thumbs/' . $row['pphoto'] . '" height="80px" width="80px" onclick="loadChat(\'chat.php\',\'chat1\',\'olivier=' . urlencode($nightshade) . '\',\'chatdisplay\',\'getDisplayChat.php\')";><div class="desc">' . $row['fullname'] . '</div></div><br />'; } } echo '<br /><div class="clear"></div><br /><br />'; ?> <div class="chat1" id="chat1"></div> <div class="chat2" id="chat2"></div> <div class="chat3" id="chat3"></div> <div class="chat4" id="chat4"></div> <div class="chat5" id="chat5"></div> <br /> <br /> Chat Page PHP Code: <?php include("dbconnect.php"); $blossom=explode(';',$_POST['olivier']); $periwinkle=$blossom[0]; $peppermint=$blossom[1]; $pine=$blossom[2]; global $periwinkle; global $peppermint; global $pine; echo '<div class="chatbanner" width="100%"> <table width="100%"> <tr> <td width="90%">'; echo '<center><b>This Name</b></center>'; echo '</td> <td width="5%">'; echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="−">'; echo '</td> <td width="5%">'; echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="X">'; echo '</td> </tr> </table></div>'; echo '<div class="chattext" id="chatdisplay" overflow="scroll">'; $result = mysql_query("SELECT * FROM chat INNER JOIN allusers ON chat.chatter=allusers.PId WHERE (chat.chatter={$periwinkle} AND chat.chattee={$peppermint}) OR (chat.chatter={$peppermint} AND chat.chattee={$periwinkle}) AND ref={$pine} ORDER BY chat.date DESC"); while($row = mysql_fetch_array($result)){ echo '<table width="100%"><tr><td width="20%"><img src="thumbs/' . $row['pphoto'] . '" width="40px" height="40px"></td>'; echo '<td width="80%" valign="top">' . nl2br($row['message']) . '</td></tr></table><hr />'; } echo '</div><br /><br />'; echo '<form action="insertChat.php" method="post" name="chatmessage" id="chatmessage"> <input type="text" class="hidden" name="from" id="from" value="' . $_SESSION['MyPId'] . '"> <input type="text" class="hidden" name="to" id="to" value="'; echo ($_SESSION['MyPId']==$peppermint) ? $periwinkle : $peppermint . '"> <input type="text" class="hidden" name="ref" id="ref" value="' . $pine . '">'; echo '<div class="textchat">'; echo '<textarea cols="21" row="5" name="message" id="message"></textarea>'; echo '<input type="button" name="submitchat" id="submitchat" value=" "></div></form>'; ?> Style Sheet: Code: div.chat1 { position:fixed; bottom:1px; right:50px; width:200px; height:250px; float:right; border:2px solid black; background-color:#fdf5e6; scrolling:auto; } div.chat2 { position:fixed; bottom:1px; right:260px; width:200px; height:250px; float:right; border:2px solid black; background-color:#fdf5e6; scrolling:auto; } div.chat3 { position:fixed; bottom:1px; right:470px; width:200px; height:250px; float:right; border:2px solid black; background-color:#fdf5e6; scrolling:auto; } div.chat4 { position:fixed; bottom:1px; right:680px; width:200px; height:250px; float:right; border:2px solid black; background-color:#fdf5e6; scrolling:auto; } div.chat5 { position:fixed; bottom:1px; right:890px; width:200px; height:250px; float:right; border:2px solid black; background-color:#fdf5e6; scrolling:auto; } .chatbanner { background-color:#4b0082; text-decoration:none; color:white; } .textchat { position:fixed; bottom:0.5px; } .chatbutton { position:fixed; bottom:0.5px; right:0.5px; border:none; } If I have left anything out which might be helpful please let me know. I just got stuck on the logistics side of figuring out how was the best way to make this happen, any pointers would be great. hi ! i would like to write the code for multiple text box select as shown in the link below: http://www.downloadplex.com/Mobile/I...ne_284120.html please see the screen shot 3 Hi I am trying to create a page that has a couple of pop-up overlay boxes from a couple of links, Everything is working ok I think except for a problem on a browser resize. The original code I found : ( http://kalyanchakravarthy.net/?p=208 ) was created or only one window so the resize code controls both windows, when I think need each one controlled separately. The resize code will make a closed overlay box appear. Any suggestions or help will be greatly appreciated. THANK YOU 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" /> <script language="javascript" src="jquery-1.2.6.min.js"></script> <!--script language="javascript" src="jquery-schedule-overlay.js"></script--> <style type="text/css"> .bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden } .overlayBox { border:1px solid #09F; position:absolute; display:none; width:730px; height:600px; background:#fff; } .overlayBoxb { border:1px solid #09F; position:absolute; display:none; width:730px; height:600px; background:#fff; } .overlayContent { padding:0px; } .overlayContentb { padding:0px; } .closeLink { float:right; color:red; text-decoration:none; } a:hover { text-decoration:none; } </style></head> <body> <div class="bgCover"> </div> <a href="#" class="launchLink">Launch Window</a> <div class="overlayBox"> <div class="overlayContent"> <a href="#" class="closeLink">Close</a> <img src="Session-A-mock-up.jpg" alt="Session A Schedule " /> </div></div> <br /><br /> <a href="#" class="launchLinkb">Launch Window 2</a> <div class="overlayBoxb"> <div class="overlayContentb"> <a href="#" class="closeLink">Close</a> <img src="Session-B-mock-up.jpg" alt="Session B Schedule "/> </div></div> <script language="javascript"> function showOverlayBox() { //if box is not set to open then don't do anything if( window.isOpen == false ) return; // set the properties of the overlay box, the left and top positions $('.overlayBox').css({ display:'block', left:( $(window).width() - $('.overlayBox').width() )/2, top:( $(window).height() - $('.overlayBox').height() )/2 -20, position:'absolute' }); // set the window background for the overlay. i.e the body becomes darker $('.bgCover').css({ display:'block', width: $(window).width(), height:$(window).height(), }); function showOverlayBoxb() { windowb=window.open; //if box is not set to open then don't do anything if( windowb.isOpen == false ) return; // set the properties of the overlay box, the left and top positions $('.overlayBoxb').css({ display:'block', left:( $(window).width() - $('.overlayBoxb').width() )/2, top:( $(window).height() - $('.overlayBoxb').height() )/2 -20, position:'absolute' }); // set the window background for the overlay. i.e the body becomes darker $('.bgCover').css({ display:'block', width: $(window).width(), height:$(window).height(), }); } function doOverlayOpen() { //set status to open isOpen = true; showOverlayBox(); $('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} ); // dont follow the link : so return false. return false; } function doOverlayOpenb() { //set status to open isOpen = true; showOverlayBoxb(); $('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} ); // dont follow the link : so return false. return false; } function doOverlayClose() { //set status to closed isOpen = false; $('.overlayBox,.overlayBoxb').css( 'display', 'none' ); // now animate the background to fade out to opacity 0 // and then hide it after the animation is complete. $('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } ); } // if window is resized then reposition the overlay box $(window).bind('resize',showOverlayBox) ; $(window).bind('resize',showOverlayBoxb) ; // activate when the link with class launchLink is clicked $('a.launchLink').click( doOverlayOpen ); // activate when the link with class launchLink2 is clicked $('a.launchLinkb').click( doOverlayOpenb ); // close it when closeLink is clicked $('a.closeLink').click( doOverlayClose ); </script> </body> </html> My problem is that I am trying to call an function within an SWF. Now, I already know how to setup my SWF and that isn't the problem. The problem is that when I try to call the function using Javascript, I am told that the function doesn't exist. I'll show you the code right here. Code: function AudioPlayerEmbed( e ) { if ( e.success ) { e.ref.LoadAudio( 'http://therevolve.com/upload/userfiles/Music/Alec_Smith1.mp3' ); } } swfobject.embedSWF("player/MP3Player.swf", "flash", "300", "90", "9.0.0", "player/expressInstall.swf", null, null, null, AudioPlayerEmbed ); HOWEVER, when I put some alert before the call, it happens to work. What is going on? Code: function AudioPlayerEmbed( e ) { alert("A"); if ( e.success ) { e.ref.LoadAudio( 'http://therevolve.com/upload/userfiles/Music/Alec_Smith1.mp3' ); } } swfobject.embedSWF("player/MP3Player.swf", "flash", "300", "90", "9.0.0", "player/expressInstall.swf", null, null, null, AudioPlayerEmbed ); Here is a live example. Any help would be appreciated. If you need more information, I can provide it. |