Effect.Highlight
The Manhatten Project
Got a bit of a brain fart here... I would like to highlight a set of
DIV's (ideally by defined class name as it suits our development
process). I have the following functioning code:
However it only ever highlights the first testlabel div, not them all,
which is is expected as ID's should be unique I guess. How would I
make it so the highlighting which takes place can actually highlight
them all by defined class name so all DIV's assigned with the class
"testlabel" are actually highlighted?
Thanks
Code
-------
<br><a href="" onMouseOver="new Effect.Highlight('testlabel',
{startcolor:'#ff99ff', endcolor:'#999999'})">Edit Labels (by ID)</a>
<br>
<h1> By ID </h1>
<br>
<div id="testlabel">foo</div>
<br>
<div id="testlabel" >foo</div>
<br>
<div id="testlabel">foo</div>
<br>
<div id="testlabel">foo</div>
<br>
<div id="testlabel">foo</div>
<br>
<h1>By Class</h1>
<br>
<div class="testlabel">foo</div>
<br>
<div class="testlabel" >foo</div>
<br>
<div class="testlabel">foo</div>
<br>
<div class="testlabel">foo</div>
<br>
<div class="testlabel">foo</div>
Fabian Lange
basically this is a generic problem.
What you want to do is to pass an enumeration of elements to the function:
(document.getElementsByClassName('testlabel')).each(function(e){new Effect.Highlight(e,
{startcolor:'#ff99ff', endcolor:'#999999'})})
or nicer formatted :)
var elements = document.getElementsByClassName('testlabel');
elements.each( function(e){
new Effect.Highlight(e,{startcolor:'#ff99ff', endcolor:'#999999'})
} );
I was wondering if there is a more performant way to do:
(document.getElementsByClassName('className')).each(function(e){Element.hide(e)})
as element.hide also accepts multiple arguments.
Ah and a side note. getElementsByClassName also accepts regular expressions.
document.getElementsByClassName('testClass(_(\\d)+)')
will find you classes: testClass_1 test Class_34 etc...
.: Fabian
-----Ursprüngliche Nachricht-----
Von: rubyonrail...@googlegroups.com
Gesendet: 05.01.07 12:00:48
An: "Ruby on Rails: Spinoffs" <rubyonrail...@googlegroups.com>
Betreff: [Rails-spinoffs] Effect.Highlight
Hi,
Got a bit of a brain fart here... I would like to highlight a set of
DIV's (ideally by defined class name as it suits our development
process). I have the following functioning code:
However it only ever highlights the first testlabel div, not them all,
which is is expected as ID's should be unique I guess. How would I
make it so the highlighting which takes place can actually highlight
them all by defined class name so all DIV's assigned with the class
"testlabel" are actually highlighted?
Thanks
Code
-------
<a href="" onMouseOver="Effect.Highlight('testlabel',
{startcolor:'#ff99ff', endcolor:'#999999'})">Edit Labels (by ID)</a>
<h1> By ID </h1>
<div id="testlabel">foo</div>
<div id="testlabel" >foo</div>
<div id="testlabel">foo</div>
<div id="testlabel">foo</div>
<div id="testlabel">foo</div>
<h1>By Class</h1>
<div class="testlabel">foo</div>
<div class="testlabel" >foo</div>
<div class="testlabel">foo</div>
<div class="testlabel">foo</div>
<div class="testlabel">foo</div>
_______________________________________________________________________
Viren-Scan für Ihren PC! Jetzt für jeden. Sofort, online und kostenlos.
Gleich testen! http://www.pc-sicherheit.web.de/freescan/?mc=022222
The Manhatten Project
The Manhatten Project
class="label label-news label-news-123". We use this kind of system to
allow us to build generic templates which our end users who actually
build the sites to override and ensure they get granular control over
the display.
I am gathering that the document.getElementsByClassName('label'); will
not work here as it would want to look for the exact class name in full?
The Manhatten Project
Fabian Lange
well that depends on what you want to have selected:
the prototyped getElementsByClassName does:
document.getElementsByClassName = function(className, parentElement) {
var children = ($(parentElement) || document.body).getElementsByTagName('*');
return $A(children).inject([], function(elements, child) {
if (child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
elements.push(child);
return elements;
});
}
from which the most interesting pasrt is:
child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)"))
as you can see it makes a regular expression from your parameter and searches for matches in the attribute className. what you give as arguement may be delimited by whitspacechars or start/end.
Usually you can find an expression that you can pass as parameter that fits still your need. if you want always match the whole attribute string, then I fear that you have to create your own getElementsByClassName with a different regex for example.
.: Fabian
-----Ursprüngliche Nachricht-----
Von: rubyonrail...@googlegroups.com
Gesendet: 05.01.07 12:45:29
An: "Ruby on Rails: Spinoffs" <rubyonrail...@googlegroups.com>
Betreff: [Rails-spinoffs] Re: Effect.Highlight
The Manhatten Project
function? I am having a major brain freeze today...
Jarkko Laine
On 5.1.2007, at 12.59, The Manhatten Project wrote:
>
> However it only ever highlights the first testlabel div, not them all,
> which is is expected as ID's should be unique I guess.
Fabian already solved your problem, but...
Only a single element can have the same ID on a given page, that's
what meant by id being unique. You cannot have multiple divisions
with id "testlabel". Or you can, but it is invalid and JavaScript and
CSS won't probably work correctly. Use the class attribute if you
want to use it with multiple elements.
As for the other question you had later on, class="a b c" in an html
element means that the element belongs to classes a, b and c. So as
you noticed, it will be picked up by getElementsByClassName for any
of those classes.
Cheers,
//jarkko
--
Jarkko Laine
http://jlaine.net
http://dotherightthing.com
http://www.railsecommerce.com
http://odesign.fi