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

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

Re: Dynamic CSS adjustments (JavaScript)

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

This discussion starts older than the indexed window; earlier articles aren't shown. The article labeled Started by below is the oldest one visible, not the original post.

Contents

  Re: Dynamic CSS adjustments (JavaScript) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-06-26 20:09 +0200
    Re: Dynamic CSS adjustments (JavaScript) Philip Herlihy <bounceback@you.com> - 2014-06-27 00:02 +0100
      Re: Dynamic CSS adjustments (JavaScript) Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-27 02:34 +0200
        Re: Dynamic CSS adjustments (JavaScript) Joao Rodrigues <groups_jr-1@yahoo.com> - 2014-06-26 22:43 -0300
          JavaScript and CSS in external files???, was Re: Dynamic CSS adjustments (JavaScript) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-06-27 09:19 +0200
          Re: Dynamic CSS adjustments (JavaScript) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-27 10:22 +0200
            Re: Dynamic CSS adjustments (JavaScript) Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-06-27 17:23 -0300
              Re: Dynamic CSS adjustments (JavaScript) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-27 23:28 +0200
                Re: Dynamic CSS adjustments (JavaScript) Joao Rodrigues <groups_jr-1@yahoo.com> - 2014-06-27 23:45 -0300
                  Re: Dynamic CSS adjustments (JavaScript) Tim Streater <timstreater@greenbee.net> - 2014-06-28 10:30 +0100
        Re: Dynamic CSS adjustments (JavaScript) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-27 10:19 +0200
      Re: Dynamic CSS adjustments (JavaScript) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-27 10:12 +0200
      Re: Dynamic CSS adjustments (JavaScript) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-27 10:16 +0200
      Re: Dynamic CSS adjustments (JavaScript) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-27 10:16 +0200
      Re: Dynamic CSS adjustments (JavaScript) Philip Herlihy <bounceback@you.com> - 2014-06-30 11:02 +0100
    Re: Dynamic CSS adjustments (JavaScript) BootNic <bootnic.bounce@gmail.com> - 2014-06-26 23:18 -0400
      Re: Dynamic CSS adjustments (JavaScript) Philip Herlihy <bounceback@you.com> - 2014-06-30 11:31 +0100
        Re: Dynamic CSS adjustments (JavaScript) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-06-30 13:37 +0200
          Re: Dynamic CSS adjustments (JavaScript) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-06-30 13:40 +0200
            Re: Dynamic CSS adjustments (JavaScript) Philip Herlihy <bounceback@you.com> - 2014-07-01 12:41 +0100
              Re: Dynamic CSS adjustments (JavaScript) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-07-01 14:28 +0200
                Re: Dynamic CSS adjustments (JavaScript) Philip Herlihy <bounceback@you.com> - 2014-07-01 15:52 +0100
                  Re: Dynamic CSS adjustments (JavaScript) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-07-01 18:08 +0200
          Re: Dynamic CSS adjustments (JavaScript) Scott Sauyet <scott.sauyet@gmail.com> - 2014-06-30 06:22 -0700
            Re: Dynamic CSS adjustments (JavaScript) Denis McMahon <denismfmcmahon@gmail.com> - 2014-06-30 14:32 +0000
              Re: Dynamic CSS adjustments (JavaScript) Scott Sauyet <scott.sauyet@gmail.com> - 2014-06-30 13:16 -0700
                Re: Dynamic CSS adjustments (JavaScript) Denis McMahon <denismfmcmahon@gmail.com> - 2014-06-30 23:14 +0000
                  Re: Dynamic CSS adjustments (JavaScript) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-07-01 09:02 +0200

Page 1 of 2  [1] 2  Next page →

#25049 — Re: Dynamic CSS adjustments (JavaScript)

Philip Herlihy <bounceback@you.com> wrote on 26 jun 2014 in 
comp.infosystems.www.authoring.stylesheets:

> Hope this isn't off-topic! 

It is, you better ask in comp.lang.javascript.
Follow up set.

> I'd like to be able to provide a button or 
> link which will hide (display:none) all the items on a page of class 
> "done" (Outdoor events, as it happens).  I've googled, and even bought a 
> JavaScript book (I'm barely competent in js, but otherwise an 
> experienced, if rusty, programmer).
> 
> The best option appears to be to have the link:
> <a href="javascript:toggleStyleSheet()">Hide/Show past walks</a>
> ... load a further external style sheet.  I think this would mean 
> refreshing the page to reverse the 'hiding'.
> 
> Is there a better way?

Certainly, loading an external script takes time.

Try [this expects only block elements for your class]:

===============================================
<script type='text/javascript'>
var toggleIsDone = false;
function toggleDone() {
   var t = document.getElementsByClassName('done');
   for (var x=0; x<t.length; x++)
      t[x].style.display = (toggleIsDone)?'block' :'none';
   toggleIsDone = !toggleIsDone;
};
</script>

<button onclick='toggleDone()'>toggleDone</button>
<div class='done'>AAAAAAAAAAAa</div>
<div class='xyz'>bbbbbbbbbbbbB</div>
<div class='done'>CCCCCCCCCCCCCc</div>
==========================================

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

[toc] | [next] | [standalone]

#25054

In article <XnsA358CD0D1F4FBeejj99@194.109.133.133>, 
exxjxw.hannivoort@inter.nl.net says...
> 
> Philip Herlihy <bounceback@you.com> wrote on 26 jun 2014 in 
> comp.infosystems.www.authoring.stylesheets:
> 
> > Hope this isn't off-topic! 
> 
> It is, you better ask in comp.lang.javascript.
> Follow up set.
> 
> > I'd like to be able to provide a button or 
> > link which will hide (display:none) all the items on a page of class 
> > "done" (Outdoor events, as it happens).  I've googled, and even bought a 
> > JavaScript book (I'm barely competent in js, but otherwise an 
> > experienced, if rusty, programmer).
> > 
> > The best option appears to be to have the link:
> > <a href="javascript:toggleStyleSheet()">Hide/Show past walks</a>
> > ... load a further external style sheet.  I think this would mean 
> > refreshing the page to reverse the 'hiding'.
> > 
> > Is there a better way?
> 
> Certainly, loading an external script takes time.
> 
> Try [this expects only block elements for your class]:
> 
> ===============================================
> <script type='text/javascript'>
> var toggleIsDone = false;
> function toggleDone() {
>    var t = document.getElementsByClassName('done');
>    for (var x=0; x<t.length; x++)
>       t[x].style.display = (toggleIsDone)?'block' :'none';
>    toggleIsDone = !toggleIsDone;
> };
> </script>
> 
> <button onclick='toggleDone()'>toggleDone</button>
> <div class='done'>AAAAAAAAAAAa</div>
> <div class='xyz'>bbbbbbbbbbbbB</div>
> <div class='done'>CCCCCCCCCCCCCc</div>
> ==========================================

Thank you - I'll study this carefully.
Now I just hope the good people in comp.lang.javascript don't deem this 
a CSS issue and send me back...

-- 

Phil, London

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

#25057

Stefan Ram wrote:

> Philip Herlihy <bounceback@you.com> writes:
>> Now I just hope the good people in comp.lang.javascript don't deem this 
>> a CSS issue and send me back...

No, I don't think so.

>   Today, we want »non-obtrusive JavaScript«. That is, there
>   should be as little JavaScript as possible within the HTML
>   document. Rather, it is moved into a separate script file:

This approach is not uncontroversial (even though I prefer it, when viable).

> <!DOCTYPE HTML><html><head><meta charset="UTF-8">
> <title>Main</title><link rel="stylesheet" href="main.css">
> </head><body>
>     ...
>     <script type="application/javascript;version=1.8" src="main.js"></script>

Is "application/javascript;version=1.8" standardized in any way?

>     </body></html>
> 
>   Then, you can start your script when the DOM is ready
>   (put this into »main.js«):
> 
> document.addEventListener( "DOMContentLoaded", myinit, false );

One should be aware that document.addEventListener() is not implemented
by several ECMAScript implementations in widespread use, though.  I'm
not sure about the DOMContentLoaded event, either.

>   Here, »myinit« represents a function that you write in
>   »main.js«, above that line.
> 
> function myinit() { "use strict"; ... }
> 
>   The toggle function:
> 
> function toggleDone()
> { let dones = document.getElementsByClassName( 'done' );

AFAIK, "let" is a construct that might be adopted for ECMAScript 6, but
if I'm not mistaken it is not widely implemented, yet.  It might be
better to avoid it, and instead use the classic "var" (what shouldn't
make a difference here).

>   for( let x = 0; x < dones.length; ++x )
>   dones[ x ].classList.toggle( 'hidden' ); }

