JavaScript - Looking For Script Where When You Put Mouse Over Options Come Down

Hi

I am trying to use Overlib code to develop a dropdown box area that I can populate with categories and buttons, however the Overlib seem to lie relevent to the mouse and not the button.

Does anyone know any good examples maybe jquery, to create this type of large dropdown.

I want to be able to populate the area with images, and categories using php.

I hope this make some sense.

Steve

I have the following code below to make and populate a select box for a row. It is working on my IE, Firefox, and Chrome, but some others are having problems. It makes the select box, but it does not put the options in there. I am having issues troubleshooting because I cannot replicate the error.
Any ideas?
Code:

newManufacturerCell = newRow.appendChild(document.createElement('td'));
var newSelect=newManufacturerCell.appendChild(document.createElement('select'));
var firstOption=document.createElement('option');
var secondOption=document.createElement('option');
firstOption.text="Dell DCS";
secondOption.text="Hp";
newSelect.add(firstOption,null);
newSelect.add(secondOption,null);
newSelect.id="man"+count;

I'm trying to make a jQuery slider, and I want the user (the person who installs it on their site) to be able to specify options easily. I know the Nivo slider does it from within the $(document).ready() event, but I can't figure out how to do it that way. I want it to be like this:

Code:

<script>
$(document).ready(function() {
myFunction({
option1: 'value1',
option2: 'value2',
etc: 'etc'
});
});
</script>

But how do I recover this data so I can use it later?

Please i am new here and i need some urgent help. I am not much familiar with JavaScript. i have 3 options list as <ul> now what i want is when first scrollbar is chosen the second and third will be enable and will display dates and time..and when somebody choose a date he will be taken to a registration form. for example in my second option i will display dates this will be only enable when the city is being selected from first list:

Code:

<select>
<option>Please Select</option>
<option> 12/12/2009</option>
<option > 12/12/2010</option>
<option> 12/12/2011</option>
<option> 12/12/2012</option>
</select>

here is the code for my option list:

Code:

<ul>
<li>I am in City<select name="dates">
    <option value=0 >Please Select</option>
<optgroup label='test'>
<option value=3 style='font-family:Arial; color:#ffffff;'> City One</option>
<option value=4 style='font-family:Arial; color:#ffffff;'> City Two</option>
<option value=5 style='font-family:Arial; color:#ffffff;'> City Three</option>
<option value=6 style='font-family:Arial; color:#ffffff;'> City Four</option></select></optgroup>
</li>
<li>Dates Available<select name="dates">
    <option value=0>Please Select</option></select>
</li>
<li>Times Available<select name="dates">
    <option value=0>Please Select</option></select>
</li>
</ul>

Thanks for any help

I currently have two selectbox, the first for categories and the second for subcategories. When an option from the category selectbox is chosen I would like the subcategory selectbox to be filled with options drawn from an array.

The following code I have works for Chrome and Firefox but not in IE, I would appreciate any help to fix the code or new code which does a similar function.

HTML:
Code:

<select size="9" id="category" name="category" onclick="return categoryChange();">
                    	<option>Antiques ></option>
                        <option>Art and Crafts ></option>
                    </select>

                    <select style="visibility:hidden" id="subcategory" name="subcategory" size="9">
                    </select>

JAVASCRIPT:

Code:

function addOption(selectbox,text,value){
			var optn = document.createElement("OPTION");
			optn.text = text;
			optn.value = value;
			selectbox.options.add(optn);
		}
		
		var antiques = new Array("Furniture","Ceramics","Glass");
		var art = new Array("Drawings and Paintings","Photographs");
		
		
		function categoryChange(){
			
			document.getElementById("subcategory").style.visibility = "visible";
			document.getElementById("subcategory").innerHTML = "";
			
			
			if(document.getElementById("category").value == "Antiques >"){
				for (var i=0; i < antiques.length;++i){
					addOption(document.myForm.subcategory, antiques[i], antiques[i]);
				}		
			}
			else if(document.getElementById("category").value == "Art and Crafts >"){
				for (var i=0; i < art.length;++i){
					addOption(document.myForm.subcategory, art[i], art[i]);
				}
			}
                }

