JavaScript - Random Selects Into Multiple Boxes?!?!

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 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....

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="&#8722">';
    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="&nbsp;"></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">&nbsp;</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>

How would I generate a random number between 0 and 470 at multiples of 10 including 0 and 470?

Hi,

I've got a game 99% finished, basically when the game start and the player clicks through to the game panel, there are 30 tiles (80x80px) each, and the object of the game is for the player to press the tile with the letter "X" on, the X can be on any 1 of 5 different coloured tiles at anyone time and of course there can be more than 1 tile having an X on it. The tiles currently are built via .css, and this works 100% perfectly. However now I want to use images, pulled in from my local website instead of tiles built via .css.

A demo of what I'm kinda of after is here > Edit fiddle - JSFiddle - if you press "run" the images will keep changing their order.

The code I currently have for the game is here..


//CODE//

var TheColorArray = ['red', 'yellow', 'green', 'blue', 'orange'],
TheScore = 0,
TimerLength = 2500,
GameTimer,
ScoreMap = {
'red': 500,
'yellow': 50,
'green': 30,
'blue': 20,
'orange': 5
};

function DrawRow() {

TheColorArray.sort(function () {
return .5 - Math.random();
});

var TheHTML = '<div class="row">';

var MagicColumn = Math.floor(Math.random() * 6);

for (var i = 0; i < 5; i++) {

if (i === MagicColumn) {

TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';

} else {

TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';
}
}

TheHTML = TheHTML + '</div>';

return TheHTML;
}


You'll also see that "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';" and "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';" both state that if X is pressed the game basically carries on. I need this to use a chosen image from my server, i.e. URL/apple.png ....

i have also managed to get to this point (with apples) but its just not working.. Edit fiddle - JSFiddle

Any help would be great..

Many thanks in advance!!!

Hi

I implemented some coding tor create a random image on the page with a corresponding 'alt' tag and all was fine for a while...

Then I got ambitions and modified the script to generate code that would generate two seperate sets of random image and associated 'alt' tag pairs.... and all seemed fine for a while....

... however after having used the code on my page for a while I notice that occasionally I get a broken file link to the image which then fails to show... and shows the 'alt' text of "undefined".

All the code links to images are correct and all images DO show from time to time with the tags.... only occasionally this extra blank/undefined pair is generated. Anyone have any ideas?

Here's the code...

