| Wirred on May 26, 2006 at 5:03:48 PM (# 5) Pfff...it's not going anywhere!
Spent multo-multiple hours to figure out how to do this, I pass the code so-far below, it doesn't work :(
The stringContainer concatenates all the classnames, so I wonder how to make a filter on just a part of the name?
I found information about regular expressions, maybe there is a clue? like "show the div when the word 'red' is in the classname"
Summarized, the goal is: if selected option on COLORS = 'red', (and the other dropdowns has selected 'all') show only the divs wih class Red, but if selected option on SHAPES = 'circle' , show only the divs with class Red and Circle. And backwards and forwards, any combination should be possible...
Help would again much appreciated!
Waldemar
<html>
<head>
<title>Filter</title>
<style type="text/css">
#myData div.redapplecircle{ display:none;}
#myData div.redbananasquare{ display:none;}
#myData div.greenbananatriangle{ display:none;}
#myData div.bluemangotriangle{ display:none;}
#myData div.blueapplecircle{ display:none;}
#myData div.redapplesquare{ display:none;}
</style>
<script type="text/javascript">
var S= ""
var Group = ""
var stringContainer=""
classParts = ["red","apple","circle"]
function filter(what)
{
Group = what
S = document.getElementById(Group).options[document.getElementById(Group).selectedIndex].value
switch (S)
{
case 1: classParts[0] = "red"; break;
case 2: classParts[0] = "green"; break;
case 3: classParts[0] = "blue"; break;
case 4: classParts[1] = "apple"; break;
case 5: classParts[1] = "mango"; break;
case 6: classParts[1] = "banana"; break;
case 7: classParts[2] = "circle"; break;
case 8: classParts[2] = "square"; break;
case 9: classParts[2] = "triangle"; break;
}
stringContainer = classParts[0] + classParts[1] + classParts[2]
var nodes = document.getElementById("myData").getElementsByTagName('div');
var max = nodes.length
if( document.getElementById("myData").getElementsByTagName('div').className == stringContainer)
{
for(var i = 0;i < max;i++)
{
document.getElementById("myData").getElementsByTagName('div').className(stringContainer).style.display="block"
}
}
}
/* maybe include (somehow...) regular expressions ?
http://www.webmasterworld.com/forum91/5077.htm
function hasClass(elm, classname)
{
alert (new RegExp("\\b"+classname+"\\b")).test(elm.classname);
}
*/
</script>
</head>
<body>
<select id="color" onchange="filter('color')">
<option value="" selected="selected">COLOR</option>
<option value="1">red</option>
<option value="2">green</option>
<option value="3">blue</option>
</select>
<select id="fruit" onchange="filter('fruit')">
<option value="" selected="selected">FRUIT</option>
<option value="4">apple</option>
<option value="5">mango</option>
<option value="6">banana</option>
</select>
<select id="shape" onchange="filter('shape')">
<option value="" selected="selected">SHAPE</option>
<option value="7">square</option>
<option value="8">circle</option>
<option value="9">triangle</option>
</select>
<div id="myData">
<div id="1" class="redapplecircle">div 1 : Red, Apple, Circle </div>
<div id="2" class="redbananasquare">div 2 : Red, Banana, Square </div>
<div id="3" class="greenbananatriangle">div 3 : Green, Banana, Triangle </div>
<div id="4" class="bluemangotriangle">div 4 : Blue, Mango, Triangle </div>
<div id="5" class="blueapplecircle">div 5 : Blue, Apple, Circle </div>
<div id="6" class="redapplesquare">div 6 : Red, Apple, Square </div>
</div>
</body>
</html>
Wirred on May 27, 2006 at 2:46:05 AM (# 6)
This message has been edited.Additional note: forgot to say that a content div could have more than one 'keyword', like
div 7: Red (only 1 color), Apple, Mango (more than 1 fruit), Square, Cirlcle, Triangle (more than 1 shape).
The final application should filter project stories: done for a certain business type [energy sector, government sector.. ] (='color'), but several techniques are used [xml, java...] (= 'fruit') and this resulted in several solutions [webapplication, intranet ...] (='shape')
So, 'what have you done with XML? Or what are the developed webapplications? Are there webapplications build with XML? etc.
Winterwolf on May 27, 2006 at 3:59:09 AM (# 7)
This message has been edited.Some things to note:
1) I see many errors in your javascript code but for the most part they are minor nit picks. I dont understand why you went with the getElementByTags either since you stated you want to control which divs get turned on and off. Doing so with specific ids seems best.
2) it seems to me that you only really have two styles you want for the divs. the display=none and the display = block
if that IS the case you can simplify your problem.
make 2 classes in your style and do NOT use the #psuedoclass things...(they will get you in trouble believe me I know)
then your pulldown menus simply need to toggle the class of each div (separately) based on the logic of the function.
The rest is all about the logic. which you should work out on paper if you can. I know things like this can be quite annoying to sort out mentally but once youve figured it out you will get an incredible rush as you realize youve conquered the dilemna.
Winterwolf on May 27, 2006 at 4:03:05 AM (# 8)
This message has been edited."So, 'what have you done with XML? Or what are the developed webapplications? Are there webapplications build with XML? etc."
Not much. But there are plenty of aps on the internet if you search google. Also I think there are several items of interest on this site.
Wirred on May 27, 2006 at 4:29:29 AM (# 9)
This message has been edited.hehe.. the question wasn't ment for you but that's what the user of the filter should ask :)
I've got a set of projectstories each with a set of characteristics. The visitor of the website does have a certain development request and wants to see experiences in a broad perspective (what did this company do in my business sector) or detailed (has this company experiences with Ajax?)
I used the #psuedoclass because this filter is put on a page with more divs and I only want to work with the divs of my cases.
Indeed, it should be only 'show' and 'hide' but as said in the original message, this won't work with multiple classnames. Thats why I came up with the regExp.
Well, I assume you understand what I want and I've got pretty much the idea you say it should be possible in a simple way. I'm not sure but I'll try again
thx, Waldemar
Wirred on May 28, 2006 at 1:19:27 PM (# 10)I still can't believe it.. but the code below works! (at least in IE6)
A forum on http://www.webmasterworld.com/forum91/4901.htm gave the final push in the right direction
Although I don't understand how its possible to 'just' add an attribute to a div - and use it.
'/'/
<html>
<head>
<title>FILTER</title>
<script>
var S ='alles'
var T ='alles'
var O ='alles'
function filter()
{
S = document.getElementById('color').options[document.getElementById('color').selectedIndex].value
T = document.getElementById('fruit').options[document.getElementById('fruit').selectedIndex].value
O = document.getElementById('shape').options[document.getElementById('shape').selectedIndex].value
if (!document.getElementsByTagName)
{
return;
}
arr_nodes = document.getElementsByTagName('div');
for (i = 0; i < arr_nodes.length; i++)
{
obj_node = arr_nodes[i];
document.getElementById(obj_node.id).style.display='none';
if ( (obj_node.getAttribute(S) == 'true') && (obj_node.getAttribute(T) == 'true') && (obj_node.getAttribute(O) == 'true') )
{
document.getElementById(obj_node.id).style.display='block'
}
}
}
</script>
<style>
#text1{ display:none;}
#text2{ display:none;}
#text3{ display:none;}
#text4{ display:none;}
#text5{ display:none;}
#text6{ display:none;}
#text7{ display:none;}
</style>
</head>
<body>
<select id="color" onchange="filter('color')">
<option value="all" selected="selected">COLOR</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<select id="fruit" onchange="filter('fruit')">
<option value="all" selected="selected">FRUIT</option>
<option value="apple">apple</option>
<option value="mango">mango</option>
<option value="banana">banana</option>
<option value="kiwi">kiwi</option>
</select>
<select id="shape" onchange="filter('shape')">
<option value="all" selected="selected">SHAPE</option>
<option value="square">square</option>
<option value="circle">circle</option>
<option value="triangle">triangle</option>
</select>
<div
id="text1"
all="true"
red="true"
apple="true"
circle="true"
>red - apple - circle</div>
<div
id="text2"
all="true"
red="true"
banana="true"
circle="true"
square="true"
>red - banana - circle - square</div>
<div
id="text3"
all="true"
green="true"
banana="true"
kiwi="true"
mango="true"
circle="true"
>green - banana - kiwi - mango - square - circle</div>
<div
id="text4"
all="true"
blue="true"
apple="true"
kiwi="true"
circle="true"
triangle="true"
>blue - apple - kiwi - circle - triangle</div>
<div
id="text5"
all="true"
red="true"
mango="true"
triangle="true"
square="true"
>red - mango - triangle - square</div>
<div
id="text6"
all="true"
green="true"
apple="true"
mango="true"
kiwi="true"
banana="true"
circle="true"
square="true"
>green - apple - mango - kiwi - banana - circle - square</div>
<div
id="text7"
all="true"
green="true"
apple="true"
mango="true"
kiwi="true"
circle="true"
square="true"
>green - apple - mango - kiwi - circle - square</div>
</body>
</html>
smurfk1 on Oct 1, 2007 at 12:22:34 PM (# 11)I'm arriving at this thread a bit late, but I'm wondering if anyone can answer a question regarding a nesting problem that I have.
To begin with, the color, fruit, shape aspect of this script is clear to me. It works fine. My problem is getting a nested sort to work off of this single javascript.
I'm trying to sort a dated list with two drop-down menus. The fisrt is date and the second is a list, groceries in the example. So I get something that looks like this.
Monday
eggs
milk
butter
Tuesday
eggs
Wednesday
eggs
butter
Essentially, I want to be able to look at a specific day's shopping list, or any day that I need to buy eggs.
The divs look something like this:
Wednesday 14-Nov-2007
etc....
The date sort works fine, but the list does not. Whenever I select anything other than "show all" I see nothing. It works fine if I drop the nesting and just show date+item for everything on the list, but that doesn't look very good.
I haven't altered the javascript at all, except for renaming, reducing categories, etc. I'm stuck!
Any help would be appreciated!
Thanks!
| 
Filter div's with three dropdown menu's