On Tue, Jul 8, 2008 at 3:24 PM, andrewb
<abbetts-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> It works fine in ffox.
After whipping together a quick test bed for your code, I have my
doubts about that!
> Here is the html:
>
> <div id="star-rating">
> <img id="stars" alt="rating"
src="http://waeplwwab1:82/images/
> community/light_star_3.gif"/>
> <div class="star_1"/>
> <div class="star_2"/>
> <div class="star_3"/>
> <div class="star_4"/>
> <div class="star_5"/>
> </div>
Here''s the first problem. In FF and IE, the generated HTML for that
looks something like this:
==== HTML ===
<div id="star-rating">
<img id="stars" alt="rating"
src="light_star_3.gif" />
<div class="star_1">
<div class="star_2"/>
<div class="star_3"/>
<div class="star_4"/>
<div class="star_5"/> </div>
</div>
</div>
</div>
</div>
</div>
==== /HTML ===
Which I don''t think is what you had in mind ;)
Incidentally, since you say this is working if FF I''m assuming
you''ve
got some CSS somewhere that gives those .star_[1-5] DIVs some width.
Otherwise, sans content, they''re gonna collapse into nothing, which is
rather difficult to click on.
> Here is the javascript:
>
> ratings = $$("#star-rating div");
> ratings.each(function(value){
> Event.observe(value, ''click'', function()
{alert(''some logic goes
> here'');});
> });
Which works for me (sort of, see below), although I wrote it like this:
$$(''#star-rating div'').invoke(''observe'',
''click'', function() {
alert(this.className + '' clicked''); });
Which saves some space n'' time by using Prototype''s nifty
Enumerable#invoke method. You could save a few CPU cycles by
delegatin'' that sucker.
Now, about that "sort of" qualifier previously mentioned. With your
HTML as provided, I got the clicks to register in both browsers--but
only for the left-most inner DIV, and I got five alert dialogs to
click through. Changing the HTML to empty DIV tags (e.g., <div
class="star_1"></div>) gets it working like a charm.
Incidentally, here''s what I was working with CSS-wise, since that
could affect your approach. Note that I got rid of the IMG element and
just used a background image on the outer DIV.
==== CSS ===
#star-rating {
background: url(my/star/image.png) left -13px repeat-x;
height: 13px;
margin: 0;
padding: 0;
width: 75px;
}
#star-rating div {
float: left;
height: 13px;
margin: 0;
padding: 0;
width: 15px;
}
==== /CSS ===> I read a couple of posts on this site that talked about the
''click''
> event not being captured by prototype in ie. Does that apply here.
I''ve never had any problems with click-event handlers. Well, no
problems that weren''t my fault, anyway :) And, as mentioned, your code
seemed to work relatively fine for me. I''d double check my code, if I
were you.
:Dan Dorman
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---