/    Sign up×
Community /Pin to ProfileBookmark

Page jumps to top when a javascript function is called

Copy linkTweet thisAlerts:
Apr 14.2007

When the bellow function is called in this page, which is when one of the smaller user images is clicked, the page jumps to the top. The script is realy simple, I dont know what is going on…

[url]http://wisetopic.com/wisematch/profile/?userid=57#[/url]

[CODE] <script type=”text/javascript”>
function changeImg(imageSrc) {

pic = document.getElementById(‘mainImg’);
pic.src = ‘http://wisetopic.com/shared/WiseImage.ashx?Image=’+imageSrc+’&width=200’;

return true;
}
</script> [/CODE]

The fucntion is called like this:

<a href=”#”>

[CODE]
 <img class=”thumb” src=”http://wisetopic.com/shared/WiseImage.ashx?Image=wm_57633121113188986678.jpg&width=50&cropWidth=50″
onclick=”changeImg(‘wm_57633121113188986678.jpg’)” alt=”” /></a>[/CODE]

Thanks.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorApr 14.2007 — You don't need the [B]a[/B] tag :-). Remove it. Give your picture a CSS style (or class):

<img src="..." [COLOR="Blue"]style="cursor:pointer"[/COLOR] onclick="somefunction()">

On the other hand, whenever you use onclick event in a link, you should prevent the scroll up with a [B]return false[/B]

<a href="#" onclick="somefuntion()[COLOR="Blue"];return false[/COLOR]">...</a>
Copy linkTweet thisAlerts:
@gooncorpApr 14.2007 — or, as I have previously said, call your function with <a href="javascript:somefunction();>link</a>
Copy linkTweet thisAlerts:
@ricpApr 15.2007 — or, as I have previously said, call your function with <a href="javascript:somefunction();>link</a>[/QUOTE]
Sorry but that isn't the best thing to do. Calling that causes, like eval, a recompilation of the javascript engine. If you [I]have[/I] to use a function from an <a> tag only do it from the onclick attribute and not via the javascript: protocol. Say something like this is fine:

[code=html]
<a href="http://yourserver.com/page.html" onclick="return !window.open(this.href,'myLink','height=400,width=400')"> my page </a>
[/code]
As that would provide a link to a new page, and if js is enabled it adds the functionality to open in a new window of a given size.


Now as for actually calling code from an <a> that's a totally different kettle of fish. <a> tags are meant for navigation. Nothing more and nothing less. Don't use them as a simple way to get a link effect. It's not semantic and is just lazy design.

For more information have a look at: http://b-cage.net/code/web/tom/links.html
Copy linkTweet thisAlerts:
@KorApr 15.2007 — ...Don't mention that it should have been [B]javascript:[COLOR="Blue"]void([/COLOR]somefunction()[COLOR="Blue"])[/COLOR][/B]
×

Success!

Help @shawnmolloy 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...