thr3ads.net - Rails spinoffs - Effect.Highlight [Jan 2007]

If this information is useful, please help other people find it:
Share via:

The Manhatten Project

2007-Jan-05 10:59 UTC

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

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


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Fabian Lange

2007-Jan-05 11:26 UTC

head link

Re: Effect.Highlight

Hi,
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: rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
Gesendet: 05.01.07 12:00:48
An: "Ruby on Rails: Spinoffs"
<rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org>
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


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

The Manhatten Project

2007-Jan-05 11:37 UTC

head link

Re: Effect.Highlight

Fantastic...works a treat..hats off to you... ;-)


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

The Manhatten Project

2007-Jan-05 11:43 UTC

head link

Re: Effect.Highlight

Ah, but what about with multiple class name defintions?  i.e.
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?


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

The Manhatten Project

2007-Jan-05 11:48 UTC

head link

Re: Effect.Highlight

ah forget it, it does seem to pick it up :-) d''oh.... thanks again.


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Fabian Lange

2007-Jan-05 11:58 UTC

head link

Re: Effect.Highlight

Hi again,
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: rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
Gesendet: 05.01.07 12:45:29
An: "Ruby on Rails: Spinoffs"
<rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org>
Betreff: [Rails-spinoffs] Re: Effect.Highlight



Ah, but what about with multiple class name defintions?  i.e.
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?






_______________________________________________________________________
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


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

The Manhatten Project

2007-Jan-05 12:15 UTC

head link

Re: Effect.Highlight

So, can I just call it via elements.each()? how can I call it via a
function? I am having a major brain freeze today...


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Jarkko Laine

2007-Jan-05 14:48 UTC

head link

Re: Effect.Highlight

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

The Manhatten Project

2007-Jan-05 15:03 UTC

head link

Re: Effect.Highlight

indeed....I LOVE script.aculo.us ;-)  Thanks all.


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Jan 2007 - Effect.Highlight

Effect.Highlight

Re: Effect.Highlight

Re: Effect.Highlight

Re: Effect.Highlight

Re: Effect.Highlight

Re: Effect.Highlight

Re: Effect.Highlight

Re: Effect.Highlight

Re: Effect.Highlight