|
JavaScript - Help Change Value Of Multiple Text Boxes
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 Similar Tutorialshi ! 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 there! I need help! Basically, I need to create a sentence and on one of the words the person accessing the site can click the word and it will change to another word and then again to a third word and so on for 5 words then it will, on click, return to the 1st word again. like a circle of various words. I've managed to get it to work with 2 words back and forth - but I need it to have multiple states. I need the JS and how to impliment it in the HTML. JS isnt my strong point just yet Please help me! Thanks so so much! follow me on twitter - @robyn_90 I set up my javascript so that it shows a hidden div box from an array when i click on a link. To show only one hidden box, the code is <a href="javascript:showOnlyThis('divIDgoeshere')"> how do i show multiple hidden div boxes with one link? Thanks! Hello, I have 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>
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 :-) Hi all, please help... There is a small, but very usability script - Multiple Dynamic Combo Boxes by Elviro Mirko (http://www.javascriptkit.com/script/...plecombo.shtml). Since there are many versions of this script. One of them, which I did. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
<!--
/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
// first combo box //
data_1 = new Option("All Models", "#");
data_2 = new Option("Model 1", "#");
data_3 = new Option("Model 2", "#");
// second combo box //
//All
data_1_1 = new Option("All Types", "#");
data_1_2 = new Option("Type 1", "#");
data_1_3 = new Option("Type 2", "#");
//Model 1
data_2_1 = new Option("All Types", "#");
data_2_2 = new Option("Type 1", "#");
data_2_3 = new Option("Type 2", "#");
//Model 2
data_3_1 = new Option("All Types", "#");
data_3_2 = new Option("Type 1", "#");
data_3_3 = new Option("Type 2", "#");
// third combo box //
//All Models
data_1_1_1 = new Option("All Sizes", "#");
data_1_1_2 = new Option("Size 1", "#");
data_1_1_3 = new Option("Size 2", "#");
data_1_2_1 = new Option("All Sizes", "#");
data_1_2_2 = new Option("Size 1", "#");
data_1_2_3 = new Option("Size 2", "#");
data_1_3_1 = new Option("All Sizes", "#");
data_1_3_2 = new Option("Size 1", "#");
data_1_3_3 = new Option("Size 2", "#");
//Model 1
data_2_1_1 = new Option("All Sizes", "#");
data_2_1_2 = new Option("Size 1", "#");
data_2_1_3 = new Option("Size 2", "#");
data_2_2_1 = new Option("All Sizes", "#");
data_2_2_2 = new Option("Size 1", "#");
data_2_2_3 = new Option("Size 2", "#");
data_2_3_1 = new Option("All Sizes", "#");
data_2_3_2 = new Option("Size 1", "#");
data_2_3_3 = new Option("Size 2", "#");
//Model 2
data_3_1_1 = new Option("All Sizes", "#");
data_3_1_2 = new Option("Size 1", "#");
data_3_1_3 = new Option("Size 2", "#");
data_3_2_1 = new Option("All Sizes", "#");
data_3_2_2 = new Option("Size 1", "#");
data_3_2_3 = new Option("Size 2", "#");
data_3_3_1 = new Option("All Sizes", "#");
data_3_3_2 = new Option("Size 1", "#");
data_3_3_3 = new Option("Size 2", "#");
// fourth combo box //
//All Models
data_1_1_1_1 = new Option("All color","http://special.link");
data_1_1_1_2 = new Option("Color 1","http://special.link");
data_1_1_1_3 = new Option("Color 2","http://special.link");
data_1_1_2_1 = new Option("All color","http://special.link");
data_1_1_2_2 = new Option("Color 1","http://special.link");
data_1_1_2_3 = new Option("Color 2","http://special.link");
data_1_1_3_1 = new Option("All color","http://special.link");
data_1_1_3_2 = new Option("Color 1","http://special.link");
data_1_1_3_3 = new Option("Color 2","http://special.link");
data_1_2_1_1 = new Option("All color","http://special.link");
data_1_2_1_2 = new Option("Color 1","http://special.link");
data_1_2_1_3 = new Option("Color 2","http://special.link");
data_1_2_2_1 = new Option("All color","http://special.link");
data_1_2_2_2 = new Option("Color 1","http://special.link");
data_1_2_2_3 = new Option("Color 2","http://special.link");
data_1_2_3_1 = new Option("All color","http://special.link");
data_1_2_3_2 = new Option("Color 1","http://special.link");
data_1_2_3_3 = new Option("Color 2","http://special.link");
data_1_3_1_1 = new Option("All color","http://special.link");
data_1_3_1_2 = new Option("Color 1","http://special.link");
data_1_3_1_3 = new Option("Color 2","http://special.link");
data_1_3_2_1 = new Option("All color","http://special.link");
data_1_3_2_2 = new Option("Color 1","http://special.link");
data_1_3_2_3 = new Option("Color 2","http://special.link");
data_1_3_3_1 = new Option("All color","http://special.link");
data_1_3_3_2 = new Option("Color 1","http://special.link");
data_1_3_3_3 = new Option("Color 2","http://special.link");
//All Model 1
data_2_1_1_1 = new Option("All color","http://special.link");
data_2_1_1_2 = new Option("Color 1","http://special.link");
data_2_1_1_3 = new Option("Color 2","http://special.link");
data_2_1_2_1 = new Option("All color","http://special.link");
data_2_1_2_2 = new Option("Color 1","http://special.link");
data_2_1_2_3 = new Option("Color 2","http://special.link");
data_2_1_3_1 = new Option("All color","http://special.link");
data_2_1_3_2 = new Option("Color 1","http://special.link");
data_2_1_3_3 = new Option("Color 2","http://special.link");
data_2_2_1_1 = new Option("All color","http://special.link");
data_2_2_1_2 = new Option("Color 1","http://special.link");
data_2_2_1_3 = new Option("Color 2","http://special.link");
data_2_2_2_1 = new Option("All color","http://special.link");
data_2_2_2_2 = new Option("Color 1","http://special.link");
data_2_2_2_3 = new Option("Color 2","http://special.link");
data_2_2_3_1 = new Option("All color","http://special.link");
data_2_2_3_2 = new Option("Color 1","http://special.link");
data_2_2_3_3 = new Option("Color 2","http://special.link");
data_2_3_1_1 = new Option("All color","http://special.link");
data_2_3_1_2 = new Option("Color 1","http://special.link");
data_2_3_1_3 = new Option("Color 2","http://special.link");
data_2_3_2_1 = new Option("All color","http://special.link");
data_2_3_2_2 = new Option("Color 1","http://special.link");
data_2_3_2_3 = new Option("Color 2","http://special.link");
data_2_3_3_1 = new Option("All color","http://special.link");
data_2_3_3_2 = new Option("Color 1","http://special.link");
data_2_3_3_3 = new Option("Color 2","http://special.link");
//All Model 2
data_3_1_1_1 = new Option("All color","http://special.link");
data_3_1_1_2 = new Option("Color 1","http://special.link");
data_3_1_1_3 = new Option("Color 2","http://special.link");
data_3_1_2_1 = new Option("All color","http://special.link");
data_3_1_2_2 = new Option("Color 1","http://special.link");
data_3_1_2_3 = new Option("Color 2","http://special.link");
data_3_1_3_1 = new Option("All color","http://special.link");
data_3_1_3_2 = new Option("Color 1","http://special.link");
data_3_1_3_3 = new Option("Color 2","http://special.link");
data_3_2_1_1 = new Option("All color","http://special.link");
data_3_2_1_2 = new Option("Color 1","http://special.link");
data_3_2_1_3 = new Option("Color 2","http://special.link");
data_3_2_2_1 = new Option("All color","http://special.link");
data_3_2_2_2 = new Option("Color 1","http://special.link");
data_3_2_2_3 = new Option("Color 2","http://special.link");
data_3_2_3_1 = new Option("All color","http://special.link");
data_3_2_3_2 = new Option("Color 1","http://special.link");
data_3_2_3_3 = new Option("Color 2","http://special.link");
data_3_3_1_1 = new Option("All color","http://special.link");
data_3_3_1_2 = new Option("Color 1","http://special.link");
data_3_3_1_3 = new Option("Color 2","http://special.link");
data_3_3_2_1 = new Option("All color","http://special.link");
data_3_3_2_2 = new Option("Color 1","http://special.link");
data_3_3_2_3 = new Option("Color 2","http://special.link");
data_3_3_3_1 = new Option("All color","http://special.link");
data_3_3_3_2 = new Option("Color 1","http://special.link");
data_3_3_3_3 = new Option("Color 2","http://special.link");
// other parameters
displaywhenempty="";
valuewhenempty=-1;
displaywhennotempty="-select-";
valuewhennotempty=0;
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1;
// I empty all combo boxes following the current one
while (document.getElementById("combo_"+i)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1; m>0; m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty);
i++;
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data';
i=0;
while (document.getElementById("combo_"+i)) {
stringa=stringa+'_'+document.getElementById("combo_"+i).selectedIndex;
if (i==currentbox) break;
i++;
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1;
if (document.getElementById("combo_"+following)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_";
i=0;
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
son.options[0]=new Option(displaywhenempty,valuewhenempty);
else
son.options[0]=new Option(displaywhennotempty,valuewhennotempty);
else
son.options[i]=new Option(eval(stringa+i+".text"),eval(stringa+i+".value"));
i++;
}
//son.focus()
i=1;
combostatus='';
cstatus=stringa.split("_");
while (cstatus[i]) {
combostatus=combostatus+cstatus[i];
i++;
}
return combostatus;
}
}
function go(elementName){
var newUrl=document.forms[0].elements[elementName].options[document.forms[0].elements[elementName].selectedIndex].value;
if(newUrl.indexOf("http://")>=0){//rudamentary url checker! So don't go to a blank page if select box not populated.
location.href=newUrl;
}
}
//-->
</script>
</head>
<body>
<form>
Model:
<br />
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">All Models</option>
<option value="value3">Model 1</option>
<option value="value4">Model 2</option>
</select>
<br />
Type:
<br />
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<br />
Size:
<br />
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
<br />
Color:
<br />
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
<br />
<input type="button" value="Go" onclick="go('combo3')">
<!-- could be changed for onchange event handler on select box -->
</select>
</form>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>
</html>
But I need to when you first start the script immediately showed the first value and its associated down decaying values without - select - immediately show combo first values All Models All Types All Sizes All Сolor (and after next for various behaviors the user's manipulation choice) **Or are there any other JS solutions that satisfy my request I would be grateful for any aid.... I'm trying to use this code to create 6 sets of (each set 2 Dynamic List boxes). However I have the problem that Category 1-6 selection does not select the correct (adjacent) subcateory list box and instead populates the last selection in subcategory list box 1. How can I set the Java/HTML code so that for example Category #3, populates the selection/case into SubCategory#3 list box? Form Code (only with 2 Category, SubCategory) this when working will be expanded to 6. Code: <table border="0" width="560">
<tbody>
<tr>
<td align="center"><strong>Item#</strong></td>
<td align="center">Paint Type</td>
<td align="center">Colour</td>
<td align="center">Litres</td>
</tr>
<tr>
<td width="56%" align="left" valign="middle">1.<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint">New Paint</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td name="cell1">
<script type="text/javascript" language="JavaScript" >
document.write('<select name="subcategory1" id="subcategory1" name="cell1" ><option value="" name="subcategory1">Select Product</option></select>')
</script>
<noscript><select name="subcategory1" id="subcategory1" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="01_colour" /></td><td>
<input class="formbox" size="5" name="01_litres" /></td>
</tr><br>
<tr>
<td width="56%" align="left" valign="middle">2.<select name="category2" id="category2" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint2">New Paint</option>
<option value="Recycled Paint2">Recycled Paint</option>
</select></td><td name="cell2">
<script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory" id="subcategory"><option value="" name="subcategory">Select Product</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="02_colour" /></td><td>
<input class="formbox" size="5" name="02_litres" /></td>
</tr>
</table>
Java Script which I think is the problem, I cant work out how to name the relevant cell the selection should display in. Code: <script language="javascript" type="text/javascript">
function dropdownlist(indexlist)
{
document.SampleForm.subcategory1.options.length = 0;
switch(indexlist)
{
case "New Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
document.SampleForm.subcategory1.options[2]=new Option("Audio/Video","Audio/Video");
document.SampleForm.subcategory1.options[3]=new Option("Beddings","Beddings");
document.SampleForm.subcategory1.options[4]=new Option("Camera","Camera");
document.SampleForm.subcategory1.options[5]=new Option("Cell Phones","Cell Phones");
break;
case "Recycled Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Interior, Flat/Matt","Interior, Flat/Matt");
document.SampleForm.subcategory1.options[2]=new Option("Interior, Low Sheen","Interior, Low Sheen");
document.SampleForm.subcategory1.options[3]=new Option("Interior, Semi Gloss, Acrylic","Interior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[4]=new Option("Interior, Gloss, Acrylic","Interior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[5]=new Option("Interior, High Gloss, Acrylic","Interior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[6]=new Option("Interior, Suede","Interior, Suede");
document.SampleForm.subcategory1.options[7]=new Option("Exterior, Flat/Matt","Exterior, Flat/Matt");
document.SampleForm.subcategory1.options[8]=new Option("Exterior, Low Sheen","Exterior, Low Sheen");
document.SampleForm.subcategory1.options[9]=new Option("Exterior, Semi Gloss, Acrylic","Exterior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[10]=new Option("Exterior, Gloss, Acrylic","Exterior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[11]=new Option("Exterior, High Gloss, Acrylic","Exterior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[12]=new Option("Paving/Concrete","Paving/Concrete");
document.SampleForm.subcategory1.options[13]=new Option("Dulux Acratex","Dulux Acratex");
break;
}
return true;
}
</script>
Thanks Daniel Hi 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 Hi I am trying to create a page that has a couple of pop-up overlay boxes from a couple of links, Everything is working ok I think except for a problem on a browser resize. The original code I found : ( http://kalyanchakravarthy.net/?p=208 ) was created or only one window so the resize code controls both windows, when I think need each one controlled separately. The resize code will make a closed overlay box appear. Any suggestions or help will be greatly appreciated. THANK YOU Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery-1.2.6.min.js"></script>
<!--script language="javascript" src="jquery-schedule-overlay.js"></script-->
<style type="text/css">
.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
.overlayBox {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}
.overlayBoxb {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}
.overlayContent {
padding:0px;
}
.overlayContentb {
padding:0px;
}
.closeLink {
float:right;
color:red;
text-decoration:none;
}
a:hover { text-decoration:none; }
</style></head>
<body>
<div class="bgCover"> </div>
<a href="#" class="launchLink">Launch Window</a>
<div class="overlayBox">
<div class="overlayContent">
<a href="#" class="closeLink">Close</a>
<img src="Session-A-mock-up.jpg" alt="Session A Schedule " />
</div></div>
<br /><br />
<a href="#" class="launchLinkb">Launch Window 2</a>
<div class="overlayBoxb">
<div class="overlayContentb">
<a href="#" class="closeLink">Close</a>
<img src="Session-B-mock-up.jpg" alt="Session B Schedule "/>
</div></div>
<script language="javascript">
function showOverlayBox() {
//if box is not set to open then don't do anything
if( window.isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
display:'block',
left:( $(window).width() - $('.overlayBox').width() )/2,
top:( $(window).height() - $('.overlayBox').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
function showOverlayBoxb() {
windowb=window.open;
//if box is not set to open then don't do anything
if( windowb.isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBoxb').css({
display:'block',
left:( $(window).width() - $('.overlayBoxb').width() )/2,
top:( $(window).height() - $('.overlayBoxb').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
}
function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}
function doOverlayOpenb() {
//set status to open
isOpen = true;
showOverlayBoxb();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}
function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox,.overlayBoxb').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}
// if window is resized then reposition the overlay box
$(window).bind('resize',showOverlayBox) ;
$(window).bind('resize',showOverlayBoxb) ;
// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// activate when the link with class launchLink2 is clicked
$('a.launchLinkb').click( doOverlayOpenb );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );
</script>
</body>
</html>
Hi, I think the problem I am having is an event not a css issue, so I hope I posted in the right forum. What I am trying to achieve is the capability to provide multiple instant chat messages. I have the php/ajax for the instant messages, what I am not sure is how to be able to view multiple chats. What I have started to do is limit it to five possible instant chat messages and have five divs in place with visibility hidden. It works fine for one. But if someone clicks on the name of a person they wish to chat with, the way I am currently doing it, I would need to find out: 1. which divs were free to start an instant chat in (I have no idea how to do this with divs)? 2. Having identified it I will need to change the visibility so it suddenly becomes visible I guess firstly am I going about this the right way to be able to host/view multiple chats? My code is below. Main Page PHP Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function (){ $('#submitchat').live('click',function(){ var data = $('#chatmessage').serialize(); $.post ('insertChat.php',data, function(){ $('#chatmessage').each (function(){ this.reset(); }); return false; }); }); }); </script> <script type="text/javascript"> function loadChat(File,ID,Msg,TID,Cile){ loadXMLDoc1(File,ID,Msg); delay = setTimeout(function(){loadChatRefresh(Cile,TID,Msg)},5000); } </script> <script type="text/javascript"> function loadChatRefresh(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; timer = setInterval(function(){loadChatRefresh(File,ID,Msg)},3000); } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> <script type="text/javascript"> function loadXMLDoc1(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> </head> <body> <h1>Test</h1> <?php include("dbconnect.php"); $result = mysql_query("SELECT *, signedin.PId as SIPId FROM signedin INNER JOIN friends ON signedin.PId=friends.invited OR signedin.PId=friends.invitee WHERE ((friends.invitee={$_SESSION['MyPId']} AND friends.statae='accepted') OR (friends.invited={$_SESSION['MyPId']} AND friends.statae='accepted')) AND signedin.LogOff IS NULL AND signedin.PId !={$_SESSION['MyPId']}"); while($row = mysql_fetch_array($result)){ $mugwort= $row['SIPId'] . ';'; } $motherwort=explode(';',$mugwort); foreach ($motherwort as $mulberry){ $result = mysql_query("SELECT * FROM allusers WHERE PId='{$mulberry}'"); while($row = mysql_fetch_array($result)){ $nosegay=rand(). rand(). rand(). rand(). rand(); $nightshade="{$_SESSION['MyPId']};{$mulberry};{$nosegay}"; echo '<div class="img"><img src="thumbs/' . $row['pphoto'] . '" height="80px" width="80px" onclick="loadChat(\'chat.php\',\'chat1\',\'olivier=' . urlencode($nightshade) . '\',\'chatdisplay\',\'getDisplayChat.php\')";><div class="desc">' . $row['fullname'] . '</div></div><br />'; } } echo '<br /><div class="clear"></div><br /><br />'; ?> <div class="chat1" id="chat1"></div> <div class="chat2" id="chat2"></div> <div class="chat3" id="chat3"></div> <div class="chat4" id="chat4"></div> <div class="chat5" id="chat5"></div> <br /> <br /> Chat Page PHP Code: <?php include("dbconnect.php"); $blossom=explode(';',$_POST['olivier']); $periwinkle=$blossom[0]; $peppermint=$blossom[1]; $pine=$blossom[2]; global $periwinkle; global $peppermint; global $pine; echo '<div class="chatbanner" width="100%"> <table width="100%"> <tr> <td width="90%">'; echo '<center><b>This Name</b></center>'; echo '</td> <td width="5%">'; echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="−">'; echo '</td> <td width="5%">'; echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="X">'; echo '</td> </tr> </table></div>'; echo '<div class="chattext" id="chatdisplay" overflow="scroll">'; $result = mysql_query("SELECT * FROM chat INNER JOIN allusers ON chat.chatter=allusers.PId WHERE (chat.chatter={$periwinkle} AND chat.chattee={$peppermint}) OR (chat.chatter={$peppermint} AND chat.chattee={$periwinkle}) AND ref={$pine} ORDER BY chat.date DESC"); while($row = mysql_fetch_array($result)){ echo '<table width="100%"><tr><td width="20%"><img src="thumbs/' . $row['pphoto'] . '" width="40px" height="40px"></td>'; echo '<td width="80%" valign="top">' . nl2br($row['message']) . '</td></tr></table><hr />'; } echo '</div><br /><br />'; echo '<form action="insertChat.php" method="post" name="chatmessage" id="chatmessage"> <input type="text" class="hidden" name="from" id="from" value="' . $_SESSION['MyPId'] . '"> <input type="text" class="hidden" name="to" id="to" value="'; echo ($_SESSION['MyPId']==$peppermint) ? $periwinkle : $peppermint . '"> <input type="text" class="hidden" name="ref" id="ref" value="' . $pine . '">'; echo '<div class="textchat">'; echo '<textarea cols="21" row="5" name="message" id="message"></textarea>'; echo '<input type="button" name="submitchat" id="submitchat" value=" "></div></form>'; ?> Style Sheet: Code:
div.chat1 {
position:fixed;
bottom:1px;
right:50px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat2 {
position:fixed;
bottom:1px;
right:260px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat3 {
position:fixed;
bottom:1px;
right:470px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat4 {
position:fixed;
bottom:1px;
right:680px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat5 {
position:fixed;
bottom:1px;
right:890px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
.chatbanner {
background-color:#4b0082;
text-decoration:none;
color:white;
}
.textchat {
position:fixed;
bottom:0.5px;
}
.chatbutton {
position:fixed;
bottom:0.5px;
right:0.5px;
border:none;
}
If I have left anything out which might be helpful please let me know. I just got stuck on the logistics side of figuring out how was the best way to make this happen, any pointers would be great. Hi, I 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 Hi, I'm a javascript noob, and I am doing a project for CS. I got the page to look how it is supposed to, but it does not work correctly. The input boxes should display a number between 1-4 in the output boxes, but the box displays [object HTMLInputElement] instead. And the buttons all perform their task to one output box, not their own output box. Sorry if that was confusing. Please take a look. <html> <!-- esp.html Nick Bravante --> <!-- C --> <!-- ======================= --> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; number = RandomInt(1, 4); document.getElementById('messageBox').value= "You guessed " + guessOne + " My number was " + number + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessOne" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 1" onclick="PickNumber();" /> <br /> <input type="text" id="messageBox" size="90" /> </p> </body> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBoxTwo { var number; numberTwo = RandomInt(1, 4); document.getElementById('messageBoxTwo').value= "You guessed " + guessTwo + " My number was " + numberTwo + "."; } </script> </head> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; numberThree = RandomInt(1, 4); document.getElementById('messageBox').value= "You guessed " + guess + " My number was " + numberThree + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessTwo" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 2" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxTwo" size="90" /> </p> </body> </br> <body> Enter your Guess(1-4).<input type="num" id="guessThree" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 3" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxThree" size="90" /> </p> </body> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; numberFour = RandomInt(1, 4); document.getElementById('messageBoxFour').value= "You guessed " + guessFour + " My number was " + numberFour + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessFour" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 4" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxFour" size="90" /> </p> </body> </html> I've looked all over google but can't seem to find this out. How do you make it so you have 2 text boxes beside each other where you type (for example) 1 character in the first, and it flows into the next (without the need for pressing tab or whatever) I'm talking about the sort of thing you get when entering a software key I am trying to pass data from one form to another form using the url i can get it to come up on the next pages url but how do i get it to go to a text box on the new form. is there a way of assigning text boxes. being trying it in javascript and asp even php would like to keep it to javascript but am open minded to just get it to work I am doing a website project and I am currently designing product page. I have created the text boxes dynamically(as many boxes as the user wants) and he can drag and drop the text boxes in the page. I need to create a dynamic line from one text boxes to other text boxes and delete the test boxes which the user does not want. I have created the dynamic graphic line. I know the values of the text boxes can be saved using php in the backend. But is there any way the values with the dynamically created boxes(with <div></div> elements, not with the text boxes) with values and graphics line can be saved online and the user when log-in again can retrieve the work that he saved? Can we code this either in javascript/php? figured out, sorry
Hi guys, I have a form I am working on that has 4 text boxes in it, but I want to change it so that if a Radio button is selected it makes the 4th text box disappear, but still gives it a value of "0" when the form is submitted. Is this possible with Javascript? Here is what it looks like so far - Code: <FORM><table id='table_columns'>
<tr>
<td colspan="2" align="center">3 Columns <input name="3columns" type="radio" value="3columns"> 4 Columns <input name="4columns" type="radio" value="3columns"></td></tr><tr>
<td align="right"><p>Column 1</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH1" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 2</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH2" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 3</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH3" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 4</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH4" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
</table>
<br />
<input type="button" value="Save" Title="Save these Settings" onClick="updateSettings('COLUMNS');" /></FORM>
If 3 Columns, WIDTH4 is not viewed and defaults to "0". If 4 Columns, all are visible and the number is then optional. Would love some assistance with this as my coding skills are pretty limited and my fingers have gone numb trying to google an answer. Hello all, I have a requirement where i need to take an IPv4 address as an input, my web page has 4 text boxes. If i have a address like this 255.255.255.255, my program jumps into the next text box without any problem as soon as i enter the 3 digits. i dont need to press any tab or any other key to go to next text box. In case of an address like 12.24.12.3, i have to press <tab> to jump into the next text box, My project requirement says that it should work with '.' (dot) char as well. SO here is my actual requirement i need to jump into the next text box as soon as user enters a dot (.) char without displaying the dot into the text box. I am writing this program in perl CGI. Thanks, Vaibhav I have been using just basic text lately and now convert them to smiles when it is ECHO'd on the page later on when the page is viewed again. but with to know how to insert them by clicking the images.
I've been playing around with a madlibs exercise while trying to learn simple javascript. I have three input boxes and a button display an alert containing the input from the boxes. Am I right to be assigning variable names to the values from the text boxes and then referencing those variables in my alert? I'm sorry if this is a dumb question but I've been working on it for hours and can't get past this point. Inset a name: <input type="text" id="textbox1" size="10"/> </br> Insert a verb : <input type="text" id="textbox2" size="10"/> </br> Insert a place: <input type="text id="textbox3" size="10"/> <input type="button" value="CLICK WHEN FINISHED" onClick="name = document.getElementById('textbox1').value; verb = document.getElementById('textbox2').value; place = document.getElementById('textbox3').value; alert('Mad Lib :' + name + " " + verb + " " + place);" /> |
|||||||