responsive accordions are not working - javascript

my custom responsive accordions are not working. Requirement is to have heading and content for the desktop view but if it loads on smaller device will turn to accordions. I have just achieved it. But when I re-size the window it doesn't work well and functionality behaves weird animation and sometime it does't work.
Can anyone please help me to find out what is the problem in my code?
Below are jsBin URL and js code:
URL:
http://jsbin.com/zarak/5/edit
Code:
if($(window).width() < 360){
$('h2').on('click', function() {
var _target = $(this).next('.reponsiveTap');
if(_target.css('display') == 'none'){
_target.slideDown();
$(this).addClass('active');
}else{
_target.slideUp();
$(this).removeClass('active');
}
});
}
else if($(window).width() > 359){
$('h2').on('click', function() {
return false;
});
}
$(window).resize(function(){
if($(window).width() < 360){
$('h2').on('click', function() {
var _target = $(this).next('.reponsiveTap');
if(_target.css('display') == 'none'){
_target.slideDown();
$(this).addClass('active');
}else{
_target.slideUp();
$(this).removeClass('active');
}
});
}
else if($(window).width() > 359){
$('h2').on('click', function() {
return false;
});
}
});
Many thanks,
Mufeed Ahmad

Try this, here's a FIDDLE
$(window).resize(function() {
if($(this).width() < 360) {
$('.reponsiveTap').slideUp(400, 'linear');
$('.in-row h2').on('click', function() {
$('.reponsiveTap').stop().slideUp(400, 'linear').removeClass('active');
$(this).next('.reponsiveTap').stop().slideToggle(400, 'linear').addClass('active');
});
}
else {
$('.reponsiveTap').slideDown(400, 'linear');
$('.in-row h2').off('click');
}
});

Related

How to hide a div when the position of another div is less than a certain value

I'm trying to hide #back when #mobile-nav is positioned 0vw from the left. Here's what I have at the moment...
$(document).ready(function() {
var position = $("#mobile-nav").css("left", "0vw");
if (position < 0vw) {
$("#back").css("display", "none");
} else {
$("#back").css("display", "block");
}
);
Any idea as to why this isn't returning successfully?
Here's a link to the codepen https://codepen.io/spittman/pen/pBqYON
Try this:
var position = parseInt($("#mobile-nav").css("left"));
if (position <= 0) {
$("#back").css("display", "none");
}
else {
$("#back").css("display", "block");
}
try this
$("ul ul").hide();
$("li").click(function(event) {
$(this).children('ul').toggle();
event.stopPropagation();
});
$("li").click(function() {
$(this).siblings().children().hide();
});
$(".nav-child-trigger").click(function(){
$("#mobile-nav").animate({left: '-=100vw'});
});
$("#back").click(function(){
$("#mobile-nav").animate({left: '+=100vw'});
var position = $("#mobile-nav").position().left;
if (position > 0) {
$("#back").css("display", "none");
}
else {
$("#back").css("display", "block");
}
});
$(document).ready(function(){
});

jquery resize window click event added many times and ceases to work

jquery resize window click event added many times and ceases to work
onResize = function() {
if($(window).width() < 768) {
$('.menu-item-has-children').on('click', function() {
$(this).find('.sub-menu').toggle();
})
} else {
$('.menu-item-has-children').off('click');
}
}
var delay = (function() {
var timer = 0;
return function(callback, ms){
clearTimeout(timer);
timer = setTimeout(callback, ms);
}
})();
$(document).ready(onResize);
$(window).resize(function() {
delay(function(){
onResize();
},1000)
});
here when I change the width or orientation event click stops working
the event listener becomes a lot
http://prntscr.com/hbuazo
I went the other way and decided this question like this:
$(window).resize(function() {
if( $(window).width() > 768 ){
$('.menu-item-has-children').removeClass('menu-item-touch');
}
if( $(window).width() <= 768 ){
$('.menu-item-has-children').addClass('menu-item-touch');
}
});
if( $(window).width() > 768 ){
$('.menu-item-has-children').removeClass('menu-item-touch');
} else {
$('.menu-item-has-children').addClass('menu-item-touch');
}
$(document).on('click', '.menu-item-touch', function() {
$(this).find('.sub-menu').toggle();
});

jQuery Toggle don't stop toggling by scrolling

hello i have a little Problem with Jquery toggeling.
when I scroll to the div toggling don't wanna stop and play in a while.
I don't no how I can trigger only one time the toggling on the div entrance and to set it back on the div exit ( from the top).
there is my code
$(document).ready(function(){
$(".fa-home-mini").css("display", "none");
$('.fa-home-mini').click(function () {
if($('.navi').is(':visible')){
$('.navi').toggle('slide', {
direction: 'left'
}, 1000);
}
else{
$('.navi').toggle('slide', {
direction: 'left'
}, 1000);
}
});
$(window).scroll( function() {
var value = $(this).scrollTop();
if ( value > 480 ){
$(".fa-home-mini").css("display", "block");
$('.fa-home-mini').trigger('click');
}
else
{
$(".fa-home-mini").css("display", "none");
$(".navi").css("display", "block");
}
});
});
You can use off method inside the if block like below:
if ( value > 480 ){
$(".fa-home-mini").css("display", "block");
$('.fa-home-mini').trigger('click');
$(window).off('scroll')
}
Another approach will be:
var flag = false;
$(window).scroll( function() {
var value = $(this).scrollTop();
if ( value > 480 ){
if(!flag) {
$(".fa-home-mini").css("display", "block");
$('.fa-home-mini').trigger('click');
flag = true;
}
}
else
{
$(".fa-home-mini").css("display", "none");
$(".navi").css("display", "block");
}
});

Nav won't change size upon scrolling

So I found this jquery code to make my nav change its size when a user begins to scroll. It doesn't appear to be working, though...
$(function(){
$('.nav').data('size','big');
});
$(window).scroll(function(){
var $nav = $('.nav');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'60px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'40px'
}, 600);
}
}
Here is all the code:
http://codepen.io/DerekDev/pen/Bydgpz
So if any of you have a solution, it would be greatly appreciated. Thanks :)
try this:
$(function() {
$(window).scroll(function() {
var nav = $('.nav');
if ($(window).scrollTop() >= 0) {
if(!nav.hasClass("smallNav")) {
nav.hide();
nav.removeClass('bigNav').addClass("smallNav").fadeIn( "slow");
}
} else {
if(!nav.hasClass("bigNav")) {
nav.hide();
nav.removeClass("sml-logo").addClass('bigNav').fadeIn( "slow");
}
}
});
});
and CSS rules:
.bigNav{
height:60px;
}
.smallNav{
height:40px;
}
Firstly, you want to check the window scrollTop, not the body
Secondly, you want to change the height of the UL, not the .nav element, and you seem to have the order mixed up, you probably want 40px when it's small, and 60px when it's big !
$(window).scroll(function(){
var $nav = $('.nav');
if ($(window).scrollTop() > 0) {
console.log($nav.data('size'))
if ($nav.data('size') == 'big') {
$nav.data('size','small').find('ul').stop().animate({
height:'40px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').find('ul').stop().animate({
height:'60px'
}, 600);
}
}
});
PEN

Treating each div as a "page" when scrolling

I have a page that I'm building and I would like to make it that when I scroll (up or down) the page scrolls to the next div (each div is 100% the height of the window). And gets "fixed" there until you scroll again. An example of what I'm trying to accomplish can be seen here:
http://testdays.hondamoto.ch/
You will notice that when you scroll down, it automatically moves you to the next "div".
What I've tried:
Using the jQuery .scroll event combined with:
function updatePosition() {
if(canScroll) {
var pageName;
canScroll = false;
var st = $(window).scrollTop();
if (st > lastScrollTop){
// downscroll code
if(pageNumber < 7) {
pageNumber++;
}
pageName = '#' + getPageToScrollTo().id;
$('body').animate({ scrollTop: $(pageName).offset().top }, 2000, function() {
canScroll = true;
});
} else {
// upscroll code
if(pageNumber > 0) {
pageNumber--;
}
pageName = '#' + getPageToScrollTo().id;
$('body').animate({ scrollTop: $(pageName).offset().top }, 2000, function() {
canScroll = true;
});
}
lastScrollTop = st;
}
}
But the scroll event was getting called when the page was scrolling (animating), AND when the user scrolled. I only need it to be called when the user scrolls.
Then I added:
var throttled = _.throttle(updatePosition, 3000);
$(document).scroll(throttled);
From the Underscore.js library - but it still did the same.
Finally, I browsed here a bit and found:
Call Scroll only when user scrolls, not when animate()
But I was unable to implement that solution. Is there anyone that knows of any libraries or methods to get this working?
EDIT:
Solution based on Basic's answer:
function nextPage() {
canScroll = false;
if(pageNumber < 7) {
pageNumber++;
}
pageName = getPageToScrollTo();
$('html, body').stop().animate({ scrollTop: $(pageName).offset().top }, 1000, function() {
canScroll = true;
});
}
function prevPage() {
canScroll = false;
if(pageNumber > 0) {
pageNumber--;
}
pageName = getPageToScrollTo();
$('html, body').stop().animate({ scrollTop: $(pageName).offset().top }, 1000, function() {
canScroll = true;
});
}
//--Bind mouseWheel
$(window).on(mousewheelevt, function(event) {
event.preventDefault();
if(canScroll){
if(mousewheelevt == "mousewheel") {
if (event.originalEvent.wheelDelta >= 0) {
prevPage();
} else {
nextPage();
}
} else if(mousewheelevt == "DOMMouseScroll") {
if (event.originalEvent.detail >= 0) {
nextPage();
} else {
prevPage();
}
}
}
});
Ok...
The relevant code for the Honda site can be found in http://testdays.hondamoto.ch/js/script_2.js. It seems to be doing some calculations to locate the top of the div then scroll to it. There are handlers for different types of scrolling.
Specifically, the movement is handled by function navigation(target)
the key bits is here...
$('html,body').stop().animate({
scrollTop: $(target).offset().top + newMargin
}, 1000,'easeInOutExpo',function(){
//Lots of "page"-specific stuff
}
});
There are handlers for the scroll types...
$('body').bind('touchstart', function(event) {
//if(currentNav!=3){
// jQuery clones events, but only with a limited number of properties for perf reasons. Need the original event to get 'touches'
var e = event.originalEvent;
scrollStartPos = e.touches[0].pageY;
//}
});
//--Bind mouseWheel
$('*').bind('mousewheel', function(event, delta) {
event.preventDefault();
//trace('class : '+$(this).attr('class') + ' id : '+$(this).attr('id'));
if(!busy && !lockScrollModel && !lockScrollMap){
if(delta<0){
nextPage();
}else{
prevPage();
}
}
});
You'll note that the navigate() function sets a busy flag which is unset when scrolling completes - which is how it suppresses all new scroll events during a scroll. Try changing the direction of scroll while the page is already scrolling and you'll notice user input is being ignored too.

Categories