Code:

		<SCRIPT LANGUAGE="JavaScript">
			<!-- Begin
			// Set up the image files to be used.
			var theImages = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theImages[0] = 'images/240 Images/belmarsh-peat-240.jpg'
			theImages[1] = 'images/240 Images/98-florence-rd-maidstone240.jpg'
			theImages[2] = 'images/240 Images/boxgrove-biface-240.jpg'
			theImages[3] = 'images/240 Images/Fieldwalking2-240.jpg'
			theImages[4] = 'images/240 Images/Hawkinge-Pot-240.jpg'
			theImages[5] = 'images/240 Images/Justin_Barton-240.jpg'
			theImages[6] = 'images/240 Images/StaffPages/Hadrians-Wall.jpg'
			theImages[7] = 'images/240 Images/Chilley_Farm_Pevensey240.jpg'
			// do not edit anything below this line
			
			var theImages2 = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theImages2[0] = 'images/LeafletImages/Fronts/Building/Building4.jpg'
			theImages2[1] = 'images/LeafletImages/Fronts/Fieldwork/Fieldwork4.jpg'
			theImages2[2] = 'images/LeafletImages/Fronts/Finds/Finds4.jpg'
			theImages2[3] = 'images/LeafletImages/Fronts/Forensic/Forensic4.jpg'
			theImages2[4] = 'images/LeafletImages/Fronts/GeoArch/GeoArch4.jpg'
			theImages2[5] = 'images/LeafletImages/Fronts/Heritage/Heritage4.jpg'
			theImages2[6] = 'images/LeafletImages/Fronts/Landscape/Landscape4.jpg'
			// do not edit anything below this line

			var theAlts = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theAlts[0] = 'Peat bog excavations at Belmarsh Prison.'
			theAlts[1] = 'An archaeological watching brief underway in Maidstone, Kent.'
			theAlts[2] = 'A flint biface hand-axe the from Boxgrove excavations, West Sussex.'
			theAlts[3] = 'Fieldwalking.'
			theAlts[4] = 'Excavation of a cremation urn at Hawkinge, Kent.'
			theAlts[5] = 'An MA Student from University College London a records ceramic vessel.'
			theAlts[6] = 'The Hadrian’s Wall Management plan was prepared in consultation with Archaeology South-East (Copyright - Image by Simon Warner).'
			theAlts[7] = 'Historic Building Recording at Chilley Farm, Pevensey.'


			var theAlts2 = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theAlts2[0] = 'Building Recording Services.'
			theAlts2[1] = 'Fieldwork Services.'
			theAlts2[2] = 'Finds and Environmental Specialist Services.'
			theAlts2[3] = 'Forensic Archaeology.'
			theAlts2[4] = 'Geoarchaeological Services.'
			theAlts2[5] = 'Heritage Management Services.'
			theAlts2[6] = 'Landscape Research Services.'
			
			var j = 0
			var p = theImages.length;
			var preBuffer = new Array()
			for (i = 0; i < p; i++){
			   preBuffer[i] = new Image()
			   preBuffer[i].src = theImages[i]
			}
			var whichImage = Math.round(Math.random()*(p-1));
			
			
			
			function showImage(){
			document.write('<img src="'+theImages[whichImage]+'" border="1" alt="'+theAlts[whichImage]+'">');
			}
			
			function showImage2(){
			document.write('<img src="'+theImages2[whichImage]+'" border="0" alt="'+theAlts2[whichImage]+'">');
			}

			//  End -->
		</script>

and its called by the code...

Code:

              <SCRIPT LANGUAGE="JavaScript">
	 		 <!-- Begin
	  			showImage(); 
	 		 //  End -->
	 	    </script>

and..

Code:

              <SCRIPT LANGUAGE="JavaScript">
	 		 <!-- Begin
	  			showImage2(); 
	 		 //  End -->
	 	    </script>

Many thanks in advance.

hi,

I am now building my website as a final project for my year. I am doing graphic design, so the website is actually some kind of portfolio. The idea of this website (which is not yet online) is this : it is some kind of big pasteboard on which i will display all the work i have done in my academy since a couple of years. The pasteboard is at the moment a background image/color field of given dimension (i figure that was the only way to do what i wanted...see further)

Every works/image load on a random place and then can be dragged, and dropped (this part i already figured out). At the moment, every image (for every project), is inside a <div>.

What i need help for is this:
at the moment, my function successfully load 1 element at random position.
I now want this function to work separately, for every <div>, so that every image is randomly placed on load, on the background image (and not the browser window, which is smaller).

Here is the code i have for the moment (sorry for the mess, i really am just beginning! and truely, i don't get half of this, i just know it is working at the moment):


Code:

<head>

	<!--// function random start position-->
<script>

var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById; if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else { var nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}}
function xDOM(objectId, wS) { if (stdDOM) return wS ? document.getElementById(objectId).style: document.getElementById(objectId); if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId]; if (nsDOM) return document.layers[objectId]; }

// More Object Functions
function setObjVis(objectID,vis) {var objs = xDOM(objectID,1); objs.visibility = vis;}
function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}

// Browser Window Size and Position
function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}
function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;}
function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}

// Random Position Script

var xxx = Math.floor(Math.random()* (pageWidth()-230));
var yyy = Math.floor(Math.random()* (pageHeight()-50));

function start() 
{var x = (posLeft()+xxx) + 'px'; 
var y = (posTop()+yyy) + 'px'; 
moveObjTo('myobj',x,y); 
setObjVis('myobj','visible');}
window.onload = start;
window.onscroll = start;// JavaScript Document

