In run in to some trouble with referring to an anchor at another page.
In Chrome it works in the way I expect it to work, however it won't work in Firefox.
The problem occurs on the page from the following link and then the link in the last line, called 'Artikel 8'.
https://toernooi.skeuvel.nl/programma/
The idea is that it goes to 'https://toernooi.skeuvel.nl/reglementen/' and scrolls down to 'Artikel 8'. Someone who can tell me how to fix this problem?
I'm not having much experience with html...
The page is in dutch, but that won't be a problem the understand the question I think...
In your anchor you are referring to a URL with an appended .html suffix. Remove that so the link is like so:
Artikel 8
Be aware that when a page scrolls down to a fragment identifier, it can only go so far as the height of the page allows. In its current form, the page you are linking to is not heigh enough for the fragment identifier to position itself optimally.
Related
While I'm trying to switch between different sections of my webpage I am getting the following page as shown in the image. How can I solve this?
you need to provide context for your question for people being able to help you. I imagine you are trying to navigate between different html files, by clicking into an anchor tag, is that correct?
Go to next page
So in that case, you might be adding a wrong relative route, otherwise I think you should add more context to your question.
If you are trying to switch between sections on your webpage. Try adding section and giving them id. Then from any anchor tag you can reach the section by adding the following code.
Section 1
you can use jquery
$(".div").load("index.php .yoursection");
To switch between sections on your webpage,Use the id selector ,
Example:
<p id="opening">Hyperlinks are utilized by a web browser to move from one page to another...</p>
Now add the anchor tag to link,
Opening
"Opening" will be displayed as a link on the webpage. On clicking it, you will be switched on the same webpage where the id is "Opening".
In this example it is the paragraph tag.
If you trying to switch into another webpage,
Go to home page
I have a link on a page like this
use our contact form.
Then in about-us.php I have
<div class="extra" id="contactform">
When I click the link, the browser takes me to the correct page BUT
The address bar momentarily flashes up "about-us.php#contactform"
Then it falls back to "about-us.php#" and the browser doesn't move to the anchor.
This is so simple, yet I can't see what is causing it. I have several other anchors with exactly the same format that are working. I also have a link that is called from PHP to the same anchor, and that works.
Mystified!
PROBLEM SOLVED
It was the PHP and Javascript bit of the overall page code that caused the problem. It was overriding the anchor link. Having wrapped the javascript in a PHP if() statement, it is under control.
Moral of the story: look at everything and not just the bits close to the apparent problem.
I have the following problem with one of my current projects.
I would like to achieve that when you click on a link which is on a secondarly page, it sends you to the home page but, not at the top of the homepage (by default), I would like that it sends you where a specific ID is.
At the moment I have the following URL in this special link but it doesn't work
link
I have tried different ways I saw in this community but I didn't have luck. At the moment when you click it send you to the homepage but at the top and my ID is almost at the end of the page
How can I fix it please?
Thanks
Kindly use below code on page load. make sure you call this once DOM is loaded. This will scroll the page to this anchor.
location.hash = "#contact-anchor";
I have two pages, when I link from page one to an anchor in page two it takes me to the right place, but none of the page before the anchor link is loaded. Both pages are php as I'm using an php menu
If i use
<a href="pagetwo.php">
this loads the full page two as expected, no problem
but,
<a href="pagetwo.php#anchor1">
only loads the bottom half of page two, from the anchor1 id. If i refresh the page it remains the same.
I've done links to anchors before in html and no problem, is this an php issue or am I missing something?
I've spent most of day here searching previously asked questions, but nothing similar, if there is one please let me know.
Not sure if I should be tagging php?
Update, Inspected elements(firefox) and all code is there, but its, just not showing above anchor id. Same in Google and ie 8
Another update, saved both pages as html, no change....??
Deleted all php code...no change
Deleted all jquery..no change
Now this has to be something so simple that i'm missing!!
In Firefox problem remains
ie 8 does not work, but when you refresh shows whole page
chrome, loads whole page initially, but then only loads from anchor id
Double checked validation, 2 errors, now correct, still same
My wrapper is set to-
.maincontainer {
width: 100%;
min-height: 100%;
position: relative;
overflow: hidden;
}
When I change the overflow to visible the problem goes away, anchor links works perfectly.
But now page is runs on and on...
Now I've changed some bottom margin and padding settings and all works perfectly!
So I've kind of answered my own question....but..that leads me to two more questions!!
Why did the overflow hidden cause the anchor link to display like that?
I more or less solved this by using a process of elimination and then isolating certain elements in the html, which led me to the CSS. How should you go about solving an problem like this?
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.