Develop Reference

Add class to my <nav> when scroll using jQuery

I am trying to do a simple task but I just can't see what I am doing wrong.
My goal is to add a class on my <nav> when the user scroll to the bottom of the page, and remove it when the he scrolls back to top.
Here's the code. PS: There's no error message on my console, and I tested if the jQuery is correctly implemented (and it is). I'm using a recent version
<script type="text/javascript">
$(window).on('scroll', function() {
if($(window).scrollTop()){
$('nav').addClass('when-scroll');
}else {
$('nav').removeClass('when-scroll');
}
})
</script>

you can try this;
var scrollTop = $(window).scrollTop()
$(window).on('scroll', function() {
if($(window).scrollTop() < scrollTop){
$('nav').addClass('when-scroll');
}else {
$('nav').removeClass('when-scroll');
}
scrollTop = $(window).scrollTop()
})

Script not working (but works fine on other site)

Ok this is probably a dumb question but, I'll ask. I'm trying to make a div stick when you pass a point on the page while scrolling. I have this script:
<script type="text/javascript">
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 335) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
Which works fine on one of my site. But now I'm trying it on a new site. And every time I get an error in my console log saying: TypeError: $ is not a function And when I look at the error in my code it highlights the $(document).ready(function() { part.
If I remove the $(document).ready part and the }); it tells me the var s = $("#sticker"); part is $ is not a function.
I have tried
<script type="text/javascript">
jQuery(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 335) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
Then it skips the (document).ready part, but it again tells me my var part is not a function.
If I remove the script I don't have any console log messages. What could be the problem? I tried putting the code in the header and footer and even just before the <div id="sticker">...</div>. Nothing seems to work. The script works perfectly on an other site...

You are running jQuery in noConfilct mode. Which mean, jQuery is only available by jQuery, not over $. You can wrap your code with an ready state or an IIFE to get access to jQuery by $.
Ready State:
jQuery(document).ready(function($) {
// access jQuery by '$' inside
});
// this is a shorthand for the above '.ready' creation
jQuery(function($) {
// access jQuery by '$' inside
});
IIFE:
(function($) {
// access jQuery by '$' inside
})(jQuery);

jQuery - Hide / Show not displaying div and showing error

I was wondering if someone could help me out with a bit of jquery im trying to write.
Im quite new to jQuery so this is prob something easy.
I have a div with an id of 'about-box'
I want it to slide in and out of the viewport when a menu item is pressed.
I have the following jQuery.
<script type="text/javascript">
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if($('#about-box:visible').length)
$('#about-box').hide("slide", { direction: "left" }, 1000);
else
$('#about-box').show("slide", { direction: "left" }, 1000);
});
});
</script>
But i am getting the following error message:
Uncaught TypeError: undefined is not a function
Any help getting this to work would be greatly appreciated.

I think the problem is you are not including jQuery-UI in your page, the show/hide implementation you have used requires jQuery UI
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if ($('#about-box').stop(true, true).is(':visible')) {
$('#about-box').hide("slide", {
direction: "left"
}, 1000);
} else {
$('#about-box').show("slide", {
direction: "left"
}, 1000);
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>
You can also use jQueryUI toggle
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
$('#about-box').toggle("slide", {
direction: "left"
}, 1000);
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>

since document is for sure a good element the undefined is not on the ready
:visible looks good see here http://api.jquery.com/visible-selector/
So the undefined must be here $('#menu-item-1 a').click or in other code in your page or on the execution of the ready.
Try to find where . remove the if else . does the undefined throw?? if yes the $('#menu-item-1 a') doesnt resolve.
wish it help

try changing the selector to
$('#about-box').is(':visible')

$('#about-box:visible') is a wrong selector,I think you can toggle a class on about-box button and decide slide in or out

Javascript conflict in Html & CSS

I have a conflict with my JS as one of the scripts isn't functioning properly, I'm trying to use more than one javascript in my document, I will be using three and I'm getting a conflict already and I only have two in the document so far... :(
First in the head:
<script type="text/javascript" src="javascript/jquery_1.3.2.js"></script>
<script type="text/javascript" src="javascript/jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
Second in the body:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript/jquery-css-transform.js" type="text/javascript"></script>
<script src="javascript/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'243px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content')
.stop(true,true)
.fadeOut()
.find('p')
.stop(true,true)
.fadeOut();
}
</script>
From what I can see it's the "function" that may be causing the issue. Please help... And how can you avoid these issues, I'm sure loads of people use multiple js all the time, do you just hope and pray it doesnt mess up?
Edited:
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>

