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.

All page links in website to open chat window

I have a client that wants all his pages links in html home website , i.e. when click on any menu, home page, everything, to open chat support box. Normal href should be like this sample to do that but there are a few dozens of links on homepage and he doesn't want to manually remove each link but only to do it with a single code, this way he can simply remove it anytime.
Open the chat
Example of link I need to open chat when click on it:
<li class="list-link"> <i class="tyres ico"></i> anvelope <i class="wlf wlf-arrow-right arrow-link"></i> </li>

Normal href should be like this sample
The code you're showing is not using normal hrefs. It's using techniques that are 25+ years old and was the way we handled clicks before we had any API standards or were concerned with accessibility.
First, don't use hyperlinks solely as JavaScript event hooks. Any visible element on a web page supports a click event, but hyperlinks denote navigation. Those who rely on assistive technologies, like screen readers, can have problems navigating your site when you use hyperlinks, but not for navigation. Instead, just use another inline element (like span) and give that your click event handler.
Second, javascript:.... won't be needed because you'll be doing your JavaScript separate from your HTML (a.k.a. "Separation of Concerns").
Now, to your question. If you simply give any/all elements that should open a chat window when clicked a common CSS class, you can then create very simple code that will find all of them, loop over them, and assign them all the same event handler, which will open the chat. Here's an example:
// Get all the elements that have the "chat" class and put into an array
let chatElements = Array.prototype.slice.call(document.querySelectorAll(".chat"));
// Loop over the array
chatElements.forEach(function(item){
// Assign an event handler
item.addEventListener("click", function(){
console.log("open chat window here");
});
});
.chat { cursor:pointer; color:blue; }
<p class="chat">I will open the chat</p>
<p>I won't open the chat</p>
<div>I will <span class="chat">open the chat</span></div>
<h1 class="chat">I will open the chat</h1>
<h5>I won't open the chat</h5>

$(function(){
$('a').click(function(event) {
event.preventDefault();
jivo_api.open();
});
});

Run code to click javascript button within Android app? Trying to scrape reply button contact-info on craigslist.org page

I have an app I'm working on which needs to display craigslist ads. I am parsing the html to get the attributes off of the page. But herein lies the problem:
The reply button is a javascript button. In it is the email/phone# for the ad.
I need to get the info from the pane that is generated when the button is clicked and then parse its information.

You can register a callback in click event and target the affected div to probe for the content required to be parsed...
Hypothetically, lets consider a scenario...
<!-- CONSIDER THIS AS THE TARGET DIV WHERE CONTENT IS POPULATED-->
<div id="replydiv"></div>
<!-- BUTTON WHICH POPULATES THE DIV-->
<button id="clickme"></button>
<script>
$(function()
{
$("#clickme").click(function()
{
//Will check if the div is populated
doCheckReply();
})
})
</script>
function doCheckReply()
{
if($("#replydiv").children().length > 0)
{
//start parsing
}
}
If the replydiv is taking some time to load, use setInterval() to keep checking for availability of content.
It would help me a lot if you could share a snippet of the code
Hope it helps!

Fade in different section with static header and footer using javascript?

i was wondering how to create a dynamic website where the page layout is as follows:
header, section, footer
The header and footer would always be static and when the user clicks a part of the nav e.g About Us (within the header) the section in the middle dynamically changes and fades in the About Us section.
I would like to use pure javascript if possible and without it being part server-side, I assume you would give the sections ID's and in the javascript "onClick" of the nav link, the one section would display:none and another section would display in replace of it.
I found a similar example on this website: http://www.templatemonster.com/demo/44858.html
What is the easiest way to create this effect? I have a VERY brief idea but how could you go about this?
If anyone could include a jsfiddle example, would be much apprieciated

What you are looking to do is called pjax. Pjax uses XML Http requests(ajax) to load a specific piece of content into a placeholder like you are trying to do.
Someone clicks to a new page.
Javascript requests this page from the server.
Once loaded, optionally fade out the old content.
Replace with the new content and optionally fade it in.
Use pushstate to add a state to the browser history. This allows the back and forward buttons to work.
Here is a pjax library that is handy for doing this easily across new and old browsers and has a good explanation:
https://github.com/defunkt/jquery-pjax
It would not be a good idea to include all of the content on one page with display:none because then it will still need to be downloaded by the browser even if the user never views it. Nevertheless, here is a JSfiddle showing this approach which is close to what you described:
http://jsfiddle.net/Tb4eQ/
//Wait for html to be loaded
$(document).ready(function(){
//Store reference to frame to load content into in a var, as well as the content to load in.
var $content = $('#div_1');
var $frame = $('#my_frame');
//Bind an event handler to the click event of something
$('#press').on('click', function(){
//fade out the frame, swap in the new content, and fade it back in.
$frame.fadeOut('fast', function(){
$frame.html($content.html()).fadeIn('fast');
})
});
});

You can use the jQuery method .load() which loads data from the server and place the returned HTML into the matched elements. Also the .toggle() method allows you display or hide elements.
Consider the following example: Suppose we have a page named index.html ...
<header>
<nav>
<ul><li id="nav-about">About us</li></ul>
</nav>
</header>
<section>
<article id="dynamic-viewer">
Dynamic content will be placed here!
</article>
</section>
<aside>
<div id="loader" style="display:none">
<img src="http://www.ajaxload.info/images/exemples/24.gif" />
</div>
</aside>
... and we have another file named about.html which is just a view:
<div>
<h2>About us</h2>
<p>This content is placed dynamically into #dynamic-viewer</p>
</div>
Now, I will load the content of about.html into the content wrapper in index.html using the jQuery.load() method.
//Click handler to load the "about" view
$(document).on("click.about", '#nav-about', function() {
fnShowLoading(true);
//Loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() {
fnShowLoading(false);
});
});
//Shows or hides the loading indicator
function fnShowLoading (show) {
$('#loader').toggle(!!show);
}
Actually, the only lines that matters here are:
//loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() { });
//shows or hides the loader section
$('#loader').toggle(!!show);

You could try to use Ajax calls to partially refresh parts of the page or just load the whole thing and let jQuery handle the hiding and showing of elements on click events.
http://www.w3schools.com/ajax/
http://api.jquery.com/hide/

Support Middle Clicks on my Fancybox Lightbox

Suppose you have a lightbox, and you want to allow the user to middle-click, which would open a new tab, and the same content that shows-up in the lightbox on left-click is now on a standlone page (complete with header, sidebar, etc).
Anybody have a snippet or technique handy they can share?
Otherwise the technique I was going to try first was just to add a conventional href to the link, then add a click handler that cancels the default action on left click. I think this'll work but I'm not sure so honestly it was easier to pound out a question than to write it up and test it in the 14 browser/os combinations I have to support.

I finally found time to work this out and it was pretty easy:
This is how I made it work using jQuery & FancyBox:
Give your desired link a 'has-overlay' class and give it a custom attribute that will tell it what it should load in the overlay
Login
Be sure you have the overlay code available (this is standard FancyBox stuff)
<div class="hidden" id="loginform"> <!-- Form Goes Here --> </div>
And put this snippet in your on ready event:
$('.has-overlay').bind('click', function(e) {
var overlay = $(this).attr('overlay');
$('').fancybox().trigger('click');
return false;
})
When a user left-clicks, this 'click' handler will be called. It will load the overlay and then return 'false' so the browser won't follow the href in the link.
When a user middle-clicks or right-clicks, the click handler doesn't fire, and it works as a normal link would.