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

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 >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.

CodePudding user response：

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 >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.