stopping <a> from loading new page but still performing onclick action

hi all

i want to use hyperlinks to 'load' content by changing the display of
div tags. the problem i have is that unless i specify a href the anchor
does not change the mouse pointer on hover even if display is set to
block. it only look changes when there is a href there. but if i have a
href there then when i click it will load the page, which i dont want.

how can i get the anchor to look like a proper link where the users
pointer changes on hover (in firefox) but a page does not get refreshed
onclick only the onclick function gets loaded.

regards

marc

monomaniac21 wrote:

Quote:

hi all
>
i want to use hyperlinks to 'load' content by changing the display of
div tags. the problem i have is that unless i specify a href the anchor
does not change the mouse pointer on hover even if display is set to
block. it only look changes when there is a href there. but if i have a
href there then when i click it will load the page, which i dont want.
>
how can i get the anchor to look like a proper link where the users
pointer changes on hover (in firefox) but a page does not get refreshed
onclick only the onclick function gets loaded.
>
regards
>
marc

Place a single hash into the href property of the anchor tag.
(href="#").

*** monomaniac21 escribió/wrote (4 Sep 2006 08:21:09 -0700):

Quote:

i want to use hyperlinks to 'load' content by changing the display of
div tags. the problem i have is that unless i specify a href the anchor
does not change the mouse pointer on hover even if display is set to
block.

Not even if you specify a cursor in your style sheet?

cursor: pointer;

Quote:

it only look changes when there is a href there. but if i have a
href there then when i click it will load the page, which i dont want.

It won't load anything if you cancel the action:

<a href="http://www.google.com" onclick="return false">Google</a>

or if you don't set an HTTP link:

<a href="javascript:alert('Hello, World!')">Google</a>

--
-+ http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
++ Mi sitio sobre programación web: http://bits.demogracia.com
+- Mi web de humor con rayos UVA: http://www.demogracia.com
--

Sometimes this could cause a problem by jumping to the top of the page.
Another way to do this without making the page jump would be to put (<a
href="javascript:void(0)" onclick="SomeFunction()">)

gbbulldog wrote:

Quote:

monomaniac21 wrote:

Quote:

hi all

i want to use hyperlinks to 'load' content by changing the display of
div tags. the problem i have is that unless i specify a href the anchor
does not change the mouse pointer on hover even if display is set to
block. it only look changes when there is a href there. but if i have a
href there then when i click it will load the page, which i dont want.

how can i get the anchor to look like a proper link where the users
pointer changes on hover (in firefox) but a page does not get refreshed
onclick only the onclick function gets loaded.

regards

marc

>
Place a single hash into the href property of the anchor tag.
(href="#").

"Nick D" <nick.denardis@gmail.comwrote in
news:1157393471.762756.201500@m79g2000cwm.googlegr oups.com:

Quote:

Sometimes this could cause a problem by jumping to the top of the
page. Another way to do this without making the page jump would be to
put (<a href="javascript:void(0)" onclick="SomeFunction()">)

i usually call:

<a href="javascript://Click To Change Divs" onclick="changeDiv();">

i believe my example is proper coding practice - any href="javascript:xxx"
should be avoided at all costs.

best,
gm

All of the examples in this thread are depreciated. None of them will
degrade gracefully. You should ALWAYS use the (<a
href="action_page.html">Link</a>) Then attach an onload javascript
function that will run through all link tags and add the proper onclick
event and removing the traditional "href" properties. This way your
script will ALWAYS work even if javascript is disabled.

Reference: http://www.w3.org/TR/WCAG10-HTML-TECHS/

Good Man wrote:

Quote:

"Nick D" <nick.denardis@gmail.comwrote in
news:1157393471.762756.201500@m79g2000cwm.googlegr oups.com:
>

Quote:

Sometimes this could cause a problem by jumping to the top of the
page. Another way to do this without making the page jump would be to
put (<a href="javascript:void(0)" onclick="SomeFunction()">)

>
i usually call:
>
<a href="javascript://Click To Change Divs" onclick="changeDiv();">
>
>
i believe my example is proper coding practice - any href="javascript:xxx"
should be avoided at all costs.
>
best,
gm

Nick D wrote:

Quote:

All of the examples in this thread are depreciated. None of them will
degrade gracefully. You should ALWAYS use the (<a
href="action_page.html">Link</a>) Then attach an onload javascript
function that will run through all link tags and add the proper onclick
event and removing the traditional "href" properties. This way your
script will ALWAYS work even if javascript is disabled.
>
Reference: http://www.w3.org/TR/WCAG10-HTML-TECHS/

