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');
}
});

Jquery 2 scripts aren't cooperating

I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.

This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.

URL Redirect Based on Screen Width

What I'm looking for is quite simply, a way to automatically redirect the user to a different URL when the screen or window width is less then 950px.
I don't want to use "refresh" as it's not recommended, and I don't do want to use "User Agent" either as it seams to me less reliable in the long term and I don't want to be concerned with updating this.
This is the Script I see suggested everywhere for this purpose but for some reason it doesn't do anything:
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
//-->
</script>
I've also tried it with all this variants with no success:
window.location
document.location
window.location.href
document.location.href
I've also tried placing it as the first thing after Head tag and even before Doctype. Nothing happens...

I'm answering my own question as I have recently found a more satisfying solution then the one provided by #Finduilas.
This solution not only redirects you in normal circumstances, it will also redirect you back and forth as you resize your window.
Even better! It will redirect you back and forth in mobile devices as you switch from landscape to portrait and vice-versa.
<script type="text/javascript">
$(window).on('load resize',function(){
if($(window).width() < 950){
window.location = "https://www.google.com"
}
});
</script>

If you have to use Javascript, try the following:
<script type="text/javascript">
function redirect() {
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
and in your body add :
<body onload="setTimeout('redirect()', 300)">
This will redirect the user after 300 ms when the page is loaded, this way you are making sure that the width of the screen is available.

You can better use JQUERY for this...
// Returns width of browser viewport
$( window ).width();
See: http://api.jquery.com/width/
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($(window).width() <= 950) {
window.location = "https://www.google.com/";
}
});
</script>
</head>
<body>
<p>Website</p>
</body>
</html>

<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
//-->
</script>
<!-- you forgot to add window.location.replace("https://www.google.com/"); and yours is a little wrong-->
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location.replace("https://www.google.com/");
}
//-->
</script>

None of these scripts work. I have tried them all.

USE THIS ON TOP OF THE HEAD TAG
<script >
window.addEventListener('resize', function() {
if (window.innerWidth <= "Your desired screen width") {
window.location.href = "redirect loacation";
}
});
</script>
</head>
<body >

JavaScript not working when is in separate file

I have code:
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".koncecki-web-design").addClass("konecki-scroll");
$(".top-nav").addClass("show");
$("#work").addClass("work-margin");
} else {
$(".koncecki-web-design").removeClass("konecki-scroll");
$(".top-nav").removeClass("show");
$("#work").removeClass("work-margin");
}
if (scroll >= 200) {
$(".top-text").addClass("top-text-scroll");
} else {
$(".top-text").removeClass("top-text-scroll");
}
});
I have this in my index file but i want to have in control.js
<script type="text/javascript" src="js/control.js"></script>
When i paste this code to control.js script does not work.
What could be wrong?
Thanks!
Silon

Be sure to have jQuery included before control.js. So
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/control.js"></script>
instead of
<script type="text/javascript" src="js/control.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

You need to:
Check if you including control.js before jquery.js then it would not work move your jquery file to top.
DOM is not ready to be worked on so move all your code to $(document).ready()
Or include your control.js just before closing body tag, it will take care of above two points.

Sliding div with jquery

Hy guys! I have to make a sliding div (left-right) using jquery. This is a link to what I have at this moment: http://www.k-prim.biz/test/test.html
This works fine but I do not know how to make the div to slides left on clicking the arrow image after it is already moved to right. Any help?
Thanks

Simply try this code instead of your script side.
$(function(){
var i = 0;
$("#clicky").click(function(){
if(i==0){
i =1;
$("#slide").animate({marginLeft:'500px'},'slow', function(){
$("img#clicky").attr("src", "right.jpg");
});
}else{
i=0;
$("#slide").animate({marginLeft:'0px'},'slow', function(){
$("img#clicky").attr("src", "left.jpg");
});
}
});
});

Alternative could be a css-approach, using css transitions. See jsfiddle.
The click handle in that case is as simple as (edit click handler on div#slide, because the arrow image is now its background, jsfiddle is adjusted accordingly):
$("#slide").click(function(){
var el= $(this)
,isRight = /right/i.test(el.attr('class'))
,addremove = isRight ? 'removeClass' : 'addClass';
el[addremove]('right');
});​

<script>
var pos=0;
$(function(){
$("#clicky").click(function(){
if(pos==0)
{
$("#slide").animate({marginLeft:'500px'},'slow', function(){
$("img#clicky").attr("src", "right.jpg");
});
pos = 1;
}
else
{
$("#slide").animate({marginLeft:'0px'},'slow', function(){
$("img#clicky").attr("src", "left.jpg");
});
pos = 0;
}
});
});
</script>
This may help you in thinking on an algorithm.
Notice : Not tested code, edited.

very simple use of jquery is just like below
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function () {
$("#left_panel").toggle("slide", { direction: "left" }, 1000);
});
});
</script>