</script>
</head>

<body bgcolor="#9A9B95" background="../website/background.jpg">


<div id="myobj" style="position:absolute" >
	<img src="oblique strategies holes.jpg" width="595" height="842" style="position:absolute" class="dragme"/>
</div>

<div id="div2">
  <img src="oblique strategies choices.jpg" width="842" height="595" style="position:absolute" class="dragme" />
</div>

</body>

now, what i really want is this function to work for every <div>

but i know there are also some flaws (that i'm unfortunately unable to fix myself):
the integers "230 and 50" in the "random position script" should be replaced byt the width and heigh of the image/div (so i guess i should find a function that can get those numbers, name them "ImgWeidth" and "ImgHeigh" so that those integer can be called in this "random position" function.
also, once the div 'myobj' is loaded, randomly, it behaves like if position=fixed (so stays on the spot when i scroll down the window). I think this is because it calculates the position according to the browser window and not my background. this has be fixed, because i don't want all my images to load only in the browser window (but on the whole pasteboard/background image).

well, i guess this is already 3 questions in one. so i will let it like that for the moment. Sorry if i'm saying too much/not enough... beginners mistake!:confused:

thanks in advance for any help you will give me!

Another homework assignment that I can't quite seem to get to work...

I've been asked to do the following using javascript:
-Create a function named randInt() with one parameter of "size". Declare a variable named "rNum" equal to a random integer between 1 and the value of the size variable. Return the value of the "rNum" varialbe from the function.

-Create a function named getQuote() with one parameter anemd "qNum". The function should create an array named mtQuotes with five quotes; there should be no quote for the array index "0". Return the value of the mtQuotes array for the qNum index.

- In the div element of "quotes" insert a script with the following commands: Declare a variable named "randValue" which is euqal to a random integer between 1 and 5 (use the randInt() function). Declare a variable named "quoteText" containing the quote whose array index value is equal to randValue. Write the value of quoteText to the web page.

Here is what I have...it returns undefined. thanks.

Code:

<html>
<head>

<script type="text/javascript">
function randInt(size) {
	var rNum=Math.ceil(Math.random()*5);
	return(rNum);
}
</script>


<script type="text/javascript">
	function getQuote(qNum);
	var mtQuotes = new Array();
	mtQuotes[0] = "";
	mtQuotes[1] = "I smoke in moderation, only one cigar at a time.";
	mtQuotes[2] = "Be careful of reading health books, you might die of a misprint.";
	mtQuotes[3] = "Man is the only animal that blushes or needs to.";
	mtQuotes[4] = "Clothes make the man. Naked people have little or no influence on society.";
	mtQuotes[5] = "One of the most striking differences between a cat and a lie is that a cat has only nine lives.";
	return mtQuotes[qNum];
</script>
</head>

<body>


     <div id="quotes">
	<script type="text/javascript">
        	var randValue=randInt(5);
	var quoteText=getQuote(randValue);
        	document.write(quoteText);
   	 </script>
   </div>

Hi, I'm currently trying to incorporate several random link generators on one page, each with different links to be directed to. However, at the minute all the links just direct me to the URLs of the most recent random link to be created. If someone could point me in the right direction to fixing this that would be great! The code I am currently using is:


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
var movie=new Array()
movie[0]="http://bringbacktheoc.weebly.com"
movie[1]="http://allaboutkarl.weebly.com"
movie[2]="http://recipeshareonline.weebly.com"

function randomLinks(elem)
{
	var randomLink=Math.floor(Math.random()*2);
	elem.href=movie[randomLink];
	elem.target = "_blank";
}
</script>
<a href="#" onclick="randomLinks(this)"<p><font size="20" > 1 </font><p> </a>
</body>
</html>

Thanks!

Hello,

I'm using "Cut & Paste Multiple Dynamic Combo Boxes" script. I want to configure it, so at first only 1st combo box is visible and the rest are hidden and only populate based on the selections. Also, when the last parameter (from the 5th combo box) was selected, I need to show the table with the search results based on the all selected parameters.

Here is what I have so far:
Code:

<script language="JavaScript" 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("1", "$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	data_1_3 = new Option("13", "-");

// third combo box

	data_1_1_1 = new Option("111", "*");
	data_1_2_1 = new Option("121", "*");
	data_1_3_1 = new Option("131", "*");

// fourth combo box

	data_1_1_1_1 = new Option("1111","%")
	data_1_1_1_2 = new Option("1112","%")
	data_1_2_1_1 = new Option("1211","%")
	data_1_3_1_1 = new Option("1311","%")
	data_1_3_1_2 = new Option("1312","%")
	data_1_3_1_3 = new Option("1313","%")

// fifth combo box

	data_1_1_1_1_1 = new Option("11111","%")
	data_1_1_1_1_2 = new Option("11112","%")
	data_1_1_1_2_1 = new Option("11121","%")
	data_1_1_1_2_2 = new Option("11122","%")
	data_1_1_1_2_3 = new Option("11123","%")
	data_1_1_1_2_4 = new Option("11124","%")
	data_1_2_1_1_1 = new Option("12111","%")
	data_1_3_1_1_1 = new Option("13111","%")
	data_1_3_1_2_1 = new Option("13121","%")
	data_1_3_1_2_2 = new Option("13122","%")
	data_1_3_1_2_3 = new Option("13123","%")
	data_1_3_1_2_4 = new Option("13124","%")
	data_1_3_1_2_5 = new Option("13125","%")
	data_1_3_1_3_1 = new Option("13131","%")
	data_1_3_1_3_2 = new Option("13132","%")

// 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 ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         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=i+1
    }


// 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 ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }


// filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       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'"))
	   	         eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
	   	      else
	             eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
	      else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
	      i=i+1
	   }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}

