Hi, Just as the subject says; I''m trying to queue effects on an element I wish to make toggleable (so that - for instance - it can both Fade/Appear and BlindUp/BlindDown). Unfortunately there appears to be absolutely no documentation on doing specifically this, and the documentation for queues itself is a bit shaky. I''ve tried following the same principle by adding a {queue: ''end''} parameter to the Effect.toggle() call, but to no avail. Can anyone offer a suggestion? ~B --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve aka TDD
2006-Oct-12 15:40 UTC
Re: Queuing Effect.toggle effects in script.aculo.us
Hey Ben,> Just as the subject says; I''m trying to queue effects on an element I > wish to make toggleable (so that - for instance - it can both > Fade/Appear and BlindUp/BlindDown). Unfortunately there appears to beSay what? I can''t understand what you wish to do... If you make it clearer, I''ll be happy to explain whether effect queues is indeed the way to go, and if so, how you can do it :-) -- Christophe Porteneuve aka TDD tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
I have a div that holds image thumbnails. I have set it up so I can use the arrow keys on the keyboard to select or move between the images. The div can hold quite a few image thumbnails, so is set to overflow:auto so wil have scroll bars when there are to many images. What I want is for the selected image to always be in the viewable area, so when I use the down arrow for example to move between images and go below the viewable area I want the contents to scroll up so the selected image is visible (For you mac users, this is the way iPhoto works.) I looked at Element.scrollTo($(id)) but that seems to only scroll the page. Is there any way I can scroll the contents of my DIV. Thanks! ______________________________________________________________________ Alex Duffield . Principal . InControl Solutions . http:// www.incontrolsolutions.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 -~----------~----~----~----~------~----~------~--~---
I think you mean you want to Fade and BlindUp in *Parallel*, because it wouldn''t really make sense to do them one after the other (i.e. Queue them). Try this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript" src="javascripts/prototype.js"></script> <script src="javascripts/scriptaculous.js" type="text/javascript"> </script> <style> #testContainer{ background-color:lightblue; color:black; text-align:center; width:100px; height:100px; } </style> </head> <body> <div id="testContainer">This is a test container, click me!</div> <script> $(''testContainer'').onclick=function() { new Effect.Parallel ( [ new Effect.Fade(''testContainer'',{duration:5}), new Effect.BlindUp(''testContainer'') ] ) }; </script> </body> </html> --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Sure, although I''m not sure if there''s a fancy shortcut for it yet. Once you have your selected item, I''m assuming you have the means to figure out its dimensions and position within the DIV (using Element.getDimensions() and a Position function from prototype). So you can then change the .scrollTop property of the DIV so it''s below the bottom of the image element. And of course you can set up a timer to animate the movement if you want, or create a custom Effect object so that is a re-usable thing. Sorry if this was too high-level and you''re were actually looking for the implementation details. I don''t have them time atm to try to mock something up for you. But if you were more just looking for the general "yes it''s possible and here''s a possible way to get it done"... this should do. I''m sure others will be able to help with the details if you get stuck further (very sorry on that point, so little time). On 10/12/06, Alex Duffield <alex-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org> wrote:> > I have a div that holds image thumbnails. I have set it up so I can use > the arrow keys on the keyboard to select or move between the images. > The div can hold quite a few image thumbnails, so is set to overflow:auto > so wil have scroll bars when there are to many images. > > What I want is for the selected image to always be in the viewable area, > so when I use the down arrow for example to move between images and go below > the viewable area I want the contents to scroll up so the selected image > is visible (For you mac users, this is the way iPhoto works.) > > I looked at Element.scrollTo($(id)) but that seems to only scroll the > page. > > Is there any way I can scroll the contents of my DIV. > > Thanks! > > ______________________________________________________________________ > > *Alex Duffield* *.* *Principal* *.* *InControl Solutions* *.* * > http://www.incontrolsolutions.com* <http://www.incontrolsolutions.com/> > > > > >-- Ryan Gahl Application Development Consultant Athena Group, Inc. Inquire: 1-920-954-9798 x2903 Blog: http://www.someElement.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 -~----------~----~----~----~------~----~------~--~---
This seems to work in Firefox and IE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript" src="javascripts/prototype.js"></script> <script src="javascripts/scriptaculous.js" type="text/javascript"> </script> <style> #testContainer { border:1px solid black; } .pretendImage { background-color:lightgreen; font-size:small; width:100px; height:100px; border:1px solid black; margin:4px; } </style> <script> function myScrollTo(container, element) { container = $(container); element = $(element); var x = element.x ? element.x : element.offsetLeft, y = element.y ? element.y : element.offsetTop; container.scrollLeft=x-(document.all?0:container.offsetLeft ); container.scrollTop=y-(document.all?0:container.offsetTop); return element; } </script> </head> <body> <!--{{{ PADDING TO TEST OFFSETS--> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <!--}}} PADDING TO TEST OFFSETS--> <div id="testContainer" style="overflow:auto; height:200px; width:200px;"> <center> <div class="pretendImage" id="image_1" onclick="myScrollTo(''testContainer'',''image_4'');"> 1 This is an image... Really! </div> <div class="pretendImage" id="image_2"> 2 This is an image... Really! </div> <div class="pretendImage" id="image_3"> 3 This is an image... Really! </div> <div class="pretendImage" id="image_4"> 4 This is an image... Really! </div> <div class="pretendImage" id="image_5"> 5 This is an image... Really! </div> <div class="pretendImage" id="image_6"> 6 This is an image... Really! </div> </center> </div> <script> </script> </body> </html> On 10/12/06, Ryan Gahl <ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Sure, although I''m not sure if there''s a fancy shortcut for it yet. > > Once you have your selected item, I''m assuming you have the means to > figure out its dimensions and position within the DIV (using > Element.getDimensions () and a Position function from prototype). So you > can then change the .scrollTop property of the DIV so it''s below the bottom > of the image element. And of course you can set up a timer to animate the > movement if you want, or create a custom Effect object so that is a > re-usable thing. > > Sorry if this was too high-level and you''re were actually looking for the > implementation details. I don''t have them time atm to try to mock something > up for you. But if you were more just looking for the general "yes it''s > possible and here''s a possible way to get it done"... this should do. > > I''m sure others will be able to help with the details if you get stuck > further (very sorry on that point, so little time). > > > On 10/12/06, Alex Duffield <alex-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org> wrote: > > > > I have a div that holds image thumbnails. I have set it up so I can use > > the arrow keys on the keyboard to select or move between the images. > > The div can hold quite a few image thumbnails, so is set to > > overflow:auto so wil have scroll bars when there are to many images. > > > > What I want is for the selected image to always be in the viewable area, > > so when I use the down arrow for example to move between images and go below > > the viewable area I want the contents to scroll up so the selected image > > is visible (For you mac users, this is the way iPhoto works.) > > > > I looked at Element.scrollTo($(id)) but that seems to only scroll the > > page. > > > > Is there any way I can scroll the contents of my DIV. > > > > Thanks! > > > > ______________________________________________________________________ > > > > *Alex Duffield* *.* *Principal* *.* *InControl Solutions* *.* *http://www.incontrolsolutions.com > > * <http://www.incontrolsolutions.com/> > > > > > > > > > > > -- > Ryan Gahl > Application Development Consultant > Athena Group, Inc. > Inquire: 1-920-954-9798 x2903 > Blog: http://www.someElement.com > > >-- ===========================Brian Peiris Waterloo, Ontario, Canada brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org =========================== --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
On 10/12/06, BrianPeiris <brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > I think you mean you want to Fade and BlindUp in *Parallel*, because it > wouldn''t really make sense to do them one after the other (i.e. Queue > them). > Try this: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml"> > <head> > <meta http-equiv="Content-Type" content="text/html; > charset=utf-8" /> > <title>Untitled Document</title> > > <script language="javascript" > src="javascripts/prototype.js"></script> > <script src="javascripts/scriptaculous.js" > type="text/javascript"> > </script> > > <style> > #testContainer{ > background-color:lightblue; > color:black; > text-align:center; > width:100px; > height:100px; > } > </style> > </head> > <body> > <div id="testContainer">This is a test container, click > me!</div> > <script> > $(''testContainer'').onclick=function() > { > new Effect.Parallel > ( > [ > new Effect.Fade > (''testContainer'',{duration:5}), > new Effect.BlindUp > (''testContainer'') > ] > ) > }; > </script> > </body> > </html>I''m aware that I can do them in parallel, as I''m using this elsewhere, but the benefit of toggle is that I don''t need to worry about state myself; it just knows what to do as far as showing/hiding is concerned. If I have to implement the toggle manually then I''m losing one of the benefits of using scriptaculous. Maybe this is a rare case and it''s not actually supported, and I''m just asking for a lot. But then I''m sure if it was supported it''d be used... --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Thank you kindly sir! That works fabulously !!! I will probably tweak it a tad as it scrolls on the first couple rows, even if the image is already viewable. The problem here is it causes the image to jump to the top if I select say an image from the third row. . Idealy it would not do anything unless the image selected was outside or partially outside the viewable area. Thanks!! ______________________________________________________________________ Alex Duffield . Principal . InControl Solutions . http:// www.incontrolsolutions.com On 12-Oct-06, at 9:42 AM, Brian Peiris wrote:> This seems to work in Firefox and IE: > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> > <html xmlns="http://www.w3.org/1999/xhtml"> > <head> > <meta http-equiv="Content-Type" > content="text/html; charset=utf-8" /> > <title>Untitled Document</title> > > <script language="javascript" > src="javascripts/prototype.js"></script> > <script src="javascripts/scriptaculous.js" type="text/ > javascript"> > </script> > > <style> > #testContainer > { > border:1px solid black; > } > .pretendImage > { > background-color:lightgreen; > font-size:small; > width:100px; > height:100px; > border:1px solid black; > margin:4px; > } > </style> > > <script> > function myScrollTo(container, element) > { > container = $(container); > element = $(element); > var x = element.x ? element.x : element.offsetLeft, > y = element.y ? element.y : element.offsetTop; > container.scrollLeft=x-(document.all? > 0:container.offsetLeft ); > container.scrollTop=y-(document.all? > 0:container.offsetTop); > return element; > } > </script> > </head> > > <body> > <!--{{{ PADDING TO TEST OFFSETS--> > <br /> > <br /> > <br /> > <br /> > <br /> > <br /> > <br /> > <!--}}} PADDING TO TEST OFFSETS--> > <div id="testContainer" > style="overflow:auto; height:200px; width:200px;"> > <center> > <div > class="pretendImage" > id="image_1" > onclick="myScrollTo(''testContainer'',''image_4'');"> > 1 This is an image... Really! > </div> > <div > class="pretendImage" > id="image_2"> > 2 This is an image... Really! > </div> > <div > class="pretendImage" > id="image_3"> > 3 This is an image... Really! > </div> > <div > class="pretendImage" > id="image_4"> > 4 This is an image... Really! > </div> > <div > class="pretendImage" > id="image_5"> > 5 This is an image... Really! > </div> > <div > class="pretendImage" > id="image_6"> > 6 This is an image... Really! > </div> > </center> > </div> > > <script> > </script> > </body> > </html> > > On 10/12/06, Ryan Gahl <ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org > wrote: > Sure, although I''m not sure if there''s a fancy shortcut for it yet. > > Once you have your selected item, I''m assuming you have the means > to figure out its dimensions and position within the DIV (using > Element.getDimensions () and a Position function from prototype). > So you can then change the .scrollTop property of the DIV so it''s > below the bottom of the image element. And of course you can set up > a timer to animate the movement if you want, or create a custom > Effect object so that is a re-usable thing. > > Sorry if this was too high-level and you''re were actually looking > for the implementation details. I don''t have them time atm to try > to mock something up for you. But if you were more just looking for > the general "yes it''s possible and here''s a possible way to get it > done"... this should do. > > I''m sure others will be able to help with the details if you get > stuck further (very sorry on that point, so little time). > > > On 10/12/06, Alex Duffield <alex-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org> wrote: > I have a div that holds image thumbnails. I have set it up so I can > use the arrow keys on the keyboard to select or move between the > images. > > The div can hold quite a few image thumbnails, so is set to > overflow:auto so wil have scroll bars when there are to many images. > > What I want is for the selected image to always be in the viewable > area, so when I use the down arrow for example to move between > images and go below the viewable area I want the contents to scroll > up so the selected image is visible (For you mac users, this is the > way iPhoto works.) > > I looked at Element.scrollTo($(id)) but that seems to only scroll > the page. > > Is there any way I can scroll the contents of my DIV. > > Thanks! > ______________________________________________________________________ > Alex Duffield . Principal . InControl Solutions . http:// > www.incontrolsolutions.com > > > > > > > -- > Ryan Gahl > Application Development Consultant > Athena Group, Inc. > Inquire: 1-920-954-9798 x2903 > Blog: http://www.someElement.com > > > > > > -- > ===========================> Brian Peiris > Waterloo, Ontario, Canada > brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org > mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org > ===========================> >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve aka TDD
2006-Oct-12 17:38 UTC
Re: Queuing Effect.toggle effects in script.aculo.us
Hey Ben, AAMOF, Effect.toggle relies on single effects, no matter what. If you need multiple sync''d effects, you''ll have to go with Effect.Parallel, which is outside Effect.toggle''s scope. You *could* clone Effect.toggle''s code for your needs, like this: var BenEffects = { toggle: function(element) { element = $(element); var options = arguments[1] || {}; var innerOptions = Object.extend(Object.extend({}, options), { sync: true }); var index = element.visible() ? 1 : 0; var effect1 = new Effect[Effect.PAIRS[''appear''][index]](element, innerOptions); var effect2 = new Effect[Effect.PAIRS[''blind''][index]](element, innerOptions); new Effect.Parallel([effect1, effect2], options); } } Then use: BenEffects.toggle(''eltId''); Tested. Works :-) -- Christophe Porteneuve aka TDD tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
OK, here is my modified function based on Brian''s suggestions. function myScrollTo(container, element){ container = $(container); element = $(element); // get element top left xy var tlx = element.x ? element.x : element.offsetLeft; var tly = element.y ? element.y : element.offsetTop; // get element bottom right xy var elementwh = Element.getDimensions(element) var brx = tlx + elementwh[''width'']; var bry = tly + elementwh[''height'']; // get top and bottom values for currently viewable area of container var containerwh = Element.getDimensions(container) var top = container.scrollTop var bottom = containerwh[''height''] + container.scrollTop // Image falls below bottom if(bry > bottom) container.scrollTop= top + (bry - bottom) +10 ; // if image is above top if(tly < top) container.scrollTop= top - (top - tly) -10 ; return element; } In my situation I didn''t need to worry about scrolling right and left, so I didn''t bother to add that in there. This only scrolls if the element is outside or partially outside the container. When it adjusts the scroll it only moves it just enough so the element is in the container plus a hard coded padding of 10 px. (I could pass that in as a variable to the function or check what the padding is of the container, but I was lazy) If there are more efficient ways to do this please let me let me know, I have learned a lot from you guys comments, so sugestions are always welcome ______________________________________________________________________ Alex Duffield . Principal . InControl Solutions . http:// www.incontrolsolutions.com On 12-Oct-06, at 10:16 AM, Alex Duffield wrote:> Thank you kindly sir! That works fabulously !!! > > I will probably tweak it a tad as it scrolls on the first couple > rows, even if the image is already viewable. The problem here is it > causes the image to jump to the top if I select say an image from > the third row. . > > Idealy it would not do anything unless the image selected was > outside or partially outside the viewable area. > > Thanks!! > ______________________________________________________________________ > Alex Duffield . Principal . InControl Solutions . http:// > www.incontrolsolutions.com > > > > On 12-Oct-06, at 9:42 AM, Brian Peiris wrote: > >> This seems to work in Firefox and IE: >> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> >> <html xmlns="http://www.w3.org/1999/xhtml"> >> <head> >> <meta http-equiv="Content-Type" >> content="text/html; charset=utf-8" /> >> <title>Untitled Document</title> >> >> <script language="javascript" >> src="javascripts/prototype.js"></script> >> <script src="javascripts/scriptaculous.js" type="text/ >> javascript"> >> </script> >> >> <style> >> #testContainer >> { >> border:1px solid black; >> } >> .pretendImage >> { >> background-color:lightgreen; >> font-size:small; >> width:100px; >> height:100px; >> border:1px solid black; >> margin:4px; >> } >> </style> >> >> <script> >> function myScrollTo(container, element) >> { >> container = $(container); >> element = $(element); >> var x = element.x ? element.x : element.offsetLeft, >> y = element.y ? element.y : >> element.offsetTop; >> container.scrollLeft=x-(document.all? >> 0:container.offsetLeft ); >> container.scrollTop=y-(document.all? >> 0:container.offsetTop); >> return element; >> } >> </script> >> </head> >> >> <body> >> <!--{{{ PADDING TO TEST OFFSETS--> >> <br /> >> <br /> >> <br /> >> <br /> >> <br /> >> <br /> >> <br /> >> <!--}}} PADDING TO TEST OFFSETS--> >> <div id="testContainer" >> style="overflow:auto; height:200px; width:200px;"> >> <center> >> <div >> class="pretendImage" >> id="image_1" >> onclick="myScrollTo(''testContainer'',''image_4'');"> >> 1 This is an image... Really! >> </div> >> <div >> class="pretendImage" >> id="image_2"> >> 2 This is an image... Really! >> </div> >> <div >> class="pretendImage" >> id="image_3"> >> 3 This is an image... Really! >> </div> >> <div >> class="pretendImage" >> id="image_4"> >> 4 This is an image... Really! >> </div> >> <div >> class="pretendImage" >> id="image_5"> >> 5 This is an image... Really! >> </div> >> <div >> class="pretendImage" >> id="image_6"> >> 6 This is an image... Really! >> </div> >> </center> >> </div> >> >> <script> >> </script> >> </body> >> </html> >> >> On 10/12/06, Ryan Gahl <ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org > wrote: >> Sure, although I''m not sure if there''s a fancy shortcut for it yet. >> >> Once you have your selected item, I''m assuming you have the means >> to figure out its dimensions and position within the DIV (using >> Element.getDimensions () and a Position function from prototype). >> So you can then change the .scrollTop property of the DIV so it''s >> below the bottom of the image element. And of course you can set >> up a timer to animate the movement if you want, or create a custom >> Effect object so that is a re-usable thing. >> >> Sorry if this was too high-level and you''re were actually looking >> for the implementation details. I don''t have them time atm to try >> to mock something up for you. But if you were more just looking >> for the general "yes it''s possible and here''s a possible way to >> get it done"... this should do. >> >> I''m sure others will be able to help with the details if you get >> stuck further (very sorry on that point, so little time). >> >> >> On 10/12/06, Alex Duffield <alex-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org> wrote: >> I have a div that holds image thumbnails. I have set it up so I >> can use the arrow keys on the keyboard to select or move between >> the images. >> >> The div can hold quite a few image thumbnails, so is set to >> overflow:auto so wil have scroll bars when there are to many images. >> >> What I want is for the selected image to always be in the viewable >> area, so when I use the down arrow for example to move between >> images and go below the viewable area I want the contents to >> scroll up so the selected image is visible (For you mac users, >> this is the way iPhoto works.) >> >> I looked at Element.scrollTo($(id)) but that seems to only scroll >> the page. >> >> Is there any way I can scroll the contents of my DIV. >> >> Thanks! >> _____________________________________________________________________ >> _ >> Alex Duffield . Principal . InControl Solutions . http:// >> www.incontrolsolutions.com >> >> >> >> >> >> >> -- >> Ryan Gahl >> Application Development Consultant >> Athena Group, Inc. >> Inquire: 1-920-954-9798 x2903 >> Blog: http://www.someElement.com >> >> >> >> >> >> -- >> ===========================>> Brian Peiris >> Waterloo, Ontario, Canada >> brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org >> mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org >> ===========================>> >> >>--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---