Scrolling to an element using jQuery - javascript

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

Related

JQuery to vanilla JavaScript translation not working

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'];
// ...
}

How to fix 'Uncaught ReferenceError: $ is not defined' [duplicate]

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.

Console Error: Uncaught TypeError: Cannot read property 'top' of undefined

I'm trying to get a div class to scroll to the top when .recipeImgs li is clicked. I tried the code below but i am getting the error message
Uncaught TypeError: Cannot read property 'top' of undefined". Not sure how to fix the issue
Thanks
$('.recipeImgs li').on('click',function (e) {
e.preventDefault();
console.log("clicked");
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-50
}, 900, 'swing', function () {
window.location.hash = target;
});
});
The issue, as someone pointed out in one of the comments, is that $target has no element, which means that the .offset() method returns undefined. Obviously there is no property top on undefined, hence the error.
You might reconsider writing your function something like this:
$(document).on('click', '.recipeImgs li', function(evt){
evt.preventDefault();
var $target = $(this);
if(!$target.length) return;
$('html, body')
.stop()
.animate({
'scrollTop': $target.offset().top - 50
}, 900, 'swing', function(){
window.location.hash = '[target]';
})
});
This fixes several things. First of all, it delegates the listener to the document, so if your li is dynamically appended, you'll still be able to grab the event (as it bubbles up the DOM). There's also a check for $target.length. This just ensures that you don't try to retrieve the offset of an empty collection, resulting in an error and breaking your code.

JS/jQuery - Try to achieve show a div on and off use mouseenter() mouseleave() so not to get repeated animations

So here's my code:
var timeouts = {};
$('#nav ul > li').mouseenter(function() {
clearTimeout(timeouts['menu']);
$(this).find('div.dropdown').stop(true).slideDown(200);
});
$('#nav ul > li').mouseleave(function() {
timeouts['menu'] = setTimeout(function() {
$(this).find('div.dropdown').stop(true).slideUp(200);
}, 1000)
});
This doesn't seem to be working. Any idea?
Is there any other way to achieve my goal? The code now works when I hover my mouse over but the div will not slide up when my mouse leaves.
Inside of your anonymous function, this is probably not defined as a HTML element.
Put this in the proper scope:
var timeouts = {'menu': false};
$('#nav ul > li').hover(function() {
if (timeouts['menu'] !== false) {
clearTimeout(timeouts['menu']);
}
$(this).find('div.dropdown').stop(true).slideDown(200);
}, function() {
var $this = $(this);
timeouts['menu'] = setTimeout(function() {
$this.find('div.dropdown').stop(true).slideUp(200);
}, 1000)
});
Also, you're probably going to get an error if you try to call timeouts['menu'] without it being defined first. I'd set it to a default value and then check if it exists before using it.
You could try the hoverIntent plugin or have a look at some of the solutions here: jQuery if mouse is over for 2 sec. begin animation or don't animate at all

Get Element ID On Click

I have set up the following function to change the position of the #help Div on load.
document.getElementById('help').style.left="600px";
How would I make it work on clicking the #help div? (I tried the following)
$('#help').click()document.getElementById('help').style.left="600px";)
Using plain JavaScript you can set the onclick event with:
document.getElementById("help").onclick = function() {
this.style.left = "600px";
}
Using JQuery you can set the click event with click() method:
$("#help").click(function() {
this.style.left = "600px";
});
$("#help").click(function () {
$(this).css({
left: 600
});
});
Edit:
Wrong copy... My bad...

Categories

Resources