DOMElement.prototype.classList requires somewhat recent DOM support, too.

-- 
Christoph M. Becker

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

#25059

On 26/06/2014 21:34, Christoph Michael Becker wrote:
> Stefan Ram wrote:
<snip>

>>    Today, we want »non-obtrusive JavaScript«. That is, there
>>    should be as little JavaScript as possible within the HTML
>>    document. Rather, it is moved into a separate script file:
>
> This approach is not uncontroversial (even though I prefer it, when viable).

ACK. But "non-obtrusive" JavaScript != "as little JS as possible". I 
prefer the latter. And putting JavaScript and CSS in external files is a 
recommended practice, because these files are cached by the browser, 
reducing the number of HTTP requests and the size of the HTML document.

>
>> <!DOCTYPE HTML><html><head><meta charset="UTF-8">
>> <title>Main</title><link rel="stylesheet" href="main.css">
>> </head><body>
>>      ...
>>      <script type="application/javascript;version=1.8" src="main.js"></script>
>
> Is "application/javascript;version=1.8" standardized in any way?

In HTML5, we could use <script> only.

>
>>      </body></html>
>>
>>    Then, you can start your script when the DOM is ready
>>    (put this into »main.js«):
>>
>> document.addEventListener( "DOMContentLoaded", myinit, false );
>
> One should be aware that document.addEventListener() is not implemented
> by several ECMAScript implementations in widespread use, though.

Unless one needs to support the extreme cheapskates that still use 
Windows XP with IE8, one may use document.addEventListener() without 
worry, because it is widely supported (since IE 9).

>  I'm
> not sure about the DOMContentLoaded event, either.

See <http://caniuse.com/domcontentloaded>

>
>>    Here, »myinit« represents a function that you write in
>>    »main.js«, above that line.
>>
>> function myinit() { "use strict"; ... }
>>
>>    The toggle function:
>>
>> function toggleDone()
>> { let dones = document.getElementsByClassName( 'done' );
>
> AFAIK, "let" is a construct that might be adopted for ECMAScript 6, but
> if I'm not mistaken it is not widely implemented, yet.  It might be
> better to avoid it, and instead use the classic "var" (what shouldn't
> make a difference here).
>
>>    for( let x = 0; x < dones.length; ++x )
>>    dones[ x ].classList.toggle( 'hidden' ); }
>
> DOMElement.prototype.classList requires somewhat recent DOM support, too.
>

ACK.

-- 
Joao Rodrigues

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

#25062 — JavaScript and CSS in external files???, was Re: Dynamic CSS adjustments (JavaScript)

Joao Rodrigues <groups_jr-1@yahoo.com> wrote on 27 jun 2014 in 
comp.lang.javascript:

> And putting JavaScript and CSS in external files is a 
> recommended practice, because these files are cached by the browser, 
> reducing the number of HTTP requests and the size of the HTML document.
> 

This should NOT be recommended to newbees like the OP in the developement of 
a piece of code they are learning and debugging.

You don't want a confused browser to execute the cached version while you 
are debugging. 

So, if you are confident your code is finalized, yes then you could make an 
external js file.

My code is never finalized, and the extra HTTP-requests don't realy have any  
significant impact on the behavour when the js or the CSS is much smaller 
than a single image[, well perhaps on a outdated mobile G2 connection that 
hickups on images too]. 

So I seldom use external js/css, and yes, sometimes I use serverside 
includes of such code, even as part of a single declared script-element.

> JavaScript [....] in external files is a recommended practice

Methinks such recommandation is severely outdated, only marginally usefull 
and contra-indicated for newbees in scripting and experimental coding.

> [...] CSS in external files is a recommended practice

The same arguments are valid for CSS.

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

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

#25067

Joao Rodrigues wrote:

> On 26/06/2014 21:34, Christoph Michael Becker wrote:
>> Stefan Ram wrote:
>>>      <script type="application/javascript;version=1.8"
>>>      src="main.js"></script>
>>
>> Is "application/javascript;version=1.8" standardized in any way?
> 
> In HTML5, we could use <script> only.

Your majestic “we” does not have any basis (I use the “type” attribute even 
in HTML5, for backwards compatibility), nor has your answer anything to do 
with the question.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#25099

