/    Sign up×
Community /Pin to ProfileBookmark

Using js to load image, not in the right place.

Copy linkTweet thisAlerts:
Jul 02.2008

Hi all,

So here is the web page: [url]http://vewd.org/index.php/photo/essay/peter_kearns/[/url]

That is an example.

The problem: SOMETIMES the image will load in the incorrect location when clicked. I am using the method of subtracting the image size from the div size, and dividing that by two. It works often, but not always. When it doesnt work, it centers the image by the top left corner.

Sometimes clicking the image again will fix it, sometimes not. Sometimes it seems the cache may be involved, but I cannot verify this.

I get the most complaints from Safari users, but also FF 2 AND 3, and IE 7. Pretty much all the major browsers.

I would post the javascript, but I wouldn’t know which part to post. Let me know what you may need.

I thank you all very much.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Jul 02.2008 — I couldn't replicate your error, so I was wondering what do you mean by centering in the top left corner? Do you have a screenshot of it?

To center your image, you could probably just use this CSS<i>
</i>#main_image_wrapper {
text-align:center;
}
#scroller_wrap {
text-align:left;
}
#main_image {
margin:auto;
line-height:fullheight of the divpx;
}
#main_image img {
vertical-align:center;
}
Copy linkTweet thisAlerts:
@MattBL34authorJul 02.2008 — The div is centered, but the javascript is positioning the main image there. I'm comfortable with css, but it is not a css problem.

I can only get it to happen in Safari 3 on Mac.

A screen shot is attached.

[upl-file uuid=4cdca78a-9e74-4d0f-92ef-95f64811fcb1 size=89kB]Picture-3.jpg[/upl-file]

[upl-file uuid=078cd867-4ab8-4af2-bd80-d33a8cd7e6c0 size=95kB]Picture-4.jpg[/upl-file]
×

Success!

Help @MattBL34 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.18,
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,
)...