Hi,
i am trying to develope custom multiple selection enabled list with custom graphics.
i have succeeded regular non multiple selection list. But i don't have any idea how to do multiple selection.
What i need is, a basic algorithm of multiple selection list
thnks...
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
i am trying to develop a list that has multiple selection enabled in javascript. i don't want to use <select> object.
what i am doing is when user clicks on element (in this case <td>), onclick event occurs and i call selectElm function from javascript. in that function i change the background image of the td element. until here there are no problems.
when user starts to select other elements, javascript will pass their id to an array. but if he selects an element that is already selected, javascript will go through array and delete it's id, etc.
is there any algorithm already developed for this?
Like the posters before me, I'm not sure I understand what you're trying to do. Why do you need an array & why do you need to pass the id of the element clicked into that array? If you want to show/hide a background image when a <td> is clicked, you can just do something like the following. Hope that helps.
<html>
<head>
<script type="text/javascript">
window.onload = initClick;
function initClick()
{
var tds = document.getElementById("t
for (var i = 0, n = tds.length; i < n; i ++)
tds[i].onclick = toggleBackground;
}
function toggleBackground()
{
if (this.set)
{
this.style.background = "";
this.set = false;
}
else
{
this.style.background = "url(test.jpeg)";
this.set = true;
}
}
</script>
<style type="text/css">
#tbl td {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<table id="tbl">
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
</table>
</body>
</html>
The following doesn't use images, but acts like a multiple select list... hope it helps.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
opCells = new Array('Option1','Option2',
selCells = new Array()
function selectCell(x,y){
if(x){
if(selCells[y]!=null){
selCells[y] = null
} else {
selCells[y] = '#FF0000'
}
} else {
selCells = new Array()
selCells[y] = '#FF0000'
}
for(i=0;i<opCells.length;i
var clickCell = eval('document.all.cellOp'
if(selCells[i]!=null){
clickCell.style.background
}else{
clickCell.style.background
}
}
}
function drawTable(){
document.write('<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="100">')
for(i=0;i<opCells.length;i
document.write('<TR><TD ID="cellOp'+i+'" onClick="selectCell(window
document.write(opCells[i])
document.write('</TD></TR>
}
document.write('</TABLE>')
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
drawTable()
</SCRIPT>
</BODY>
</HTML>
ok, i think i have done it with help of cb1393. here is what i have. Works in firefox and IE6, i don't have the others so i couldn't test on them.
javascript:
var selectedIdeaId = "";
var multipleSelect = 0;
var multipleIdeaArray = new Array();
var pictureNormalState = "0px 0px";
var pictureOverState = "0px -30px";
var pictureSingleSelectState = "0px -60px";
var pictureMultipleSelectState
function setPointer (theRow, theIdeaId, theAction) {
if (theAction=="over") {
if (theIdeaId != selectedIdeaId) {
if(theRow.style.background
theRow.style.backgroundPos
} else {
theRow.style.backgroundPos
}
}
} else if (theAction=="out") {
if (theIdeaId != selectedIdeaId) {
if(theRow.style.background
theRow.style.backgroundPos
} else {
theRow.style.backgroundPos
}
}
} else if (theAction=="click") {
if (multipleSelect == 1) {
if(multipleIdeaArray[theId
multipleIdeaArray[theIdeaI
} else {
multipleIdeaArray[theIdeaI
}
for(i=0;i<multipleIdeaArra
if(document.getElementById
var clickCell = document.getElementById("l
if(multipleIdeaArray[i]=="
clickCell.style.background
} else if(multipleIdeaArray[i]=="
clickCell.style.background
} else {
clickCell.style.background
}
}
}
} else {
if (selectedIdeaId=="" || selectedIdeaId!=theIdeaId)
if (selectedIdeaId!="") {
document.getElementById("l
}
theRow.style.backgroundPos
selectedIdeaId = theIdeaId;
} else {
theRow.style.backgroundPos
selectedIdeaId = "";
}
}
}
}
and html code:
<table width="402px" border="0" cellspacing="1" cellpadding="0" class="list">
<tr>
<td id="lid82" class="grey" onMouseover="setPointer(th
</tr>
<tr>
<td id="lid83" class="grey" onMouseover="setPointer(th
</tr>
</table>
Business Accounts
Answer for Membership
by: cb1393Posted on 2005-03-24 at 12:31:07ID: 13625393
>> custom multiple selection enabled list with custom graphics
Are you talking about a select box/list that contains graphics within the options? I don't know that I've ever seen something like this in regular HTML. Are you developing in HTML or something like Flash or Java? Please elaborate.