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 am building a website and when I click on one of my header's page links, it loads the whole page again, rather than preserving the header and only loading the main content. For example:
When you click on a button on the sidebar of YouTube, it will, for example, load the watch later playlist, and preserve the search bar and sidebar. How would I go about doing this on my website?
Have a look at using aJax. This should resolve your issue.
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.
I use the same iframe in multiple pages of my web application. I want to have the iframe load once on the login screen and then when brought to the next page the same exact iframe will still be loaded and not refreshed.
Is there any way to keep a part of a webpage loaded and static when directed to the next page? Some sort of static footer with the iframe would be great.
Any help is appreciated thanks.
In the case of submitting a form or using a link, you can target yet another Iframe on the page. The target will load the new page, leaving the original alone.
I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });