Improved Category Checkbox Feature

**athomsen** · August 1, 2005

To avoid confusion I am updating this post with all current info as of 08/01/05 7:15 EST.

I updated the category check box feature so that when you change a check box's state it updates the category check box accordingly.

So... If a check box is unchecked the category is unchecked.

Or... If a check box is checked and all of the category's check boxes are checked then the category is checked.

Anyway here is what I changed:

Replace the current checkCategory function in check.js with this:

function checkCategory(thisChk, parentId){
	var parent = document.getElementById(parentId);
	var chks = parent.getElementsByTagName('input');
	var len = chks.length;
	var state = thisChk.checked;

	if(thisChk.id.substring(0,3) == "Cat"){  //Category box was checked
  for (var i=0; i<len; i++){ //skip the first checkbox
 	 if (chks[i].type == "checkbox" && chks[i] != thisChk){ //just in case of other input types & skip the category checkbox
    chks[i].checked = state;
 	 }
  }
	}
	else {
  var chkflag = true;
  if(state == true){
 	 for (var i=1; i<len; i++){ //skip the first checkbox
    if (chks[i].type=="checkbox" && chks[i].checked!=true){ //just in case of other input types
   	 chkflag = false;
   	 break;
    }
 	 }
  }
  if(state == false || chkflag == true){
 	 for (var i=0; i<len; i++){ 
    if (chks[i].type=="checkbox"){ //just in case of other input types
   	 chks[i].checked = state;
   	 break; //we only want the parent checkbox
    }
 	 }
  }
	}
}

function setCategoryState(){
	var cats = getElementsByClassName('category');
	var chks,chkflag;

	for (var i=0; i<cats.length; i++){
  chks = cats[i].getElementsByTagName('input');
  chkflag = true;
  for (var j=1; j<chks.length; j++){
 	 if (chks[j].type=="checkbox" && chks[j].checked!=true){ //just in case you have other input types inside the div
   	 chkflag = false;
   	 chks[0].checked = false;
   	 break;
    }
 	 }
  if(chkflag == true){
 	 chks[0].checked = true;
  }
	}
}

function getElementsByClassName(classname){
	var rl = new Array();
	var re = new RegExp('(^| )'+classname+'( |$)');
	var ael = document.getElementsByTagName('*');
	var op = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;

	if (document.all && !op) ael = document.all;
  for(i=0, j=0; i<ael.length; i++) {
 	 if(re.test(ael[i].className)) {
    rl[j]=ael[i];
    j++;
 	 }
  }
	return rl;
}

Then update boxes.js starting at line 126 with this:

 // -- checkbox --  
  if (debugOn) txt += ('<font class="txt">' + i + '</font>\n');
  txt += ('<input type="checkbox" id="chkbox' + i + '" ');
  if (uid[i]==null || uid[i]==""){
 	 txt += ('name="chkbox' + i + '" ');
 	 txt += ('onclick="checkCategory(this, \'' + cat[i] + '\');" ');
  }
  else 
  {
 	 txt += ('name="' + uid[i] + '" ');
 	 txt += ('onclick="checkDeps(' + i + ');checkCategory(this, \'' + cat[i] + '\');" ');
  }
  txt += ('onMouseOver="qdh(prog[' + i + '],desc[' + i + '],Style[0]);" ');
  txt += ('onMouseOut="htm();"');
  txt += ('/>\n');

Now we need to edit wpi.htm for each theme in 4 places. We need to add setCategoryState() to the onload OR onclick event.

In the body tag (Line 5):

<body class="body" onload="SetScriptWaitTimeout(); startstop(); fillBoxes(); check(load_checks); startstop(); flevInitPersistentLayer('layercfgbtns',0,'','','15','','','15'); setCategoryState();">

And for the buttons... (line numbers for glossy NOT classic)

Default (line 85):

onClick="stopInterval(); startstop(); check('default'); startstop(); setCategoryState();" >

