hiding all text with a given CLASS

G

Guest

I sometimes used js like this

<head>
<script language='Javascript'>
function offDiv(div) {
document.getElementById(div).style.display='none'
}
function onDiv(div) {
document.getElementById(div).style.display='block'
}
</script>
</head>

associated to buttons like

<button onclick=offDiv("lc") style="border-style: none" >hide</button>
<button onclick=onDiv("lc") style="border-style: none" >show</button>

to hide or show a specific piece of HTML enclosed in a <div id=lc></div>

Now I want instead to act on ALL divs with <div class=lc>.

I have several pieces of text (normally class=lc causes them to be shown
on a light yellow bkg) interspersed here and there in the page, which I
want to hide or show all together.

I do not want to give a separate id to each.
How can I act on all ids of the same class ?
 
G

Guest

Latest browsers have getElementsByClassName but for older browsers you
will have to implement your own.
Click to expand...

Found something like that on the net. In fact I replaced the definition
of my onDiv and offDiv functions (see original post) with this, and it
looks like it works

function offDiv(div) {
setClass(div,'none')
}
function onDiv(div) {
setClass(div,'block')
}
function setClass(div,what) {
var all=document.getElementsByTagName('*')
var expression=new RegExp('\\b'+div+'\\b','i')
var result=[]
for (var i=0,l=all.length;i<l;i++) {
if (expression.test(all.className)) all.style.display=what
}
}

Not perfect. Works for all div's but not for span's (inline), but it
would be trivial to adapt it, if I had the need to.
 
E

Evertjan.

LC's No-Spam Newsreading account wrote on 26 apr 2010 in
comp.lang.javascript:
Latest browsers have getElementsByClassName but for older browsers you
will have to implement your own.
Click to expand...

Found something like that on the net. In fact I replaced the definition
of my onDiv and offDiv functions (see original post) with this, and it
looks like it works

function offDiv(div) {
setClass(div,'none')
}
function onDiv(div) {
setClass(div,'block')
}
function setClass(div,what) {
var all=document.getElementsByTagName('*')
var expression=new RegExp('\\b'+div+'\\b','i')
var result=[]
for (var i=0,l=all.length;i<l;i++) {
if (expression.test(all.className)) all.style.display=what
}
}

Not perfect. Works for all div's but not for span's (inline), but it
would be trivial to adapt it, if I had the need to.
Click to expand...


Not perfect? It is terrible.

Better change the css rules of a class.

Read here:

<http://www.quirksmode.org/dom/changess.html> ending with,
[adapted for display:none;]

===================
[To avoid the rules problems noted above I use the fact that the pre.test
rule is the last rule in the stylesheet. It's an ugly kludge, but it's
the only way to get a proper cross-browser test case.]

function changeIt() {
if (!document.styleSheets) return;
var theRules = new Array();
if (document.styleSheets[1].cssRules)
theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1].rules
else return;
theRules[theRules.length-1].style.display = 'none';
}
===================
 
G

Guest

6 more lines of code ...
Not perfect? It is terrible.
Click to expand...

what has it to be so terrible ?
It works under my test condition (firefox). Of course I can't test in a
general way but such page will have a limited audience (it's in support
of discussion inside an oragnization). Are you predicting it is not
portable across browsers ? or inefficient ? or inelegant ?
Better change the css rules of a class.
<http://www.quirksmode.org/dom/changess.html> ending with,
Click to expand...
[I use the fact that the [...] rule is the last rule in the
stylesheet. It's an ugly kludge, but it's the only way to get a proper
cross-browser test case.]
Click to expand...

The page you quote starts with "Unfortunately browser incompatibilities
are so severe that this script isn't really usable in practice yet" ...
so it does not look very inspiring.
 
G

Gabriel Gilini

I sometimes used js like this

<head>
<script language='Javascript'>
function offDiv(div) {
document.getElementById(div).style.display='none'
}
function onDiv(div) {
document.getElementById(div).style.display='block'
}
</script>
</head>

associated to buttons like

<button onclick=offDiv("lc") style="border-style: none" >hide</button>
<button onclick=onDiv("lc") style="border-style: none" >show</button>

to hide or show a specific piece of HTML enclosed in a <div id=lc></div>

Now I want instead to act on ALL divs with <div class=lc>.

I have several pieces of text (normally class=lc causes them to be shown
on a light yellow bkg) interspersed here and there in the page, which I
want to hide or show all together.

I do not want to give a separate id to each.
How can I act on all ids of the same class ?
Click to expand...
Do you have control of you stylesheet files? If so, just toggle a
className in a parent element (e.g. body) that triggers a css rule to
hide everything with the class name "lc".

(Very) simplistic example, proper feature testing needed:
function hide()
{
document.body.className = "texthidden";
}

function show()
{
document.body.className = "";
}

And in your css file you add:

..texthidden .lc
{
display: none;
/* or visibility: hidden; depends on what effect you're trying to
achieve with this */
}
 
E

Evertjan.

