well we can have name anchors in our page like the following code
<!---Some HTML Code-->
Mark 1
Mark 2
<!---After some HTML Code-->
<a name="Mark_1">
<!---After some HTML Code-->
<a name="Mark_2">
by doing so we provide links that to scroll up and down a page and all but
I have seen several times on the net that when you click a link and a new page is opened and it contains many subjects but page is scrolled to the desired position.
HOW THAT IS DONE
for example, in stackoverflow's recent activity when we click some activity the relevant page is opened and page is scrolled to that activity out of many... this is just an example.. i don't want how stackoverflow does it... what i want how is this done or is there any name for this technique
You can append a hash with following the the value of the id attribute of any HTML element. See this example: http://en.wikipedia.org/wiki/Html#Attributes
It links directly to the section about "Attributes". In this section it also discribes the technique :)
you need
Mark 1
note the hash
It's doing exactly what you're talking about, a named anchor. So the link looks something like this:
Notice the '#' in the href (... 3550910#3550910), that's the named part. Takes you right where you want to go.
Btw in your example above your link to the named anchor should be
Mark 1
Notice the hash
I think you have it right, but you just need to add the target attribute.
Mark 1
This will open the link in a new page and should position it down the the anchor. I normally use the full URL in the href section though.
Related
How do I create a link to a part of long webpage on another website that I don't control, that doesn't have an anchor tag?
I am trying to create a Course Outline Finder chrome extension for my university that you can use to:
Type course code in input box. (Use JS to filter out all other course codes)
Click the course code that remains after entering course code.
Course code link then leads you to a specific part of the university webpage that shows a list of course outlines for that specific course.
Ideally the webpage would have given an anchor tag like the following:
<h2 id="anchor">COMP150</h2>
Which I would then be able to link by doing the following:
<a href="https://www.ufv.ca/calendar/CourseOutlines/PDFs/COMP/#anchor>
But the website unfortunately doesn't have any id's for the h2 tags.
It instead has this:
<h2>COMP 150</h2>
<ul>
<li>COMP150-20000927.pdfEffective Fall 2012</li>
<li>COMP150-20011207.pdfEffective Fall 2019</li>
</ul>
Is there anything I can do?
You can insert the ID yourself in your extension:
document.querySelectorAll("h2")
.forEach(header => header.id = header.id ? header.id : header.textContent.trim())
Alternatively ask them to add an ID to their headers - they might agree
I have hundreds of footnotes in scores of documents.
All are in HTML4 format. I have needed to update all the pages to HTML5.
When using a code checker for HTML5, I am informed that "NAME" as be deprecated and it I am getting warnings in to change the code.
I can't find a code example to resolve this. I am not looking to do anything fancy. I don't want to display the footnote by hovering the mouse over the call to the footnote. I just want to be able to click on a footnote number and get to it at the bottom of the page and then return! I don't see how that is done without "NAME."
Currently as an example, this is what a my code looks like. (I make have ten or more footnotes on any given page.
<P>This is in the regular text
<A NAME="sdfootnote1anc" HREF="#sdfootnote1sym"><SUP>1</SUP></A>></P>
AND it calls this at the bottom of the page.
<p><DIV ID="sdfootnote1">
<A NAME="sdfootnote1sym" HREF="#sdfootnote1anc">1</A> - Here I am explaining it before I go on after the break to the next footnote.</DIV><BR>
Change name to id
<A CLASS="sdfootnoteanc" id="sdfootnote1anc" HREF="#sdfootnote1sym">
<A CLASS="sdfootnotesym" id="sdfootnote1sym" HREF="#sdfootnote1anc">1</A>
I know that linking in general looks like
examplesite.com
I was wondering how would someone link within the page it self. Sort of like when someone clicks on biography section in Wikipedia and it scrolls down to the part that has the biography but staying on the same page.
Any example could would be great.
I believe that you're referring to URL fragments (a.k.a. named anchors or bookmark links).
You'd create such a link like:
Jump to example
Which would take you to the part of the page where the element with the ID of example exists. Like:
<h1 id="example">example</h1>
In older versions of HTML, the name attribute was first used for this, however the ID has replaced that.
What you posted is actually a link inside a website. It does not contain a protocol such as http:// nor starts with // which would indicate a protocol-relative link, so it would load exampleside.com relative to whatever path you are currently on.
These are the kind of links you can use (each inside href="..."). We assume that you are currently on http://example.net/foo/index.html
https://example.com - goes to the "external" site https://example.com
//example.com - goes to the "external" site xxx://example.com with xxx being the protocol used to load example.net, so in my example http://example.com
www.example.com - goes to http://example.net/foo/www.example.com as it is not an external link
#foo - goes to the element with id="foo" on the current site (does not load anything from the server)
So what you want is probably the last example: ... and then id="foo" on the element you want to jump to.
Add some id to the element you want to link to, e.g
<div id="target">Hello</div>
Then you can link it by using #:
Go to target
Go to target
<hr style="height: 300vh" />
<div id="target">Hello</div>
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/
I'm trying to create a page where a user clicks on a link on the left and is taking to a specific section on the page.
Here is example. I've added as much of the code I'm using as I can.
What your trying to do works with the Id or Name attribute.
To elaborate: The anchor tag that your rendering as the target of where your page needs to go should be:
<a id="myId"></a>
or
<a name="myId"></a>
or both..
When you build a link to another part of the page, you need two parts, the link (that you click), and the target (that the page scrolls to).
The link's href attribute needs to start with a '#'. This signifies that the link is 'internal' to the page, and not another, external page.
The target can be either a named anchor <a name="something"></a> or an element with an ID: <div id="something">. You don't include the '#' in the name or the ID.
That's the key part you're missing. Take the '#' off the front of your <a name=""> values and it will work.
Let us know if that works, and we can help you develop this further: There's a lot more polish you could add, but let's get the basics working first.