//-->
</script>

<form>
<table style="width: 49%">
				<tr>
					<td style="width: 200px">Option 1:</td>
					<td style="width: 213px">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="none">-select-</option>
	<option value="1">1</option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 2:</td>
					<td style="width: 213px">
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 3:</td>
					<td style="width: 213px">
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 4:</td>
					<td style="width: 213px">
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 5:</td>
					<td style="width: 213px">
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
			</table></form>

This script is used in my html page and I don't have a database to choose from. So, I wonder if it's possible to make all these modifications with only html and JavaScript. Any help will be appreciated.

Thanks in advance.

Hello

I'm using the combo box selection menu by Elviro Mirko from this site (http://www.javascriptkit.com/script/...plecombo.shtml)

I have made amendments to show my own data, however what I would like to happen is if the user selects from the top combo only, then all the records would be shown, whereas selecting from the second combo merely 'drills down' and shows the records required. - Hope that makes sense.

The code is as follows:

Code:

// first combo box

	data_1 = new Option("Douglas - DIS", "$");
	data_2 = new Option("Douglas - COE", "$$");
	data_3 = new Option("Peel - DIS", "$$$");
	data_4 = new Option("Peel - COE", "$$$$");
	data_5 = new Option("Ramsey - DIS", "$$$$$");
	data_6 = new Option("Ramsey - COE", "$$$$$$");
	data_7 = new Option("Castletown - DIS", "$$$$$$$");
	data_8 = new Option("Castletown - COE", "$$$$$$$$");		
// second combo box

	data_1_1 = new Option("Registry Office Douglas", "-");
	data_1_2 = new Option("Broadway Baptist Church Douglas", "-");
	data_1_3 = new Option("Finch Hill Congregational Church Douglas", "-");
	data_2_1 = new Option("St Thomas's Church", "--");
	data_2_2 = new Option("St Barnabas Church", "--");
	data_2_3 = new Option("St George's Church", "--");

The HTML code is as follows:

Code:

<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">	
			
			<option value="">Select a Register...</option>
			<option value="Douglas - DIS">Douglas - DIS</option>
			<option value="Douglas - COE">Douglas - COE</option>
			<option value="Peel - DIS">Peel - DIS</option>
			<option value="Peel - COE">Peel - COE</option>
			<option value="Ramsey - DIS">Ramsey - DIS</option>
			<option value="Ramsey - COE">Ramsey - COE</option>
			<option value="Castletown - DIS">Castletown - DIS</option>
			<option value="Castletown - COE">Castletown - COE</option>
			

			</select>
<BR><BR>
			<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
			<option value="">Select a venue...</option>
			
			</select>

the link for the actual site is

http://www.manxbmd.com/cgi-bin/db.cg...m;db=marriages

If you choose Douglas-COE and search, then 0 records are found, if you choose Douglas-COE followed by St Thomas's then still 0 records are found but if you search the surname Allitson you'll see that there is a record there.

I'm not sure where I've gone wrong - I'm completely new to Javascript.

Any suggestions welcomed.

regards

Pendle

Hi there,

I am new to Java Script but had to delve into it to create the options for a form I wish to create.

I downloaded chainedseletmenu from the following; http://www.dynamicdrive.com/dynamici...menu/index.htm


I have the script working, so that you select a first option and a new box appears, then you select the next option and an aditional box appears and so on... This is fine, but I wish to only make additional selection boxes appear if certain options from the drop down lists are selected, but not for others. Also, I wish for users of my forms to be able to add options that are not yet available, I will give an example, lets say cars; if a user selects a make from the list, eg "Honda", a drop down selection list apears, the user then has the option to choose the "Type" of Honda, eg "Prelude", "Civic", "NSR" etc. I would like to be able to add an additional here; = "Not listed".

When the "Not listed" is clicked, I would like to give my users the choice to enter the type (in this example, it could be "CRX") into an auto-appearing text box, after form submission, this could then be added the existing selection list for future users. I am aware that this requires use of a database and conection to tit, but for a start, can anyone guide me in the right direction, or does anyone have examples of such code that I can study and get an idea of what to do?

This is for a non-profit educational site that I am trying to create for my learners! So would apprieciate any help I can get!


Kind regards,

Luke

I've looked for a solution to this issue, but it seems like a little different scenario than other situations.

I made a system for generating friend requests on Facebook. I have a grid that is 6 x 3, for a total of 18 cells. Each cell has a picture in it, and the picture is linked to the Facebook friend request page. My problem is that since each cell is populated at random from the array, I'm getting lots of repeats. For example, some picutures are in 5 cells, and some are in none. I'm trying to figure out how to make it so that once a picture is used once in the grid, it does not get used again in the same grid. I still want every cell filled at random on each page load, I just want to prevent the repeating.

Here's my current code:
Code:

<script type="text/javascript">
var vip_list=new Array(
	new Array('http://profile.ak.fbcdn.net/v225/1616/88/s1220771654_2158.jpg','http://www.facebook.com/addfriend.php?id=1220771654'),
	new Array('http://profile.ak.fbcdn.net/v223/1233/29/s904885342_9055.jpg','http://www.facebook.com/addfriend.php?id=904885342'),
	new Array('http://profile.ak.fbcdn.net/v229/1574/66/s1752031238_626.jpg','http://www.facebook.com/addfriend.php?id=1752031238'),
        new Array('http://profile.ak.fbcdn.net/v223/768/71/n661155042_7325.jpg','http://www.facebook.com/addfriend.php?id=661155042'),
	new Array('http://profile.ak.fbcdn.net/v226/732/26/n1827289885_2478.jpg','http://www.facebook.com/addfriend.php?id=1827289885'),
     new Array('http://profile.ak.fbcdn.net/v229/1631/70/s1425313768_1140.jpg','http://www.facebook.com/addfriend.php?id=1425313768'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1667023416'),
     new Array('http://profile.ak.fbcdn.net/v225/1146/29/s506485704_9532.jpg','http://www.facebook.com/addfriend.php?id=506485704'),
     new Array('http://profile.ak.fbcdn.net/profile6/270/32/s692160490_8745.jpg','http://www.facebook.com/addfriend.php?id=692160490'),
     new Array('http://profile.ak.fbcdn.net/v229/114/83/s1218176198_7375.jpg','http://www.facebook.com/addfriend.php?id=1218176198'),
     new Array('http://profile.ak.fbcdn.net/v226/946/4/s1470171885_4973.jpg','http://www.facebook.com/addfriend.php?id=1470171885'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1329505888'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1325496968'),
     new Array('http://profile.ak.fbcdn.net/v223/1546/92/s1536913202_2017.jpg','http://www.facebook.com/addfriend.php?id=1536913202'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1624715433'),
     new Array('http://profile.ak.fbcdn.net/v228/1282/58/s713998257_3682.jpg','http://www.facebook.com/addfriend.php?id=713998257')
);

var chosen_vip=Math.floor(vip_list.length*Math.random());
var chosen_vip1=Math.floor(vip_list.length*Math.random());
var chosen_vip2=Math.floor(vip_list.length*Math.random());
var chosen_vip3=Math.floor(vip_list.length*Math.random());
var chosen_vip4=Math.floor(vip_list.length*Math.random());
var chosen_vip5=Math.floor(vip_list.length*Math.random());
var chosen_vip6=Math.floor(vip_list.length*Math.random());
var chosen_vip7=Math.floor(vip_list.length*Math.random());
var chosen_vip8=Math.floor(vip_list.length*Math.random());
var chosen_vip9=Math.floor(vip_list.length*Math.random());
var chosen_vip10=Math.floor(vip_list.length*Math.random());
var chosen_vip11=Math.floor(vip_list.length*Math.random());
var chosen_vip12=Math.floor(vip_list.length*Math.random());
var chosen_vip13=Math.floor(vip_list.length*Math.random());
var chosen_vip14=Math.floor(vip_list.length*Math.random());
var chosen_vip15=Math.floor(vip_list.length*Math.random());
var chosen_vip16=Math.floor(vip_list.length*Math.random());
var chosen_vip17=Math.floor(vip_list.length*Math.random());

document.write('<center>');
document.write('<a href="',vip_list[chosen_vip][1],'" target="_blank"><img src="',vip_list[chosen_vip][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip1][1],'" target="_blank"><img src="',vip_list[chosen_vip1][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip2][1],'" target="_blank"><img src="',vip_list[chosen_vip2][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip3][1],'" target="_blank"><img src="',vip_list[chosen_vip3][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip4][1],'" target="_blank"><img src="',vip_list[chosen_vip4][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip5][1],'" target="_blank"><img src="',vip_list[chosen_vip5][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip6][1],'" target="_blank"><img src="',vip_list[chosen_vip6][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip7][1],'" target="_blank"><img src="',vip_list[chosen_vip7][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip8][1],'" target="_blank"><img src="',vip_list[chosen_vip8][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip9][1],'" target="_blank"><img src="',vip_list[chosen_vip9][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip10][1],'" target="_blank"><img src="',vip_list[chosen_vip10][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip11][1],'" target="_blank"><img src="',vip_list[chosen_vip11][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip12][1],'" target="_blank"><img src="',vip_list[chosen_vip12][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip13][1],'" target="_blank"><img src="',vip_list[chosen_vip13][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip14][1],'" target="_blank"><img src="',vip_list[chosen_vip14][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip15][1],'" target="_blank"><img src="',vip_list[chosen_vip15][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip16][1],'" target="_blank"><img src="',vip_list[chosen_vip16][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip17][1],'" target="_blank"><img src="',vip_list[chosen_vip17][0],'" height="60" width="60"></a>');
document.write('<br>');

</script>

Any suggestions?
Thank you!