?
Solved

Multiple Selection List Algorithm

Posted on 2005-03-24
8
Medium Priority
?
1,145 Views
Last Modified: 2009-02-13
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...
0
Comment
Question by:blacklord
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 9

Expert Comment

by:cb1393
ID: 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.
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 13625454
I am not sure what you need but multiple selects are done like so

<select multiple size="5">
  <option>abcd </option>
  <option>efghi </option>
  <option>jklmn </option>
  <option>opqrs </option>
  <option>yuvwx </option>
</select>
0
 

Author Comment

by:blacklord
ID: 13626302
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?
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 19

Expert Comment

by:dakyd
ID: 13626506
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("tbl").getElementsByTagName("td");
  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>
0
 
LVL 9

Accepted Solution

by:
cb1393 earned 1500 total points
ID: 13626526
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','Option3','Option4','Option5','Option6')
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'+i)
            if(selCells[i]!=null){
                  clickCell.style.backgroundColor = selCells[i]
            }else{
                  clickCell.style.backgroundColor = '#FFFFFF'
            }
      }
}
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.event.ctrlKey,'+i+')" onSelectStart="window.event.returnValue = false">')
            document.write(opCells[i])
            document.write('</TD></TR>')
      }
      document.write('</TABLE>')
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
drawTable()
</SCRIPT>
</BODY>
</HTML>
0
 

Author Comment

by:blacklord
ID: 13629138
thanks cb1393, that is what exactly i want. But that doesn't work in firefox
0
 

Author Comment

by:blacklord
ID: 13629386
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 = "0px -90px";

function setPointer (theRow, theIdeaId, theAction) {
      if (theAction=="over") {
            if (theIdeaId != selectedIdeaId) {
                  if(theRow.style.backgroundPosition==pictureMultipleSelectState) {
                        theRow.style.backgroundPosition=pictureMultipleSelectState;
                  } else {
                        theRow.style.backgroundPosition=pictureOverState;
                  }
            }
      } else if (theAction=="out") {
            if (theIdeaId != selectedIdeaId) {
                  if(theRow.style.backgroundPosition==pictureMultipleSelectState) {
                        theRow.style.backgroundPosition=pictureMultipleSelectState;
                  } else {
                        theRow.style.backgroundPosition=pictureNormalState;
                  }
            }
      } else if (theAction=="click") {
            if (multipleSelect == 1) {
                  if(multipleIdeaArray[theIdeaId]!=null){
                        multipleIdeaArray[theIdeaId] = null;
                  } else {
                        multipleIdeaArray[theIdeaId] = "selected";
                  }
                  for(i=0;i<multipleIdeaArray.length;i++){
                        if(document.getElementById("lid"+i)!=null) {
                              var clickCell = document.getElementById("lid"+i);
                              if(multipleIdeaArray[i]=="selected"){
                                    clickCell.style.backgroundPosition=pictureMultipleSelectState;
                              } else if(multipleIdeaArray[i]=="single") {
                                    clickCell.style.backgroundPosition=pictureSingleSelectState;
                              } else {
                                    clickCell.style.backgroundPosition=pictureNormalState;
                              }
                        }
                  }
            } else {
                  if (selectedIdeaId=="" || selectedIdeaId!=theIdeaId) {
                        if (selectedIdeaId!="") {
                              document.getElementById("lid"+selectedIdeaId).style.backgroundPosition=pictureNormalState;
                        }
                        theRow.style.backgroundPosition=pictureSingleSelectState;
                        selectedIdeaId = theIdeaId;
                  } else {
                        theRow.style.backgroundPosition=pictureOverState;
                        selectedIdeaId = "";
                  }
            }
      }
}


and html code:

<table width="402px"  border="0" cellspacing="1" cellpadding="0" class="list">
<tr>
<td id="lid82" class="grey" onMouseover="setPointer(this,82,'over')" onMouseout="setPointer(this,82,'out')" onClick="setPointer(this,82,'click')"><p>Bla bla bla</p></td>
</tr>
<tr>
<td id="lid83" class="grey" onMouseover="setPointer(this,83,'over')" onMouseout="setPointer(this,83,'out')" onClick="setPointer(this,83,'click')"><p>Bla Bla bla</p></td>
</tr>
</table>
0
 
LVL 9

Expert Comment

by:cb1393
ID: 13630065
Why the grade of B?

>>What i need is, a basic algorithm of multiple selection list

I provided you with code that accomplished this.
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question