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?
Related
Recently, I've been working on a WordPress website powered by the Divi theme and builder. Some of the pages have a menu with the URLs set to ID's of certain sections of the page (anchor links) but when clicked, the page refreshes and then scrolls to the relevant section.
What would cause a page to refresh when an anchor link is clicked? I'm baffled!
I've tried changing the URLs (to the below) but still have the same problem.
https://www.domain.co.uk/tables/#breakpoint-one
https://www.domain.co.uk/tables#breakpoint-one
In static HTML, coding something like this would take a matter of minutes so I cannot understand why the page refresh occurs.
Is the refreshing ocurring only the first time you click on an anchored link? or does it happen every time.
Perhaps you have POST data present (like you arrived on the page after submitting a form). I think the behaviour you describe matches that scenario.
I have a ruby on rails application. When clicking on a link which leads to a different page, where no background is set for the body element, the background does not change. It does however if you reload the new page.
I tried overwriting the background image on the new page which the link leads to, but that didn't help either.
All Code can be found here but the links I am talking about are for example Inhaltsverzeichnis github. The CSS I am talking about is
body {
background-image: url(<%= asset_path 'background.jpg' %>);
background-position: center;
background-size: cover;
}
in the corresponding view. It isn't included in the DOM if you click on the link, but is still is shown in browser.
The current master branch is also deployed here.
If you go onto that page and click on "Inhaltsverzeichnis" in the Navbar in the top left of the page you go to a new page and the background image stays. If you now reload the page the background image will vanish and the site looks like it should.
Can someone explain me what I am doing wrong? It looks to me as if the site somehow gets cached incorrectly or something.
Also, the problem only occurs if you click on the links within the page, if you type the url yourself, the page loads correctly in the first place.
Thank you in advance for any help :)
I found out what the problem is.
Rails by default bundles turbolinks, which does not reload the <head> of a new page if you click a link, to make loading pages faster. So as I put my style tags within the <head> of the page, these attributes didn't change until you reloaded the page. The quick fix was to remove turbolinks, but in the long run I will probably try to reintroduce it but then properly configure my page to use it to my advantage.
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.
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.
The bookmarks stopped to work in my website URLs.
For example: http://www.website.com/page#91
doesn't slide anymore the page to the <div id="91">.. and it was perfectly working before.
It just open the page from beginning, or last slided position.
yes, the issue was that I hided it with css.
If the element is not displayed, it doesn't work.
I know, it sounds obvious, but the point is that I was using an empty element just to slide the page.