All (line 99):

onClick="stopInterval(); startstop(); check('all'); check('all'); startstop(); setCategoryState();" >

None (line 113):

onClick="stopInterval(); startstop(); check('none'); startstop(); setCategoryState();" >

Hope that clears it all up!

The first wpi.htm is for glossy I believe...

boxes.js

check.js

wpi.htm

Edited August 1, 2005 by athomsen

**Lost Soul** · August 1, 2005

nice fix m8, thats a good eye for detail, i didnt pick up on that at first until you mentioned it,

**Ghost82** · August 1, 2005

I found one issue with this, if you select a category and then click the "select defaults" button the category box doesn't get unchecked !!! Everything else does get set to default!

**Lost Soul** · August 1, 2005

I found one issue with this, if you select a category and then click the "select defaults" button the category box doesn't get unchecked !!! Everything else does get set to default!
<{POST_SNAPBACK}>

hmmm this is a very interesting new development we have going on here

still testing for bugs

**athomsen** · August 1, 2005

You are correct. I did not fix that. I am working on it now.

Edited August 1, 2005 by athomsen

**athomsen** · August 1, 2005

Ok here is how to fix the button interaction & initial loading of categories. I never claimed to be trained as a programmer so if you see problems with my functions SPEAK UP Also, I clicked everything I could think of to test these and all seemed well, but... let me know if they really work

You need to add these two functions in check.js:

function setCategoryState(){
	var cats = getElementsByClassName('category');
	var chks,chkflag;
	for (var i=0; i<cats.length; i++){
  chks = cats[i].getElementsByTagName('input');
  chkflag = true;
  for (var j=1; j<chks.length; j++){
 	 if (chks[j].type=="checkbox" && chks[j].checked!=true){ //just in case you have other input types inside the div
    chkflag = false;
    chks[0].checked = false;
    break;
 	 }
  }
  if(chkflag == true){
 	 chks[0].checked = true;
  }
	}
}

function getElementsByClassName(classname){
	var rl = new Array();
	var re = new RegExp('(^| )'+classname+'( |$)');
	var ael = document.getElementsByTagName('*');
	var op = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
	if (document.all && !op) ael = document.all;
	for(i=0, j=0; i<ael.length; i++) {
   	 if(re.test(ael[i].className)) {
       	 rl[j]=ael[i];
       	 j++;
   	 }
	}
	return rl;
}

getElementsByClassName could come in handy for another feature later on so maybe the powers that be will have a better place for it.

Then add the setCategoryState() function call to the onclick section of the body onload, Default button, Select All button, and None button of your themed wpi.htm file.

For example the onclick of the Default button becomes:

onClick="stopInterval(); startstop(); check('default'); startstop(); setCategoryState();" >

I am working on a cleaned up version of the modified category selection function as well. Hope to finish it as soon as I have some more time.

**Ghost82** · August 1, 2005

this works perfectly here! nice fix m8!

**Lost Soul** · August 1, 2005

ill try this and test it out

**Lost Soul** · August 1, 2005

i just tested this and your update works like a charm, nice work

**blinkdt** · August 1, 2005

@athomsen Oh, excellent, just what the doctor ordered. Thank you!

I am working on a cleaned up version of the modified category selection function as well. Hope to finish it as soon as I have some more time.

This is worth waiting for, thank you again.

Edited August 1, 2005 by blinkdt

**Kelsenellenelvian** · August 1, 2005

Ok here is how to fix the button interaction & initial loading of categories. I never claimed to be trained as a programmer so if you see problems with my functions SPEAK UP Also, I clicked everything I could think of to test these and all seemed well, but... let me know if they really work
You need to add these two functions in check.js:
function setCategoryState(){
	var cats = getElementsByClassName('category');
	var chks,chkflag;
	for (var i=0; i<cats.length; i++){
  chks = cats[i].getElementsByTagName('input');
  chkflag = true;
  for (var j=1; j<chks.length; j++){
  	if (chks[j].type=="checkbox" && chks[j].checked!=true){ //just in case you have other input types inside the div
    chkflag = false;
    chks[0].checked = false;
    break;
  	}
  }
  if(chkflag == true){
  	chks[0].checked = true;
  }
	}
}

