We Keep Coding

JQuery click() does not load page properly if page has not been loaded via navbar first

I am working with this Template from templatemo.
I wanted to include some references to other parts of the website in the body text (e.g. Please "contact me" for further information). If you click "contact me" the page should navigate to "Contact" in the same manner as if the user clicked on the navigation bar to navigate to the page (with the same animation).
In order to so, i added the following code to trigger a click event:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:loadPage(5);">contact form</a></p>
And the function to trigger the click:
function loadPage(pageNo) {
$(document).ready(function() {
$('.nav-item').get(pageNo).click();});
}
So this code is working, if I click on the reference the page changes as if I clicked the navigation bar. BUT:
If I reload the page and click on the reference, the page navigates to the contact page, which then however is not diplayed properly (the contact form and the google maps view are missing).
If I reload the page, first open the contact page via the menu, then switch to the page with the reference and click on it, the contact page is loaded properly.
This behaviour is also shown if I reference another page (e.g. the Gallery). The gallery elements are displayed (the page is not completely empty), but the spacing between the elements is not correct.
It seems like every page has to be loaded at least once via the navigation bar. If this has happened, all pages are displayed properly when opened via a reference in the text.
Thanks for your support.

Your template use Hero slider + some customs JavaScript functions to move between "pages", so you need to use the same functions to get the same behaviour.
Doing that will work:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:goToPage('Contact');">contact form</a></p>
You need to add this JS function:
function goToPage(page_name) {
// Retrieve the <a> tag with the page_name
// page_name is the string of the page in the navbar
page_link_a = $('.navbar-nav .nav-link').filter(function(index) { return $(this).text() === page_name; });
page_link_li = page_link_a.parent();
// Trigger js code from hero slider
page_link_li.click();
// Trigger js code from templatemo
page_link_a.click();
}
The function goToPage() take one parameter, the string name of the section so if you have a section named My Gallery you need to put that, not my-gallery nor an index.

script written inside a page affects in another page

I have multiple pages that loads inside an div while navigate, the script written inside page 1 overlaps with the script written in page 2. Likewise the script that loaded in previous page also loads in the current page. I use load() to load an html page
i have tried remove(), off(click) but not succeed
$(document).off('click','.areaClk');
$(document).on('click','.areaClk',function(){
$(this).addClass('keyenable');
});
code in page 1 should not works in page2

well,you can use "window.location.pathname" to get the current webpage url on which your script is applying.If you dont want your script to apply for a specific page you can do something like below
//here give url where you want your script to apply
if (window.location.pathname == "localhost/mysite/page1")
{
// add script that you want to execute only for specific page
alert("applying only for page 1");
}

How to delay background to show after the popup appear and disappear

I want the popup to show once the page is load. I have made the popup everything working fine I but there is one issue page shows just for a split second before the popup. I want the popup to load first without showing the page.
This is the link of the page http://test2429d.vinnugrunnur.is/home popup has video which runs for 7 second and disappear.

Looking at your sample site, you will have to hide the content and unhide it when you hide the popup.
The reason being your popup is dynamically being added using Javascript. So the popup won't get shown until the page is completely loaded.
There are several ways to do this. If this popup is only limited to this page, you can perhaps use the body class as a reference to hide your .jupiterx-site.
body.elementor-page-10 .jupiterx-site {
display: none;
}
And your Javascript should unhide it after 7 seconds
jQuery(document).ready(function(){
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
jQuery('.eael-lightbox-popup-window').fadeOut('slow');
jQuery('.jupiterx-site').show();
}, 7000);
});

Displaying loading gif within html object

I have a main page with a number of buttons. When a button is pressed the target page is loaded as an object within a div on this main page where target is the page to be displayed within the object.
<script>
.... check which button is pressed and assign path to target
var objectContent = "<object type=\"text/html\" data=\"" + target + "\" height=\"500px\" width=\"100%\" style=\"overflow:auto; min-height:400px;\"></object>";
document.getElementById('content').innerHTML = objectContent;
</script>
html
<div id='content'>
</div>
All works and the target page loads fine within the main page div.
Sometimes it can take a while to load the content and so I would make use of a loading gif. I have been using one on whole pages but I would like one just on the content within the div.
In a target page I have the following to display the loader:
<script>
$(".loader").fadeIn("fast");
</script>
and this to hide it once the page is loaded
<script>
$(document).ready(function(){
$(".loader").hide();
});
</script>
This is not working. The page loads fine but no loading gif. No errors.
If I debug in the browser I see the gif as I step through so it must be loading and hiding, but not when I load the page normally. I suspect it is loading too late or hiding too soon.
Does my javascript show the loader as soon as the page starts to load? I have placed it at the beginning of the body.
Or is something I am doing to hide it before the page is fully loaded? Either way, can anyone see what I am doing wrong?
UPDATE AND ANSWER
Add the onload to the object tag as follows:
var out = "<object ... onload=\"contentLoaded(this)\"></object>";
<script>
function contentLoaded() {
$(".loader").hide();
};
</script>

Then why not leave the .loader element empty and do something like this
$('.loader').fadeIn('fast').html('<img src="loading.gif" />');
And this
$('.loader').hide().html('');

Is the trigger for the loading gif showing only within the loaded-in page?
If so, by the time the browser receives the instruction to show the loader, it's already fetched the data.
I imagine the majority of the time is spent waiting for the content so try showing the loader just before this happens:
document.getElementById('content').innerHTML = objectContent;
You could always create a localised loader image, set within the innerHTML, as you said you had a global one already.

JavaScript Timers and Page Navigation

Hopefully a simple question; if I create a timer using JavaScript embedded within my page, and I then navigate away from that page, will the timer be automatically cancelled or will it continue to run?
EDIT
Expanding the question, if that page were to perform a post-back (in my case, this is ASP.NET Forms), and the script is rendered as a part of the page markup, would the original timer created when the form is first displayed be cancelled during that post-back or would a second timer be created?
Example (rough typed):
<body>
...
<script type='text/javascript'>
function doSomething() { ... }
x = setInterval(doSomething(), 60000);
</script>
...
<button type="submit" />
...
</body>
Following the post-back, a new timer will be created as a result of the page being re-rendered, how many timers are now running (assuming the post-back was within the interval specified by the timer)?

It'll be automatically cancelled. JavaScript code is executed within the context of a page.
Think about a page like an application. Switching to other page is like closing an application and opening a new one. This also applies to a full page refresh (i.e. when you press F5).