Hi list :) I''m using Scriptaculous... How can I achieve a scrolling effect similar to the one on RadioShack? Enter zip 60606, click go, and then click Next or Previous in the panel to see the content scroll: http://www.radioshack.com/storeLocator3/index.jsp?clickid=rsk_header_storeLocator --~--~---------~--~----~------------~-------~--~----~ 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 a div with the style of overflow:hidden, with your content inside it in another div. Then you can use Effect.Move on the content div when the button is clicked. On Sep 6, 10:54 am, Les <les.szkla...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi list :) > > I''m using Scriptaculous... How can I achieve a scrolling effect > similar to the one on RadioShack? > > Enter zip 60606, click go, and then click Next or Previous in the > panel to see the content scroll: > > http://www.radioshack.com/storeLocator3/index.jsp?clickid=rsk_header_...--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Try this:
<script language="javascript">
function moveMe(d) {
myTop =
parseInt($(''content'').style.marginTop.replace(''px'',''''))
moveTimer(myTop,d*100+myTop)
}
function moveTimer(start,end) {
if(start==end) {
return;
}
if(start<end) {
start += 10
}
if(start>end) {
start -= 10
}
$(''content'').style.marginTop = start+ ''px''
x =
setTimeout(''moveTimer(''+start+'',''+end+'')'',30)
}
</script>
</head>
<body>
<div id=''container''
style=''width:100px;height:200px;overflow:hidden;z-
index:10''>
<div id=''content''
style=''height:1000px;width:100px;z-index:5;margin-
top:0px''>
<div
style=''height:100px;width:100px;background-color:#00FF33''></
div>
<div
style=''height:100px;width:100px;background-color:#3399CC''></
div>
<div
style=''height:100px;width:100px;background-color:#6666CC''></
div>
<div
style=''height:100px;width:100px;background-color:#FF3366''></
div>
<div
style=''height:100px;width:100px;background-color:#66FF33''></
div>
<div
style=''height:100px;width:100px;background-color:#339933''></
div>
<div
style=''height:100px;width:100px;background-color:#9966CC''></
div>
<div
style=''height:100px;width:100px;background-color:#FF0066''></
div>
</div>
</div>
<a href="javascript://"
onclick="moveMe(-1)">up</a>
<A href="javascript://"
onclick="moveMe(1)">down</a>
On Sep 6, 10:54 am, Les
<les.szkla...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hi list :)
>
> I''m using Scriptaculous... How can I achieve a scrolling effect
> similar to the one on RadioShack?
>
> Enter zip 60606, click go, and then click Next or Previous in the
> panel to see the content scroll:
>
> http://www.radioshack.com/storeLocator3/index.jsp?clickid=rsk_header_...
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
or without reinventing the wheel:
$(''content'').morph(''margin-top: 100px'')
Btw, looks like somebody
http://www.creativeui.com/2007/08/02/how-to-create-a-side-scrolling-page-effect-part-ii-scriptaculous/
played with this one before
--
View this message in context:
http://www.nabble.com/Scrolling-effect-tf4392710.html#a12529934
Sent from the RubyOnRails Spinoffs mailing list archive at Nabble.com.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Like, DUH, why didn''t I notice that. Thanks. On Sep 6, 3:40 pm, kangax <kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> or without reinventing the wheel: > > $(''content'').morph(''margin-top: 100px'') > > Btw, looks like somebodyhttp://www.creativeui.com/2007/08/02/how-to-create-a-side-scrolling-p... > played with this one before > -- > View this message in context:http://www.nabble.com/Scrolling-effect-tf4392710.html#a12529934 > Sent from the RubyOnRails Spinoffs mailing list archive at Nabble.com.--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---