[WSG] Modify class (hope to bring closure ;-)
Title: Modify class
Hi
Guys,
I just
wanted to touch the subject again, as it did not bring closure to my problem
last time, ie.most of youpointed me in the right direction but I
still don't have it working fully, Lindsay; your example diddisplay the
hidden items but it did not hide them again.
I came
up with the following, which also displays the hidden items but again it does
not hide them.
link href="" rel="stylesheet"
type="text/css"scriptfunction replaceRule( objStyle,
className, newClassName ){var r = objStyle.rulesfor (
var i = 0; i r.length; i++ ){if(
r[i].selectorText == className
){objStyle.removeRule( i
);objStyle.addRule( className, newClassName, i
);return;}}}/scripta
href="" test/adiv
class="helpItem"img src=""
alt="Click here for help on this item" Click on any item to display
help./div
I was
also thinking maybe it's easier (if possible) to have two classes like
so;
.international {visibility: hidden;display: none;
}
.national {
visibility: visible;display: inline;}
and
then do something like switchRule( document.styleSheets[0], '.international' ,
'.national' )
But
how? There doesn't seem to be much documentation out there about dynamic
stylesheets, or a nice PDF Reference, like Netscape brought out for Client-Side
_javascript_ Reference
Re: [WSG] Modify class (hope to bring closure ;-)
Not sure if this will help, but it's a solution I copied from Zeldman quite a while
back...
script language=JavaScript
function toggle( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
if (target.style.display == none){
target.style.display = ;
} else {
target.style.display = none;
}
}
}
/script
a href=# onClick=toggle('toggle');return false;Show/a
div id=toggle style=display:none
h2Hello!/h2
[a href=# onClick=toggle('toggle');return false;Hide/a]
/div
Cade.
Hi Guys,
I just wanted to touch the subject again, as it did not bring closure to my
problem last time, ie. most of you pointed me in the right direction but I still
don't have it working fully, Lindsay; your example did display the hidden items
but it did not hide them again.
I came up with the following, which also displays the hidden items but again it
does not hide them.
link href=/style/default.css rel=stylesheet type=text/css
script
function replaceRule( objStyle, className, newClassName )
{
var r = objStyle.rules
for ( var i = 0; i r.length; i++ )
{
if( r[i].selectorText == className )
{
objStyle.removeRule( i );
objStyle.addRule( className, newClassName, i );
return;
}
}
}
/script
a href=## onClick=replaceRule( document.styleSheets[0], '.helpItem',
'.helpItemDisplay' );test/a
div class=helpItem
img src=#request.imageRoot#/iconHelp.gif alt=Click here for help on this
item Click on any item to display help./div
I was also thinking maybe it's easier (if possible) to have two classes like so;
.international {
visibility: hidden;
display: none; }
.national {
visibility: visible;
display: inline;}
and then do something like switchRule( document.styleSheets[0], '.international' ,
'.national' )
But how? There doesn't seem to be much documentation out there about dynamic
stylesheets, or a nice PDF Reference, like Netscape brought out for Client-Side
JavaScript Reference
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Modify class (hope to bring closure ;-)
Nope that won't help, thanks anyway..
It's only for one object, ie. the object with an id assigned.
-Original Message-
From: Cade Whitbourn [mailto:[EMAIL PROTECTED]
Sent: Tuesday, 25 November 2003 2:44 PM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Modify class (hope to bring closure ;-)
Not sure if this will help, but it's a solution I copied from Zeldman quite a while
back...
script language=JavaScript
function toggle( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
if (target.style.display == none){
target.style.display = ;
} else {
target.style.display = none;
}
}
}
/script
a href=# onClick=toggle('toggle');return false;Show/a
div id=toggle style=display:none
h2Hello!/h2
[a href=# onClick=toggle('toggle');return false;Hide/a]
/div
Cade.
Hi Guys,
I just wanted to touch the subject again, as it did not bring closure to my
problem last time, ie. most of you pointed me in the right direction but I still
don't have it working fully, Lindsay; your example did display the hidden items
but it did not hide them again.
I came up with the following, which also displays the hidden items but again it
does not hide them.
link href=/style/default.css rel=stylesheet type=text/css
script
function replaceRule( objStyle, className, newClassName )
{
var r = objStyle.rules
for ( var i = 0; i r.length; i++ )
{
if( r[i].selectorText == className )
{
objStyle.removeRule( i );
objStyle.addRule( className, newClassName, i );
return;
}
}
}
/script
a href=## onClick=replaceRule( document.styleSheets[0], '.helpItem',
'.helpItemDisplay' );test/a
div class=helpItem
img src=#request.imageRoot#/iconHelp.gif alt=Click here for help on this
item Click on any item to display help./div
I was also thinking maybe it's easier (if possible) to have two classes like so;
.international {
visibility: hidden;
display: none; }
.national {
visibility: visible;
display: inline;}
and then do something like switchRule( document.styleSheets[0], '.international' ,
'.national' )
But how? There doesn't seem to be much documentation out there about dynamic
stylesheets, or a nice PDF Reference, like Netscape brought out for Client-Side
JavaScript Reference
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
