Re: [WSG] Show Hide by Class
Yes, I've been doing that for some time and I really find it cleans up
my code, however you should note that class names are usually space
separated. At least in CSS the class "green tomatoes" will get the
styles of "green" and "tomatoes", so by making your javascript aware of
this you can hav multiple classes on you div's which makes life a bit
simpler.
I'm too lazy to use any of javascript's OOP so I just use:
function hasClass(node,className){
if(node.className){
classes=node.className.split(" ");
for(i=0;i Hi All. I hope someone can help me with my problem but it isn't exactly
> on topic so replies off list are encouraged.
>
> The markup below is far from semantic but necessary for floating
> elements and alignment. It will come out of a publishing system and may
> repeat any number of times. For each category, the list of topics must
> be hidden until clicked.
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> I have this code from the following thread:
> http://www.webmasterworld.com/forum91/1729.htm
>
>
>
> But there are problems with above javascript that I don't understand
> 1. The loop counter, i, should be a local var (a little more efficient).
>
> 2. Some versions of IE5 accept getElementsByTagName but return null when
> given the '*' argument. A quick check - and switch to the all collection
> if needed would make it disaster proof.
>
>
> Suggestions
> Is it possible to pick out all elements with class="activate" and then
> make the function apply to the instance of class="topiclist" that
> immediatly follows it?
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] Show Hide by Class
Hi Stuart,
The screen reader will get the css, if JavaScript is enabled, which is the norm.
Though I point out that styling is not really essential to a screen reader.
Regards
Mike 2k:)2
Mike Foskett
Web Standards, Accessibility & Testing Consultant
Communications
British Educational Communications and Technology Agency (Becta)
Milburn Hill Road, Science Park, Coventry CV4 7JJ
Email: [EMAIL PROTECTED]
Tel: 02476 416994 Ext 3342 [Tuesday - Thursday]
Fax: 02476 411410
http://www.becta.org.uk
-Original Message-
From: Stuart Sherwood [mailto:[EMAIL PROTECTED]
Sent: 20 September 2005 01:30
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Show Hide by Class
I'm using this at the top of my js file to initially hide the topics:
if (document.getElementById) { // Content available if javascript disabled
document.write('');
}
I'm not sure if screen readers will read the related css. Anyone know?
Someone else also suggested I add an id to the topic list and gave me this code:
function toggle(x) {// Show Hide Content targetDiv =
document.getElementById('topicListCategory-' + x); targetDiv.style.display =
(targetDiv.style.display == 'block') ? 'none'
: 'block';
}
The server just has to output ids with a number on the end. I didn't know js
could do this. Very neat.
Stuart
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Show Hide by Class
I'm using this at the top of my js file to initially hide the topics:
if (document.getElementById) { // Content available if javascript disabled
document.write('href="hide.css" />');
}
I'm not sure if screen readers will read the related css. Anyone know?
Someone else also suggested I add an id to the topic list and gave me
this code:
function toggle(x) {// Show Hide Content
targetDiv = document.getElementById('topicListCategory-' + x);
targetDiv.style.display = (targetDiv.style.display == 'block') ? 'none'
: 'block';
}
The server just has to output ids with a number on the end. I didn't
know js could do this. Very neat.
Stuart
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Show Hide by Class
Hi Stuart,
I think it would be much easier if your JavaScript will change only id
of the categories container.
Example:
CSS:
.topiclist {
<<>>
}
#toggled .topiclist {
display: none;
}
HTML:
...
and JavaScript:
function toggleIt()
{
var Div = document.getElementById("forToggle");
if (Div) {
Div.id = "toggled";
} else {
var Div = document.getElementById("toggled");
if (Div) Div.id = "forToggle";
}
return false;
}
This is much shorter and should work everywhere, where CSS is supported.
Best regards,
Dmitry
Stuart Sherwood wrote:
Hi All. I hope someone can help me with my problem but it isn't
exactly on topic so replies off list are encouraged.
The markup below is far from semantic but necessary for floating
elements and alignment. It will come out of a publishing system and
may repeat any number of times. For each category, the list of topics
must be hidden until clicked.
I have this code from the following thread:
http://www.webmasterworld.com/forum91/1729.htm
But there are problems with above javascript that I don't understand
1. The loop counter, i, should be a local var (a little more efficient).
2. Some versions of IE5 accept getElementsByTagName but return null
when given the '*' argument. A quick check - and switch to the all
collection if needed would make it disaster proof.
Suggestions
Is it possible to pick out all elements with class="activate" and then
make the function apply to the instance of class="topiclist" that
immediatly follows it?
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Show Hide by Class
At 10:57 PM 9/18/2005, Stuart Sherwood wrote:
...
For each category, the list of topics must be hidden until clicked.
...
//Populate the array with all the page tags
var allPageTags=document.getElementsByTagName("*");
//Cycle through the tags using a for loop
for (i=0; i
...
But there are problems with above javascript that I don't understand
1. The loop counter, i, should be a local var (a little more efficient).
2. Some versions of IE5 accept getElementsByTagName but return null
when given the '*' argument. A quick check - and switch to the all
collection if needed would make it disaster proof.
Suggestions
Is it possible to pick out all elements with class="activate" and
then make the function apply to the instance of class="topiclist"
that immediatly follows it?
Stuart,
In the context of web standards, I've often seen it cautioned that
some screen readers do not register the presence of an element whose
display is changed from none to block, so using this technique to
make things appear & disappear may hide them permanently from
visitors using assistive technology.
=> Does anyone know of a way to make something pop up reliably for a
screen reader, short of an alert dialog box?
Further to your posting, this looks like a typo to me:
if (allPageTags[i].className==topiclist) {
This is treating topiclist as a variable name because it's unquoted,
whereas your posting suggests it should be the quoted literal
"topiclist". Storing the className in a variable seems like a good
idea, but should be reflected throughout the code.
In response to your questions:
- In basic agreement with your question 1), I advise using global
variables only when necessary. It might actually be more efficient
to the computer to use globals, but from the programmer's perspective
it's an unnecessary invitation to bug city.
- This technique (selecting all elements on the page and cycling
through them looking for a given class name) is the only way I know
of to select elements by class. In a case like this in which the
markup is predictable and deliberate, you can reduce the CPU's task
by starting out selecting only those tags that can have the target class:
var allPageTags = document.getElementsByTagName("div");
Better yet, enclose all the toggleable divs in a container:
...
then you can code:
var oWrap = document.getElementById("topicWrap");
var allPageTags = oWrap.getElementsByTagName("div");
Saving the results of this first search in an array so you don't have
to perform it more than once is the only way I know to minimize its
demand on CPU time. I think the logic you've borrowed is fine
(except for its use of global i).
To toggle class names rather than inline style, I would change this line:
allPageTags[i].style.display='none';
to this:
allPageTags[i].className = "topiclistHidden";
where .topiclistHidden is defined in your stylesheet. Then when
items are clicked, the applied behavior can change their className
from "topiclistHidden" to "topiclist".
If your GUI allows only one displayed topic at a time, you'll need to
hide the currently-displayed topic when the next one is selected. To
save your code having to search the array for the currently displayed
item, you can simply save the current object in a global variable:
var oCurrent = null;
...
function ShowItem()
{
// hide previously-selected item
if (oCurrent) oCurrent.className = "topiclistHidden";
// show current topic
this.className = "topiclist";
// save current item for next time
oCurrent = this;
}
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