Funny, not one of the examples in the Links section of that document
showed anything that resembled the issue that is being discussed here.
(ie. no examples of how the accessibility standard can be applied to
<ajavascript.)

Quote:

>Then attach an onload javascript function that will run through all link tags and add the >proper onclick event and removing the traditional "href" properties.
>This way your script will ALWAYS work even if javascript is disabled.

How can that be true? If Javascript is disabled then Javascript is
disabled, just adding "onload" Javascript won't get around that. Maybe
I'm missing something there, but I always thought that if Javascript is
disabled, then no Javascript at all would run. Can someone clarify this?

Yes, If javascript is disabled there will be no change to the page and
the original href="actionpage.html" link will be executed. But if
javascript is enabled then the onload will run thus removing all
original conventional href locations and replacing them with javascript
actions. Here is a more precise example you were probably looking for.
For accessibility degradable javascript is the way to go.

http://particletree.com/features/the...gradable-ajax/

william.clarke wrote:

Quote:

Nick D wrote:

Quote:

All of the examples in this thread are depreciated. None of them will
degrade gracefully. You should ALWAYS use the (<a
href="action_page.html">Link</a>) Then attach an onload javascript
function that will run through all link tags and add the proper onclick
event and removing the traditional "href" properties. This way your
script will ALWAYS work even if javascript is disabled.

Reference: http://www.w3.org/TR/WCAG10-HTML-TECHS/

>
Funny, not one of the examples in the Links section of that document
showed anything that resembled the issue that is being discussed here.
(ie. no examples of how the accessibility standard can be applied to
<ajavascript.)
>

Quote:

Then attach an onload javascript function that will run through all link tags and add the >proper onclick event and removing the traditional "href" properties.
This way your script will ALWAYS work even if javascript is disabled.

>
How can that be true? If Javascript is disabled then Javascript is
disabled, just adding "onload" Javascript won't get around that. Maybe
I'm missing something there, but I always thought that if Javascript is
disabled, then no Javascript at all would run. Can someone clarify this?

Nick D wrote:

Quote:

Yes, If javascript is disabled there will be no change to the page and
the original href="actionpage.html" link will be executed. But if
javascript is enabled then the onload will run thus removing all
original conventional href locations and replacing them with javascript
actions. Here is a more precise example you were probably looking for.
For accessibility degradable javascript is the way to go.
>
http://particletree.com/features/the...gradable-ajax/

Thanks for clearing that one up, I understand what you meant now :)

Nick D wrote:

Quote:

All of the examples in this thread are depreciated. None of them will
degrade gracefully. You should ALWAYS use the (<a
href="action_page.html">Link</a>) Then attach an onload javascript
function that will run through all link tags and add the proper onclick
event and removing the traditional "href" properties. This way your
script will ALWAYS work even if javascript is disabled.
>
Reference: http://www.w3.org/TR/WCAG10-HTML-TECHS/
>
>
Good Man wrote:

Quote:

"Nick D" <nick.denardis@gmail.comwrote in
news:1157393471.762756.201500@m79g2000cwm.googlegr oups.com:

Quote:

Sometimes this could cause a problem by jumping to the top of the
page. Another way to do this without making the page jump would be to
put (<a href="javascript:void(0)" onclick="SomeFunction()">)

i usually call:

<a href="javascript://Click To Change Divs" onclick="changeDiv();">

i believe my example is proper coding practice - any href="javascript:xxx"
should be avoided at all costs.

best,
gm

A javascript that run's through and removes all the href's from anchor
tags onload seems a bit complex. Just add "return false" to the end of
the onclick call to stop the href from firing after the javascript has
executed. If javascript is diabled, the link will still work.

e.g.

<a href="http://www.somewhere.com" onclick="alert('hello'); return
false;">click me</a>

stopping <a> from loading new page but still performing onclick action

re: stopping <a> from loading new page but still performing onclick action

re: stopping <a> from loading new page but still performing onclick action

re: stopping <a> from loading new page but still performing onclick action

re: stopping <a> from loading new page but still performing onclick action

re: stopping <a> from loading new page but still performing onclick action

re: stopping <a> from loading new page but still performing onclick action

re: stopping <a> from loading new page but still performing onclick action

re: stopping <a> from loading new page but still performing onclick action

re: stopping <a> from loading new page but still performing onclick action

Similar PHP bytes

/bytes/development

/bytes/it

/bytes/about