Hello everyone,

Forgive me if I ask something stupid or don't word something just right.
Basically in short I'm really struggling because I don't know javascript beyond the simplest of basic's "manipulating other code"....

What I'm after or trying to do is simply create a script to launch a new page after a X amount of time, like a popup. But I need the new window to have the following options like no toolbar or scroll bars etc... This is the code I've been trying to manipulate for my purpose and just can't get it right meaning it doesn't work at all in fact I haven't even been able to get the timer part worked in since I couldn't get the launch part working..... I've made a web app using asp.net & vb.net and need a launch page so I don't have any toolbars or scrollbars etc....

Any help or input is much appreciated!! Thanks

Code:

<html>
  <script>
    var customerWindow;
    function launchit() {
      var var_height = screen.availHeight - 10;
      var var_width = screen.availWidth - 10;
      var customerUrl = "default.aspx";
      if ( !customerWindow || customerWindow.closed ) {
        options = 'top=0,' + 
                  'left=0,' +
                  'height=' + var_height + ',' +
                  'width=' + var_width + ',' +
                  'fullscreen=no,' +
                  'directories=no,' +
                  'location=no,' +
                  'menubar=no,' +
                  'resizable=yes,' +
                  'scrollbars=yes,' +
                  'status=yes,' +
                  'titlebar=yes,' +
                  'toolbar=no';
        var wname = new String(location.pathname);
        var re1 = /\//g;
        var re2 = /\\/g;
        var re3 = /\./g;
        wname = wname.replace( re1, "" );
        wname = wname.replace( re2, "" );
        wname = wname.replace( re3, "" );
        customerWindow = window.open(customerUrl, wname, options);
        if (customerWindow == null) {
          alert("Could not open a new window. Are popups being blocked?");
        }
        else {
          customerWindow.opener = null;
        }
      }
      else {
        customerWindow.focus();
      }
    }
  </script>
  <head>
    <title>Test Lanuch</title>
  </head>
  <body id="launcher" onload="launchit();">

    <div class="submit">
      <input class="button" type="button" value="Launch" onClick="javascript:launchit();" />
    </div>
  </body>
</html>

Hi all!

I'm using a multiselect box on my website, similar to this one:

<Select Name="multiselect[]" multiple="multiple">
<option>This is option 1</option>
<option>This is option 2</option>
<option>This is option 3</option>
<option>This is option 4</option>
</select>

Now I want to set option 1, option 2 and option 3 as selected (highlighted) in javascript. How would I go about doing this?

I tried something like this:
document.taakform.elements['multiselect[]'].selectedIndex = "1"
document.taakform.elements['multiselect[]'].selectedIndex = "2"
document.taakform.elements['multiselect[]'].selectedIndex = "3"

Of course this doesn't work (else I wouldn't be posting here ), but I hope you catch my drift.

Thanks in advance guys (and gals)!

This code is supposed to batch transfer options between selects. It works flawlessly for single values, but when I select multiple options, all of them get deleted, but only one transferred. Any help is greatly appreciated! Thank you.

