Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts

    Smile Javascript Text Links

    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

    Code:
    <script type="text/javascript">
    function doSomething()
    {
     document.write('Do Something");
    }
    </script>
    
    <a href="#" onclick="doSomething();">Click Here</a>
    We can use

    Code:
    <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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <a href="#" onclick="doSomething(); return false;">Click Here</a>
    is the best method.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    but thats more code so more work

    Why make more work for you self

  • #4
    SSJ
    SSJ is offline
    Regular Coder
    Join Date
    Mar 2007
    Posts
    230
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by barkermn01 View Post
    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.

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Using of javascript:func() will cause your page to fail validation.

    What abduraooft says is best and should be advocated.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    @barkermn01, here is a serious discussion on difference between href="#" and href="javascript:" found in sitepoint forum
    Last edited by abduraooft; 08-21-2008 at 03:18 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by rangana View Post
    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
    Code:
    <!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

    Code:
    <?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
    Last edited by barkermn01; 08-21-2008 at 04:35 PM.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by barkermn01 View Post
    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
    Both 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.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Bill Posters View Post
    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”.

    Quote Originally Posted by Bill Posters View Post
    • Ensure that the page is usable without the need for javascript
    Agreed. Fallback solutions would address this and “alternative.html” is one such fallback solution.

    Quote Originally Posted by Bill Posters View Post
    • Use javascript to add links to the page which are to be used solely for js-based, 'enhanced' functionality
    Agreed. 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •