SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    "this" and anchor??

    I would like to be able to pass the link element ( not the URL) in an achor...
    Essentially:
    Code:
               <p > i am content... <a href="#" onClick="foo(this); ">Show</a></p>
    or PREFERABLY :
    Code:
               <p > i am content... <a href="javascript:foo(this); ">Show</a><p>
    When I do this, the value of "this" is only the URL and not an ELEMENT object, whose attributes I can then modify via foo(). Is there a way I can actually access the <A> element and not just it's URL?


    As always all insight is greatly appreciated.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That second alternative you prefer is one to AVOID as that does not associate the code with an event in any browser.

    When you do try to reference this inside an event handler just which object it refers to will depend on the browser being used.

    The preferred alternative is to not place the JavaScript in the HTML at all but instead to place all the JavaScript in a separate file and attach it to the HTML from there using JavaScript. The simplest solution would be to give the <a> tag an id and use that to attach the function you want to call.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thanks Stephen,
    I was hoping to avoid using "#" as an href and my preferred method seemed to be a way to kill two birds with one stone, but what you are saying makes sense. There is only one drawback to the ID idea. That is, when having a list of items i would have to create an ID for each item.. but then again I suppose that just means what I really need to do is create a function that unobtrusively parses through all <a>'s in the menu...

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    You don't necessarily need to add an id to the a. You just need a way to select that anchor which is going to depend entirely on the entire pages structure. There is likely a way to target it without adding an id.
    The only code I hate more than my own is everyone else's.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Thanks Stephen,
    I was hoping to avoid using "#" as an href and my preferred method seemed to be a way to kill two birds with one stone, but what you are saying makes sense. There is only one drawback to the ID idea. That is, when having a list of items i would have to create an ID for each item.. but then again I suppose that just means what I really need to do is create a function that unobtrusively parses through all <a>'s in the menu...
    If it isn't actually linking to anything when JavaScript is disabled then it doesn't necessarily need to be an <a> tag. You could attach onclicks to all the <li> tags in a given part of the page just as easily and could also style the content so that they look like links (best done from JS so they only look like links when they actually work as links).

    There are all sorts of different ways to access the HTML content from JavaScript. Having an id is just the simplest one where you want to access a specific element. If you had a list you could put an id on the <ol> or <ul> and then use getElementsByTagName('li') to get all the li tags so as to process all of them one after the other.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am relatively new at PURE js ( having relied mostly on jQuery) I was toying with the idea of coding my own lightbox style slide show. So the idea was that sooner or later I would NEED anchors, since I would want the links to load the image in a new window IF js was off.

    BTW, I actually got it working!! With only one problem... It works perfectly with CSS/ js on; it works as expected with js and CSS off; of course, it's a moot point with images/css/js off; but it's buggy when js is ON but CSS is off... ( Actually I just checked it again.. it works when CSS is OFF , but not if CSS is on but the style sheet is missing.. apparently That's two different things)

    This makes sense as the script relies on CSS positioning as well margins to center the image. I guess I was wondering if you knew of a way for the script to tell when stylesheet was missing so that it could correct itself and act as if CSS was off?


Bookmarks

Posting Permissions

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