Learn VBA & Macros in 1 Week!

JavaScript - How Do I Use Javascript To Show Multiple Div Boxes

Full Excel VBA Course - Beginner to Expert

How Do I Use Javascript To Show Multiple Div Boxes	View Content

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!

Full Excel VBA Course - Beginner to Expert

How Can Javascript Show More Dialogue Boxes In Firefox.

Similar Tutorials

View Content

Multiple Combo Boxes - Show All Records If Sub-combo Isn't Used

Similar Tutorials

View Content

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

Logistics Of Handling Multiple Im Chat Boxes Javascript/css

Similar Tutorials

View Content

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=" "></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.

Program In Javascript To Select Multiple Text Boxes

Similar Tutorials

View Content

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

Show Text Boxes When A Player Clicks A Link.

Similar Tutorials

View Content

Hello all, firstly I'm trying to make a button which you press then it will create a text box, I'v seen scripts that hide / show a text box, but every time you press this link I want it to display another text box. Example Below.

I'v created what I want in HTML, but when a player clicks the link it needs to display a new box everytime.
Code:

<input type='text' size='50' id='jsuniquecode'>

This is my html box which I would like to show. thanks!

I'm sure the code must not be that different to the ones which show / hide an item.

Thanks for reading my thread and it would be much appreciated if somebody could help me figure out where I should start etc. Thanks.

Help Change Value Of Multiple Text Boxes

Similar Tutorials

View Content

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

Open Multiple Dialog Boxes

Similar Tutorials

View Content

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>

Random Selects Into Multiple Boxes?!?!

Similar Tutorials

View Content

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 :-)

Modification Of Multiple Dynamic Combo Boxes

Similar Tutorials

View Content

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

Multiple Dropdown Boxes To Call Function

Similar Tutorials

View Content

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

Multiple Sets Of Dynamic List Boxes

Similar Tutorials

View Content

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

Managing Multiple Overlay Boxes (named Windows?)

Similar Tutorials

View Content

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>

Show / Hide Div Multiple Div's

Similar Tutorials

View Content

Let me start by saying I'm a noob to JavaScript.

What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right. Here's what I got:

Code:

<body>
  <script type="text/javascript">
function toggle_visibility(){
	for(var i = 0,len = arguments.length;i < len; i++){
    var e = document.getElementById(arguments[i]).style,d = e.display;
    e.display = (d == "block") ? "none" : "block";
  }
}
</script>

  <select name="select" id="select">
    <option>0</option>
    <option onclick="toggle_visibility('1');" >1</option>
    <option onclick="toggle_visibility('1','2');">2</option>
    <option onclick="toggle_visibility('1','2','3');">3</option>
    <option onclick="toggle_visibility('1','2','3','4');">4</option>
  </select><br>
<div id="1" style="display: none;">Test1</div>
<div id="2" style="display: none;">Test2</div>
<div id="3" style="display: none;">Test3</div>
<div id="4" style="display: none;">Test4</div>
</body>

Any help would be appreciated, cause I'm lost.

Show/hide Multiple Layers - Need Help

Similar Tutorials

View Content

Hello,

I'm working on a top menu consisting of MENU A, MENU B and MENU C each with it's own drop down submenu on a separate layer. I'm using ShowContent and HideContent to display the submenus onmouseover. So on mouseover it shows "LayerA" and hides "LayerB" and "LayerC."

The problem I'm having is that it will only hide one of the layers. Which ever one is listed first. I'm sure the problem lies in HideContent('LayerB','LayerC') but I don't know how to resolve it. Any help would be much appreciated.

Here is the script I'm using:
<script type="text/javascript" language="JavaScript"></script> And here is my menu:
<td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a>
</td>
<td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a>
</td>
<td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a>
</td>

On Select Show Multiple Divs?

Similar Tutorials

View Content

Hi

I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose.

Anyone know how that can be done?

thanks

Show And Hide Multiple Divides At Once

Similar Tutorials

View Content

I have a page that has 26 divides one for each letter A-Z.

I have the script written so that when you click on the link for one letter it shows that divide and hides the rest. However, I think there has got to be an easier way to do this because the code is so long! It works great but takes forever to write! Does anyone have any suggestions to reduce the size of this code?

Code:

Javascript: (Short and simple code)
function showstuff(divID){
   document.getElementById(divID).style.visibility="visible";
    document.getElementById(divID).style.display="block";
	window.location.hash="names"; 
}

function hidestuff(divID){
   document.getElementById(divID).style.visibility="hidden";
   document.getElementById(divID).style.display="none";
}

HTML: (WHAT A CLUSTER!)

<a href="javascript:showstuff('adivide');hidestuff('bdivide');hidestuff('cdivide');hidestuff('ddivide');">A</a>

So I have 26 functions being called for each click! There must be a simpler way to do this. Perhaps I can write a function that calls all 25 hidestuff() functions and then I can add the one showstuf().

Input Boxes In Javascript

Similar Tutorials

View Content

I am stuck on this question.

1. To set the value contained in a field such as an input box, you must use the ____________________ property.

This is based on Javascript.

What type of properties are used for fields in an input box?

Thanks

Javascript Using Text Boxes

Similar Tutorials

View Content

Hi,

I have a drop down menu, which you select an item and the text in a text box below displays according to what has been chosen from the drop down list.

I have too much text in some case to appear in the text box, so i wanted to find some code so i can select different numbers for pages so i can display the information on different pages.

Is this possible.

Thanks

Javascript Select Boxes

Similar Tutorials

View Content

Calculating quiz answers?

Code:

var correctAnswers = new Array();

correctAnswers[1] = "Extensible Hypertext Markup Language";

correctAnswers[2] = "<p></p>";

correctAnswers[3] = "<br />";



function checkAnswers(){

    var score = 0;

    for (i=1; i<4; i++){

        correctAnswers = getSelectValue("quiz","q" + i);

        if (correctAnswers == correctAnswers[i]){

            score++;

        }

    }

Prompt Boxes With Javascript

Similar Tutorials

View Content

I am trying to get these prompt boxes to display for age and resting heart rate. I cannot get this to work...This is what I have...any suggestions?

<html>
<head>

<h1>Calculate Your Target Heart Rate</h1>

<p>You can calculate your heart rate so that you can get the maximun results from your cardiovascular workout.
Just follow these simple steps:</p>

<script type="text/javascript">
function show_prompt()
{
var number = prompt ("Please enter your Resting heart rate:","Enter Rest Heart Rate Here!");
if (number! null && number! = "")
var age = prompt ("Please enter your Age", "Enter Your Age Here!");

{
document.write ("Your Resting Heart Rate is" + number);
document.write ("Your Age is" + Age);
}
}

</script>
</head>
<body>

<input type ="button" onclick = "show_prompt ()" value = "Start Calculating Here!"/>

</body>
</html>