We Keep Coding

target.attr is not a function, length undefined jquery onclick

I have these two on click events for two different classes, they have one part of the code that is the same for both of them, so I tried making a function that would contain the part of the code which is the same, and then cal, that function inside onclick, but I keep getting one error.
This is the code that works properly:
$(list).on('click', function() {
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
$(list).addClass("mobile-select--sticky");
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var target = $(this.getAttribute('href'));
if (target.length) {
//prevent default bhebahvior
event.preventDefault();
var topDistance = target.offset().top;
var bottomDistance = documentHeight - topDistance;
if (windowHeight > bottomDistance) {
$(container).css('padding-bottom', topDistance + 'px');
};
var stickyTopHeight = $(list).outerHeight();
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 150
}, 1000);
if($(window).width() <= 769) {
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 100
}, 1000);
}
}
if($(window).width() <= 769) {
if (!$(this).hasClass(list_expanded)) {
$(this).addClass(list_expanded);
$(arrow).addClass("mobile-select__arrow--active")
$(listItem).addClass(listItem_expanded);
} else {
$(this).removeClass(list_expanded);
// $(this).slideUp();
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
}
}
if ($(window).width() > 769) {
$(this).addClass(list_expanded);
$(arrow).addClass("mobile-select__arrow--active")
$(listItem).addClass(listItem_expanded);
}
});
$(link).on('click', function() {
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
$(list).addClass("mobile-select--sticky");
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var target = $(this.getAttribute('href'));
if (target.length) {
//prevent default bhebahvior
event.preventDefault();
var topDistance = target.offset().top;
var bottomDistance = documentHeight - topDistance;
if (windowHeight > bottomDistance) {
$(container).css('padding-bottom', topDistance + 'px');
}
var stickyTopHeight = $(list).outerHeight();
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 150
}, 1000);
if($(window).width() <= 769) {
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 100
}, 1000);
}
}
});
And this is what I tried doing but with zero luck, since I've been getting these errors: Uncaught TypeError: target.attr is not a function
Uncaught TypeError: Cannot read property 'length' of undefined
function doSomething(target) {
target = target || $(this);
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
$(list).addClass("mobile-select--sticky");
var windowHeight = $(window).height();
var documentHeight = $(document).height();
if (target.attr('href').length) {
//prevent default bhebahvior
event.preventDefault();
var topDistance = target.offset().top;
var bottomDistance = documentHeight - topDistance;
if (windowHeight > bottomDistance) {
$(container).css('padding-bottom', topDistance + 'px');
};
var stickyTopHeight = $(list).outerHeight();
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 150
}, 1000);
if($(window).width() <= 769) {
$('html, body').stop().animate({
scrollTop: target.offset().top - stickyTopHeight - 100
}, 1000);
}
}
}
$(list).on('click', function() {
doSomething($(this));
if($(window).width() <= 769) {
if (!$(this).hasClass(list_expanded)) {
$(this).addClass(list_expanded);
$(arrow).addClass("mobile-select__arrow--active")
$(listItem).addClass(listItem_expanded);
} else {
$(this).removeClass(list_expanded);
// $(this).slideUp();
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
}
}
if ($(window).width() > 769) {
$(this).addClass(list_expanded);
$(arrow).addClass("mobile-select__arrow--active")
$(listItem).addClass(listItem_expanded);
}
});
$(link).on('click', doSomething);
I just wanted to try and write these events in a shorter way. Is that possible?

This is probably the one that's failing:
$(link).on('click', doSomething);
The doSomething function expects its one argument to be a jQuery object for a DOM element, but the click event passes the event object, not the element which invoked the event. You can pass the element as a jQuery object the same way you do in your other click handler:
$(link).on('click', function () { doSomething($(this)); });

On scroll the active menu does not chaning

I've created a right side menu but when i scrolling down it is not changing the active class to next menu,I've used this code lots of time but this time i'm not getting the result,
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
DEMO

you need to define scrollLink and you can give some animation effect when you click an anchor link by adding a function like this
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
Demo : http://jsfiddle.net/3xmop98u/

