Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #15657

Re: Altering what a class does

Show all headers | View raw

In comp.lang.javascript message <788319d2-8a2c-4a75-af45-73a590669e1c@u1
5g2000yql.googlegroups.com>, Fri, 31 Aug 2012 20:39:18, Scott Sauyet
<scott.sauyet@gmail.com> posted:

>Dr J R Stockton wrote:
>> Scott Sauyet posted:
>
>>>    .JAX {display: none;}
>>>    .visibleJAX .JAX {display: block;}
>>
>>>    yourButtonHandler = function() {
>>>      // ...
>>>      someTool.addClassName(document.body, "visibleJAX");
>>>    }
>>> [ ... ]
>>
>>> Would that do what you need?
>>
>> I don't understand how that is supposed to do what I wanted, so I cannot
>> say.


Don't answer any of this before reaching the end !!!



>The idea is that if you added a class to the BODY element,

I don't understand that.  If you mean using
<body class=XXX>, then I don't want that (AFAICS), as I want to affect
about 500 elements in the page.  If you mean including a class
definition, then that is in the HEAD element.

> a second
>CSS rule could override the first and turn the otherwise hidden
>elements visible.  This would be much easier than actually trying to
>change the CSS rules themselves.  I'll post a simplified version
>below.
>
>> For example, what is   someTool  ?
>
>I don't know.  I assumed it would be clear enough that I simply meant
>that you should use any tool that had some appropriate addClassName
>function that would add a class name to the list of class names for a
>DOM element.  Whether that's a stand-alone function you wrote or part
>of a suite of tools that you wrote or a third-party library you use
>wasn't very interesting to me here.  If you search the web for
>"Javascript addClass" you will find many implementations, probably of
>greatly varying quality.  But it's not difficult to write one.

I don't know how to add a class name; but it is presumably in one of the
books I have, or known by Google (yes).


>> Class JAX should not display before the button is pressed.  When the
>> button is pressed, it must display, from the point of view of software
>> within the page's include file(s).  That software will, in time, read
>> what is displayed and render it invisible.  It would be better if the
>> items so classed never appeared on the screen, except if the included
>> code failed; but that seems too much to ask for.
>
>I assume by "Class JAX" you mean something like "all the DOM elements
>whose space-separated list of tokens in their className property
>(which is derived from the "class" attribute) includes the string
>"JAX".  So "it must display" refers to each of these elements,
>correct?  They should all display when your event is noted?

Roughly.  For the present purposes, every element on my site either has
class-type property given by three uppercase letters, or has no class-
type property.

>A simplified version of my suggestion is posted at
>
>    <http://scott.sauyet.com/Javascript/Test/2012-08-31a/>
>
>The basic idea is this:
>
>      .JAX {
>        display: none;
>      }
>      .visibleJAX .JAX{
>        display: block;
>      }
>
>      <p><button id="show">Show JAX</button> | <button id="hide">Hide
>JAX</button> </p>
>
>      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
>Nullam  ... </p>
>      <p class="JAX">Duis velit. Sed porta metus vitae quam. Sed
>ligula.  ... </p>
>      <p>Nulla eget libero. Suspendisse ullamcorper. In non justo.
>Fusce ... </p>
>      <p class="JAX">Proin mauris velit, ornare sed, rutrum non,
>mattis eu,  ... </p>
>      <p>Suspendisse ante. Proin adipiscing. Quisque fringilla velit.
>Sed nec  ... </p>

Well, it's not Latin I want to hide, but it is surrounded by English
that was French ...

There is now a further problem, in that since I started this thread I've
forgotten _exactly_ why I wanted it.  The only pages I have that contain
'.JAX' are <http://www.merlyn.demon.co.uk/essai-3c.htm> and
<http://www.merlyn.demon.co.uk/p231-jax.htm>.  The first is a real page,
the second is a test subset but identical for the present purpose.


>      document.getElementById("show").onclick = function() {
>        document.body.className = "visibleJAX";
>      };
>      document.getElementById("hide").onclick = function() {
>        document.body.className = "";
>      };
>
>A more sophisticated version would note that the body might have other
>tokens in its className and do some more sophisticated pattern
>matching with regular expressions in order to add and remove the
>"visibleJAX" class.
>
>Does this make more sense?

More, and in time perhaps even more.  BUT see Footnote.


