Prev: FYI: Douglas Crockford: Loopage
Next: Getting there....
From: Evertjan. on 12 Aug 2010 04:42
williamc wrote on 11 aug 2010 in comp.lang.javascript:

> Any solution must work with multiple values, though, e.g. class="foo
> bar" and I don't see how the function above will do that.

Why?

Remember,
you just wanted an alternative for elements with the same "name".

Since it is your page, [unless you are writing one of those silly third
party libraries], just define a class that covers all the styles you want.

Otherwise bubble them down from a higher [in the dom-tree] element.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
From: SAM on 12 Aug 2010 05:36
Le 11/08/10 05:30, Denis McMahon a �crit :
> On 10/08/10 21:57, Evertjan. wrote:
>> Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:
>>
>>> At the moment I use named elements, and group the elements by giving
>>> them a common name, but this feels "wrong". For example:
>>>
>>> function vis(name, state)
>>> {
>>> var els = document.getElementsByName(name);
>>> for (var el in els) els[el].style.visible = state;
>>> }
>>>
>>> Has anyone got a "better" way to do this sort of thing?
>
>> class
>
> Yes, nice answer, but how do you refer to a class to change it's style rule?

Wrong way fom my point of view.

css :
..questions dd { visibility: hidden }
..answers .questions dd { visibility: visible }

html :
<body>
<p>
<button onclick="var b=document.body.className;
document.body.className = b==''? 'answers' : '';">
show/hide answers
</button>
<div class="questions">
<dl>
<dt>question 1</dt>
<dd>answer 1</dd>
<dt>question 2</dt>
<dd>answer 2</dd>
<dt>question 3</dt>
<dd>answer 3</dd>
</dl>

> If I have to trawl through
> document.styleSheets[*].cssRules|rules[*].selectorText looking for any /
> every rule that matches my class to set the style element, that's not
> really "better".

I think, if you worked on your css, very rarely you'll have to change a
rule of a predefined class.

At worst you can re-define that class when you want (adding a new css)

var s = document.createElement('style');
s.innerHTML = '.answer { visibility: visible}';
document.body.appendChild(s)

--
sm
From: SAM on 12 Aug 2010 05:38
Le 11/08/10 12:49, williamc a �crit :
> On 8/11/2010 5:54 AM, Gregor Kofler wrote:
>> Am 2010-08-11 05:30, schrieb Denis McMahon:
>>> On 10/08/10 21:57, Evertjan. wrote:
>>>> Denis McMahon wrote on 10 aug 2010 in comp.lang.javascript:
>>>>
>>>>> At the moment I use named elements, and group the elements by giving
>>>>> them a common name, but this feels "wrong". For example:
>>>>>
>>>>> function vis(name, state)
>>>>> {
>>>>> var els = document.getElementsByName(name);
>>>>> for (var el in els) els[el].style.visible = state;
>>>>> }
>>
>> This rather works by coincidence, since el will become any property of
>> your els collection
(...)
>> A working approach:
>>
>> var l = els.length;
>> while(l--) {
>> els[l].style.visibility = state;
>> }
>>
>>>>>
>>>>> Has anyone got a "better" way to do this sort of thing?
(...)
>> (untested)
>> function gEBCN(cN) {
>> var els = document.getElementsByTagName("*");
>> var result = [];
>> var l = els.length;
>>
>> while(l--) {
>> if(els[l].className == cN) {
>> results.push(els[l]);
>> }
>> }
>> return result;
>> }
>>
>> The main difference: the "native" gEBCN() will return a live collection,
>> the custom version a snapshot.
>
> Good point about the difference between the native implementation
> returning a (live) node list vs. just a snapshot.
>
> Any solution must work with multiple values, though, e.g. class="foo
> bar" and I don't see how the function above will do that.

function gEBCN(cN) {
if(document.getElementsByClassName)
return document.getElementsByClassName(cN);
var els = document.getElementsByTagName("*"),
l = els.length,
result = [];
while(l--)
if(els[l].className && els[l].className.indexOf(cN) >= 0)
results.push(els[l]);
return result;
}


I do not understand all other complications ... :-(
(as they seem to me very useless)

--
sm
From: Gregor Kofler on 12 Aug 2010 05:54
Am 2010-08-12 11:38, SAM meinte:

>>> The main difference: the "native" gEBCN() will return a live collection,
>>> the custom version a snapshot.
>>
>> Good point about the difference between the native implementation
>> returning a (live) node list vs. just a snapshot.
>>
>> Any solution must work with multiple values, though, e.g. class="foo
>> bar" and I don't see how the function above will do that.

It doesn't. Is was meant to be a simple example.

> function gEBCN(cN) {
> if(document.getElementsByClassName)
> return document.getElementsByClassName(cN);
> var els = document.getElementsByTagName("*"),
> l = els.length,
> result = [];
> while(l--)
> if(els[l].className && els[l].className.indexOf(cN) >= 0)
> results.push(els[l]);
> return result;
> }
>
>
> I do not understand all other complications ... :-(
> (as they seem to me very useless)

Your solution has at least two problems:
* Using the native method will return a live collection (elements will
join or drop out automatically, when they get the appropriate class
assigned).
* Your indexOf() will find a class "red" even when elements have a class
"redAndBlue" - you will need a RegExp.

Gregor


--
http://www.gregorkofler.com
From: williamc on 12 Aug 2010 09:27
On 8/12/2010 4:42 AM, Evertjan. wrote:
> williamc wrote on 11 aug 2010 in comp.lang.javascript:
>
>> Any solution must work with multiple values, though, e.g. class="foo
>> bar" and I don't see how the function above will do that.
>
> Why?
>
> Remember,
> you just wanted an alternative for elements with the same "name".
>
> Since it is your page, [unless you are writing one of those silly third
> party libraries], just define a class that covers all the styles you want.
>
> Otherwise bubble them down from a higher [in the dom-tree] element.
>

I'm not the OP. I just jumped in and asked what people here use for
gEBCN, while noting that Gregor's example for the OP would need some
additional code to cover multiple values.

I very frequently use multiple classes, and in general the person doing
the scripting might not have control over the HTML/CSS. So, I most
definitely want a gEBCN function that works for "foo bar".

--

--williamc
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5
Prev: FYI: Douglas Crockford: Loopage
Next: Getting there....