JavaScript .scroll function not working - javascript

I have been trying for hours now but couldn't find a reason why the following code is not working on my site (http://robo.im) -
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 400) {
$('.home #masthead').css("opacity", 0.98);
}
else{
$('.home #masthead').css("opacity", 0);
}
});
</script>
I'm calling it in the footer with 'script' tags and have included all the necessary files. Kindly help and take a look into the page source if required.

You need to make sure you put your script code within the $(document).ready. This functions makes sure the complete page content has been loaded. Otherwise you could apply functions to elements which do not exist.
So in your example you are binding the scroll function while the document has not been completed loaded yet.
Also make sure you have loaded jQuery correctly. #adeneo pointed correctly that Wordpress uses jQuery instead of $ as the reference to jQuery.
See http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
<script>
jQuery(document).ready(function($) {
$(window).scroll(function () {
if ($(window).scrollTop() > 400) {
$('.home #masthead').css("opacity", 0.98);
}
else{
$('.home #masthead').css("opacity", 0);
}
});
});
</script>

I have looked at your page, and it appears that jQuery is not bound to the $ variable. Either you have some script that is calling jQuery.noConflict() (this may be in a library that you have added or in your own code) or there is something overwriting $.
I would suggest either fixing that issue, or changing all $ in your code to jQuery instead:
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 400) {
jQuery('.home #masthead').css("opacity", 0.98);
}
else{
jQuery('.home #masthead').css("opacity", 0);
}
});
Alternatively, if you are sure this will not cause problems, you can do this just before your existing code:
$ = jQuery;
Finally, as advised in another answer, it would be best to wrap your entire code block in a $(document).ready or similar. A working snippet would be:
$ = jQuery;
$(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 400) {
$('.home #masthead').css("opacity", 0.98);
} else{
$('.home #masthead').css("opacity", 0);
}
});
});
However, I tried this on your site, and whatever is .home #masthead has no content, so you won't actually see it doing anything.

Related

Creating custom .js file

I'd like to create a custom .js file for my website so that I do not have to keep linking it within my webpages, my code works when used inline .
Please could someone tell me why my styles.js page wont link? I'm thinking that my code is wrong?
The current page is 'styles.js', the link I use is:
$(document).ready(function() {
$('#nav').affix({
offset: {
top: 90
}
});
$('#sidebar').affix({
offset: {
top: 17
}
});
});
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function() {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
});
A few things to check first:
Check your styles.js file is actually being included, make sure you have no HTML errors when including it and that your file path is correct.
Make sure styles.js is included further down in the source code than jQuery.
If both of the above seem OK, it could be that something is overwriting $ before your code is ran, try wrapping your code in this:
(function($) {
// Your code here
})(jQuery);
This will force $ to be jQuery within the scope of the function.

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

Can't get scrolltop to work correctly

I've created a fiddle to show what is happening.
I am using jquery to fade in a link to the top of the page when the user is scrolling down.
I can get it to work on jsfiddle if I place the code in the javascript window, but if I put it in script tags where my $( window ).load(function() is in the HTML window, it doesn't work at all. Does anybody know why?
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
here's the fiddle:
https://jsfiddle.net/8130fdhm/2/
Any help would be most appreciated.
Put in a script tag just before the body end tag. I have updated the jsfiddle here https://jsfiddle.net/8130fdhm/3/
....
<script>
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
</script>
</body>

Jquery Scroll() requires 2 Arguments

I am trying to remove a class from a menu bar when the user scrolls down a page. I read the following topic and doc to get an idea on jquery scroll():
1) https://stackoverflow.com/a/16391580/1050957
2) http://api.jquery.com/scroll/
This is my code:
var jquery = jQuery.noConflict();
jquery(document).ready(function(){
$(window).scroll(function () {
if (document.body.scrollTop > 100)
$('#menuBar').removeClass( "nav-menu" );
else
// something something
});
});
The above code is an extract from the SO answer from another topic (link given above). But when I add that code, I am seeing: Not enough arguments to Window.scroll. error for $(window).scroll(function (). I dont know why its expecting 2 arguments since the doc I read on scroll() uses without an argument. Have I done something wrong? Or has something changed with the later version of Jquery?
I am using jquery v1.11.0
Use a full jquery code. Working example:
#menuBar { background: yellow; width: 50px; height: 800px; }
#menuBar.nav-menu { background: red; }
<div id="menuBar" class="nav-menu"></div>
<div style="margin-bottom: 999em;"></div>
$(document).ready(function(){
$(window).on('scroll', function () {
var $body = $('body');
var $target = $('#menuBar');
if ($body.scrollTop() > 100 && $target.hasClass('nav-menu')){
$target.removeClass("nav-menu");
}
else if( $body.scrollTop() <= 100 && !$target.hasClass('nav-menu') ){
$target.addClass('nav-menu');
}
});
});
Make sure to check if the class is already added to prevent innecesary stuff.
Check jsfiddle
You can add an empty param if needed to your scroll function:
$(document).ready(function(){
$(window).scroll([], function () {
...
});
});
Take a look at this:
http://colorlib.com/wp/forums/topic/fix-a-bug-in-latest-version-window-scroll/

formulation of condition in if-statement

I have this:
$(function() {
if () {
$('#content').css('position', 'fixed');
});
});
So, now what I want:
If the 'top' of '#content' is 0, I want the css that is written down in the function to happen. But I don't know how to write that down in between the brackets after 'if'.
Maybe someone can help me with this basic if-statement?
Much thanks in advance!
edit-----------------------------
Seems to work better and better, still one problem though.. I now have this:
$(function() {
if ( $('#content').offset().top == 0) {
$('#content').css({'position' : 'fixed'});
}
else {
$('#content').css({'position' : 'relative'});
}
});
And this:
$(document).ready(function() {
$('#content').scrollTop('100%');
});
But now the div is immediately 'fixed'..
FIDDLE
Use $('selector').offset().top to get the numeric value of the top position.
if ($('#content').offset().top == 0) {
$('#content').css('position', 'fixed');
});
for more information you can see this
Also set your css in condition like this
$('#content').css({'position' : 'fixed'});
In case of your scroll to top you can do like this
$('#content').scrollTop(yourtopvalue); // your top value goes here.
For animated effects, you could do like this also
$('selector').animate({scrollTop:$('#content').offset().top}, 'slow');
You can mix up these stuffs like these ways using jQuery.

Categories

Resources