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/
*
RE: [WSG] Modify class
OK after your pointers I got the brain in gear (and found stuff I never thought was
possible)
I ended up writing the following
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleContacts System - Tourism Queensland/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
meta name=Author content=Taco Fleur ([EMAIL PROTECTED]) for Paxus
meta name=content-type content=Contact Information
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
/head
body
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
/body
/html
(This is a short version of the page)
The brain is out of juice now and can't figure out how to *easily* restore the old
class.
Any bright ideas?
*
The discussion list for http://webstandardsgroup.org/
*
