This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 3 years ago.
This is for a navigation header and it works, but I still get an error on line 2. VM4582 header.js:2 Uncaught ReferenceError: $ is not defined
I don't understand why it says $(window) is not defined.
// Sticky Header
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
// Mobile Navigation
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
// navigation scroll lijepo radi materem
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
If you are using $ then you are dealing with jQuery and this error will occure when you dont add jQuery cdn or jquery reference script file so kindly check the jQuery cdn and paste it in your head section and this will solve your problem.
Related
I have the following code in jQuery:
$('body').on('click', '#gtco-offcanvas ul a:not([class="external"]), .main-nav a:not([class="external"])', function (event) {
var section = $(this).data('nav-section');
if ($('[data-section="' + section + '"]').length) {
$('html, body').animate({
scrollTop: $('[data-section="' + section + '"]').offset().top - 55
}, 500, 'easeInOutExpo');
}
and I need to rewrite it in pure vanilla JS. I have tried to do this, but I just got a lot of errors and don't know how to correct them...
This is my version of the code:
document.body.addEventListener('click', function (e) {
if (e.target.closest('body #gtco-offcanvas ul a:not([class="external"]), .main-nav a:not([class="external"])')) {
var section = document.querySelector('data').dataset('nav-section');
if (document.querySelectorAll('[data-section="' + section + '"]').length) {
document.querySelectorAll('html, body').animate({
scrollTop: document.querySelectorAll('[data-section="' + section + '"]').offset().top - 55
}, 500, 'easeInOutExpo');
}
};
And the output is:
Uncaught TypeError: Cannot read property 'dataset' of null
If I try to let this line in jQuery to test that the rest part of the code is working, I get no errors, but it doesn't do anything also...
Assuming your html element has the data attribute data-nav-section="" what you are looking for would be:
var section = e.target.dataset.navSection;
e.target would be the equivilant of $(this) and dataset is not a function but a property having to use a camelcase naming convention when using dashes in the attribute name
You can use the matches method without the closest to test if the receiving element is the one delegated:
if (e.target.matches('#gtco-offcanvas ul a:not([class="external"]), .main-nav a:not([class="external"])')) {
var section = e.target.dataset['navSection'];
// ...
}
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);
I'm getting a few errors and not sure why.
I just want it to scroll to the parents div ID when it's clicked, it's getting the ID okay as I did a console log, so the issue is the scrolling part.
Error:
Uncaught TypeError: clickedPanel.offset is not a function
JS
$('#accordion .panel-heading .panel-title').click(function() {
$(this).parent().next().slideToggle(iconCallback);
$(".panel-collapse").not($(this).parent().next()).slideUp(iconCallback);
//scroll to clicked pabel
var container = $('#accordion'),
clickedPanel = $(this).parent().attr('id');
container.animate({
scrollTop: clickedPanel.offset().top - container.offset().top + container.scrollTop()
})
function iconCallback() {
var iconClass = $(this).is(':visible') ? 'fa-minus' : 'fa-plus';
$(this).prev().find('i').removeClass('fa-plus fa-minus').addClass(iconClass);
}
});
In your example clickedPanel is a string which does not have the offset() method. Instead set that variable to be the jQuery object returned from parent():
clickedPanel = $(this).parent();
I'm having a little trouble with a simple scroll to action I have made, I keep getting the following error:
Uncaught TypeError: Cannot read property 'top' of undefined
JSFiddle example: http://jsfiddle.net/cvLcsgm3/
JS:
// ordering page
$('#order-details').hide();
$('#order-details').on('click touchstart', function () {
$(this).show();
//showTarget(this.hash);
});
// Scroll To # Links
$('a[href*="#"]').click(function(e) {
//if (!$(this).hasClass('menu-button')) {
//e.preventDefault();
showTarget(this.hash);
$('body').removeClass('menu-open');
//}
});
$(window).load(function(e){
showTarget(window.location.hash);
});
function showTarget(target) {
target = target.replace('#', '');
if (target) {
$('html, body').animate({scrollTop: $('.' + target).offset().top}, 700, 'swing', function() {
window.location.hash = '#' + target;
});
}
}
Any ideas why I'm getting that error and how I can resolve it?
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.