i thought this might fit good in here .. i am wondering how to solve the following problem best with prototype and scriptaculous: i want to allow my visitors to mark items as their favorite by clicking on a star next to the items title .. when its marked then the star is turned yellow and when unmarked its white .... i have seen a lot of sites which use an image that contains both of those stars in one image ... whats the best approach to solve this with javascript .. should i put this image as background then? thx for help --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
You need two DIVs, an outer one that acts are the view "window", and
an inner that contains the image. The outer one has a style of
overflow:hidden, so your image, which is larger than the outside DIV
is partially invisible. For this example, the image would be 30px
high, by 60 px wide.
<div id=''outer'' onmouseout=''showOther(0)''
onmouseover=''showOther(-30)''
style=''position:relative;height:
30px;width:30px;overflow:hidden''><div
id=''inner''
style=''position:absolute;top:0px;left:0px''><img
src=''sample.gif''></
div></div>
Then in your showOther function, reposition the inner DIV:
function showOther(pos) {
$(''inner'').style.left=pos+''px'';
}
Good luck.
On Jan 15, 6:33 am, michal
<mga...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> i thought this might fit good in here .. i am wondering how to solve
> the following problem best with prototype and scriptaculous:
>
> i want to allow my visitors to mark items as their favorite by
> clicking on a star next to the items title .. when its marked then
> the star is turned yellow and when unmarked its white .... i have seen
> a lot of sites which use an image that contains both of those stars in
> one image ... whats the best approach to solve this with javascript ..
> should i put this image as background then?
>
> thx for help
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
That''s messy and pretty unelegant: Using CSS, Javascript and Ajax you can make a seamlessly working variant of this using a simple link tag and an embedded onclick function, the webcontroller should retain the functionality so it also works when javascript is turned off (lo behold). Using CSS styles you push the text outside of the viewing border, which makes it readable to screenreaders and display the star icon using background-position. <a href=''/mark/item_123'' onclick=''toggleFavourite(this)'' class="inactive">Make Favourite</a> Then when you click it, you ''return false'' at the end of the function outside the ajax request scope, which will just call the href of the clicked item (this) as an ajax request in the background, and on success toggle the state of the element (this) to "active". Where the class "active" has the star sprite moved in viewing range. And now, good luck and have fun implementing that. Remember to use Prototype. cheers, Markus> > <div id=''outer'' onmouseout=''showOther(0)'' > onmouseover=''showOther(-30)'' style=''position:relative;height: > 30px;width:30px;overflow:hidden''><div id=''inner'' > style=''position:absolute;top:0px;left:0px''><img src=''sample.gif''></ > div></div> > > Then in your showOther function, reposition the inner DIV: > > function showOther(pos) { > $(''inner'').style.left=pos+''px''; > > }--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
thanks both for your suggestions and quick help.. i will check which one suits my needs best ... --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---