Code:

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function removeOptionSelected(b,j)
                {
                  var elRem = document.getElementById(b);
                  var elAdd = document.getElementById(j);
                  var elOptNew = document.createElement('option');
                  var i;
                  for (i = elRem.length - 1; i>=0; i--) {
                    if (elRem.options[i].selected) {
                        //alert(elRem.options[i].text+' '+elRem.options[i].value+' deleted!')
                        elOptNew.text = elRem.options[i].text;
                        elOptNew.value = elRem.options[i].value;
                        try {
                            elAdd.add(elOptNew, null); // standards compliant; doesn't work in IE
                        }
                            catch(ex) {
                            elAdd.add(elOptNew); // IE only
                        }
                        elRem.remove(i);
                    }
                  }
                }
        </script>
        <style type="text/css">
            div {
                float: left;
                /*border: 1px solid black;*/
            }
            div.contain {
                width: 536px;
                height: 500px;
                border: none;
            }
            div.side {
                width: 215px;
                height: 500px;
            }
            div.middle {
                width: 100px;
                height: 300px;
                padding-top: 200px;
            }
            select {
                width: 200px;
                height: 500px;
            }
            input {
                width: 82px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="contain">
            <div class="side">
                <form name="left">
                    <select id="left" class="left" multiple name="out">
                        <option value="apple">apple</option>
                        <option value="banana">banana</option>
                        <option value="orange">orange</option>
                        <option value="tangerine">tangerine</option>
                        <option value="pineapple">pineapple</option>
                        <option value="carrot">carrot</option>
                        <option value="grapefruit">grapefruit</option>
                        <option value="plum">plum</option>
                        <option value="blueberry">blueberry</option>
                        <option value="strawberry">strawberry</option>
                        <option value="cashews">cashews</option>
                        <option value="peanuts">peanuts</option>
                    </select>
                </form>    
            </div>
            <div class="middle">
                <input type="button" value="Add-->" onClick="removeOptionSelected('left','right');" />
                <input type="button" value="<--Remove" onClick="removeOptionSelected('right','left')" />
            </div>
            <div class="side">
                <form name="right">
                    <select id="right" class="right" multiple name="out">
                        <option value="greenbeans">greenbeans</option>
                        <option value="walnuts">walnuts</option>
                    </select>
                </form>    
            </div>
        </div>
    </body>
</html>

Hi,

I have two dropdown lists, and I want to have each option from the first dropdown list to give the specific options on the second dropdown list. For instance,

<select name="module">
<option value="pic1.jpg>TM1</option>
<option value="pic2.jpg>TM2</option>
<option value="pic3.jpg>TM3</option>
</select>

<select name="location">
<option value="loc_1">Box1</option>
<option value="loc_2">Box2</option>
<option value="loc_3">Box3</option>

Note: The option values are just examples, but each option must have a value in order for other things to work.

Here is what I need to do:

If TM1 is selected, only Box1 and Box 2 are available (Box3 is removed from the dropdown "location" list);

If TM2 is selected, only Box 2 is available (Box 1 and 3 are removed from the dropdown "location" list);

If TM3 is selected, all options in the dropdown "location" list are available.


My javascript knowledge is very limited. Any help is greatly appreciated.



Thanks in advance,

JW

Okay so I'm trying to come up with as many alternative methods to accomplish something. So I'm just seeking input from anyone who is willing to supply some.

After the user clicks on a match type it'll know HOW MANY sides to the match there are so say for a singles match it'd have 2 sides (1 vs. 1) for a Triple Threat Match it'd have 3 sides (1 vs. 1 vs. 1) and so on. All matches have a stored field in the database of how many sides they have.

So I'm thinking that I could have it create 3 divs (or something) down in the competitors area of how many sides there are in the match (separated by a VS. text block) and when the user selects a character from the dropdown and adds a character the user can maybe drag and drop the character's name to whatever side they choose.

Its one idea. If you think of an EASIER more EFFICIENT way to do something like this and have an idea say something please or even if you can't let me know that you think it's a worth while idea.

Code:

<label for="matchtypedrop<?php echo $i+1 ?>">Match Type:</label>
            <select class="dropdown" name="matchtypedrop<?php echo $i+1 ?>" id="matchtypedrop<?php echo $i+1 ?>" title="Match Type <?php echo $i+1 ?>">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, matchtype FROM matchtypes';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['matchtype']."</option>\r";
                }
                ?>
            </select>

<label for="competitors<?php echo $i+1 ?>">Competitors:</label><ul id="competitors<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
            <select class="dropdown" name="charactersdrop<?php echo $i+1 ?>" id="charactersdrop<?php echo $i+1 ?>" title="Characters Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, `character` FROM characters ORDER BY `character`';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['character']."</option>\r";
                }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="Competitors(<?php echo $i+1 ?>)"/>

