Slide Toggle After Page Resize Bugging - jQuery - javascript

I have created a collapsible navigation which works fine on page load, but on the resizing of the window it seems to get trippy and slides up and down a number of times (can be just twice, or can go on for up to ten times).
(function ($) {
$.fn.myfunction = function () {
$(".navi-btn").hide();
$(".navigation").show();
};
})(jQuery);
(function ($) {
$.fn.mysecondfunction = function () {
$(".navi-btn").show();
$(".navigation").hide();
$(".navi-btn").click(function () {
$(".navigation").slideToggle();
});
$("li").click(function () {
$(".navigation").slideToggle();
});
$("#width").text("too small");
};
})(jQuery);
$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
$(window).resize(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
});
});
Here is a "working" demo jsfiddle
I have written the script myself, so I am sure there is an easy fix, I just don't seem to know what I have done.
I was thinking perhaps after a resize, would reloading the function be a good workaround, and if so how can this effect be achieved?

You are adding the click event while resizing the window. This will bind the same function multiple times to the click event. So the best option would be to bind the event only once which could be done on ready event. In this link I limited this binding in resize event itself by adding a class to the navi-btn and checking that.
$(".navi-btn").not(".binded").addClass("binded").click(function () {
$(".navigation").slideToggle();
});
Hope this gives you an idea.
Thanks,
Jothi

I had a quick test and found that removing the resive condition and putting it into it's own function seemd to fix the issue
From
$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
$(window).resize(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
});
});
to
$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
});
$(window).resize(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
});

Related

Disable javascript function in specific size of screen

I want to disable the javascript function in specific size of screen - and enable it in specific size of screen.
Here is my code:
$(document).ready(function(){
$("#moveleft").click(function(){
if ($(window).width() < 768) {
$('.box__image').animate({'left' : "-=330px"});
}
});
});
You could listen to window's size change event
$(document).ready(function() {
$(window).on('resize', function() {
if ($(this).width() < 768) {
$("#moveleft").click(function() {
$('.box__image').animate({
'left': "-=330px"
});
});
} else {
$("#moveleft").off('click')
}
});
});

How not to execute JavaScript code when the screen has a specific size?