LC's No-Spam Newsreading account wrote on 26 apr 2010 in
comp.lang.javascript:
6 more lines of code ...


what has it to be so terrible ?
It works under my test condition (firefox). Of course I can't test in a
general way but such page will have a limited audience (it's in support
of discussion inside an oragnization). Are you predicting it is not
portable across browsers ? or inefficient ? or inelegant ?
Click to expand...

It is inelegant in the superlative

Why did you skip the code, that is what it is about?

It is so inelegant that it is not easily debuggable acros browsers.
Better change the css rules of a class.
<http://www.quirksmode.org/dom/changess.html> ending with,
Click to expand...
[I use the fact that the [...] rule is the last rule in the
stylesheet. It's an ugly kludge, but it's the only way to get a proper
cross-browser test case.]
Click to expand...

The page you quote starts with "Unfortunately browser incompatibilities
are so severe that this script isn't really usable in practice yet" ...
so it does not look very inspiring.
Click to expand...

Wow, so you read about this suposed browser incompatibility, while you
disregard it in your own code as inconsequential because that is only
used with FF?
 
G

Guest

It is inelegant in the superlative
It is so inelegant that it is not easily debuggable acros browsers.
Click to expand...

but for debug will it work in normal conditions ?

I did not invent it. I ripped it from
http://www.tek-tips.com/viewthread.cfm?qid=1534478 where function
mydocumentgetElementsByClassName(what) was "advertised" with
"if you want to use class and want it portable, write your own function"
Wow, so you read about this suposed browser incompatibility, while you
disregard it in your own code as inconsequential because that is only
used with FF?
Click to expand...

I am not claiming either solution is better or worse. I definitely have
no competence to say that. Just trying to learn.

I found a solution that was advertised as "portable", which I could
understand, and did work for me. You quoted one which for me was less
legible, and was including some portability caveats.
 
G

Guest

Do you have control of you stylesheet files? If so, just toggle a
Click to expand...

Yes, the CSS file it's adhoc for the specific page (it is giving a
summary of items from various contributions to the statute of our
organization, with items in different styles according to their source,
with .lc being reserved for personal comments to be toggled on/off)
className in a parent element (e.g. body) that triggers a css rule to
hide everything with the class name "lc".
Click to expand...

I do not understand it but I've tried it :) and IT WORKS.

I just changed the stylesheet and replaced these two statements in my
offDiv and onDiv functions.
document.body.className = "texthidden";
document.body.className = "";
Click to expand...

Thanks !
 
T

Thomas 'PointedEars' Lahn

LC's No-Spam Newsreading account wrote:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Who?
Latest browsers have getElementsByClassName but for older browsers you
will have to implement your own.
Click to expand...

Found something like that on the net. In fact I replaced the definition
of my onDiv and offDiv functions (see original post) with this, and it
looks like it works

function offDiv(div) {
setClass(div,'none')
}
function onDiv(div) {
setClass(div,'block')
}
function setClass(div,what) {
var all=document.getElementsByTagName('*')
var expression=new RegExp('\\b'+div+'\\b','i') ^^^^^^^^^^^^^^^^^^^
var result=[]
for (var i=0,l=all.length;i<l;i++) {
if (expression.test(all.className)) all.style.display=what
}
}

Not perfect. Works for all div's but not for span's (inline), but it
would be trivial to adapt it, if I had the need to.
Click to expand...


Do you realize that e.g.

setClass('pat', 'none');

would hide

<div class="pat-tern">...</div>

and that the function is not setting a class at all (so the identifier is a
misnomer)? Do you realize that the HTML `class' attribute value and CSS
class selectors are _case-sensitive_?

Reasonable, working approaches have been discussed here several times
already. Please do not use/recommend code or try to reinvent the wheel
unless and until you know what you are doing.


PointedEars
 
G

Guest

LC's No-Spam Newsreading account wrote:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Who?
Click to expand...

Me (LC)
Do you realize that e.g.
setClass('pat', 'none');
would hide
<div class="pat-tern">...</div>
Click to expand...

No, I didn't (and my other classes in my private CSS all have
identifiers which differ) but apparently it is not doing that.

In my page I have a lot of <div class=lc> and ONE <span class=lc2>.
Originally this one was <span class=lc> and disappeared too when I
clicked on hide. The side effect was that it re-appeared as a div (I
mean display=block) instead of a span (I mean display=inline).

Since the divs are REAL comments (they should toggle between light
yellow bkg and hidden), while the single span is just a SAMPLE of the
look of the comments (light yellow bkg PERMANENTLY displayed), I created
in the CSS .lc2 as a clone of .lc.

And it did not disappear when hiding the .lc (as wished).
and that the function is not setting a class at all (so the identifier is a
misnomer)?
Click to expand...

Hmmm ... for me it could as well mean "setClass pat to block" or
"setClass pat to none". A name is a name, and I'm not going to
distribute the silly little javascript in a library, it will remain
quietly concealed in my organization-private page. I could have called
itr agilulf or beeblebrox instead of setClass for what the world is
concerned.
Please do not use/recommend code or try to reinvent the wheel unless
and until you know what you are doing.
Click to expand...

As I said, I did not invent it. I copied it from
http://www.tek-tips.com/viewthread.cfm?qid=1534478. Is that a deprecated
site ?

And anyhow I'm no longer using it, I'm using the solution suggested by
Gabriel Gilini in his post now.
 
T

Thomas 'PointedEars' Lahn

LC's No-Spam Newsreading account said:
Me (LC)
Click to expand...

This is not a chat or a Web forum, so I strongly recommend you get a real
name if you want to be taken seriously here.
No, I didn't (and my other classes in my private CSS all have
identifiers which differ) but apparently it is not doing that.
Click to expand...

Yes, it does.
In my page I have a lot of <div class=lc> and ONE <span class=lc2>.
[...] I created in the CSS .lc2 as a clone of .lc.

And it did not disappear when hiding the .lc (as wished).
Click to expand...

By contrast, `2' is a word character (matched by \w), so ...
Hmmm ... for me it could as well mean "setClass pat to block" or
"setClass pat to none". A name is a name, and I'm not going to
distribute the silly little javascript in a library, it will remain
quietly concealed in my organization-private page. I could have called
itr agilulf or beeblebrox instead of setClass for what the world is
concerned.
Click to expand...

