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

Groups > comp.lang.javascript > #15472 > unrolled thread

Altering what a class does

Back to article view | Back to comp.lang.javascript

Contents

  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

#15472 — Altering what a class does

In the Head of a page, I have

<link rel="StyleSheet" href="styles-a.css" type="text/css">

<style type="text/css">
 /* more classes */
 .JAX { display: none }
 /* maybe more classes */
</style>

At the press of a button, I wish to alter JAX to { display: block }  -
or to just { } or to remove the rule; the button already has an onclick
handler.

It would save me some cogitation if the necessary code were supplied.

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

[toc] | [next] | [standalone]

#15474

On Aug 20, 12:47 pm, Dr J R Stockton
<reply1...@merlyn.demon.co.uk.invalid> wrote:
> In the Head of a page, I have
>
> <link rel="StyleSheet" href="styles-a.css" type="text/css">
>
> <style type="text/css">
>  /* more classes */
>  .JAX { display: none }
>  /* maybe more classes */
> </style>
>
> At the press of a button, I wish to alter JAX to { display: block }  -
> or to just { } or to remove the rule; the button already has an onclick
> handler.
>
> It would save me some cogitation if the necessary code were supplied.
>
Change the element's `className` property.

if(el.className == 'JAX') {
  el.className = 'POOTER';
}

.POOTER {
    background: oldlace;
}

[toc] | [prev] | [next] | [standalone]

#15475

dhtml wrote on 21 aug 2012 in comp.lang.javascript:

> On Aug 20, 12:47 pm, Dr J R Stockton
> <reply1...@merlyn.demon.co.uk.invalid> wrote:
>> In the Head of a page, I have
>>
>> <link rel="StyleSheet" href="styles-a.css" type="text/css">
>>
>> <style type="text/css">
>>  /* more classes */
>>  .JAX { display: none }
>>  /* maybe more classes */
>> </style>
>>
>> At the press of a button, I wish to alter JAX to { display: block }  -
>> or to just { } or to remove the rule; the button already has an 
onclick
>> handler.
>>
>> It would save me some cogitation if the necessary code were supplied.
>>
> Change the element's `className` property.
> 
> if(el.className == 'JAX') {
>   el.className = 'POOTER';
>}
> 
> .POOTER {
>     background: oldlace;
>}
> 

Methinks John wants to change some rule in an existing class,
so in all elements using that class, 
not changing the className of numerous elements.

==========================================
<script type='text/javascript'>

function toggle(sh,rl,c1,c2) {
  var stsh = document.styleSheets[sh];
  var rul = stsh.cssRules || stsh.rules;
  var rgx = new RegExp(rl,'i');
  for (i=0;i<rul.length;i++)
    if (rgx.test(rul[i].selectorText))
       myRul = rul[i];
  myRul.style.color = (myRul.style.color != c1) ?c1 :c2 ;
};

</script>
<style type='text/css' id='styleA'>
.nav {color:navy;}
</style>
<style type='text/css' id='styleB'>
.JAX {color:purple;}
.gr {color:green;}
</style>

<div class='JAX' 
onclick="toggle('styleB',this.className,'purple','red');">
Click me to toggle
</div>
<div class='gr'>
green
</div>
<div class='JAX'>
1 2 3
</div>
<div class='nav'>
navy
</div>

==========================================



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#15536

In comp.lang.javascript message <XnsA0B6658E69A42eejj99@194.109.133.133>
, Tue, 21 Aug 2012 07:59:01, Evertjan. <exxjxw.hannivoort@inter.nl.net>
posted:

>Methinks John wants to change some rule in an existing class,
>so in all elements using that class,
>not changing the className of numerous elements.

Correct.

>==========================================
><script type='text/javascript'>
>
>function toggle(sh,rl,c1,c2) {
>  var stsh = document.styleSheets[sh];
>  var rul = stsh.cssRules || stsh.rules;
>  var rgx = new RegExp(rl,'i');
>  for (i=0;i<rul.length;i++)
>    if (rgx.test(rul[i].selectorText))
>       myRul = rul[i];
>  myRul.style.color = (myRul.style.color != c1) ?c1 :c2 ;
>};

I don't need that flexibility; so rul[0].style.display = "block" should
do as well as that.  Thanks.   Have you read Enestrom 304?

-- 
 (c) John Stockton, nr London, UK.  For Mail, see Home Page.  Turnpike, WinXP.
 Web  <http://www.merlyn.demon.co.uk/> - FAQ-type topics, acronyms, and links.
 Command-prompt MiniTrue is useful for viewing/searching/altering files. Free,
 DOS/Win/UNIX now 2.0.6; see <URL:http://www.merlyn.demon.co.uk/pc-links.htm>.

[toc] | [prev] | [next] | [standalone]