On 27/06/2014 05:22, Thomas 'PointedEars' Lahn wrote:
> Joao Rodrigues wrote:
>
>> On 26/06/2014 21:34, Christoph Michael Becker wrote:
>>> Stefan Ram wrote:
>>>>       <script type="application/javascript;version=1.8"
>>>>       src="main.js"></script>
>>>
>>> Is "application/javascript;version=1.8" standardized in any way?
>>
>> In HTML5, we could use <script> only.
>
> Your majestic “we” does not have any basis

That was a shocking telltale sign of your ignorance on HTML5 
specifications. See:
<http://www.w3.org/TR/html/scripting-1.html#attr-script-type>
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script>

> (I use the “type” attribute even
> in HTML5, for backwards compatibility),

With the exception of MSIE (prior to version 10), pre-HTML5 browsers 
considered "text/javascript" to be the default type attribute whenever 
it was omitted, even though contrary to the HTML 4.01 specification:
<http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1>

-- 
Joao Rodrigues

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

#25100

Joao Rodrigues wrote:

> On 27/06/2014 05:22, Thomas 'PointedEars' Lahn wrote:
>> Joao Rodrigues wrote:
>>> On 26/06/2014 21:34, Christoph Michael Becker wrote:
>>>> Stefan Ram wrote:
>>>>>       <script type="application/javascript;version=1.8"
>>>>>       src="main.js"></script>
>>>>
>>>> Is "application/javascript;version=1.8" standardized in any way?
>>> In HTML5, we could use <script> only.
>> Your majestic “we” does not have any basis
> 
> That was a shocking telltale sign of your ignorance on HTML5
> specifications. See:
> <http://www.w3.org/TR/html/scripting-1.html#attr-script-type>
> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script>

You are an idiot.  That the specification allows it is not reason that 
everyone should do that.  And certainly you do not speak for everyone; in 
particular, you do not speak for me.  So stop doing that.
 
>> (I use the “type” attribute even
>> in HTML5, for backwards compatibility),
> 
> With the exception of MSIE (prior to version 10), pre-HTML5 browsers
> considered "text/javascript" to be the default type attribute whenever
> it was omitted, even though contrary to the HTML 4.01 specification:
> <http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1>

Once again your hubris shows *your* ignorance.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#25101

On 06/27/2014 06:28 PM, Thomas 'PointedEars' Lahn wrote:
> Joao Rodrigues wrote:
>
>> On 27/06/2014 05:22, Thomas 'PointedEars' Lahn wrote:
>>> Joao Rodrigues wrote:
>>>> On 26/06/2014 21:34, Christoph Michael Becker wrote:
>>>>> Stefan Ram wrote:
>>>>>>        <script type="application/javascript;version=1.8"
>>>>>>        src="main.js"></script>
>>>>>
>>>>> Is "application/javascript;version=1.8" standardized in any way?
>>>> In HTML5, we could use <script> only.
>>> Your majestic “we” does not have any basis
>>
>> That was a shocking telltale sign of your ignorance on HTML5
>> specifications. See:
>> <http://www.w3.org/TR/html/scripting-1.html#attr-script-type>
>> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script>
>
> You are an idiot.

You lose your temper very easily, don't you?

> That the specification allows it is not reason that
> everyone should do that.

Nonsense and obviously one of your customary fallacies.

> And certainly you do not speak for everyone; in
> particular, you do not speak for me.  So stop doing that.

Did you forget that you are on Usenet?

>
>>> (I use the “type” attribute even
>>> in HTML5, for backwards compatibility),
>>
>> With the exception of MSIE (prior to version 10), pre-HTML5 browsers
>> considered "text/javascript" to be the default type attribute whenever
>> it was omitted, even though contrary to the HTML 4.01 specification:
>> <http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1>
>
> Once again your hubris shows *your* ignorance.
>

Are you telling me off for hubris? You must be kidding.

-- 
Joao Rodrigues

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

#25102

In article <lola7m$7lb$1@speranza.aioe.org>, Joao Rodrigues
<groups_jr-1@yahoo.com> wrote:

> On 06/27/2014 06:28 PM, Thomas 'PointedEars' Lahn wrote:

> > Once again your hubris shows *your* ignorance.
> 
> Are you telling me off for hubris? You must be kidding.

Yes, big irony there.

