| View Question |
|
|
 | ||
|
| Subject:
Javascript Toggle by Class
Category: Computers > Programming Asked by: wayniep00p-ga List Price: $10.00 |
Posted:
25 Aug 2006 15:45 PDT
Expires: 24 Sep 2006 15:45 PDT Question ID: 759589 |
Hello,
I have this neat javascript that I really like but it's not quite the
way I want it.
Right now it hides the division or list with the specified class, how
can the script be changed so it does the opposite? Instead of hiding
when executing the function, the div/ul will hide on load and toggle
to show. Thanks ahead of time.
// JavaScript Document
/* Toggle Script */
function toggleByClass( searchClass, node, tag ) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
for (i = 0; i < classElements.length; i++) {
var el = classElements[i];
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
}
/* End Script */ |
| ||
|
| There is no answer at this time. |
| ||
|
| Subject:
Re: Javascript Toggle by Class
From: nostgard-ga on 29 Aug 2006 09:17 PDT |
As the function already toggles, the simplest way to do that would be to call it once onLoad. The easiest way to do that would be: <body onload="toggleByClass( 'someclass' );"> |
| Subject:
Re: Javascript Toggle by Class
From: wayniep00p-ga on 30 Aug 2006 01:33 PDT |
Thanks for the comment. That is exactly what I am doing right now. However, I'd like the javascript to be cleaner so if I have a lot of classes running the script I wouldn't have a long body tag. In addition, it'll be more flexible for me to use. |
| Subject:
Re: Javascript Toggle by Class
From: realwebmatze-ga on 05 Sep 2006 08:18 PDT |
I've added two functions to your script. With addEvent() you can add
as much functions to one event like window.onload as you like. And
init() is the function in wich you can call your own function for
every class.
<script>
// scott andrew (www.scottandrew.com) wrote this function. thanks, scott!
// adds an eventListener for browsers which support it.
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
function toggleByClass( searchClass, node, tag ) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
for (i = 0; i < classElements.length; i++) {
var el = classElements[i];
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
}
function init() {
toggleByClass('someclass1');
toggleByClass('someclass2');
toggleByClass('someclass3');
//you can add more function calls here
}
addEvent(window, 'load', init);
</script>
As you can see, addEvent(window, 'load', init); calls our init()
function. And init() calls then your toggleByClass() functions. |
| Subject:
Re: Javascript Toggle by Class
From: paul_thomas-ga on 21 Sep 2006 10:05 PDT |
Personally I would do it like so
-> Add this function to your code:
function toggleByClassFeed(tfeed){
var feedArraytemp = tfeed.split("\n");
var l = feedArraytemp.length;
for (x=0; x<=l; x++){
var xFeedParam = feedArraytemp[x];
eval ("toggleByClass("+xFeedParam+")");
}
}
-> put your togglefeed in the head e.g.
<script>
//substitute your own values
//however many class params you want
var tooglefeed ="'class1'\n"+
"'class2'\n"+
"'class3',null,'div'\n";
</script>
-> then in body onLoad put:
toggleByClassFeed(tooglefeed); |
If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you. |
| Search Google Answers for |
| Google Home - Answers FAQ - Terms of Service - Privacy Policy |