If i have an existing HTML Select statement with options specified, and then based on an even, i want to rebuild that options list, how do I wipe the existing options parameters in order to add new ones? Is that even possible?

Hi. I am not sure if this has been answered to other posts but I tried to search and I can't find the right answer for my problem. I am trying to learn javascript for my self and can't figure out my self. Actually this is the same like the pop-up calendar but the only difference is I don't want numbers, I need a list of options so user can choose and when they select, it will transfer to the textbox right away like the calendar.

I have a form and trying to use a pop-up window to select an option then transfer the option selected to show on the textbox. I have 10 textboxes and all of them has a "Select" button to pop-up the option list. BTW, the "SELECT" button will populate the same option list. Here is my html code:
Code:

<select id="droplist" name="droplist" size="1" > 
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($prompt == $form['droplist']); ?> value="<?php echo $prompt; ?>" style="width:500"><?php safeEcho($prompt); ?> </option>
         <?php endforeach; ?>
       </select>

below is my array: PHP Code:
 <?php
$designation_list = array(
  "00111" =>"Aloha of the Pacific/Transfer Assistance Program for High Income Students",
  "71122" =>"Aloha",
  "71231" =>"Free Housing Information",
  "71232" => "Drama Queen and King",
  "98765"  =>  "Aloha Boy Home of the Land",
  "12345"  =>  "Aloha Home",
);

I wanted to use the option list over and over again for the 10 textboxes. Is that possible? Below is my sample code but didn't work. Please help....

Code:

//javascript
var testpopup5 = new PopupWindow("testdiv5");
testpopup5.offsetX=-20;
testpopup5.offsetY=20;
testpopup5.autoHide();
var testpopup5input=null;
testpopup5.populate('<select>Select: <select name="sel" id="sel" onChange="testpopup5pick(this.options[this.selectedIndex].value);"><OPTION VALUE="A">A</option>
<OPTION VALUE="B">B</option><OPTION VALUE="C">C</option></SELECT>');
function test5popupactivate(obj,anchor) {
	testpopup5input=obj;
	testpopup5.showPopup(anchor);
	}
function testpopup5pick(val) {
	testpopup5input.value = val;
	testpopup5.hidePopup();
	}
//html
 <INPUT NAME="test5" SIZE=30 id="I">
<A HREF="#sel" onClick="test5popupactivate(document.getElementById['I'].test5,'anchor5');return false;" NAME="anchor5" ID="anchor5">Select</A>
<DIV ID="testdiv5" STYLE="position:absolute;visibility:hidden;background-color:#CCCCCC;width:200px;height:50px;"></DIV>

As you can see I get this code from somewhere else but it doesn't work on me. Is there an easy way to do it? Please help. Thanks in advance.

Hi all,
I have table in Javascript and it has addrow, deleterow, submit, and functions.
when i click it automatically adds new row and it has select option to choose some of them
for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte.

So i need once i select the name from combobox, should not allow user to select same name in coming rows

Here is my code.

Thanks beforehands


PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head><title>dinamik sheet</title> 
<script>  
var i=iteration; 
function addrow(){ 
    var tbl = document.getElementById('sheet'); 
    var iteration = tbl.rows.length; 
document.getElementById('count_rows').value = iteration; 
    var row=tbl.insertRow(iteration); 
  
    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration); 
    cellLeft.appendChild(textNode); 
  
    var cellRight = row.insertCell(1); 
    var el = document.createElement('input'); 
    el.type = 'text'; 
    el.name = 'txtRow'+iteration; 
    el.id = 'txtRow'+iteration; 
    el.size = 15; 
    el.value = '0'; 
    el.onblur = sum; 
    cellRight.appendChild(el); 
  
    var cellRight = row.insertCell(2); 
    var elaz = document.createElement('input'); 
    elaz.type = 'text'; 
    elaz.name = 'txtRowaz'+iteration; 
    elaz.id = 'txtRowaz'+iteration; 
    elaz.size = 20; 
    elaz.value = '0'; 
    elaz.onblur = sum; 
    cellRight.appendChild(elaz); 
  
  
  
    var cellRight1 = row.insertCell(3); 
    var ela = document.createElement('input'); 
    ela.type = 'text'; 
    ela.name = 'txtRowe'+iteration; 
    ela.id = 'txtRowe'+iteration; 
    ela.size = 20; 
    ela.value = '0'; 
    ela.onblur = sum; 
    cellRight1.appendChild(ela); 
  
    var cellRightsel = row.insertCell(4); 
    var sel = document.createElement('select'); 
    sel.name = 'selRow' + iteration; 
    sel.id = 'selRow' + iteration; 
    sel.onchange = sum; 
    sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); 
    sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); 
    sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); 
    sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); 
    sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); 
    sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); 
    cellRightsel.appendChild(sel); 
    sum(); 
} 
function removeRowFromTable() 
{ 
  var tbl = document.getElementById('sheet'); 
  var lastRow = tbl.rows.length; 
  if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 
  
function sum(){ 
    var s1 = 0; 
    var s2 = 0; 
    var tbl=document.getElementById('sheet'); 
    var iteration=tbl.rows.length-1; 
    for(var i=1; i<=iteration; i++){//loop through table rows 
        var el1 = document.getElementById('txtRow'+i);//Row's Income field 
        var el2 = document.getElementById('selRow'+i);//Row's percentage menu 
        var ela = document.getElementById('txtRowe'+i);//Row's Tax cell 
        var elaz=document.getElementById('txtRowaz'+i); 
  
        if(!el1 || !el2 || !ela||!elaz) continue; 
        var txt = el1.value; 
        if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries 
  
var tax = Number(txt) * Number(130); 
  
if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ 
    var  tax = Number(txt) * Number(150); 
  
  
} 
if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ 
    var  tax = Number(txt) * Number(100);     
  
} 
if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ 
    var  tax = Number(txt) * Number(85);     
  
} 
if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ 
    var  tax = Number(txt) * Number(95);     
  
} 
if (el2[el2.selectedIndex].value=="GraphigCard ATI") 
{ 
  
        var tax = Number(txt) * Number(88); 
} 
  
        ela.value = tax.toFixed(2); 
        elaz.value=tax.toFixed(2)/Number(txt); 
        if(isNaN(elaz.value)){ 
        elaz.value=0; 
        } 
        s1 += Number(txt); 
        s2 += tax; 
  
} 
    var t1 = document.getElementById('total'); 
    var t2 = document.getElementById('taxtotal'); 
    if(t1){ t1.value = s1.toFixed(2); } 
    if(t2){ t2.value = s2.toFixed(2); } 
} 
  
onload = function(){ 
    addrow(); 
} 
</script> 
</head> 
<body> 
<form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> 
<table align="center" width="75%"> 
<tr> 
<td align="center">Balance sheet</td></tr> 
<tr> 
<td align="center"> 
    <table id="sheet" border="1"> 
    <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> 
  
    </table> 
</td> 
</tr> 
<tr> 
<td align="center"> 
<input type="hidden" name="count_rows" id="count_rows" /> 
<input type="button" value="Add" onclick="addrow()" /> 
<input type="button" value="Remove" onclick="removeRowFromTable()" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /><br /> 
</td> 
</tr> 
<tr> 
<td align="left"> 
<input id="total" name="total" type="text"/>total amount of products<br /> 
<input id="taxtotal" name="taxtotal" type="text"/>total price of products 
</td> 
</tr> 
</table> 
</form> 
  
</body> 
</html> 

Hello!

I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as:

<select name="distance" id="jr_radius">
<option value="0.5">0.5 Miles</option>
<option value="1">1 Mile</option>
<option value="3" selected="selected">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>

So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right.

Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5".

Does that make sense? Any help will be greatly appreciated!

hi, when i mouseon an image, how can i make it so, the image i'm mousingon and a second image both fade into alternate images, and then fade back out to the original images when i mouseoff? here is an example- http://www.javascript-fx.com/develop...t/ifctest.html . any help would be most appreciated.