-- 
"Once you adopt the unix paradigm, the variants cease to be a problem - you
bitch, of course, but that's because bitching is fun, unlike M$ OS's, where 
bitching is required to keep your head from exploding." - S Stremler in afc

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

#25066

Stefan Ram wrote:

> Christoph Michael Becker <cmbecker69@arcor.de> writes:
>>><script type="application/javascript;version=1.8" src="main.js"></script>
>>Is "application/javascript;version=1.8" standardized in any way?
> 
>   In this case, I intentionally deviate from using a standard,
>   to make readers aware of the fact that I am writing for a
>   specific (i.e., non-standard) implementation (this
>   implementation might be called »JavaScript 1.8«).

Show the vendor-specific documentation, then.  That “javascript1.7” is 
supported does not mean that “javascript1.8” has any meaning.
 
>> One should be aware that document.addEventListener() is not implemented
>> by several ECMAScript implementations
> 
>   Yes, that's why I wrote
>   »type="application/javascript;version=1.8"«, above!

You are confusing the programming language with the DOM API implementation.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#25063

Stefan Ram wrote:

> Philip Herlihy <bounceback@you.com> writes:
>> Now I just hope the good people in comp.lang.javascript don't deem this
>> a CSS issue and send me back...
> 
>   Today, we want »non-obtrusive JavaScript«.

Some misguided people want “_unobtrusive_ JavaScript”.

>   That is, there
>   should be as little JavaScript as possible within the HTML
>   document. Rather, it is moved into a separate script file:

The meaning of “unobtrusive” unfortunately extends beyond that, which causes 
compatibility and usability issues.
 
> document.addEventListener( "DOMContentLoaded", myinit, false );

Nonsense.

> […] 
>   (Disclaimer: I have not tested the above approach.)

You have not a minimum clue on the topic either.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#25064

Stefan Ram wrote:

> ram@zedat.fu-berlin.de (Stefan Ram) writes:
>>Philip Herlihy <bounceback@you.com> writes:
>>>Now I just hope the good people in comp.lang.javascript don't deem this
>>>a CSS issue and send me back...
>>Today, we want »non-obtrusive JavaScript«.
> 
>   So,
> 
> <button onclick='toggleDone()'>toggleDone</button>
> 
>   could be replaced by:
> 
> <button id="toggleButton">toggleDone</button>
> 
>   . Then, in »myinit«:
> 
> document.getElementById( "toggleButton" ).
> addEventListener( "click", toggleDone );
> 
>   , with the function »toggleDone« being defined before.

And if none of the alternatives implemented in your addEventListener() 
wrapper would apply, the button would be non-functional.

By comparison, using the standards-compliant “onclick” attribute, the button 
would always be functional (if there was script support; actually, *this* 
button should be generated with scripting to avoid a non-functional widget; 
the alternative is using a form where the “submit” event is handled and, if 
necessary, canceled.)

And for what?  Misguided cleanliness.  The functionality of the button is 
tied to the button.  It does not make sense to separate them this way.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#25065

Stefan Ram wrote:

>   (This works in /any/ web browser, as long as the web browser is
>   a recent nightly build of Mozilla Firefox.

YMMD.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#25131

In article <MPG.2e16b6ce69e50e579899c2@news.demon.co.uk>, 
bounceback@you.com says...
> 
> 
> Thank you - I'll study this carefully.
> Now I just hope the good people in comp.lang.javascript don't deem this 
> a CSS issue and send me back...

Thank you, everyone, for your helpful, illuminating and at times 
entertaining comments!  :-)

-- 

Phil, London

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

#25061

[Multipart message — attachments visible in raw view] — view raw

In article <XnsA358CD0D1F4FBeejj99@194.109.133.133>,
"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote:

> Philip Herlihy <bounceback@you.com> wrote on 26 jun 2014 in 
> comp.infosystems.www.authoring.stylesheets:

>> Hope this isn't off-topic! 

> It is, you better ask in comp.lang.javascript.

[snip]

Since this could be done without the need for javascript, it need not be
off topic.

>> I'd like to be able to provide a button or 
>> link which will hide (display:none) all the items on a page of class 
>> "done" (Outdoor events, as it happens).  I've googled, and even bought
>> a JavaScript book (I'm barely competent in js, but otherwise an 
>> experienced, if rusty, programmer).

