When jumping to anchors on a JSP, HTML anchors do not work. Eg, something like
Link
...
<div id="name"></div>
fails because the server actually looks for a file named "filename.jps#name" and returns an error. Is there any workaround for this?
What you describe is called a fragment identifier and the target can be a named anchor or an identified element, for example
go to foo
<a name="foo">foo</a>
<div id="foo">foo</div>
with the named anchor variation demonstrated in this demo
Please also note that the HTML5 specification has deprecated the name attribute for a elements has been dropped, so an id would be the only HTML5 valid way to navigate to a fragment identifier.
I think that you've set a <base> tag in your document. All identifier links are also relative to it. If this is true, then you need to change your identifier links from
<a href="#name">
to
<a href="${pageContext.request.requestURI}#name">
See also:
Is it recommended to use the <base> html tag?
Related
Which one is the correct way or using a tag in this context?
<a name="test">Test</a>
or
<a name="test></a>Test
the correct is the first one
Test
The first example is correct
<a name="test">Test</a>
The correct syntax is link text
"name" is not a valid attribute for <a> tag. The allowed attributes are:
download, href, hreflang, media, ping , referrerpolicy, rel, target and type. Of course, <a> tag also allows global attributes and event attributes in addition to these.
If you want to use custom attributes consider using data- format like data-name
eg.
link text
I want to add a #something to an HTML page.
An example of this would be #History on http://en.wikipedia.org/wiki/Stack_Overflow_(website).
How can I do it?
If you inspect the HTML on that page you'll see how it's being done.
The # sign in an anchor tag's href will tell the browser to move to the element that has a matching ID (where ID = everything that comes after the # sign).
For Example:
My Link
<div id="MyLocation">The anchor destination</div>
You can also include it at the end of your URL and it will take the user directly to the destination on page load.
http://en.wikipedia.org/wiki/Stack_Overflow_(website)#History
Use a name or id attribute on an <a>nchor:
<a name="foo"></a>
<h1>Foo</h1>
<a id="bar"></a>
<h1>Bar</h1>
Pointing your link to http://www.example.com/#foo or http://www.example.com/#bar will scroll the browser down to the respective <a>.
The specification of HTML4 lists name first and id second. (Notice the # in the link? You can also look at the sourcecode of the website!)
When the name or id attributes of the A element are set, the element defines an anchor that may be the destination of other links.
According to HTML Anchors with 'name' or 'id'?, in HTML5 it can be id="foo" or name="foo" with id="foo" having precedence.
In wikipedia's table of contents, by simply putting a hash tag and removing the whitespaces using underscores on the desired content, we can jump to different contents in the same page. Is there a HTML tag to do this? Or must I use Javascript? If so, give me the syntax in jQuery since I'm more comfortable with it. Thanks!
Fragment identifiers on URIs link to elements with matching ids.
section name
...
<div id="foo">section contents</div>
Normally you would link to named anchors, like so:
<a name="top"></a>
go to top of page
But you can use any matching ID really.
Total newbie question, but I cant figure out what im doing wrong. I want a make a link that jumps down the page to a header. I believe these are called fragment links. Here is my code thats not working:
My Link
<div id="cont">
<p>Lots of content here, abbreviated in this example to save space</p>
<h2 id="Frag">Header I want to jump to</h2>
</div>
Pretty sure you need to specify the name attribute for an anchor to work, for example:
Skip to content
<div name="content" id="content"></div>
Okay, so 'pretty sure' was a euphemism for 'guess' and I thought I'd look it up, so, from the HTML 4.01 Specification we get this from section 12.2.3 Anchors with the id attribute:
The id attribute may be used to create an anchor at the start tag of
any element (including the A element). This example illustrates the use of the id attribute to position an anchor in an H2 element. The anchor is linked to via the A element.
You may read more about this in Section Two.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to Section Two above for more details.`
To carry on the convention of guesswork, perhaps your page isn't long enough to allow jumping to that content (that is, your page might have nowhere to jump and the content to jump to is already visible.)
Other than that, and from the same section of the spec previously linked, here is some general info on when to use what as the anchor identifier (in terms of the link its self) that could be otherwise valuable:
Use id or name? Authors should consider the following issues when
deciding whether to use id or name for an anchor name:
The id attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.).
Some older user agents don't support anchors created with the id attribute.
The name attribute allows richer anchor names (with entities).
Your code works fine in firefox anyway you can use as well name instead of id..
http://www.w3schools.com/tags/att_a_name.asp
if you want to have a nice scrolling you can use jquery scroll http://api.jquery.com/scroll/
Today I was working on a tab navigation for a webpage. I tried the Sliding Doors approach which worked fine. Then I realized that I must include an option to delete a tab (usually a small X in the right corner of each tab).
I wanted to use a nested anchor, which didn't work because it is not allowed. Then I saw the tab- navigation at Pageflakes, which was actually working (including nested hyperlinks). Why?
Nested links are illegal
They must be doing some really crazy stuff with JavaScript to get it to work (notice how neither the parent nor the nested anchor tags have a name or href attribute - all functionality is done through the class name and JS).
Here is what the html looks like:
<a class="page_tab page_tab">
<div class="page_title" title="Click to rename this page.">Click & Type Page Name</div>
<a class="delete_page" title="Click to delete this page" style="display: block;">X</a>
</a>
Actually, the code I had pasted previously was the generated DOM, after all JS manipulation. If you don't have the Firebug extension for Firefox, you should get it now.
Edit: Deleted the old post, it was no longer useful. Firebug is, so this one is staying :)
I suspect that working or not working nested links might depend if your browser renders page in strict mode (e.g. XHTML DTD, application/xml+html MIMEtype), or in "quirks" mode.
In spite of nested tags are illegal but writing them using JS will work!, try this:
$('<a>', {
href: 'http://google.com',
html: '<a>i am nested anchor </a>I am top Anchor'
}).appendTo($('body'))