It is good code style that identifiers of all methods (library or not) be
self-descriptive, best if they contain a verb and optionally a noun that
explains what they are doing.
As I said, I did not invent it
Click to expand...

Hence `do not use', with the additional provision against recommendation.
I copied it from
http://www.tek-tips.com/viewthread.cfm?qid=1534478. Is that a deprecated
site ?
Click to expand...

Obviously yes, like so many others (the estimate here is that more than 90%
of scripts to be found on Web sites are junk; opinions only seem to differ
how close the real figure would come to 100%).
And anyhow I'm no longer using it, I'm using the solution suggested by
Gabriel Gilini in his post now.
Click to expand...

Which is less capable as it can only deal with one class name where the
attribute supports a whitespace-separated list ("foo bar"), and CSS supports
combined class selectors (`.foo.bar', only MSHTML 6 has problems with that).


PointedEars
 
G

Guest

This is not a chat or a Web forum, so I strongly recommend you get a
real name if you want to be taken seriously here.
Click to expand...

Actually I do not participate to chats and do not like forums other than
usenet (for the main and good reason I can handle them with the same
client I use for e-mail), and I've been participating to usenet with my
initials and a truly-non-spammable address since at least 1997,
including at least one group where I have an institutional international
role, and it's the first time I see such a complaint.
It is good code style that identifiers of all methods (library or not) be
self-descriptive,
Click to expand...

All this is overkill for a 6-liner which is intended to be used only in
one page which will probably be seen only by 30-100 persons in a single
organization !
Obviously yes, like so many others (the estimate here is that more than 90%
of scripts to be found on Web sites are junk; opinions only seem to differ
how close the real figure would come to 100%).
Click to expand...

Can I then have for my education a pointer to a pre-cooked
non-deprecated solution posted on clj or on a non-deprecated site ?

Which is less capable as it can only deal with one class name where
the attribute supports a whitespace-separated list ("foo bar"), and
CSS supports combined class selectors (`.foo.bar', only MSHTML 6 has
problems with that).
Click to expand...

See comment on overkill above.
What I needed was JUST to toggle (hide/show) for ONE class "lc" (being
they my own personal comments to a list of items merged from several
sources). I could as well hardcode the class name in !

Maybe the fact I'm one who remembers 16-bit machines and card decks make
me prones to overkill avoidance and other silly savings :)
 
T

Thomas 'PointedEars' Lahn

LC's No-Spam Newsreading account said:
Actually I do not participate to chats and do not like forums other than
usenet (for the main and good reason I can handle them with the same
client I use for e-mail), and I've been participating to usenet with my
initials and a truly-non-spammable address since at least 1997,
including at least one group where I have an institutional international
role, and it's the first time I see such a complaint.
Click to expand...

I don't care, and it was not a complaint. You have been warned.
All this is overkill for a 6-liner which is intended to be used only in
one page which will probably be seen only by 30-100 persons in a single
organization !
Click to expand...

You will think differently in a year or so. (It matters not how many people
view the document, but how many people need to review the code, and how
often they do that; the less people and the greater the interval, the more
descriptive the code should be.)
Can I then have for my education a pointer to a pre-cooked
non-deprecated solution posted on clj or on a non-deprecated site ?
Click to expand...

No. Go search the newsgroup archives yourself.

<http://jibbering.com/faq/#posting>


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
Show text on-click with transition 2
Help with my responsive home page 2
Need help , Having problem with Drag n Drop... 1
How do I hide the modal after 5 seconds? 4
Javascript not hiding nested elements simultaneously 2
Positioning a popup 10
Need help , Having problem with Drag n Drop ? 9

Members online

No members online now.
Total: 26 (members: 1, guests: 25)
Robots: 316

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top