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.
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.
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)
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.
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.
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.
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).
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.
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.