/    Sign up×
Community /Pin to ProfileBookmark

Auto scroll so clicked image is in view

Copy linkTweet thisAlerts:
Oct 30.2008

I have a large number of images on a page positioned using float:left; when you click on one of the images a javascript function loads a larger image in its place and all the images after this are shuffled down.

My problem is that when the user clicks and image to make it bigger, quite often this forces the image onto the next line and sometimes this means pushing it off the page.

What Im trying to do is put together a function that smoothly auto scrolls so this enlarged image is fully in view. I’ve experimented with trying to use anchor points but I get the feeling this isn’t the best way to go about things. Has anyone got any pointers or code that might help me achieve this.

Thanks in advanced

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@MrNobodyOct 30.2008 — Have you tried the .scrollIntoView() method? Of course, I don't know what all browsers support this IE method. Otherwise, beside using anchors and modifying the url to target them, you can also calculate the top position of the image and force the page to scroll to that point.
[CODE]document.body.scrollTop = sPos;
// ... or ...
document.documentElement.scrollTop = sPos;[/CODE]
Copy linkTweet thisAlerts:
@rnd_meOct 30.2008 — check out the .scrollTop property.

setting it to the offsetTop of another element seems to put that element at the top. you can add a few pixels of padding if needed.

here is an example ripped out of an image gallery:

[CODE]function hiliteThumb(n){
var thm = App.thumbRay[n];
if(!thm){return;}
thm.border=1;
var f= el("filmstrip");
[COLOR="Red"]f.scrollTop = thm.offsetTop;[/COLOR]
}[/CODE]
Copy linkTweet thisAlerts:
@jamesmuauthorOct 31.2008 — Thanks, these work well but what I think i need to do is workout the position of the floated object and scroll down by a certain amount. Ive tried a few functions to work out postion but none have worked with the floating.

If anyone has any advice here id be very happy
Copy linkTweet thisAlerts:
@MrNobodyOct 31.2008 — I have successfully used the following to calculate the position of an object:
[CODE] xpos = obj.offsetLeft; // calculate object position
ypos = obj.offsetTop;
var ele = obj.offsetParent;
while (ele) { // based on all parent nodes
xpos += ele.offsetLeft;
ypos += ele.offsetTop;
ele = ele.offsetParent;
}[/CODE]
×

Success!

Help @jamesmu spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...