...

View Full Version : Javascript Text Links



barkermn01
08-21-2008, 12:47 PM
Ok one thing is bugging me and alot of people do it

when using a Text link to called javascrip you use the href="#" and onclick="*javascript func*" this is bad and slow

Doing this causes the page to be refreshed

the Resoultion

Use href="javascript:*javascript func*;" it so mutch faster page as page dose not get reloaded E.G



<script type="text/javascript">
function doSomething()
{
document.write('Do Something");
}
</script>

<a href="#" onclick="doSomething();">Click Here</a>


We can use



<script type="text/javascript">
function doSomething()
{
document.write('Do Something");
}
</script>

<a href="javascript:doSomething();">Click Here</a>


I hope peole do use this code as it is a nice bit of code and looks nice as the page dose not flash white as it reloads

*** more and more sites are using so menny images loading is becoming longer so why cause them to load again to stay on the same page

abduraooft
08-21-2008, 12:53 PM
<a href="#" onclick="doSomething(); return false;">Click Here</a> is the best method.

barkermn01
08-21-2008, 01:08 PM
but thats more code so more work

Why make more work for you self

SSJ
08-21-2008, 01:37 PM
when using a Text link to called javascrip you use the href="#" and onclick="*javascript func*" this is bad and slow

Doing this causes the page to be refreshed



Your page will not be refreshed with this at all.

rangana
08-21-2008, 01:38 PM
Using of javascript:func() will cause your page to fail validation.

What abduraooft says is best and should be advocated.

abduraooft
08-21-2008, 04:14 PM
@barkermn01, here is a serious discussion on difference between href="#" and href="javascript:" (http://www.sitepoint.com/forums/showthread.php?t=565853) found in sitepoint forum

barkermn01
08-21-2008, 05:24 PM
Using of javascript:func() will cause your page to fail validation.

What abduraooft says is best and should be advocated.



Your Lieing i have just run that script thought the w3.org's Validator and it is perfect

HTML 4.01 Transitional


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> -->
<html>
<head>
<title>I AM YOUR DOCUMENT TITLE REPLACE ME</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<div>

<a href="javascript:doSomething();">Click Here</a>

</div>
</body>
</html>


OOO and clean in XHTML



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>I AM YOUR DOCUMENT TITLE REPLACE ME</title>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
</head>
<body>
<div>

<a href="javascript:doSomething();">Click Here</a>

</div>
</body>
</html>


And to do this i went to http://validator.w3.org/
Click on Direct input
And typed in <a href="javascript:doSomething();">Click Here</a>
Then clicked more options
Selected
Validate HTML fragment
And used both settings under that

Allso that Sitepoint forum ok whats wrong with old and it dose not say why not to use javascript:(); it just says dont i want good evidance Why not to use this as it seems to be the best but he dose prove my point about the page refreshing when you use # as it gose to the top - that is a page refresh just hte images are localy stored so it dose not take long to show them again

Arbitrator
08-22-2008, 07:46 AM
I hope peole do use this code as it is a nice bit of code and looks nice as the page dose not flash white as it reloadsBoth methods are poor.

The initial method, href="#", creates a meaningless href attribute that doesn’t do anything useful when clicked while scripting is disabled; current browsers will scroll to the top of the document and append “#” to the URI.

Your favored method, href="javascript:, has the same problem except that it simply does nothing (as opposed to scrolling).

The best method is probably something like <a href="noscript.html" onclick="do_something();"> where noscript.html leads to a (meaningful) page explaining that scripting needs to be enabled and, perhaps, other information or <a href="alternative.html" onclick="do_something();"> where alternative.html performs an alternative action like, say, adjusting the document on the server side or loading a new page instead of loading new content without a reload.

(Note that I’ve omitted the parts of the code where the default action is prevented for brevity.)

Bill Posters
08-22-2008, 10:14 AM
I'd say the best method would be:

•&#160;Ensure that the page is usable without the need for javascript
• Use javascript to add links to the page which are to be used solely for js-based, 'enhanced' functionality


I'd consider it far from ideal to use a noscript.html approach as having javascript enabled is simply not an option for some, either because organisation policy prohibits it or a user's UA simply doesn't support it.

Arbitrator
08-22-2008, 11:04 AM
I'd consider it far from ideal to use a noscript.html approach as having javascript enabled is simply not an option for some, either because organisation policy prohibits it or a user's UA simply doesn't support it.Yeah, and the solution addresses these cases by informing the user that content, enhancements, or what have you are not available due to lack of scripting capability. Even if they can’t access the script‐based functionality in the end, it’s certainly more intuitive to provide an explanation than have a user wonder why something isn’t working properly. (In this case, they might wonder why clicking a hyperlink scrolls to the top of the page or does nothing.)

Personally, I would simply leave the href attribute off altogether, but some people insist upon using the browser’s native link styling (i.e., the color) or point out that it’s an accessibility issue since you can’t focus the hyperlink via keyboard without that attribute being set. (For some reason, I’m thinking that you were the one to do the latter in an older thread.) Hence the next best solutions: href with “noscript.html” or “alternative.html”.


• Ensure that the page is usable without the need for javascriptAgreed. Fallback solutions would address this and “alternative.html” is one such fallback solution.


• Use javascript to add links to the page which are to be used solely for js-based, 'enhanced' functionalityAgreed. However, this still doesn’t help you with the two mentioned use cases for the href attribute; you still have to set the attribute and put something in it. Personally, I have a distaste for # since it’s not a real URI (insofar as I’m aware) and for the javascript: scheme since it’s non‐standard.

I suppose that filling it with any ol’ URI (like a self‐reference) in this case would, generally, work fine though. The only cases that I can think of where it wouldn’t is if scripting were disabled or unhandled errors in the script occurred after the link was dynamically generated but I suppose that those are edge cases. If you wanted to cover the most cases (i.e., cover the edge cases anyway), you could do so with the proposed solution.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum