Tweet
need help finishing this code..
hi all, I am new here and this is my first post. now, I want someone to help me please. I have added the HTML codes and uploaded the CSS code file.
what I waned to do here.. is
1) I wanted to select no more than 5 options.
2) when an option is selected I wanted some detail to show in the
information area.
3) when I open the codes in a different computer or browser; the
alignmt of the 2 areas (course selection and detail info) get messed up.
I am using IE8 and google chrome.
so can an one help me plz.
[CODE]
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>index</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<link href="style.css" type="text/css" rel="stylesheet" media="screen" />
<![endif]-->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function MoveOption(objSourceElement, objTargetElement)
{
var aryTempSourceOptions = new Array();
var x = 0;
//looping through source element to find selected options
for (var i = 0; i < objSourceElement.length; i++) {
if (objSourceElement.options[i].selected) {
//need to move this option to target element
var intTargetLen = objTargetElement.length++;
objTargetElement.options[intTargetLen].text = objSourceElement.options[i].text;
objTargetElement.options[intTargetLen].value = objSourceElement.options[i].value;
}
else {
//storing options that stay to recreate select element
var objTempValues = new Object();
objTempValues.text = objSourceElement.options[i].text;
objTempValues.value = objSourceElement.options[i].value;
aryTempSourceOptions[x] = objTempValues;
x++;
}
}
//resetting length of source
objSourceElement.length = aryTempSourceOptions.length;
//looping through temp array to recreate source select element
for (var i = 0; i < aryTempSourceOptions.length; i++) {
objSourceElement.options[i].text = aryTempSourceOptions[i].text;
objSourceElement.options[i].value = aryTempSourceOptions[i].value;
objSourceElement.options[i].selected = false;
}
}
<!--
function myFunction()
{
document.getElementById('T').innerHTML="this is ITEC 1000
";
document.getElementById('T').innerHTML="this is ITEC 1000";
document.getElementById('T').href="nothing";
document.getElementById('T').target="_blank";
}
//-->
</SCRIPT>
<link rel="stylesheet"href=style.css type="text/css"">
</head>
<body>
<div id="left1"></div>
<div id="right1"></div>
<div id="top1"></div>
<div id="bottom1"></div>
<div id="left2"></div>
<div id="right2"></div>
<div id="top2"></div>
<div id="bottom2"></div>
<h1 class="t1">Course Selection</h1>
<form action="" name="MoveList">
<select class="so1" name="Added" size="15" multiple style="width: 130px;">
<option value="">Select course(s)</option>
<option value="ITEC1000">ITEC 1000</option>
<option value="ITEC1010">ITEC 1010</option>
<option value="ITEC1620">ITEC 1620</option>
<option value="ITEC1630">ITEC 1630</option>
<option value="ITEC3020">ITEC 3020</option>
<option value="ITEC3210">ITEC 3210</option>
<option value="ITEC3230">ITEC 3230</option>
<option value="ITEC4030">ITEC 4030</option>
<option value="ITEC4040">ITEC 4040</option>
<option value="ITEC4220">ITEC 4220</option>
<option value="ITEC4305">ITEC 4305</option>
</select>
<!--
<input class="b1" type="button" name="remove" value=" Add -> " style="width: 100px;" onClick="MoveOption(this.form.Added, this.form.Removed)", "changeLink()">-->
<input class="b1" name="remove" type="button" value="Add >>" style="width: 100px;" onClick="MoveOption(this.form.Added, this.form.Removed, myFunction())" >
<input class="b2" type="button" name="Add" value="<< Remove" style="width: 100px;" onClick="MoveOption(this.form.Removed, this.form.Added)">
<select class="so2" name="Removed" size="15" multiple style="width: 130px;">
</select>
</form>
<h2 class="t2">Selected Courses - Detailed Information</h2>
<p class="info1" id="T" ></p>
</html>
[ICODE]
what I waned to do here.. is
1) I wanted to select no more than 5 options.
2) when an option is selected I wanted some detail to show in the
information area.
3) when I open the codes in a different computer or browser; the
alignmt of the 2 areas (course selection and detail info) get messed up.
I am using IE8 and google chrome.
so can an one help me plz.
[CODE]
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>index</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<link href="style.css" type="text/css" rel="stylesheet" media="screen" />
<![endif]-->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function MoveOption(objSourceElement, objTargetElement)
{
var aryTempSourceOptions = new Array();
var x = 0;
//looping through source element to find selected options
for (var i = 0; i < objSourceElement.length; i++) {
if (objSourceElement.options[i].selected) {
//need to move this option to target element
var intTargetLen = objTargetElement.length++;
objTargetElement.options[intTargetLen].text = objSourceElement.options[i].text;
objTargetElement.options[intTargetLen].value = objSourceElement.options[i].value;
}
else {
//storing options that stay to recreate select element
var objTempValues = new Object();
objTempValues.text = objSourceElement.options[i].text;
objTempValues.value = objSourceElement.options[i].value;
aryTempSourceOptions[x] = objTempValues;
x++;
}
}
//resetting length of source
objSourceElement.length = aryTempSourceOptions.length;
//looping through temp array to recreate source select element
for (var i = 0; i < aryTempSourceOptions.length; i++) {
objSourceElement.options[i].text = aryTempSourceOptions[i].text;
objSourceElement.options[i].value = aryTempSourceOptions[i].value;
objSourceElement.options[i].selected = false;
}
}
<!--
function myFunction()
{
document.getElementById('T').innerHTML="this is ITEC 1000
";document.getElementById('T').innerHTML="this is ITEC 1000
";document.getElementById('T').href="nothing";
document.getElementById('T').target="_blank";
}
//-->
</SCRIPT>
<link rel="stylesheet"href=style.css type="text/css"">
</head>
<body>
<div id="left1"></div>
<div id="right1"></div>
<div id="top1"></div>
<div id="bottom1"></div>
<div id="left2"></div>
<div id="right2"></div>
<div id="top2"></div>
<div id="bottom2"></div>
<h1 class="t1">Course Selection</h1>
<form action="" name="MoveList">
<select class="so1" name="Added" size="15" multiple style="width: 130px;">
<option value="">Select course(s)</option>
<option value="ITEC1000">ITEC 1000</option>
<option value="ITEC1010">ITEC 1010</option>
<option value="ITEC1620">ITEC 1620</option>
<option value="ITEC1630">ITEC 1630</option>
<option value="ITEC3020">ITEC 3020</option>
<option value="ITEC3210">ITEC 3210</option>
<option value="ITEC3230">ITEC 3230</option>
<option value="ITEC4030">ITEC 4030</option>
<option value="ITEC4040">ITEC 4040</option>
<option value="ITEC4220">ITEC 4220</option>
<option value="ITEC4305">ITEC 4305</option>
</select>
<!--
<input class="b1" type="button" name="remove" value=" Add -> " style="width: 100px;" onClick="MoveOption(this.form.Added, this.form.Removed)", "changeLink()">-->
<input class="b1" name="remove" type="button" value="Add >>" style="width: 100px;" onClick="MoveOption(this.form.Added, this.form.Removed, myFunction())" >
<input class="b2" type="button" name="Add" value="<< Remove" style="width: 100px;" onClick="MoveOption(this.form.Removed, this.form.Added)">
<select class="so2" name="Removed" size="15" multiple style="width: 130px;">
</select>
</form>
<h2 class="t2">Selected Courses - Detailed Information</h2>
<p class="info1" id="T" ></p>
</html>
[ICODE]