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

How CSS can disable window.onscroll?

The problem: Simple function doesn't called
window.onscroll = function() {
console.log("scroll");
}
It will work if I remove the CSS link from the page
<link rel="stylesheet" href="/blog/css/style.css" type="text/css">
The question:
How CSS code can disable Javascript function window.onscroll ?
The page: http://swimbi.com/blog/
The CSS : http://swimbi.com/blog/css/style.css

You are actually scrolling your container div.
If you do this the events fire:
document.getElementById("container").onscroll = function() {
console.log("scroll container");
}
edit: looks like something changed on the page. If you use this on the above page it works correctly:
jQuery("body").on("scroll", function() {
console.log(this)
})

Scrolling works in Chrome but not in Firefox or IE

I'm using the following code to scroll the window when a user clicks on a few different links:
$(document).ready(function(){
$("#footerlink").click(function(){
$("#slide1").slideto({});
});
$("#logo").click(function(){
$("#slide1").slideto({});
});
$("#home").click(function(){
$("#slide1").slideto({});
})
$("#others").click(function(){
$("#slide2").slideto({});
})
$("#me").click(function(){
$("#slide3").slideto({});
});
$("#laughs").click(function(){
$("#slide4").slideto({});
});
})
The slide functionality is coming from this script:
(function(b) {
b.fn.slideto = function(a) {
a = b.extend({
slide_duration: 1000,
highlight_duration: 3E3,
highlight: false,
highlight_color: "#FFFF99"
}, a);
return this.each(function() {
obj = b(this);
b("body").animate({
scrollTop: obj.offset().top
}, a.slide_duration, function() {
a.highlight && b.ui.version && obj.effect("highlight", {
color: a.highlight_color
}, a.highlight_duration)
})
})
}
})(jQuery);
My problem is the scrolling only works in Chrome and not Firefox or IE. FF and IE degrade nicely so the links still work, but I really like the scrolling animation.
FYI: I am calling Jquery with these two lines:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
Here is a Fiddle of my code: http://jsfiddle.net/LwXR3/
Can you help me track down my issue?

Okay this is too long to be in a comment. You should really avoid the copy paste mess in that code above. The code is almost exactly the same minus the ids. Use the href to get the location instead of hard coding it.
HTML
<a class="slideLinks" href="#foo">go to foo</a>
JavaScript
$(".slideLinks").on("click", function(e){
e.preventDefault(); //p[revent the click
$(this.hash).slideto({}); //call your slide to function with the hash value for the id
});

Shadowbox - How to switch or replace content? How to close and open another dialog?

I'm trying to use shadowbox in multiple occasions: sometimes I happen to need more than one dialog at the same time.
In this simple example I try to close one existing window and re-open another one but is not opening the second one. What I'm doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="shadowbox.css" type="text/css">
<style type="text/css" media="screen">
#sb-body, #sb-loading { background:#eee; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script src="shadowbox.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Shadowbox.init();
window.onload = function(){
Shadowbox.open({
content: 'First window. <a id="open-second" href="http://www.google.com">open another window</a>.',
player: "html"
});
$('#open-second').live('click', function(e){
e.preventDefault();
Shadowbox.close();
Shadowbox.open({
content: 'Second window.',
player: "html"
});
});
};
</script>
</head>
<body>blabla.</body>
</html>
Regards,
Adit

Sorry 'bout this, but I think I'll move towards colorbox as it seems far more stable:
$('#second-btn').live('click', function(e){
e.preventDefault();
$.colorbox({
onComplete: function(){
$('#cboxLoadedContent').append('second opened');
$('#cboxClose').attr('id', 'cboxClose_disabled');
},
html:'<p>Second <a id="first-btn" href="x">first</a></p>',
width: 500, height: 200
});
});
function showfirst(){
$.colorbox({
onLoad: function(){ $('#cboxClose_disabled').attr('id', 'cboxClose'); },
onComplete: function(){ $('#cboxLoadedContent').append('first opened') },
html:'<p>First <a id="second-btn" href="x">second</a></p>',
width: 500, height: 200
});
}
$('#first-btn').live('click', function(e){
e.preventDefault();
showfirst()
});
showfirst();
Hey, am I talking alone?! XD

Here's what I'll use; not happy with this as:
- I'm forcing a widely used plugin doing a simple task (close a window and open another)
- it needs to override each shadowbox feature (now only player "html" is implemented).
Here a full working example.
var shadowbox_orig_open = Shadowbox.open;
Shadowbox.reOpenable = function(new_opts) {
if(Shadowbox.isOpen()){
// close other dialog
Shadowbox.options.onClose(Shadowbox.getCurrent());
if(new_opts.player == "html"){
$('#sb-player').fadeOut('normal', function(){ $(this).html(new_opts.content).fadeIn(); });
}else{
// ???
}
// set other new hooks
Shadowbox.options = new_opts.options;
}else{
shadowbox_orig_open(new_opts);
}
};

Simple example of a strange problem with jquery toggle

I'm trying to do a simple partial fade effect using toggle to toggle the opacity between two values, when an element is clicked. But the first click does nothing!
The html code:
<html>
<head>
<script type="text/javascript" src="../jquery-1.4.min.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</head>
<body>
<div class="toggler" style="background:grey;width:300px;height:300px;"></div>
</body>
</html>
And the js code:
$(document).ready(function() {
$('div.toggler').click(function(event) {
$(this).unbind('click');
$('div.toggler').toggle(function(event) {
$('div.toggler').css({
'opacity': 0.5
});
alert('0.5');
return false;
}, function() {
$('div.toggler').css({
'opacity': 0.1
});
alert('0.1');
return false;
});
event.preventDefault();
});
});
To elaborate, it does "work", but only after the first click! So I need to click twice to begin with to get it working! I've tried this out in firefox and opera.
Edit: Went with the solution by Marcus Sá and steweb:
$('div.toggler').toggle(
function(event){
$(this).css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$(this).css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);

Try this, more simple:
$('div.toggler').toggle(
function(event){
$('div.toggler').css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$('div.toggler').css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);
See working here

Because you bind to click event once, then unbind, and bind to it again via toggle. What for ? Just use toggle. Here is working example.

Even easier without having to use toggle:
$('div.toggler').css('opacity', .5).click( function() {
$(this).css('opacity', $(this).css('opacity') == .5 ? .1 : .5);
});

Actually there is not enough info here, the problem COULD be that your CSS initially sets the opacity to 0.5 to start with, so when you click toggle first, it's already at 0.5 and so it switches from 0.5 to 0.5 and nothing happens.
What I would recommend doing instead is creating 2 css tags, then check which tag is already there and replace it with the other one.
i.e. you can create:
.fiftyPercent{ opacity:0.5; }
.tenPercent{ opacity:0.1; }
Then in your html start with
<div class="toggler fiftyPercent" style="background:grey;width:300px;height:300px;"></div>
Then all you have to do in your JS is toggleClass for both the classes on click.
$('.toggler').click(function(){
$('.toggler').toggleClass('fiftyPercent');
$('.toggler').toggleClass('tenPercent');
});
That's just my 2 cents.