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)); });
Related
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);
});
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!
Currently I remove class from the element in 2000
setTimeout(function(){
$('.nav-item a').removeClass('active');
}, 2000);
How can I amend my code to remove class when the 'autoscroll' is finished?
$('.nav-item a, .nav-brand a, .button, .footer2 a').click(function() {
event.preventDefault(); // default action of the event will not be triggered, eg will not change links name
var windowSize = $(window).width();
if (windowSize >= 769) {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top - 51
}, 1500);
}
else if (windowSize <= 768) {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top - 102
}, 1500);
}
return false; });
I guess I should somehow use attribute href, but I am not sure how.
You can do it by defining a complete callback into animate method.
$('.nav-item a, .nav-brand a, .button, .footer2 a').click(function() {
event.preventDefault(); // default action of the event will not be triggered, eg will not change links name
var windowSize = $(window).width();
var scrollY;
if (windowSize >= 769) {
scrollY = $($(this).attr('href')).offset().top - 51;
} else {
scrollY = $($(this).attr('href')).offset().top - 102;
}
$('html, body').animate({
scrollTop: scrollY
}, 1500, function() {
$('.nav-item a').removeClass('active');
});
return false;
});
JQuery Animate takes a final argument complete function, so you should be able to write something like:
$('.nav-item a, .nav-brand a, .button, .footer2 a').click(function() {
event.preventDefault();
var windowSize = $(window).width();
if (windowSize >= 769) {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top - 51
}, 1500, function() {
$('.nav-item a').removeClass('active');
});
} else if (windowSize <= 768) {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top - 102
}, 1500, function() {
$('.nav-item a').removeClass('active');
});
}
return false;
});
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
I tried to implement the scroller with top to bottom and bottom to top with jquery. I recently tried with percent.
From the Top to bottom with pixel is seems ok.(Means it works) for the bottom to top is only make scroll not completely finish if i mention percentage as 100
$('#spnTop').on("click",function(){
var percentageToScroll = 100;
var percentage = percentageToScroll/100;
var height = jQuery(document).height();
var documentHeight = $(document).height();
var scroll = $(window).scrollTop();
alert(scroll);
var scrollAmount = Math.round((height) * percentageToScroll/ 100)-scroll;
//alert(point);
alert(scrollAmount);
$('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
alert("reached top"); });
});
Here is the fiddle.
For Example:
percentageToScroll is now 100 but the ending of scroll is not completely finish. (from bottom to top)
For top to bottom is 100 then it completely scroll to bottom of the page.
I am not sure how to make it workable.
Thanks.
Vicky
What about this?
$('#spnTop').on("click",function(){
var percentageToScroll = 100;
var percentage = percentageToScroll/100;
var height = $(document).scrollTop();
var scrollAmount = height * (1 - percentage);
alert(scrollAmount);
$('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
alert("reached top"); });
});
$('#spnbottom').on("click",function() {
var percentageToScroll = 100;
var height = $(document).innerHeight();
var scrollAmount = height * percentageToScroll/ 100;
alert(scrollAmount);
var overheight = jQuery(document).height() - jQuery(window).height();
//alert(overheight);
jQuery("html, body").animate({scrollTop: scrollAmount}, 900);
});
Fiddle here
As I specified in comment I prepared a Demo
$(document).on("click","#spnTop",function(){
$('html,body').animate({scrollTop: 0}, 1500);
});
$(document).on("click","#spnbottom",function() {
var window_height = $(window).height();
var document_height = $(document).height();
$('html,body').animate({ scrollTop: window_height + document_height },1500);
});
I hope it may help you
jQuery(document).ready(function($){
$('#goToTop').on("click",function(){
$("html, body").animate({ scrollTop: 0 }, 2000);
return false;
});
$('#goToBottom').on("click",function() {
$("html, body").animate({scrollTop: $(document).innerHeight()}, 2000);
return false;
});
});
Now see you need the percentages
See demo here:
http://jsfiddle.net/a3g4d/
$('#spnTop').on("click",function(){
var percentage = 100;
var height = $(document).height();
var remove = +height / +100 * +percentage;
var spaceFromTop = +height - +remove;
$('html,body').animate({ scrollTop: spaceFromTop }, 'slow', function () {});
});
You can also use the span positions if you have top and bottom span always.
$('#spnTop').on("click",function(){
$('html,body').animate({
scrollTop: $("#spnbottom").offset().top
}, 'slow', function () {
alert("reached top");
});
});
http://jsfiddle.net/4qLvC/8/
I hope something like this :) might help you
$('#spnTop').on("click",function(){
$('html,body').animate(
{ scrollTop: 0 },
'slow',
function () {});
});
$('#spnbottom').on("click",function() {
var window_height = $(window).height();
var document_height = $(document).height();
$('html,body').animate(
{ scrollTop: window_height + document_height },
'slow',
function () {});
});
Use this link to try it out : demo
$(function () {
$("#scrollToBottom").click(function () {
$('html, body').animate({ scrollTop: window.screen.height }, 400);
});
$("#scrollToTop").click(function () {
$('html, body').animate({ scrollTop: 0 }, 400);
});
});