SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Copy links onto other elements

    If you have a div with a link and other elements, such as an article snippet, is it possible to use JavaScript to copy that link onto one of the adjacent elements (one that a user might be expected to try to click, such as a heading or a thumbnail image, based on their experience of other sites) so that I can avoid duplicating the link in the HTML?

    I'm trying a jQuery plugin called Biggerlink, but it adds the link to the entire parent div, white space and all, which is not what I want. And if I could do without jQuery, that would be good.

    I want to avoid having multiple links to the same location so that lists of links are, I hope, kept short and clear, while at the same time catering for people (and I do it, too) who expect snippet headings to be clickable.

  2. #2
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. And I thought that JS would be able to do this easily. If I didn't explain myself well enough, please ask me to clarify, or even just let me know if it's not possible at all.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You may need to explain more clearly what you are after.

    For example:

    I want people to be able to click on the following page element, so it behaves the same as if someone clicked on a link that referenced that element.

    Code html4strict:
    <h2 id="articleTitle">Article Title</h2>

    Start us off with what you currently have, what the problem is that you're trying to solve, and what you would like to see as an end-result.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, well, I'm going to be setting up some article snippets with a heading, short paragraph, and anchor. A lot of websites duplicate the links into the h* and p elements, but I'm not keen on that for reasons as outlined, namely verbose HTML and potentially messy link management in screen readers.

    I don't know exactly how the biggerlink plugin works, but the principle of creating the effect of a link on an element that does not actually have an anchor in the HTML is what I want. But just on a heading, for example, instead of the whole parent div.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by adh32 View Post
    Ok, well, I'm going to be setting up some article snippets with a heading, short paragraph, and anchor. A lot of websites duplicate the links into the h* and p elements, but I'm not keen on that for reasons as outlined, namely verbose HTML and potentially messy link management in screen readers.

    I don't know exactly how the biggerlink plugin works, but the principle of creating the effect of a link on an element that does not actually have an anchor in the HTML is what I want. But just on a heading, for example, instead of the whole parent div.
    Will anything actually happen when someone clicks on the heading?
    Do you want the page to scroll until the heading is at the top of the screen?
    Do you want to scroll to the navigation link that points to the heading?

    Or in summary, what the ell do you want it to do? (an ell is wing of a building)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I thought that I had by now made it clear that I want the JS to duplicate the effect of the link in the "snippet div". I don't know how else to put this or how I can make it any clearer.

    Will anything actually happen when someone clicks on the heading?
    Of course. It will go to the article, just any link in a snippet; just like the real link that I want to duplicate! I have never seen any article snippet that didn't link to the relevant article. I thought that this, too, was obvious from my first description.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Now that we've cleared up what you actually need, the solution seems to be pretty clear. Wrap the items you want to be clickable in a single anchor tag.

    If you don't want the white-space to be clickable, you can use an onclick event that returns false when the person doesn't click on an element.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But you can't wrap block elements, such as a heading, in inline elements. I may be an amateur, but I do know that much. Besides, the content would almost certainly be read twice, once within the anchor and again in its own right, and anchor text suddenly becomes very verbose indeed. I'm not going to do that.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by adh32 View Post
    But you can't wrap block elements, such as a heading, in inline elements. I may be an amateur, but I do know that much.
    Actually, you can. You'll be hard-pressed to find a web browser that doesn't support this now.

    the a element
    The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am aware of the mess that is HTML5 and what it claims that you can do with anchors: it's ridiculous and I wouldn't use it for my site. And that method doesn't address the accessibility problems. Browser support (for something that is not even finalised yet) is all well and good, but browsers are only part of the picture.

    I just want a JS solution, rather than doing messy things in the HTML that are not good practice.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by adh32 View Post
    I am aware of the mess that is HTML5 and what it claims that you can do with anchors: it's ridiculous and I wouldn't use it for my site. And that method doesn't address the accessibility problems.

    I just want a JS solution, rather than doing messy things in the HTML that are not good practice.
    A scripted solution will achieve a similar result, but the anchor and the header and the image will need to be wrapped be wrapped by a single element, perhaps a list item element. Then the scripted solution can apply an onclick event to the list item which goes to the same target as that of the link.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •