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.

Display Call To Action bar on page load

I am using the following code to load the bar on click but I can't figure our how to load it on page load automatically.
<script>
var autohide;
$('body').prepend('<div id="bn-bar"><b>DON\'T MISS OUT!</b> Only 9 seats remain for the Google Tag Manager training on May 22! Book Your Seat Today!<div id="hider"> </div></div>');
$(document).ready(function(){
$("#hider").click(function(){
$("#bn-bar").animate({
top: "-50"
}, "fast","linear", function(){});
})
$("#bn-bar").mouseover(function(){clearTimeout(autohide);});
setTimeout(function(){$("#bn-bar").animate({top: "0"}, "slow","linear", function(){});},2500);
autohide = setTimeout(function(){$("#bn-bar").animate({top: "-30"}, "fast","linear", function(){});},10000);
})
</script>
Basically I am trying to load a the message when user enters my website and I will be inserting it via Google Tag Manager. Below is a page where I found the code:
Creative Tag Manager – Ads, Promotions, and Visitor Messaging -Lunametrics

Setting the firing rule for this tag to the default 'All pages' rule will cause it to be included on every page load. To fire it only on the first pageview of the session or based on other conditions, look into the When We Fire Them section of the Lunametrics page you linked.

Call an web api in pageshow event of jquery

I am writing a JqueryMobile and jquery based web application. I have three data-pages in my index.html . I am calling an web api in pageshow event of data-page in first page and filling the list view. and then by clicking on that list itam getting an id of that list item and moving to the next page and calling again the web api to get detail of that list item in page show event. and then i am again moving to the 3rd page from detail page to call another api. It is all working fine but problem is coming when i am moving back to detail page and then from detail page to index page. on moving back pageshow event of page is calling again and it is again calling the api in all pages. If i am use oncrete then it will only call api for the very first time.
Can any body tell me how to call api in this type of structure.

Have a look at this fiddle: http://jsfiddle.net/ezanker/tAB7x/
There are different ways to solve your problem, this is just one of them...
I have put the web api for filling the initial list in the 'pageinit' of the first page. This will run exactly one when you load the page. If you require refresh of this list, you could add a refresh button.Each appended item in the list links to page2 with a query string containing the item id. Then a click handler for the listview items is added to get the id of the clicked item and fill out the details form (page2) from web api (in the example I am just writing the id to a text box in page 2).
$('#page1').on('pageinit', function () {
//get list from web api (hardcoded for this example
var $ul = $("#dynamicList");
$ul.append('<li>A</li>');
$ul.append('<li>B</li>');
$ul.append('<li>C</li>');
$ul.listview("refresh");
$('.detailLink').on('click', function () {
var l = $(this).attr("href");
l = l.substring(l.indexOf('?') + 1);
var id = getUrlVars(l);
$('#detalText').val(id['id']);
});
});
Page2 has a button that links to page 3 and a click handler that fills out page 3 from web api (in the example I am again just writing the id to a text box in page 3):
$('#linkPage2').on('click', function () {
var id = $('#detalText').val();
$('#detalText2').val(id);
});
When you click the back button on either page, no code is run and the previous state of the page is maintained.

Run script if address is x?

I've built a site for my customer a few months ago, and when user clicks a link on navigation, the new content will slide visible and the old content will be hidden. I also made the customer a webstore and he would like a link to to his main site image gallery. However, because the site is actually only one page full of content and the new content is displayed with javascript, typing http://yoursite.com/#gallery would actually load the first page. Is it possible to do something like
$(document).ready(function(){
$(page).load(function(){
$('#page1').slideUp();
$('#page2').slideUp();
});
});
and display the wanted content based on the addresd that is typed?

$(function(){
if (document.location.hash == '#gallery') {
$('#gallery').show();
}
});

$(function(){
var activePage = window.location.hash; // Gets the active page via location hash
$('[id^="page"]').not(activePage).slideUp(); // Slides up all inactive pages
$(activePage).slideDown(); // Slides down the active page
});

Dynamic content accessibility issue

I'm working on a website and I want to be able to access the dynamic content on the Menu page from every other page on the website but when you try to access it from another page, it doesn't even leave the page. How do I get it to take me to the Menu page and also display exactly what was clicked. The function created for this is as displayed below
$(document).ready(function() {
jcps.fader(300, '#switcher-panel');
});
var _tagIndex = window.location.href.indexOf('#');
if (_tagIndex>=0) {
showContent(window.location.href.substr(_tagIndex));
}

Jquery History plugin is a rather common solution