Develop Reference

Javascript click / touchstart not always working

I have a language selector on the top of my website, when I click it, it should show all the languages and when I click on the body it should disapear. Now the problem I have is that sometimes it just works perfect, but sometimes it doesn't work at all. On my mobile it more often doesn't work than it does.
This happends random, every time just refreshing the site will make it work again.
$('.topHeader ul li ul').hide();
$('html').on('click touchstart', function() {
$('.topHeader ul li ul').hide();
});
$('.topHeader').on('click touchstart', function() {
event.stopPropagation();
});
$('.topHeader ul li a').on('click touchstart', function() {
$('.topHeader ul li ul').toggle();
});
Jsfiddle:
https://jsfiddle.net/5gcdsjox/
I'm not using bootstrap, I just used some of the classes ;)

The problem is that the list items take up 100% of the page's width, and you don't realize you are clicking on them rather than the area encompassed by the html selector.
Simply add this css, and it will illustrate what I mean...
.topHeader ul li ul li {
background:azure;
}
A quick work-around is to make it that, by clicking on the list items you also hide the displayed items:
$('html').on('click touchstart', function() {
$('.topHeader ul li ul').hide();
});
// I have added this extra handler
$('.topHeader ul li ul li').on('click touchstart', function() {
$('.topHeader ul li ul').hide();
});
Edited jsfiddle: https://jsfiddle.net/0j9h1r2m/1/

I want menu close when click on the link

I want menu close when click on the link or on ul.
I am using this menu.

You can remove the active class whenever an li in the #menu is clicked like that:
$('#menu li').on('click', function() {
$("#menu,#trigger").removeClass("active");
});

jQuery remove class after second click

I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.

Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements

Navigation close onClick of another list item

Does anyone know how I can expand on the function at the moment, so that when one navigation is open, when the user clicks to open the other navigation, the navigation which is open presently collapses?
Please find the code below;
http://jsfiddle.net/N7xgC/

What you're currently doing is toggling the display of all elements with the sub class, so clicking on any link will display all of the sub menus. Instead, you want to hide all of the elements with the class sub that aren't a sibling of the link being clicked on, and then toggle only the element with the class sub that is a sibling of the link being clicked on.
$(document).ready(function() {
$('.main > li > a').click(function() {
var sibling = $(this).siblings('.sub'); // select the <ul> to exclude
$('.sub').not(sibling).hide(); // hide everything except that element
sibling.toggle(); // toggle that element
});
});
Updated jsFiddle

Updated your jsFiddle http://jsfiddle.net/N7xgC/6/
$(document).ready(function()
{
$('.main > li > a').click(function(event)
{
$('.main > li > ul').hide();
$(this).next().show();
});
});

Like this?
http://jsfiddle.net/foxbunny/N7xgC/10/
EDIT: A bit of a cleanup, with single click handler:
http://jsfiddle.net/foxbunny/N7xgC/11/

jQuery tab and tab content show up when clicked ?

My webpage is at http://www.sarahjanetrading.com/js/resume
All the HTML, CSS and jQuery code + images are available there for anyone to access.
My issue is that currently my jQuery code makes the tabs show the tab-content when I click on the achor tag of the tab. But the tab doesnt change into the clicked tab.(tab name remains the same).
And the tab changes into the clicked tab when i click on the respective li of the tab. What I want is that both the tab changes and the content of the tab shows when I click on the either the li of the tab or the anchor of the tab.

You have two lots of events registered. One on the anchors and the other on the lis. The one on the lis changes the active state for the tabs themselves while the one on the anchors change the content. You should combine these into one function.
You change check the li function is working by clicking on the very bottom edge of it. Because your anchor javascript has a return false feclaration it is preventing the click event bubbling up to the li, thus not showing the change.

Try changing the function:
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
to the following:
$("ul.tabs li a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
$(".active-tab").removeClass();
$(this).parent().addClass("active-tab");
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
This should work and you should be able to remove your other javascript function.

If you already use jQuery you can use the jQueryUI library to create tabs. It is very simple and the style can easily be changed. Here is the Tutorial for tabs:
jQuery UI - Tabs Demo

If you click the whitespace around the text in the tabs, it works. Remove the anchor link from inside the tab, or add a click handler for the anchor link.
Edit:
My mistake. You have a click handler on your anchor element, but clicking the anchor link causes it to become $(this) in your code. So you assign class="active" to the anchor, when you want to assign it to the li.
$(this).addClass("active");
should be rewritten to modify the li. Personally, I would wrap the li in the anchor link:
<li></li>
This will probably require modifying your JS code a little, but will give a uniform result.