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);
Related
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()
})
Edit: I guess part of this is an issue of me being inexperienced with Drupal. I added a javascript file to site.info, so that it will be added to every page. This is all the file contains:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
When the site loads, it gets compiled into this larger script, which looks like this in the debugger:
(function ($) {
Drupal.behaviors.titlebar = {
init: function(context, settings) {
// Using percentage font size to easily increase/decrease page font size
var baseFontSize = 100;
$('.pgc-font-size a').click(function() {
if($(this).hasClass('increase')) {
if(baseFontSize < 150)
baseFontSize += 20;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
} else {
if(baseFontSize > 70)
baseFontSize -= 10;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
}
});
// Print button
$('.pgc-print a').click(function() {
window.print();
})
}
};
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.titlebar.init();
});;
(function ($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function(){
if($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
;
You can see my little script at the bottom there. It says there's something wrong with the first line, but I'm not sure what the problem is. What change would I need to make to my javascript file to make sure it compiles right?
I'm probably overlooking a really simple type, but I can't see what's wrong with my jQuery.
This is the part that's not working:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.website.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
I have jQuery on my site, I know I do because this it's used earlier in the code with no problem. The error is showing in the debugger on the first line, '$("#ct100_btnSearch001").on("click", function(){ '. Here is a larger section of the script page:
(function($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function() {
if ($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function($) {
$("#ctl00_btnSearch001").on("click", function() {
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);;
Try to install jQuery update Module.
If you are using Drupal 6, you are not be able to use on function.
One option is to include your custom version of jQuery in your page.tpl.php, another option (not recommended) is to use live, but now is deprecated.
You can bind a function to an event use two way:
1.use bind() method and the event name as the first argument
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
or
2.just use the event method
$( "#foo" ).click( function() {
alert( "User clicked on 'foo.'" );
});
The problem of your code is that there isn't a on event.
ref http://api.jquery.com/category/events/mouse-events/
If ctl00_btnSearch001 is a correct id for what ever you are trying to click. Try changing it to this:
(function ($){
$(document).on("click", "#ctl00_btnSearch001", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
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/
This question already has answers here:
Code working in jsFiddle but not in browser
(2 answers)
Closed 8 years ago.
HTML
<div id='countdown'></div>
Jquery
<script>
var elementPosition = $('#countdown').offset();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('#countdown').css({'position':'fixed','top':'0'});
} else {
$('#countdown').css('position','static');
}
});
</script>
This code is working on JSFiddle, but when I tried it, it didn't work for me.
I tried looking on the console (developer's view) and it's pointing on elementPosition.top . However, top is unknown property. Can someone help me with this?
The only reason I could see is the code is not in a dom ready handler
jQuery(function () {
var elementPosition = $('#countdown').offset();
$(window).scroll(function () {
if ($(window).scrollTop() > elementPosition.top) {
$('#countdown').css({
'position': 'fixed',
'top': '0'
});
} else {
$('#countdown').css('position', 'static');
}
});
})
Put your code inside DOM ready handler $(function() { .... }); to make sure all of your elements inside the DOM have been loaded properly before executing your javascript code
$(function() {
var elementPosition = $('#countdown').offset();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('#countdown').css({'position':'fixed','top':'0'});
} else {
$('#countdown').css('position','static');
}
});
});
Your code works in jsFiddle because jsFiddle has already done that part for you.
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.