I am using the following to add and remove CSS classes based on the current scroll position:
$(function() {
var header = $(".grid-bar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
header.addClass("move");
} else {
header.removeClass("move");
}
});
});
But I want to disable the addition and removal of the CSS classes on a screen size smaller than 800px.
I have tried wrapping the code in a resize function but after I do so, it stops responding at all:
$(window).resize(function(){
if ($(window).width() => 800){
var header = $(".grid-bar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
header.addClass("move");
} else {
header.removeClass("move");
}
});
}
});
As others have mentioned, you have an improper operator for "greater than or equal to". The following is incorrect:
if ($(window).width() => 800) {
// ^^ this operator is wrong
if ($(window).width() >= 800) {
// ^^ it should be like this
Also, you need to bind and unbind the scroll handler whenever the screen size changes. You will need to keep track of whether or not the scroll handler is bound or not. Here is what that looks like:
const $window = $(window);
const $header = $(".grid-bar");
let isBound = false;
const scrollHandler = function() {
const scroll = $window.scrollTop();
if (scroll >= 400) {
header.addClass("move");
} else {
header.removeClass("move");
}
}
$(window).resize(function(){
if ($window.width() >= 800) {
if (!isBound) {
$window.on('scroll', scrollHandler);
isBound = true;
}
} else if (isBound) {
$window.off('scroll', scrollHandler);
isBound = false;
}
});
$window.trigger('resize');
Here is a fiddle: https://jsfiddle.net/1mru359x/5/

Back to top scroll jquery is not working in chrome. Why. Its works fine in firefox

http://jsfiddle.net/gilbitron/Lt2wH/
it work when i open in chrom browser. but not in my project. am using bootstrap css and js file.
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
Some have answer it in the link Scroll to top button not working in chrome or safari. but not works for me.
Thanks in advance.
You should place your js inside the $(document).ready() function. Like this:
$( document ).ready(function() {
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
});

How to make two different functions work on window resize

I want to make a sticky banner, which becomes fixed at top when it is scrolled and unsticks at the end of the page. The document height is dependent upon images, that's why I use window load event. I have the following code:
function saleBanner() {
$(window).bind("load", function() {
// Make sale banner fixed-at-top
var s = $('.sale-container');
var pos = s.offset();
var maxTop = $(document).outerHeight() - 828 - s.outerHeight(); // 828 is the total height of site footer and sign up form
function fixedBanner() {
var currentTop = $(window).scrollTop();
if (currentTop >= pos.top && currentTop < maxTop) {
s.attr("style", ""); //kill absolute positioning
s.addClass('fixed-at-top'); //stick it
} else if (currentTop >= maxTop) {
s.removeClass('fixed-at-top'); //un-stick
s.css({bottom: 0}); //set sticker right above the footer
} else {
s.removeClass('fixed-at-top'); //top of page
}
}
$(window).scroll(fixedBanner);
});
}
saleBanner();
I want to make this function work on window resize as well. So I added the following code:
function resizeBanner() {
var viewportWidth = $(window).width();
if (viewportWidth > 767) {
saleBanner();
}
}
I have one more function resizeWindow for mobile menu, which I also need to work on window resize. So when I put this two functions together, they don't work (although they work on window resize separately):
$(window).resize(function(e) {
resizeWindow(e);
resizeBanner(e);
});
Where is my mistake? How can I make both functions work on window resize?
Update: Here is the whole code for resizeWindow function. It's rather long, but may be it would be helpful for the answer.
// Mobile menu
var MQM = 768;
var viewportWidth = $(window).width();
function navSlide() {
var headerHeight = $('.cd-header').height();
$(window).on('scroll', {previousTop: 0}, function () {
var currentTop = $(window).scrollTop();
//check if user is scrolling up
if (currentTop < this.previousTop ) {
//if scrolling up...
if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
$('.cd-header').addClass('is-visible');
} else {
$('.cd-header').removeClass('is-visible is-fixed');
}
} else {
//if scrolling down...
if(!$('.cd-header').hasClass('menu-is-open')) {
$('.cd-header').removeClass('is-visible');
}
if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
}
this.previousTop = currentTop;
});
}
// Primary navigation slide-in effect on load
if(viewportWidth < MQM) {
navSlide();
}
function addOverflow() {
$('html').addClass('overflow-hidden');
$('body').addClass('overflow-hidden');
}
function removeOverflow() {
$('html').removeClass('overflow-hidden');
$('body').removeClass('overflow-hidden');
}
function hideHeader() {
$('.cd-header').removeClass('is-fixed is-visible');
}
function hideMenu() {
$('.cd-header').removeClass('menu-is-open is-fixed is-visible');
$('.cd-menu-icon').removeClass('is-clicked');
}
function resizeWindow() {
var viewportWidth = $(window).width();
$(window).off('scroll'); // unbind scroll event
if (viewportWidth > 767) {
if ($('.cd-primary-nav').hasClass('is-visible')) {
if ($('.algolia__search-content').hasClass('algolia__search-content--active')) {
hideMenu();
$('.search-trigger').addClass('is-clicked');
$('.search-header').addClass('is-fixed');
} else {
hideMenu();
if (!$('.js-algolia__input').is(':focus')) {
$('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
removeOverflow();
});
$('.search-trigger').removeClass('is-clicked');
$('.search-header').removeClass('is-fixed');
} else {
$('.search-trigger').addClass('is-clicked');
$('.search-header').addClass('is-fixed');
}
}
} else {
hideHeader();
}
} else {
navSlide();
if ($('.cd-primary-nav').hasClass('is-visible')) {
$('.cd-header').addClass('menu-is-open');
$('.cd-menu-icon').addClass('is-clicked');
$('.search-trigger').removeClass('is-clicked');
$('.search-header').removeClass('is-fixed');
}
}
}

Browser resize as a function listener to animate other elements

So, I've got a function animateSection() that animates two elements, #awards and #twitter.
I want to make it so that if a user resizes the browser
function animateSection() {
var $checker = $(window).width(),
$twitter = $('#jstwitter'),
$awards = $('#awards');
var distance = 20,
duration = 500;
if($checker > 1140) {
$twitter.fadeIn(duration, function() {
$awards.fadeIn(duration);
});
}
else {
$(window).resize(function(){
// here is where I run into trouble...
if($checker > 1140) {
$twitter.animate({left: distance}, duration);
$awards.animate({right: distance}, duration);
}
});
}
}
When you're first run the function you're storing $(window).width() in a local variable, $checker, then on resize you're checking that variable. It's not going to change! Try replacing:
if ($checker > 1140) {
with:
if ($(window).width() > 1140) {

Categories