I have a link on one page that needs to go to a different page, but load to a specific section on that other page.
I have done this before with bootstrap but they take all the 'coding' out of it, so I need to know how to do from scratch. Here is the markup I have based on this link (not the best resource, I know): http://www.w3schools.com/html/html_links.asp
**Page One**
<a href="/academics/page.html#timeline> Click here </a>
**Page I am linking to**
<div id="timeline" name="timeline"> ... </div>
Can I do this with just HTML, or do I need some JavaScript? If I need to do it via JS, it needs to be on the target page, right?
I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:
<div id="timeline" name="timeline" ...>
To the old format:
<a name="timeline" />
You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.
Also, check out this similar question.
You can simply use
<a href="directry/filename.html#section5" >click me</a>
to link to a section/id of another page by
To navigate to a section of another page use:
<a href="example.html#example-section>name-of-link</a>
The example.html would be the page you want to go to, and the #example-section would be the name of the id on that page that you want to navigate to.
To link from a page to another section of the page, I navigate through the page depending on the page's location to the other, at the URL bar, and add the #id. So what I mean;
This takes you #the_part_that_you_want at the page before
I tried the above answer - using page.html#ID_name it gave me a 404 page doesn't exist error.
Then instead of using .html, I simply put a slash / before the # and that worked fine. So my example on the sending page between the link tags looks like:
El Chorro
Just use / instead of .html.
To link from a page to another section just use
my first div
Related
So I have two separate HTML files. The first one holds a section with id="portfolio". The second one holds an a href. When I click the a href in the second HTML file I want to go to the first HTML file at the #porfolio section position. I know how to open the first HTML file from the a href. I also know how to get to the #porfolio section from the first HTML file. What I don't know is how can get to the #portfolio section in the first HTML file through the second HTML file. So how can I do that? Thanks in advance!
First HTML:
<section class="no-padding" id="portfolio">
...
</section>
Second HTML:
<a class="page-scroll" href="#portfolio">Portfolio</a>
This should work when included in second.html:
<a class="page-scroll" href="first.html#portfolio">Portfolio</a>
To clarify: you have 2 pages open in a webbrowser (the same webbrowser) and you want to jump back and forth between the 2 different pages, causing the web browser to change tabs/windows and re-display the requested page(s) at the anchor point you specify.
You need to talk to webbrowser and get it to do the work for you. The answer is browser specific.
I would start by creating child page (target='_blank') of original page and seeing what individual browsers allow you to get away with. Your mileage may vary, as they say.
Sooo.. I've got this navigation on the frontpage. I'm trying make it link to an anchor on another page.
www.oddfuse.com
This is the anchor link:
<a class="hover" title="Skills" href="/page#skills">
As you can see, it does not redirect to the specified page.
However it does work when typed directly into the address bar:
www.oddfuse.com/page#skills
This also works:
<a class="hover" title="Skills" href="/page">
But with the hash, I get no response whatsoever.
Any ideas on how I fix this?
Okay, so it turned out that it was the jQuery Mobile somehow messing with the anchor tags.
I needed to put data-ajax="false" in the link, and it now works perfectly. TMYK.
Found the solution here
can you try including the file extension?
i.e.
<a class="hover" title="Skills" href="/page.html#skills" />
I'm wondering if it thinks the # is part of a file name that can't be found.
If you want a link to jump a specific location on a different page, you'll need to replace #anchor with the full URL for the target page, similar to:
<a class="hover" title="Skills" href="http://oddfuse.com/page/#skills">
I've got an un-complicated .aspx page and I've added some bookmark anchors at that re-direct to a different page with bookmarks.
The anchors look like this:
From http://www.davincispainting.com/painting-solutions
<a class="questionLink" href="painting-answers#Answer7">Paint Chalking</a>
When you click on this Hyperlink in Firefox, the URL does indicate the bookmark:
http://www.davincispainting.com/painting-answers#Answer7
However, this do not navigate to the actual bookmark in the 2nd page
<h2 id="answer7">Paint Chalking</h2>
The problem occurs in Firefox but not IE8.
I originally thought that the Routing was causing the issue, as I do not inlcude the .aspx page extension in the link. So I added the extension, which still doesn't work.
<a class="questionLink" href="painting-answers.aspx#Answer7">Paint Chalking</a>
How can I debug this problem?
Does the page file end in an extension? If so, make sure your link includes the extension. Also, check your capitalization. Also, the standard practice for the bookmark syntax is to not navigate based on ID of a random control, but rather the anchor tag. See W3 Schools Example.
You should have...
<a id="answer7" />
<h2>Paint Chalking</h2>
and the link should look like this:
<a class="questionLink" href="PATHTOPAGE#answer7">Paint Chalking</a>
Where PATHTOPAGE is replaced with the absolute or relative path to the other page. Make sure that resolves.
The problem was the name itself:
<h2 id="Answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>
is different than:
<h2 id="answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>
I want to link to a section of a dynamic page using the # anchor. Something like this:
<a href=page.php?id=3#section-name>LINK</a>
It didn't work. What is the right way to do it?
I'm not using a direct link, but a redirect like header("Location:page.php?id=3#section-name") from another script.
I have a section named section-name in file page.php. I guess page.php has a problem figuring out the value of the id to process (3 or 3#section-name). I am redirected to page.php which has its content repeated vertically.
You've only presented half of your code so I can only give a sample of the proper way to do it:
<body>
<a name="top"> </a>
<a href="#top">
Go To Top Of Page
</a>
</body>
When using anchor tags, you can target an element by its ID. Browsers will look for the ID before it looks for the name attribute when the link refers to such.
<a href="#section-name>LINK</a> will go directly to <div id="section-name"> if it exists.
Here's an example
Read: HTML Anchors with 'name' or 'id'?
A typical anchor tag works as follows:
A href link tag is written like so:
Jump to a001
See the #a001 above? That is referencing an id in the HTML page, and it will jump to it if you click this link.
To provide an example of how this id that we would jump to might look on a page, look below.
<li id="a001">text here</li>
Reference
I`ve seen on various websites, some links appear like this: http://www.myserver.com/page.html#something and when I click on it, it just moves to another portion of the page.
I want to know how to do this. Is it only the URL of the <a href> atrribute?
The fragment at the end of the url coresponds to an ID on the page you're visiting.
If in my page I have a section such as:
<div id="comments">
...
</div>
Then I can take the user to this section by attaching #comments to the pages URL
(http://www.example.com/page.html#comments)
Link to comments
Update
Some of the other answers here correctly point out that you can create an anchor with a name attribute as: <a name="example"></a>.
Although this is technically correct, it's also a very antiquated way of doing things and something I'd recommend you avoid. It's very 1997 as some might say :-)
The text after the hashtag corresponts with an anchor on the page. An anchor is a hidden element on the page which you can link to.
Think for example about a large page with an to top link in it
To create an anchor use:
<a name="C4"></a>
To link to it use: Text
Or you can even link to an id of an element
Check out: links (aka anchors)
Also note that you can use <a name="something"></a> or <a id="something"></a>
or using divs <div id="something"></div>
This is a link to a bookmark on the given page (or even just #something on the current page).
To make it work, you need to define something. You can do this using the name attribute of an <a> tag.
http://programming.top54u.com/post/HTML-Anchor-Bookmark-Tag-Links.aspx