>> The best option appears to be to have the link:
>> <a href="javascript:toggleStyleSheet()">Hide/Show past walks</a>
>> ... load a further external style sheet.  I think this would mean 
>> refreshing the page to reverse the 'hiding'.

[snip]

<style>
[id=in0]:checked + [for=in0] ~ .done {
display:none;
}
</style>
<input type=checkbox id=in0><label for=in0>Check box to hide done</label>

[snip]
> <div class='done'>AAAAAAAAAAAa</div>
> <div class='xyz'>bbbbbbbbbbbbB</div>
> <div class='done'>CCCCCCCCCCCCCc</div>



-- 
BootNic                                          Thu Jun 26, 2014 11:18 pm
  I had a monumental idea this morning, but I didn't like it.
  *Samuel Goldwyn* 

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

#25132

In article <XnsA35BCE489BDBFeejj99@194.109.133.133>, 
exxjxw.hannivoort@inter.nl.net says...
> 
> Philip Herlihy <bounceback@you.com> wrote on 29 jun 2014 in 
> comp.infosystems.www.authoring.stylesheets:
> 
> > In article <20140626231812.43be7fd9@bootnic.server>, 
> > bootnic.bounce@gmail.com says...
> >> 
> > ... 
> >> Since this could be done without the need for javascript, it need not be
> >> off topic.
> >> 
> >> 
> >> <style>
> >> [id=in0]:checked + [for=in0] ~ .done {
> >> display:none;
> >> }
> >> </style>
> >> <input type=checkbox id=in0><label for=in0>Check box to hide done</label>
> >> 
> >> [snip]
> >> > <div class='done'>AAAAAAAAAAAa</div>
> >> > <div class='xyz'>bbbbbbbbbbbbB</div>
> >> > <div class='done'>CCCCCCCCCCCCCc</div>
> > 
> > Phew!  This certainly raises my game on selectors (had to look things 
> > up!).  Thank you so much.
> > 
> > Puzzled why you didn't just use #in0 to select the input?  Just 
> > consistency?
> 
> I have no idea what you are talking about.

I very much appreciate your generous help with my problem, but I am 
surprised by this scolding.  You should be able to see that the post of 
mine to which you object was a direct response to the helpful post from 
BootNic.
> 
> What selectors do you mean? 
 Those suggested by BootNic - see above under <style>.
> I did not use any <input>.
No, but BootNic did - see above just under </style>.
> Why do you quote part of my code?
Because BootNic helpfully left it in place in his post, for 
completeness.
> 
> Please quote consistently, 
> and keep attribution lines intact.
It seems my offence was to remove the line which showed your 
(significant) contribution to this thread.  For that, I'm certainly 
happy to apologise.  I do appreciate those who give their time to assist 
in these groups.
> 
> My goal was to show that you can get an array 
> of elements having the same className,
> and that you can change a style for each of them at will.
That is certainly a viable solution, although the pure CSS solution 
proposed by BootNic is less complex.  I'm gratified to see more than one 
approach, certainly.
> 
> So no need for your[?] idea to load external css-files interactively,
> making a mess whenever the server or the internet connection momentarily 
> hickups.
Not my idea!  The only solution I could find in my trawl of JavaScript 
books in my library!

Thank you for your help, which is much appreciated.
-- 

Phil, London

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

#25133

Philip Herlihy <bounceback@you.com> wrote on 30 jun 2014 in
comp.lang.javascript: 

> In article <XnsA35BCE489BDBFeejj99@194.109.133.133>, 
> exxjxw.hannivoort@inter.nl.net says...
>> 
>> Philip Herlihy <bounceback@you.com> wrote on 29 jun 2014 in 
>> comp.infosystems.www.authoring.stylesheets:
>> 
>> > In article <20140626231812.43be7fd9@bootnic.server>, 
>> > bootnic.bounce@gmail.com says...
>> >> 
>> > ... 
>> >> Since this could be done without the need for javascript, it need
>> >> not be off topic.
>> >> 
>> >> 
>> >> <style>
>> >> [id=in0]:checked + [for=in0] ~ .done {
>> >> display:none;
>> >> }
>> >> </style>
>> >> <input type=checkbox id=in0><label for=in0>Check box to hide
>> >> done</label> 
>> >> 
>> >> [snip]
>> >> > <div class='done'>AAAAAAAAAAAa</div>
>> >> > <div class='xyz'>bbbbbbbbbbbbB</div>
>> >> > <div class='done'>CCCCCCCCCCCCCc</div>
>> > 
>> > Phew!  This certainly raises my game on selectors (had to look things
>> > up!).  Thank you so much.
>> > 
>> > Puzzled why you didn't just use #in0 to select the input?  Just 
>> > consistency?
>> 
>> I have no idea what you are talking about.
> 
> I very much appreciate your generous help with my problem, but I am 
> surprised by this scolding.  You should be able to see that the post of 
> mine to which you object was a direct response to the helpful post from 
> BootNic.