function getElementsByClassName(classname){
	var rl = new Array();
	var re = new RegExp('(^| )'+classname+'( |$)');
	var ael = document.getElementsByTagName('*');
	var op = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
	if (document.all && !op) ael = document.all;
	for(i=0, j=0; i<ael.length; i++) {
    	if(re.test(ael[i].className)) {
        	rl[j]=ael[i];
        	j++;
    	}
	}
	return rl;
}
getElementsByClassName could come in handy for another feature later on so maybe the powers that be will have a better place for it.
Then add the setCategoryState() function call to the onclick section of the body onload, Default button, Select All button, and None button of your themed wpi.htm file.
For example the onclick of the Default button becomes:
onClick="stopInterval(); startstop(); check('default'); startstop(); setCategoryState();" >
I am working on a cleaned up version of the modified category selection function as well. Hope to finish it as soon as I have some more time.

Add those 2 entries anywhere or to the category selection section??

**athomsen** · August 1, 2005

Yes anywhere. I put them under the original function. Like I said before though, the getElementByClassName funtion should probably go wherever you have custom utility type functions. But check.js works too.

I just figured out that if a program entry does not have a UID then my updated category feature is not working correctly give me a few minutes here...

**athomsen** · August 1, 2005

Sorry it took so long, got distracted.

Ok to fix for entries without UID change:

Lines 130-133 in boxes.js to:

 if (uid[i]==null || uid[i]==""){
  	txt += ('name="chkbox' + i + '" ');
  	txt += ('onclick="checkCategory(this, \'' + cat[i] + '\');" ');
  }

Check my numbers - I have been changing a lot of stuff in the last few hours

Edited August 1, 2005 by athomsen

**Kelsenellenelvian** · August 1, 2005

Sorry it took so long, got distracted.
Ok to fix for entries without UID change:
Lines 130-133 in boxes.js to:
 if (uid[i]==null || uid[i]==""){
  	txt += ('name="chkbox' + i + '" ');
  	txt += ('onclick="checkCategory(this, \'' + cat[i] + '\');" ');
  }
Check my numbers - I have been changing a lot of stuff in the last few hours

Expand on this one a bit because it doesn't look quit right where you want it...

**blinkdt** · August 1, 2005

Looks good. So just replace the "if" section beginning on line 129 and leave in place the "else" section that follows. An now we have:

 //insert checkbox and label
  // -- checkbox --  
  if (debugOn) txt += ('<font class="txt">' + i + '</font>\n');
  txt += ('<input type="checkbox" id="chkbox' + i + '" ');
  if (uid[i]==null || uid[i]==""){
    txt += ('name="chkbox' + i + '" ');
    txt += ('onclick="checkCategory(this, \'' + cat[i] + '\');" ');
   }
  else 
  {
  	txt += ('name="' + uid[i] + '" ');
  	txt += ('onclick="checkDeps(' + i + ');" ');
  }
  txt += ('onMouseOver="qdh(prog[' + i + '],desc[' + i + '],Style[0]);" ');
  txt += ('onMouseOut="htm();"');
  txt += ('/>\n');
  // -- label --

Correct? Seems to be working fine here.

Edited August 1, 2005 by blinkdt

Sign In

Improved Category Checkbox Feature

Recommended Posts

athomsen

Lost Soul

Ghost82

Lost Soul

athomsen

athomsen

Ghost82

Lost Soul

Lost Soul

blinkdt

Kelsenellenelvian

athomsen

athomsen

Kelsenellenelvian

blinkdt

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Activity

Browse