hiding all text with a given CLASS

Discussion in 'Javascript' started by LC's No-Spam Newsreading account, Apr 23, 2010.

  1. 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 ?

    --
    ----------------------------------------------------------------------
    is a newsreading account used by more persons to
    avoid unwanted spam. Any mail returning to this address will be rejected.
    Users can disclose their e-mail address in the article if they wish so.
    LC's No-Spam Newsreading account, Apr 23, 2010
    #1
    1. Advertising

  2. Martin Honnen, Apr 23, 2010
    #2
    1. Advertising

  3. On Fri, 23 Apr 2010, Martin Honnen wrote:
    > LC's No-Spam Newsreading account wrote:
    >
    >> Now I want instead to act on ALL divs with <div class=lc>.

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


    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.


    --
    ----------------------------------------------------------------------
    is a newsreading account used by more persons to
    avoid unwanted spam. Any mail returning to this address will be rejected.
    Users can disclose their e-mail address in the article if they wish so.
    LC's No-Spam Newsreading account, Apr 26, 2010
    #3
  4. LC's No-Spam Newsreading account

    Evertjan. Guest

    LC's No-Spam Newsreading account wrote on 26 apr 2010 in
    comp.lang.javascript:

    > On Fri, 23 Apr 2010, Martin Honnen wrote:
    >> LC's No-Spam Newsreading account wrote:
    >>
    >>> Now I want instead to act on ALL divs with <div class=lc>.

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

    >
    > 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.


    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';
    }
    ===================


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Apr 26, 2010
    #4
  5. On Mon, 26 Apr 2010, Evertjan. wrote:
    >>> LC's No-Spam Newsreading account wrote:


    >> function setClass(div,what) {
    >> var all=document.getElementsByTagName('*')

    6 more lines of code ...

    >> 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.

    >
    > Not perfect? It is terrible.


    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,


    > [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.]


    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.

    --
    ----------------------------------------------------------------------
    is a newsreading account used by more persons to
    avoid unwanted spam. Any mail returning to this address will be rejected.
    Users can disclose their e-mail address in the article if they wish so.
    LC's No-Spam Newsreading account, Apr 26, 2010
    #5
  6. On 04/23/2010 01:55 PM, LC's No-Spam Newsreading account wrote:
    > 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 ?
    >

    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 */
    }
    Gabriel Gilini, Apr 26, 2010
    #6
  7. LC's No-Spam Newsreading account

    Evertjan. Guest

    LC's No-Spam Newsreading account wrote on 26 apr 2010 in
    comp.lang.javascript:

    > On Mon, 26 Apr 2010, Evertjan. wrote:
    >>>> LC's No-Spam Newsreading account wrote:

    >
    >>> function setClass(div,what) {
    >>> var all=document.getElementsByTagName('*')

    > 6 more lines of code ...
    >
    >>> 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.

    >>
    >> Not perfect? It is terrible.

    >
    > 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 ?


    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,

    >
    >> [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.]

    >
    > 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.


    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?



    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Apr 26, 2010
    #7
  8. On Mon, 26 Apr 2010, Evertjan. wrote:

    >> what has it to be so terrible ? Are you predicting it is not portable
    >> across browsers ? or inefficient ? or inelegant ?

    >
    > It is inelegant in the superlative
    > It is so inelegant that it is not easily debuggable acros browsers.


    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?


    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.


    --
    ----------------------------------------------------------------------
    is a newsreading account used by more persons to
    avoid unwanted spam. Any mail returning to this address will be rejected.
    Users can disclose their e-mail address in the article if they wish so.
    LC's No-Spam Newsreading account, Apr 26, 2010
    #8
  9. On Mon, 26 Apr 2010, Gabriel Gilini wrote:

    > Do you have control of you stylesheet files? If so, just toggle a


    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".


    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 = "";


    Thanks !

    --
    ----------------------------------------------------------------------
    is a newsreading account used by more persons to
    avoid unwanted spam. Any mail returning to this address will be rejected.
    Users can disclose their e-mail address in the article if they wish so.
    LC's No-Spam Newsreading account, Apr 26, 2010
    #9
  10. LC's No-Spam Newsreading account wrote:
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    Who?

    > On Fri, 23 Apr 2010, Martin Honnen wrote:
    >> LC's No-Spam Newsreading account wrote:
    >>> Now I want instead to act on ALL divs with <div class=lc>.

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

    >
    > 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.


    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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Apr 27, 2010
    #10
  11. On Tue, 27 Apr 2010, Thomas 'PointedEars' Lahn wrote:

    > LC's No-Spam Newsreading account wrote:
    > ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    > Who?


    Me (LC)

    >> var expression=new RegExp('\\b'+div+'\\b','i')

    > ^^^^^^^^^^^^^^^^^^^


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


    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)?


    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.


    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.

    --
    ----------------------------------------------------------------------
    is a newsreading account used by more persons to
    avoid unwanted spam. Any mail returning to this address will be rejected.
    Users can disclose their e-mail address in the article if they wish so.
    LC's No-Spam Newsreading account, Apr 28, 2010
    #11
  12. LC's No-Spam Newsreading account wrote:

    > On Tue, 27 Apr 2010, Thomas 'PointedEars' Lahn wrote:
    >> LC's No-Spam Newsreading account wrote:
    >> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    >> Who?

    >
    > Me (LC)


    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.

    >>> var expression=new RegExp('\\b'+div+'\\b','i')

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

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


    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).


    By contrast, `2' is a word character (matched by \w), so ...

    >> and that the function is not setting a class at all (so the identifier is
    >> a misnomer)?

    >
    > 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.


    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.

    >> Please do not use/recommend code or try to reinvent the wheel unless
    >> and until you know what you are doing.

    >
    > As I said, I did not invent it


    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 ?


    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.


    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
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Apr 28, 2010
    #12
  13. On Wed, 28 Apr 2010, Thomas 'PointedEars' Lahn wrote:

    > 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.


    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.

    >>> setClass('pat', 'none');
    >>> would hide
    >>> <div class="pat-tern">...</div>


    > It is good code style that identifiers of all methods (library or not) be
    > self-descriptive,


    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 !

    >> http://www.tek-tips.com/viewthread.cfm?qid=1534478. Is that a deprecated
    >> site ?

    >
    > 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%).


    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 ?


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

    >
    > 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).


    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 :)

    --
    ----------------------------------------------------------------------
    is a newsreading account used by more persons to
    avoid unwanted spam. Any mail returning to this address will be rejected.
    Users can disclose their e-mail address in the article if they wish so.
    LC's No-Spam Newsreading account, Apr 29, 2010
    #13
  14. LC's No-Spam Newsreading account wrote:

    > On Wed, 28 Apr 2010, Thomas 'PointedEars' Lahn wrote:
    >> 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.

    >
    > 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.


    I don't care, and it was not a complaint. You have been warned.

    >>>> setClass('pat', 'none');
    >>>> would hide
    >>>> <div class="pat-tern">...</div>

    >>
    >> It is good code style that identifiers of all methods (library or not) be
    >> self-descriptive,

    >
    > 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 !


    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.)

    >>> http://www.tek-tips.com/viewthread.cfm?qid=1534478. Is that a deprecated
    >>> site ?

    >>
    >> 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%).

    >
    > 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 ?


    No. Go search the newsgroup archives yourself.

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


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Apr 30, 2010
    #14
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lord0
    Replies:
    1
    Views:
    548
    Thomas Weidenfeller
    Apr 19, 2006
  2. chiara
    Replies:
    6
    Views:
    456
    Barry Schwarz
    Oct 6, 2005
  3. 2Barter.net
    Replies:
    0
    Views:
    353
    2Barter.net
    Dec 13, 2006
  4. Casey Hawthorne
    Replies:
    385
    Views:
    5,471
    ng2010
    Apr 4, 2010
  5. Ste
    Replies:
    41
    Views:
    783
    Thomas 'PointedEars' Lahn
    Aug 1, 2007
Loading...

Share This Page