I'm creating a simple static website, and I wish to link from one page to a specific word or phrase on another. Using an anchor only appears to cause Chrome to link to a specific line, even when that word is the only content anchored on that line. Any further suggestions?
Edit: Specifically, I wish for the target word or phrase to be clearly disambiguated from all other content on the page, even on the same line.
How about using the CSS target pseudo selector (element:target) as shown at http://www.catchmyfame.com/2009/08/01/the-css3-target-pseudo-class-selector/.
Related
I have a website and Google search used to pick-up header ids to build anchor links, such as this one: https://queirozf.com/entries/pandas-dataframe-plot-examples-with-matplotlib-pyplot#bar-plot-of-column-values
However, they are now using URLs with Text fragments, which means that the anchor leads directly to some block of text. For example: https://queirozf.com/entries/pandas-dataframe-plot-examples-with-matplotlib-pyplot#:~:text=Bar%20plot%20of%20column%20values
This is a problem because all my pages have a Table Of Contents so the text fragment matches the text there, rather than the actual correct Heading
What's happening:
This is the actual heading the user should be directed to:
Is there a way to add some markup to the table of contents so that it'll be skipped when the browser looks for the matching text?
Is there some ARIA or other way to mark a given HTML node so as to be skipped when the user searches for text on the page (Ctrl+F/Cmd+F)?
Use case: hiding accessible/fallback text from searches
Example: search on this page for the word down. You should only find the instance in the previous sentence, but Chrome will show as many search results as there are answers to this question, plus one, because the question itself, and each answer, have a "d... vote" a link text.
Such search results aren't highlighted, and it can appear frustrating to see "1 of X" in the search box, while there's nothing visible that matches what the user has searched for.
Not sure if I understood you correctly, but if you develop your own app, not hacking SO source, maybe using of CSS :before or :after pseudo-elements filled with content property will help.
For example, the text ”Hello“ is not found in Safari, Chrome and Firefox when added by the content property:
.text:before {
content: 'Hello';
}
Opera 12.x finds the word on the page, so if its support makes sense for you, this solution won't work. I also haven't test it in any version of IE, mobile browsers and other infrequent environments.
In the example you could remove the "down vote" text (replacing it with , whitespace, or empty string) because the a tag already contains a title attributes which aimed to be used by screen readers.
The fallback is then only necessary with a text browser like lynx, which will ignore CSS. So, you can use a markup like
<a href="#" title="Explicit alternative">
<span class="hidden">Explicit alternative</span>
</a>
Setting display:none on class hidden
If you doubt that your title attribute is enough, you could add an aria-label attribute, but it's not necessary.
I would like to add an entry to the table of contents of a wiki page that links to an arbitrary point inside the article. In my use case, I want to link to multiple 'header rows' inside a long table.
I tried both
<h4 style="display: none;">My invisible TOC entry</h4>
as well as
<div style="display: none;">My invisible TOC entry</h4>
However, it seems that the element does not get rendered at all. How do I add such an invisible entry?
I'll reply to your use case directly: «I want to link to multiple 'header rows' inside a long table».
I usually recommend to use normal headers in such cases. You will even be able to do section editing of the sub-table (or row) without breaking the general table. An example of sections which reuse existing cells/headers is the Feature map on mediawiki.org.
Alternatively, to have really invisible anchors, you can just add a <span id=linkme></span> or similar, often done via an {{anchor}} template.
Middle ways, i.e. anchors which are actually sections and display in the TOC, but are hacked and made inservible for viewing and section editing, don't really look like "solutions" to me.
Probably a silly questions, but I'd like to have a hyperlink withing another hyperlink, much like a
<a href="#somewhere">
This is the hyperlink,
and this is the other one
</a>
Aside from that it's not compliant and all, is there a way of doing this?
*Edit: the outer hyperlink is used by a carousel, and won't take the browser somewhere.
Lets think about this. What is the browser suppose to do?
Go to the first hyperlink, or the second one, or both?
If you want the first one, then the second hyperlink is not required.
If you want the second one, then close the first one before and reopen if necessary after closing the second.
If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.
Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.
Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you'd expect it to if you were listening for a hover event.
Disclaimer: While technically this can be done, that doesn't mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.
You can't nest it, but you can do something I did below..
<a href="somewhere">
This is the hyperlink,</a>
and this is the other one
May be you solution:
<form action="http://myhomepage.ru/" method="get">
second link within
<button>first link</button>
</form>
For some reason elements are added to my html code and the text is rendered as italic.
http://109.72.95.174/astudio/sites/lancelmaat/performanceinstallation?tid=22(see bottom lines, or content of menu "Contact")
I'm using CKEditor in Drupal for the input of some text areas.
But it is strange, because the elements are added only for specific pages...
Also, I cannot see the elements in Safari Developer bar (I only see style: italic), but I think this is a smaller detail.
thanks
One of your nodes ("a live library") has on unclosed <em> in the message body, near the sentence that says "Voorjaar 1998 werd ik uitgenodigd doo..."
This is (accidentally) incorrect HTML, but different browsers react differently -- some add extra <em>s to straighten things out and italicize the rest of the page, some ignore the error, etc.
Diagnosis and Solutions:
This is happening because the node has HTML, and the maximum length in your display happens to break inside of an italic block for that node.
This is could be caused by one or more of the following. (Tough to tell witch without knowing how you set up the page, but all should be easy for you to check)
1) The node's HTML is incorrectly written. (Solution: fix the code so that all tags are correctly closed)
2) The "Preview" of the node is left to be determined automatically. If you're using Full HTML in a node, you should always set the teaser manually so you don't get orphaned tags in the preview.
3) In Views, you have the "Trim this field to a maximum length" checked. If so, you should also use the "Field can contain HTML" option, since this forces Drupal's built-in HTML corrector to run
4) You have another module that's doing something similar to the options described above. That module might have it's own HTML correction options, or you can use Drupal's built-in corrector (admin/settings/filters/%your-filter)