| 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
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!! ______________________________________________________________________
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=""></script>
<script src="" 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"
>
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 <[EMAIL PROTECTED] > 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 <[EMAIL PROTECTED]> 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! ______________________________________________________________________
--
Ryan Gahl
Application Development Consultant
Athena Group, Inc.
Inquire: 1-920-954-9798 x2903
Blog: http://www.someElement.com
--
============================
Brian Peiris
Waterloo, Ontario, Canada
[EMAIL PROTECTED]
[EMAIL PROTECTED]
============================
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
|
