I know using iframes is not always the best idea, but for my case it makes things easier. I have a website A which contains links to other parts on the same site (using <a name=...). I have a seconds site B which has an iframe containing A. Everything works fine, except the page hyperlinks, if you click on them, nothing happens.
Does anyone know if named hyperlinks are even possible in iframe? And if yes how to make them work.
EDIT:
Seems like I wasn't clear enough. The file is named test.html (http://www.domain.com/embedded/test.html) and contains a hyperlink at the top
Examples
then somewhere at the end there is a link
<a name="examples"></a>
So when you click on the top link the page should scroll down to the bottom link. I have a second page (http://www.domain.com/index.html) with the iframe containing test.html. When hovering over the link (inside the iframe), it shows http://www.domain.com/embedded/test.html#examples. I'm not and iframe expert, but this link seems as it would rather redirect to the actual file (to #examples), rather than jumping inside the iframe. As I said before when clicking on the link nothing happens. Just tested in in Chrome and it works. Seems like this is a problem specific to Firefox.
These parts of your question make me smell something: "links to other parts on the same site (using <a name=...)" and "named hyperlinks"...
A hyperlink for moving to an other part of the same page:
Goto BOOKMARK
And an anchor (bookmark) somewhere else in the same page:
<a name="BOOKMARK"></a>
These are working in every HTML-document, regardless they were shown in the iframeor not.
I had a similar problem. I too wanted a link in an embedded page to point to a bookmark in the containing page. But I am not sure if our circumstances are exactly the same.
A local link such as
<a href="#BOOKMARK">
will only look for an anchor in the same page as the link, i.e. in the embedded page. An approach such as
<a href="containing-page.html#BOOKMARK" target="top">
will only work if your link always references the same containing page. (The target needs to be specified, to display the page outside the iframe.) I am not sure if this will meet your needs.
If you want to re-use a common bookmark name in different containing pages, as I do, the design effectively requires the destination url to be treated as a variable, and that cannot be done using pure HTML. It requires javascript or similar.
It was in fact more elegant for me to add the bookmark link to the containing page, so that I do not need to standardize my bookmark names. This does not even need javascript, just a bit of css.
What I did was to position the bookmark link over the embedded display, so that it looks like it is part of the embedded page. In this example, the iframe is fixed at the top of the page and the bookmark link positioned over its top left corner.
<iframe style="position:fixed; left:0pt; top:0pt;" src="embedded-page.html"></iframe>
<div style="position:fixed; left:0pt; top:0pt;">
My Bookmark
</div>
With a bit of css refinement, this gives some flexibility of layout. For your issue, you may need to stick with javascript.
Related
So I am trying to do an menu for the viewer to easily access specific chapters of a long webpage.
I use anchor tags that links to different sections using ID's. But when I click the links from my menu the sections are located at the bottom of the viewport. On the other hand - if I try to access the section using the full URL the view port goes (as intended) to the top of the viewport.
What is up with the links from my menu - why are they not working?
https://learningbank.io/employee-journey/#cap03
Please paste the original code.
In any case, you may have set the anchors to high so when you click the link it sends you somewhere higher then where you intended.
Otherwise. You could always add more pages and have them as <link href=""> links. Thats if you have no other solution though.
Solved it. Or rather the Wordpress builder (Elementor) I use for making the website actually comes with an widget that handles anchor links. It seems the builder itself interferes with the regular practice of adding links.
I'm writing some documentation using GitHub's built in wiki (using Markdown syntax).
The problem I have had with anchor tags is that once I have clicked that anchor once, manually scrolled down to it again, and try to click it, it won't work anymore.
a) The place where the anchor links jump to.
##<a name="listofactions">List of Actions</a>
b) An example of an anchor link
[Back to List of Actions](#listofactions)
I also tried html in markdown syntax
Back to List of Actions
And even tried linking to the full url with the # and anchor appended.
Back to List of Actions
They all work, but when I manually scroll down to the anchor link again and click it, it doesn't bring me back to (a) anymore. Unless I click on a different anchor link.
How can I write it such that the anchor links can work regardless?
There is nothing wrong with your Markdown. This is simply how browsers work. The first time you clink the link (when viewing the same page), the URL in the address bar of your browser changes from http://example.com/path/to/your/page to http://example.com/path/to/your/page#someanchor. As that is a different URL, the browser will navigate to the new URL by scrolling to the appropriate position on the page. However, as you read the page and scroll to a different position, the URL remains the same. Finally, the second time you click the link,the URL is already http://example.com/path/to/your/page#someanchor so there is no change in the URL and as far as the browser is concerned, you are already there so no navigation happens and the page does not scroll.
There may be some JavaScript tricks you can use to trick the browser into behaving as you want, but those won't work on GitHub as they won't let you include any JavaScript in your pages for security reasons.
What you could do as a workaround (assuming you have a long page and want to easily find the specific location again) is first click the [back] button (taking you back to http://example.com/path/to/your/page) in your browser's navigation bar and then click the [forward] button (returning you to http://example.com/path/to/your/page#someanchor) which should trigger the browser to navigate to the location and scroll the page.
Try this:
...
<a name="listofactions"></a>
## List of actions
Mind the blank line between the HTML tag and the markdown markup.
Then call it via [link-to-anchor](#listofactions)
Should work.
Hope to have helped!
Add the attribute target="_self"
I just found that, in Adobe Dreamweaver CS3, this code segment seems fine in the design view,
Test Anchor
but if I add an "id" attribute to this "a" tag, like this,
<a id="test" href="#">Test Anchor</a>
there would be an icon at the left side of the "a" element, something just like an open book. (I have no privileges to upload image)
What is the meaning of the icon? Is there anything that Dreamweaver implies? I've tried to google some groups of keywords, and got nothing but ads.
Any help? Thanks a lot!
This icon (should look like a shield with an anchor on it) is a Dreamweaver design view indicator. This indicator is used to identify "named" anchors. No image that will be uploaded to your site, so don't worry about that. Anchor () tags with an ID are considered "named" as you can add a hash to the end of your URL to have the browser "jump" to the named/ided element. If you file is test.html and you visit your page with test.html#test then the browser will load up your page and "jump" to the named anchor. In recent browsers (not sure how far back, but likely far enough to not worry too much about it now) anchors with an id attribute value will work in the same manner as those with a name attribute value.
If you do not like this icon appearing when you have a couple of options:
Edit (Dreamweaver on Mac) -> Preferences, Invisible Elements, uncheck Named anchors.
Or View -> Visual Aids -> Invisible Elements. This option turns off all invisible element indicators listed in the preferences, so make sure you know what things your turning off.
It's probably just using the symbol to identify text on the page that's a link, save the file and load it up in your web browser, chances are the icon isn't actually part of your code.
Within a standard SharePoint publishing site, editing the homepage, entering lots of content and then placing a link to the top of the page using the following anchor link doesn't work:
back to top
Clicking on the link above does nothing. However, other named anchors (such as
<a name="test"></a>
and
work fine.
Has anyone come across this issue before?
<a href="#" /> is not supposed to bring you to the top of the page. It targets the empty fragment and basically neuters the default behavior of the link most of the time.
I suspect your <a name="#" /> solution is relying on an artifact of your browsers, because an anchor named # should be called ## (or more probably #%23) in the href attribute of the link.
Since you have to create an anchor anyway, it might be best to give it a meaningful name like TOP and target it using back to top.
I've gotten around it by placing
<a name="#"></a>
at the top of the page, but it would be good to find out why it doesn't work normally, and if there are any other nicer solutions out there.
I see on some website (like StackOverflow, yahoo, the US Homeland Security department, ...) a word associated to a link that, when clicked, not only loads a page, but also, displays that page at the exact location where the contain related to the word starts.
How can I obtain that with ASP.NET MVC? (by the way, do I need javascript for that?)
Thanks for helping
Go to the other content
<a name="jumpHere">Some content</a>
Also the URL can have /yourpage.html#jumpHere or with variables, /yourpage.html?var1=foo&var2=bar#jumpHere.
Since we're talking about the hash (#), it's usually used for jumping to a specific part of the page. Because of that, it won't reload the whole page. This is useful for web applications that move from one view to another using only AJAX. To make each view bookmarkable, JavaScript "saves" the state (what view you are on) using location.hash to the URL. The next time you open the URL, JavaScript reads it and loads the correct view. In HTML5 this is superseded by pushState.
1) Find the coordinates of the element on the page
2) window.scrollTo(x,y)
Its called an anchor tag.
Place this in your HTML.
<a name="name"></a>
If you call this URL, it will jump to that place.
html-file.html#name
See: http://www.w3schools.com/tags/tag_a.asp
You can use a named anchor to do this with HTML, without javascript. here is a link explaining this.
It is very simply done with id tag of differnt html elements
for eg :- an div element if it is having "footer" as its id and is placed at the bottom of the page then, http://url-address-to-thatpage.html#footer will load the page and scroll it too the footer. (adding the "#idoftheelement" after the page url)
It is also possible to load and scroll the page with javascript.
You need to create a named anchor within the page. This will have the result you're talking about, almost like creating a "bookmark" within a page. No javascript required.
First, create the anchor using the <a> tag with the name attribute specified (in this case, section1):
<a name="section1"></a>
Then, to link to that anchor from the same page, just use something like this:
Go to Section 1
If you're linking to that anchor from another page (in this case, mypage.html), append #section1 at the end of the url:
Go to Section 1 in MyPage.html
For more information, see here.
Another way to do it is with the "id" attribute if it's not an anchor tag you'd like to bookmark. For example:
<div id="bookmark1">Content...</div>
Then, you can link to it with an anchor tag like this:
Go to content
Or link to that spot on the page by appending a #bookmark1 to
http://yourwebsite.com/page#bookmark1