Cleaning up your source code may help the debugging process..
Instead of using javascript contained within script tags within the body/head of your document, you can just create a separate javascript file. Place all of your external script tags within the head of the document. Your custom javascript file which contains all the above code should be called last.
Your click/hover functions should be contained/bound within your document.ready function.
Also, you are calling duplicate scripts, jcarousel.js and jcarousel.min.js are the same script. One is just the minified version. You are likely producing conflicts because of this, and the same would be true for your jquery calls. Try using just one version of jQuery, ie the latest version from scriptsrc.net
Your resulting html document would therefore look something like this
<head>
<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery-css-transform.js"></script>
<script type="text/javascript" src="javascript/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<!-- your custom js -->
<script type="text/javascript" src="javascript/yourCustom.js"></script>
</head>
your custom js file would then look like this..
function expand($elem) {
var angle = 0;
var t = setInterval(function() {
if (angle == 1440) {
clearInterval(t);
return;
}
angle += 40;
$('.link', $elem).stop().animate({
rotate : '+=-40deg'
}, 0);
}, 10);
$elem.stop().animate({
width : '243px'
}, 1000).find('.item_content').fadeIn(400, function() {
$(this).find('p').stop(true, true).fadeIn(600);
});
}//end expand
function collapse($elem) {
var angle = 1440;
var t = setInterval(function() {
if (angle == 0) {
clearInterval(t);
return;
}
angle -= 40;
$('.link', $elem).stop().animate({
rotate : '+=40deg'
}, 0);
}, 10);
$elem.stop().animate({
width : '52px'
}, 1000).find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
}//end collapse
$(document).ready(function() {
//Carousel setup
$('#jcarouselMetro').jcarousel({
scroll : 1,
wrap : 'both'
});
$('#jcarouselInvites').jcarousel({
scroll : 1,
wrap : 'both'
});
//end carousel
//item hover function
$('.item').hover(function() {
var $this = $(this);
expand($this);
}, function() {
var $this = $(this);
collapse($this);
});
//end hover
});//end document ready
Further to all of this, you may need to define a clearInterval function. Unless it is part of one of the many libraries you have included, as it is called in your expand and collapse functions.
Hope this helps...

I can see two issues with conflicting JavaScript code being included twice. Firstly
you're loading two versions of the same carousel library here:
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>
The first is a minified version of of the same code. You only need one, so remove the second line above as it won't be required and it's just a larger version of the same file. This may not be causing the issue, but it's not right.
Secondly you have two versions of jQuery in your code and that will also cause significant issues because you're loading them at very different times in your page and they will have very different functionality. You can fix this using noConflict:
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var jq142 = jQuery.noConflict();
jq142(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
The first line var jq142 = jQuery.noConflict(); will ensure that you have the correct version of jQuery loaded for the carousel library. Read the noConflict documentation for more information.

You can use this to only load one version of the library. 1.3.2 on IE6,7,8 and 1.9.1 on all other browsers.
<!--[if lt IE 9]>
<script src="jquery-1.3.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-1.9.1.js"></script>
<!--[endif]-->

why my jquery codes doesn't run?

I want to toggle element that id's pg when click link.
header:
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
</script>
Elements:
<p id="pg">deneme deneme 123 deneme</p>
toggle

close click function by adding });:
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
});

You're missing the final }); for the statement
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
)}; //<-- Missing close bracket
</script>
Also, if you're using Firefox, check out Firebug. Its an invaluable debugger tool and will show you where errors are happening.
Chrome has a Developer Tools enabled, not sure about IE.