What can cause Anchor Links to reload the page? - html

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.

Related

Is there a way to open a page in an iframe from the previous tab?

I have a website where I host cooking recipes, on the index of the site there is a "recent dishes" button that you can click to view my most recent dish. The problem arises when you factor in that my most recent dish is designed to be viewed inside an Iframe in a "dish index". The dish index has a sidebar with important information that I would like to not have to implement a javascript solution for.
In summary, is there a way to format a link to open the index page, and then open the iframe inside the page?
just for extra clarification, as it seems there are a bunch of questions asking how to do a similar sounding thing.
click link.
link open.
Iframe inside of link opens to a specific page, separate from the default.
Here is a website that has the behavior that I'm looking for, but they're using Framesets and frames which were deprecated in html4 i believe. Please note that the sidebar does not refresh/load when a link is clicked, but the url does.
I've been googling for about 15 minutes now and have not found a solution, other than the javascript one.
From what I understood you want to have a menu and once a link inside this menu has been clicked you want to load different pages. If that is correct then make the menu the main page and then change frame src for different pages. You use target in the link to target the iframe
A short example can be found below
Page 1
Page 2
<iframe src="Page1.html" name="myIframe"></iframe>

Menu with anchor links to sections of a page (#) redirect to another page within the site (WordPress)

I've encountered a problem that never happened to me before: on this test site: http://c2040213.ferozo.com/dimi/ whenever you click on one of the sub menu links from the "Vender" menu item, they start redirecting to the "Comprar", even though on the href there is no indicator that the link itself redirects to that site, instead, they are anchor links to http://c2040213.ferozo.com/dimi/#tasa for example.
So I'm having trouble discovering why when I click a link that goes to http://c2040213.ferozo.com/dimi/#tasa, redirects me to http://c2040213.ferozo.com/dimi/comprar
I'm working on the latest version of WordPress and with Elementor.
Thanks a lot in advance, feel free to ask for more information if needed.

Why my anchor link from a secoundary page is not working?

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";

JSP Include vs Iframe for persistent header/footer?

I'm sure this is a beginner question, but I just finished a course in web programming with JSP, and I noticed that our book (Murach's Java Servlets and JSP) often used jsp includes to add in the header.jsp and footer.jsp for every page. So let's say that I have a page with a header that contains 4 buttons (b1-b4) and a footer with a "contact" button. Each button would open its corresponding page (b1 opens b1.jsp, etc.) and in each jsp page the header and footer are included every time. I noticed that with this, whenever I click a button, the entire page, including the header and footer, have to be recreated, resulting in a quick flash from a blank white page to the page's content. I found this a little distracting, making the header/footer feel less 'persistent' a more just slapped onto every page.
I was wondering, what if I just had 1 index page with the header and footer and in-between I placed an iframe. Then when someone clicks a button, it would load the new page into the iframe and not have to reload the header/footer constantly. So I'm curious to see what is normal practice and if includes are the way to go, how do I get rid of that annoying flicker?
I did try with an iframe, but now the problem is that whenever I refresh the page, the iframe goes back to empty (because the index page is refreshed). Is there any way to get around this and refresh what is inside the iframe rather than the page itself?

how can I navigate to a new page without reloading part of the current page?

I have a mybb forum, and a plugin that adds a public/private chat to the bottom of the forum (it adds a div before </body>).
I would like to navigate the forum without reloading the chat.
In this question, Josh Stodola explains how to change the url.
In this question, there is a small JavaScript code to change the url.
I've also read about HTML5 iframes, but I still can't imagine how can I use it all together.
Should the chat be inside an iframe? an iframe inside the forum? should the forum be inside an iframe, and the chat into another? And those 2 iframes, inside a new page???
I'm messed up...
You should have a window containing chat and an iframe for your content. This will allow you to navigate your forum and only reload the iframe vs the top frame.
<body><iframe src="someurl"></iframe><div>Chat</div></body>
A few things to note: doing it this way will not change the address bar while you navigate and this makes users confused when they try to link to pages and it takes them to the home page or wherever they started browsing your forum.
If you want to do something more fancy checkout pjax. It will let you change urls for the whole page while only loading certain content.