We Keep Coding

jQuery scripts don't want to work together

I am making a website. I am doing responsive menu and jQuery script work but not good. I mean that every single script wokrs very well but all of them together don't want to work that good. The first one, this from responsive menu is killing every thing, so this menu is not working as it should be :/
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$(".menu-trigger").click(function(){
$("#mainnav").slideToggle(900);
});
});
jQuery(function($)
{
//zresetuj scrolla
$.scrollTo(0);
$('#link').click(function() { $.scrollTo($('#zjazd'), 2000); });
}
);
$(document).ready(function(){
$("#container").sticky({topSpacing:0});
});
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn('slow');
} else {
$('.scrollup').fadeOut('fast');
}
});
//Kliknij aby przewinąć do góry
$('.scrollup').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
});
</script>
So what is wrong? What is going om? I'm still learning and it can be really silly problem but for today for me...
All website is responsive already.
You can see here what's wrong
When I delete rest of scripts and leave only this for responsive menu it works beautiful, when I delete this for responsive menu then all rest works well, but when all scripts are together then only this for menu works not well but rest of it works normal. I don't know what is going on.
I'm still learning... and the website which I'm working od is pretty good.

You only need one $(document).ready(function() { });
And the first thing inside of it should be calling the plugins you want to use.
$(document).ready(function(){
$("#container").sticky({topSpacing:0});
$.scrollTo(0);
$(".menu-trigger").click(function(){
$("#mainnav").slideToggle(900);
});
$('#link').click(function() {
$.scrollTo($('#zjazd'), 2000);
});
$('.scrollup').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
});
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn('slow');
} else {
$('.scrollup').fadeOut('fast');
}
});

javascript doesn't work on Joomla 3

I always use jquery script directly to joomla's modules.
Lately, I switched from using Joomla2 to Joomla3. Somehow, scripts are not working anymore in modules. Anybody knows why?
(some script still works though)
Example:
This is what I am working on.
Intro About Info
<h1 id="intro">Intro</h1>
<p>abcd</p>
<h1 id="about">About</h1>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jump=function(e)
{
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $(this).attr("href");
//perform animated scrolling
$('html,body').animate(
{
//get top-position of target-element and set it as scroll target
scrollTop: $(target).offset().top
//scrolldelay: 2 seconds
},600,function()
{
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
$(document).ready(function()
{
$('a[href*=#]').bind("click", jump);
return false;
});
</script>
The code gives a smooth scroll on targeted menu id.
If I use above code in Joomla2 module, it works great but doesn't work in Joomla 3.
Any idea?

Mootools is loaded by default in Joomla! 2.5.x. It's an another JS library like jQuery they also use $ symbol. so we need to fix this issue using the jQuery.noConflict() method.
Try to use jQuery this way and recheck.
var $jQ = jQuery.noConflict();
// $jQ is now an alias to the jQuery function
// creating the new alias is optional.
$jQ(document).ready(function() {
$jQ( "div" ).hide();
});
I have rewritten your code here:
<script type="text/javascript">
var jump=function(e)
{
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $jQ(this).attr("href");
//perform animated scrolling
$jQ('html,body').animate(
{
//get top-position of target-element and set it as scroll target
scrollTop: $jQ(target).offset().top
//scrolldelay: 2 seconds
},600,function()
{
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
var $jQ = jQuery.noConflict();
$jQ(document).ready(function()
{
$jQ('a[href*=#]').bind("click", jump);
return false;
});
</script>

jQuery .tap event not working

I can't figure out why the jQuery tap event isn't even getting a respond when I test it. I put in an alert and I haven't gotten it to pop up at all. My code looks like this:
var calendarOpen = false;
$('.calendar').on("tap", function () {
alert('1');
if (calendarOpen == false) {
$('.login-body').animate({left: '90%'}, 300);
$('.calendar-body').animate({right: '10%'}, 300);
calendarOpen = true;
} else {
$('.login-body').animate({left: '0px'}, 300);
$('.calendar-body').animate({right: '50%'}, 300);
calendarOpen = false;
}
});
I have the script and css pages attached and I've checked for any typos. I copied the jQuery documentation and I'm still having problems. Thanks for the help.
These are my included scripts and the code provided above is under main.js.
<script src=http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js></script>
<script src=http://code.jquery.com/ui/1.10.3/jquery-ui.js></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="scripts/main.js"></script>

You need to load your JS files in this order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
reference: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

Why has my jQuery + AJAX stopped working?

I'm fairly new to JavaScript/jQuery/AJAX, so I suspect the issue is some typo I'm not seeing. It was working fine, but at some point during editing the hide() + show() methods stopped working (tested it in Firefox + Chrome). I've pored over it many times and can't see what's wrong.
script.js
$(document).ready(function(){
$('p').click(function() {
$(this).hide();
})
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal');
}
return false;
});
});
In my index.html page the following script includes are in the <head> section:
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

You need to include jQuery before your script.js.
JavaScript code is executed synchronously. In your example, $ is (or at least should be) undefined, and of course undefined has no jQuery like methods.
Also, one of your callbacks is defined as showNewContent(). The parenthesis at the end will call that function and pass its results back as the callback, which is not what you want in this circumstance.
Instead, drop the () to pass just the reference to the function.

Change your index.html stuff to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="script.js"></script>
and your code in script.js to:
$(document).ready(function(){
$('p').click(function() {
$(this).hide();
})
$('#nav li a').click(function(){
var toLoad, loadContent, showNewContent; //keep the variable scope local
toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
loadContent = function() {
$('#content').load(toLoad,'',showNewContent)
}
showNewContent = function() {
$('#content').show('normal');
}
return false;
});
});

Javascript Redirect Not Working

I have the below code in a HTML page on my site. The url parameter is loading fine on a pixel fire right above it but for some reason the redirect doesn't want to fire. Anyone have any ideas? It might be an IE issue but not sure.
<script type="text/javascript">
$(document).ready(function() {
setInterval("window.location = '{{$url}}'", 4000);
});
</script>

<script type="text/javascript">
var url = '...';
$(document).ready(function() {
setInterval(function() {
window.location.href = url;
}, 4000);
});
</script>