Your inconsistent quoting suggest you are responding to my posting
when you said "you", not to BootNic's.

"scolding"??? 

Being offended does not really fit Usenet.

>> 
>> What selectors do you mean? 
>  Those suggested by BootNic - see above under <style>.
>> I did not use any <input>.
> No, but BootNic did - see above just under </style>.
>> Why do you quote part of my code?
> Because BootNic helpfully left it in place in his post, for 
> completeness.

Same objection.

>> 
>> Please quote consistently, 
>> and keep attribution lines intact.

> It seems my offence was 

No, you did make it impossible to understand youe entry.

"offence"??? 

Being offended does not really fit Usenet.

> to remove the line which showed your 
> (significant) contribution to this thread.  For that, I'm certainly 
> happy to apologise.  I do appreciate those who give their time to assist
> in these groups.
>> 
>> My goal was to show that you can get an array 
>> of elements having the same className,
>> and that you can change a style for each of them at will.
> That is certainly a viable solution, although the pure CSS solution 
> proposed by BootNic is less complex.  I'm gratified to see more than one
> approach, certainly.
>> 
>> So no need for your[?] idea to load external css-files interactively,
>> making a mess whenever the server or the internet connection
>> momentarily hickups.

> Not my idea!

I wrote [?], the idea stinks.

I fail however to see 
how you can have a onclick event with "pure css".

> The only solution I could find in my trawl of JavaScript 
> books in my library!

As you can find to be the general meaning in this NG for years now, the 
available books about Javascript none of them a good way to learn, better 
look for online discussions, especially in this NG.

> Thank you for your help, which is much appreciated.



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

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

#25134

"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 30 jun 2014 in 
comp.lang.javascript:

> I fail however to see 
> how you can have a onclick event with "pure css".

I retract that, 
the checkbox or radio selected css can do that.

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

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

#25152

In article <XnsA35C8B1A4CC10eejj99@194.109.133.133>, 
exxjxw.hannivoort@inter.nl.net says...
> 
> "Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 30 jun 2014 in 
> comp.lang.javascript:
> 
> > I fail however to see 
> > how you can have a onclick event with "pure css".
> 
> I retract that, 
> the checkbox or radio selected css can do that.

I am surprised you have been so quick with your criticisms when it is 
now clear that you did not immediately understand the code which BootNic 
helpfully substituted for some of yours.  I did wonder why you asked:
"I have no idea what you are talking about.
What selectors do you mean? 
I did not use any <input>."  and
"No, you did make it impossible to understand youe entry."

I guess like many busy people you process these posts by reading very 
quickly, and simply missed the significance of BootNic's post.  This is 
uncharacteristic of you - I have come to recognise your name as the 
source of high quality guidance here.  We all make mistakes, and I hope 
you will ascribe my 'quoting' error (which I still struggle fully to 
grasp) to a similar need to be quick.  As quoting and attribution 
evidently matter to you, I will take special care if I find myself 
responding to a thread in which your name appears - and may simply avoid 
trimming quoted posts to be on the safe side.  I expect someone else 
will scold me for that.

English people often find Dutch people rude, until they come to value 
the honesty and brevity that the familiar bluntness represents.  
Civilised English people tend to go out of their way to avoid any hint 
of personal criticism in any sort of discourse, and the resulting 
circumlocutions must be exasperating for non-native English speakers, 
however fluent.  So let me go Dutch for a moment:  if you now revisit my 
follow-up to BootNic's post I would expect you to see that your 
criticisms are unfounded - excepting possibly my unattributed 
furtherence of your code.  But be assured that I do not take offence, 
and my regard for your expertise and helpfulness is undiminished.

-- 

Phil, London

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

Page 1 of 2  [1] 2  Next page →

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

csiph-web