#15539

Dr J R Stockton wrote on 23 aug 2012 in comp.lang.javascript:

> Have you read Enestrom 304?

As in: "Considerationes de motu corporum coelestium"?

You can do that with HTML45-cum-CSS nowadays:

-webkit-transition: all 3s ease-in-out;

================

btw, de corporis coelestium,
did you hear about the first quantum road-kill on Mars?

Curiosity killed Schrödinger's cat and didn't.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#15523

On Mon, 20 Aug 2012 20:47:47 +0100, Dr J R Stockton
<reply1234@merlyn.demon.co.uk.invalid> wrote in
<ZbqZfMCjRpMQFwp9@invalid.uk.co.demon.merlyn.invalid>:


>At the press of a button, I wish to alter JAX to { display: block }  -
>or to just { } or to remove the rule; the button already has an onclick
>handler.
>
>It would save me some cogitation if the necessary code were supplied.

Create two style sheets with ids and disabled="disabled" for the class.
Then with JS toggle the value of disabled from _true_ to _false_.  

Perhaps search <<use alternate style sheets>> for examples which is swap
style sheets within a collection.

K

[toc] | [prev] | [next] | [standalone]

#15550

"Dr J R Stockton" <reply1234@merlyn.demon.co.uk.invalid> schreef in bericht 
news:ZbqZfMCjRpMQFwp9@invalid.uk.co.demon.merlyn.invalid...
> In the Head of a page, I have
>
> <link rel="StyleSheet" href="styles-a.css" type="text/css">
>
> <style type="text/css">
> /* more classes */
> .JAX { display: none }
> /* maybe more classes */
> </style>
>
> At the press of a button, I wish to alter JAX to { display: block }  -
> or to just { } or to remove the rule; the button already has an onclick
> handler.
>
> It would save me some cogitation if the necessary code were supplied.
>

Maybe by combining code from following functions will achieve what you want. 
Find the rule, delete it and insert a new one.
Tom

======
var checkChartStyleDefined = function(ruleID){
  var j,k,selector,rule,rules,styleSheet,styleSheets = document.styleSheets;
  if (!styleSheets){return(false);}
  for (j=styleSheets.length-1;j>=0;j--){
    styleSheet = styleSheets[j];
    if (styleSheet.rules){rules = styleSheet.rules;}
    else {
      if (styleSheet.cssRules) {rules = styleSheet.cssRules;}
      else {return(false);}
    }
    for (k=rules.length-1;k>=0;k--){
      rule = rules[k];
      if (rule.selectorText) {selector = rule.selectorText;}
      else {
        if (rule.cssText) {selector = rule.cssText;}
        else {return(false);}
      }
      selector = selector.toLowerCase();
      if (selector.indexOf(ruleID)>=0){return(true);}
    }
  }
  return(false);
};

function addCSSrule(selector,declaration){
  var n,styleSheet,styleSheets = document.styleSheets;
  if (!styleSheets) {return;}
  n = styleSheets.length;
  if (!n) {return;}
  styleSheet = styleSheets[n-1];
  if (styleSheet.addRule) {
    styleSheet.addRule(selector,declaration,0);
    return
  }
  if (styleSheet.insertRule) {
    styleSheet.insertRule(selector+" {"+declaration+"}",0)
  }
}

[toc] | [prev] | [next] | [standalone]

#15609

Dr J R Stockton wrote:
> <style type="text/css">
>  .JAX { display: none }
> </style>
>
> At the press of a button, I wish to alter JAX to { display: block }  -
> or to just { } or to remove the rule; the button already has an onclick
> handler.
>
> It would save me some cogitation if the necessary code were supplied.

How about something like this?

    .JAX {display: none;}
    .visibleJAX .JAX {display: block;}

    yourButtonHandler = function() {
      // ...
      someTool.addClassName(document.body, "visibleJAX");
    }

And if you need to undo this, add a function that removes that class
name as well.  Although the suggestions for how to modify the actual
CSS rules might work, they are much more heavyweight.

Would that do what you need?

  -- Scott

[toc] | [prev] | [next] | [standalone]

#15625

In comp.lang.javascript message <6d02792b-fd42-4d1e-a8ef-723263a280c9@u1
5g2000yql.googlegroups.com>, Wed, 29 Aug 2012 13:33:44, Scott Sauyet
<scott.sauyet@gmail.com> posted:

>Dr J R Stockton wrote:
>> <style type="text/css">
>>  .JAX { display: none }
>> </style>
>>
>> At the press of a button, I wish to alter JAX to { display: block }  -
>> or to just { } or to remove the rule; the button already has an onclick
>> handler.
>>
>> It would save me some cogitation if the necessary code were supplied.
>
>How about something like this?
>
>    .JAX {display: none;}
>    .visibleJAX .JAX {display: block;}
>
>    yourButtonHandler = function() {
>      // ...
>      someTool.addClassName(document.body, "visibleJAX");
>    }
>
>And if you need to undo this, add a function that removes that class
>name as well.  Although the suggestions for how to modify the actual
>CSS rules might work, they are much more heavyweight.
>
>Would that do what you need?

I don't understand how that is supposed to do what I wanted, so I cannot
say.  For example, what is   someTool  ?

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.

-- 
 (c) John Stockton, nr London UK. Mail, see Homepage. BP7, Delphi 3 & 2006.
   <http://www.merlyn.demon.co.uk/> TP/BP/Delphi/&c., FAQqy topics & links;
   <http://www.bancoems.com/CompLangPascalDelphiMisc-MiniFAQ.htm> clpdmFAQ;
   NOT <http://support.codegear.com/newsgroups/>: news:borland.* Guidelines

[toc] | [prev] | [next] | [standalone]

#15649

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.


The idea is that if you added a class to the BODY 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.


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


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>

      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?

  -- Scott

[toc] | [prev] | [next] | [standalone]

#15652

Scott Sauyet wrote on 01 sep 2012 in comp.lang.javascript:

> Dr J R Stockton wrote:
>> Scott Sauyet posted:
> 
>>>    .JAX {display: none;}
>>>    .visibleJAX .JAX {display: block;}
>>
>>>    yourButtonHandler = function() {

[..]
 
> A simplified version of my suggestion is posted at
> 
>     <http://scott.sauyet.com/Javascript/Test/2012-08-31a/>

[..]

Wow! Good idea.

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

I would give each function it's own <div>, 
perhaps covering the whole document's <body> space:

See and try: <http://hannivoort.org/test/jax.asp>

==========================================
<script type='text/javascript'>

function makeOnClicks(x) {
  document.getElementById('toggle' + x).onclick = function() { 
     document.getElementById('my' + x).className = 
       (document.getElementById('my' + x).className != 'display' + x)
       ? 'display' + x : '';
  };
};

</script>

<body onLoad="makeOnClicks('Div');makeOnClicks('Img');">
<div id='myDiv'><div id='myImg'>

<button id='toggleDiv'>toggle divs</button> | 
<button id='toggleImg'>toggle images</button>
......

</div></div></body>
==========================================


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#15657

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.

[toc] | [prev] | [next] | [standalone]

#15671

Dr J R Stockton wrote:

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

I'm not sure it would be better, but one alternative would be to leave
the JAX/LaTex in place but place over it a semitransparent DIV element
that said something like "Processing Formulas" or your "Typesetting
Math", removing each one upon processing.  Using a technique similar
to what I was suggesting, you could even add some sort of progress bar
to these DIVs without much work.  (Just define classes for the BODY
such as "mathTypeset-5pct", "mathTypeset=10pct", ...
"mathTypeset-95%", adjusting them using the same sort of progress
indication you're using for your current progress indication.

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

Damn it all.  I've managed to avoid Wodehouse all these years, and now
one quick look at Wikipedia, and I think I have to try it.  What are
you doing to me John?


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

I'm glad it would work for you, even if you choose not to use it.  I
came to Javascript only after spending a great deal of time with HTML
and CSS, so I do tend to think of plain CSS solutions first when
possible, and on simple JS-CSS interactions when I can.  It's
definitely not cleverness.  I'm fairly certain this is fairly widely
used; it just happens to be something you hadn't run across before.

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

I can read the math reasonably well, but Latin is far beyond me!

  -- Scott

[toc] | [prev] | [next] | [standalone]

#15674

On Mon, 3 Sep 2012 15:45:14 -0700 (PDT), Scott Sauyet
<scott.sauyet@gmail.com> wrote:

>Dr J R Stockton wrote:

[snip]

>> 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".
>
>Damn it all.  I've managed to avoid Wodehouse all these years, and now
>one quick look at Wikipedia, and I think I have to try it.  What are
>you doing to me John?

     That wrenching sound might be the hinges on your horizons
creaking a bit as your horizons are widened.

     I tried a little of Wodehouse myself but bounced.  A pity.  So
many relatings of the humour have been quite amusing.  I suppose I
will have to give it another try.

[snip]

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#15693

In comp.lang.javascript message <ed2c7c60-7990-42ee-a1d3-2c0ba56a4729@gk
4g2000vbb.googlegroups.com>, Mon, 3 Sep 2012 15:45:14, Scott Sauyet
<scott.sauyet@gmail.com> posted:

>Dr J R Stockton wrote:
>
>> [ ... ]
>> 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?".
>
>I'm not sure it would be better, but one alternative would be to leave
>the JAX/LaTex in place but place over it a semitransparent DIV element
>that said something like "Processing Formulas" or your "Typesetting
>Math", removing each one upon processing.  Using a technique similar
>to what I was suggesting, you could even add some sort of progress bar
>to these DIVs without much work.  (Just define classes for the BODY
>such as "mathTypeset-5pct", "mathTypeset=10pct", ...
>"mathTypeset-95%", adjusting them using the same sort of progress
>indication you're using for your current progress indication.

That would involve hooking into the MathJax, which is more learning than
I want to do at present.   There is no need to show progress *within* a
DIV, since no individual set of equations can take more than a very few
seconds.  The most elegant representation would be to show the number of
the most recently-completed page; but MathJax by default shows
percentage done, and there is no need to improve on that.

>> [ ... ]
>>
>> 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".
>
>Damn it all.  I've managed to avoid Wodehouse all these years, and now
>one quick look at Wikipedia, and I think I have to try it.  What are
>you doing to me John?

Reading a single Wooster should be part of one's cultural education.
But I'd not advise reading Wodehouse intensively, unless for example
confined to bed with a disease that makes one _feel_ feeble.

>> [ ... ]
>> Be careful not to underestimate the inabilities and ignorances of your
>> readers, or your own cleverness ... but thanks, as usual.
>
>I'm glad it would work for you, even if you choose not to use it.  I
>came to Javascript only after spending a great deal of time with HTML
>and CSS, so I do tend to think of plain CSS solutions first when
>possible, and on simple JS-CSS interactions when I can.  It's
>definitely not cleverness.  I'm fairly certain this is fairly widely
>used; it just happens to be something you hadn't run across before.
>
>> [ ... ]
>> 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.
>
>I can read the math reasonably well, but Latin is far beyond me!

Well, if you can read all of the superscripts ...  For them, it may be
necessary for me to work through the maths, or trust to a later printing
(which Google Books will only show me 2/3 of).  OTOH, I only need to
discover what Euler wrote that he'd proved; and I understand from other
sources (including myself) what he might have proved.  What I want to
know can be encoded as an array of four or five Booleans,

I have saved your example and intend to fit the code when real life
permits - it is an unusually busy week.  It's a pity this group has
dwindled; I have a problem about which Lasse might have expertise.

-- 
 (c) John Stockton, nr London, UK.    ?@merlyn.demon.co.uk     Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[toc] | [prev] | [next] | [standalone]

#15753

In comp.lang.javascript message <ed2c7c60-7990-42ee-a1d3-2c0ba56a4729@gk
4g2000vbb.googlegroups.com>, Mon, 3 Sep 2012 15:45:14, Scott Sauyet
<scott.sauyet@gmail.com> posted:

>
>I'm glad it would work for you, even if you choose not to use it.  I
>came to Javascript only after spending a great deal of time with HTML
>and CSS, so I do tend to think of plain CSS solutions first when
>possible, and on simple JS-CSS interactions when I can.  It's
>definitely not cleverness.  I'm fairly certain this is fairly widely
>used; it just happens to be something you hadn't run across before.


I found that, in the same page, I wanted to do the opposite : to hide,
rather than to reveal, and at the end, rather than the beginning.
Slightly reversing your logic worked for that, as soon as I'd typed it
in correctly.  That is good.  It can be seen in the test and real pages,
                <http://www.merlyn.demon.co.uk/p231-jax.htm>
                <http://www.merlyn.demon.co.uk/essai-3c.htm>.
In p231 JavaScript, which works, for the "improved but no good" code,
consider each of three "///xx", and the "///++", to be moved to the line
immediately above.


However, the lines to be hidden are only linked to the MathJax part by
visual adjacency and semantics; there can be no code-level interaction.

Now what I gave initially as an example was not quite true; my elements
were not actually class=JAX, they were style='display:none', and were
switched by replacing display:none with display:block in the
body.innerHTML.  Obviously I could easily do that by using class=JAX and
then removing the class.

But there is a side-effect - the equations are still processed, to judge
by the progress indicator; but they do not actually appear where they
should; and doing the latter step your way does not help with that.

I suspect that the problem is in the MathJax processor, which is
asynchronous - it may take a snapshot of the code at the wrong time, or
neglect the possibility of dynamically redefining in an important way
the meaning of the class of the objects it deals with.

The time has come, I think, to take this to the MathJax user group,
after looking again at the instructions on the MathJax site.  It could
be a common requirement, and may already be handled.

-- 
 (c) John Stockton, nr London UK.  ?@merlyn.demon.co.uk  DOS 3.3 6.20 ; WinXP.
   Web  <http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links.
   PAS EXE TXT ZIP via  <http://www.merlyn.demon.co.uk/programs/00index.htm>
   My DOS  <http://www.merlyn.demon.co.uk/batfiles.htm> - also batprogs.htm.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web