I think you are missing var scrollLink = $('.myanimate'); in your code. Adding this line in your DEMO make the code work.
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
var scrollLink = $('.myanimate');
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
$(".myanimate").click(function (){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
});

Javascript Error on page, because of loaded jQuery

I wrote some jQuery that checks the location of the person on the page and add some classed.
But when I load the jQuery I see a lot of errors in the browser console.
When scrolling the number of errors increase.
I get the following error:
TypeError: undefined is not an object (evaluating 'refElement.position().top')
Geselecteerd element
How can I solve this?
jQuery:
(function($) {
$(window).scroll(function() {
var sticky = $('.menu-header-product'),
scroll = $(window).scrollTop();
var elementOffset = jQuery("#productnav").offset();
if (scroll >= elementOffset.top - 88) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$(window).scroll(function() {
var sticky = $('.content'),
scroll = $(window).scrollTop();
var elementOffset = jQuery("#productnav").offset();
if (scroll >= elementOffset.top - 88) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$(document).ready(function() {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 88 /**just subtract the height of the fixed html part */
}, 500, 'swing', function() {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event) {
var scrollPosition = $(document).scrollTop();
$('nav a').each(function() {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top - 88 <= scrollPosition && refElement.position().top - 125 + refElement.height() > scrollPosition) {
$('nav ul li a').removeClass("active");
currentLink.addClass("active");
}
else {
currentLink.removeClass("active");
}
});
}
})(jQuery.noConflict());

You have not written any style for your .active class,
I have just added a color:red to it and it seems to work fine.
Working DEMO: https://jsfiddle.net/pytduk9q/3/
Hope this helps!

Animate scroll between sections - without a plugin

Im trying to create a script that animates the scrolling between section on my page without using a plugin - just pure jquery. But seems that I'm experiencing some issues when I try and scroll my page. Can anyone help me?
Here is my jsFiddle
And my code:
$(document).ready(function() {
$('.main').bind('mousewheel', function(e){
var mHeight=$(document).height()/8;
console.log(mHeight);
if(e.originalEvent.wheelDelta /120 > 0) {
// alert('up');
$('html, body').animate({
scrollTop: mHeight
}, 1000);
}
else{
// alert('down');
$('html body').animate({
scrollTop: -mHeight
}, 1000);
}
});
});

check this
$('body').bind('mousewheel', function (e) {
e.stopPropagation();
e.preventDefault();
var mHeight = $(document).height() / 8;
console.log(mHeight);
if (e.originalEvent.wheelDelta / 120 > 0) {
// alert('up');
$('html, body').stop().animate({
scrollTop: -mHeight
}, 1000);
}
else {
// alert('down');
$('html body').stop().animate({
scrollTop: mHeight
}, 1000);
}
});
Demo
Edit
var index = 1;
$('body').bind('mousewheel', function (e) {
e.stopPropagation();
e.preventDefault();
var mHeight = $(document).height() / 8;
console.log(mHeight);
if (e.originalEvent.wheelDelta / 120 > 0) {
// alert('up');
index--;
mHeight = mHeight * index;
$('html, body').stop().animate({
scrollTop: mHeight
}, 1000);
}
else {
// alert('down');
index++;
mHeight = mHeight * index;
$('html body').stop().animate({
scrollTop: mHeight
}, 1000);
}
});
Updated Fiddle

jQuery animate callback with promise still fires too early

I scroll my homepage back up if the logo in my menu is clicked. I also have a listener on $(window).scroll() which animates an object out of the screen with a negative margin.
My problem is that this event gets triggered with the animation (animate scrollTop).
This shouldn't occur because I have a boolean variable which has to be true to do this, I only set this on true AFTER the scroll animation using a combination of .promise() and .done().
This is my JavaScript:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500).promise().done(resetFirstScroll());
});
});
var resetFirstScroll = function() {
firstscroll=true;
}
A solution would be to give the function a setTimeout of 50 milliseconds, but I'd rather do it correctly after the animation is completed.
Using the standard callback gives the same output:
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
resetFirstScroll();
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}

For those who want the "hacky" solution:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
setTimeout( resetFirstScroll, 50 );
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}