The background is that the page source contains lots of instances like

        ... so that one has

        ##.
        $$ r = \sqrt { x^2+y^2+z^2 }, ~~~~
           r' = \sqrt { x'^2+y'^2+z'^2 }, ~~~~
           r'' = \sqrt { (x'-x)^2+(y'-y)^2+(z'-z)^2 } . $$

        One will have, ...

all within   <div ID=essai style ...> ... ... ... </div>.

At the end of the body is a definition of Func and

        var Esay = document.getElementById("essai")
        Esay.innerHTML = Esay.innerHTML.
          replace(/##(\w['~]?)?(\d)?([\.,; ]*)?/g, Func)

which replaces each ## and following visible characters with a dummy
<span class=EQN ...> ... </span> string containing the word "Algebra".

The $$ markers delimit MathJax, which is like LaTeX.

Normally, the author fires up the MathJax processor as soon as possible,
and the $$ ... $$ sections are replaced by pretty versions of equations,
before the reader has had time to worry about the cabalistic MathJax.

But processing 500 such equations, many of them more complex, can take
over a minute; and the reader may want to see only the text and the
dummy equations.

So I, as author, provide a button to start the "typesetting".

But then the LaTex shows before the button is pressed.  So, after
processing the ##, I do

Esay.innerHTML = Esay.innerHTML.
  replace(/(\$\$[^$]+\$\$)/gm, "<span style='display:none;'>$1<\/span>")
// // use Class JAX there

to hide the LaTeX.  But the typesetter only reads visible LaTeX.

So the button calls


function Jaxify(THIS) { // Button handler
  THIS.disabled = true // Disable the button

  // Unhide the LaTex to allow MathJax processing :
  Esay.innerHTML = Esay.innerHTML.
    replace(/(display:none;)/gm, "display:block;")
  // OR? document.styleSheets[1].cssRules[0].cssText =
                                               ".JAX { display: block }"

  MathJax.Hub.Typeset()

  var EQNs = document.getElementsByClassName("EQN")
  for (var J in EQNs) // Hide the equation placeholders that Func put
    //    if (EQNs[J].style) EQNs[J].style.display="none"
    EQNs[J].innerHTML = ""
  } // end Jaxify


which does what it says (except that TypeSet does not itself typeset,
but somehow calls an asynchronous typesetter and returns early).


So, putting the question differently, it is "how can I improve
JavaScript in page file p231-jax.htm (but not including Func), perhaps
by better use of CSS?".

Note: in principle, MathJax itself can hide placeholders; but the
necessary conditions are not currently fulfilled.

Note also that what I have done already works, and the overall time
taken is thoroughly dominated by MathJax typesetting, so this is
essentially an academic/learning thread rather than an "I must find some
way to do it" thread, starting from not long after the original article
was posted.

The source of ShoScr, in inc-cmmn.htm, has a comment worth reading <g>.



Footnote:

It ought to have made sense.  But the demo page proved that you must be
answering the right question (as expected), and it became immediately
obvious what you meant.  I had not known that one could do that, and
without a working example I'd have had trouble believing it.  In the
words of Bertie Wooster (and others), "rem acu tetigisti".

Be careful not to underestimate the inabilities and ignorances of your
readers, or your own cleverness ... but thanks, as usual.



Announce : I now have IE9 as well as IE8.

<FAQENTRY>  Given that popular browsers look more and more alike, how
can one tell, and remember how to tell, which is which if one has
several running at once?


P.S.  If that were real Latin, written by you, I'd ask for your help in
translating Enestrom 304; at present I'm proof-reading my transcription,
which also uses MathJax.  <http://www.merlyn.demon.co.uk/euler304.htm>.
That only takes 12 seconds to typeset, which is tolerable (P4/3G WinXP
sp3 Chrome).

-- 
 (c) John Stockton, nr London, UK.  Mail via homepage.  Turnpike v6.05  MIME.
  Web  <http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms and links;
  Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
 No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Altering what a class does Dr J R Stockton <reply1234@merlyn.demon.co.uk.invalid> - 2012-08-20 20:47 +0100
  Re: Altering what a class does dhtml <dhtmlkitchen@gmail.com> - 2012-08-20 16:12 -0700
    Re: Altering what a class does "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-08-21 07:59 +0000
      Re: Altering what a class does Dr J R Stockton <reply1234@merlyn.demon.co.uk.invalid> - 2012-08-23 19:54 +0100
        Re: Altering what a class does "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-08-23 23:01 +0000
  Re: Altering what a class does Dr.Kral@nyc.rr.com - 2012-08-23 13:16 -0400
  Re: Altering what a class does "Tom de Neef" <tdeneef@qolor.nl> - 2012-08-24 19:18 +0200
  Re: Altering what a class does Scott Sauyet <scott.sauyet@gmail.com> - 2012-08-29 13:33 -0700
    Re: Altering what a class does Dr J R Stockton <reply1235@merlyn.demon.co.uk.invalid> - 2012-08-30 22:19 +0100
      Re: Altering what a class does Scott Sauyet <scott.sauyet@gmail.com> - 2012-08-31 20:39 -0700
        Re: Altering what a class does "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-09-01 08:23 +0000
        Re: Altering what a class does Dr J R Stockton <reply1235@merlyn.demon.co.uk.invalid> - 2012-09-02 19:49 +0100
          Re: Altering what a class does Scott Sauyet <scott.sauyet@gmail.com> - 2012-09-03 15:45 -0700
            Re: Altering what a class does Gene Wirchenko <genew@ocis.net> - 2012-09-03 17:13 -0700
            Re: Altering what a class does Dr J R Stockton <reply1236@merlyn.demon.co.uk.invalid> - 2012-09-04 21:10 +0100
            Re: Altering what a class does Dr J R Stockton <reply1236@merlyn.demon.co.uk.invalid> - 2012-09-06 23:37 +0100

csiph-web