jQuery Collapse when scroll - javascript

I need help here... I have a menu that is collapsible, when the page starts I want to stay open but when scroll down I want to be collapsed... Is there any option for that?
$('#slide-button').click(function(){
$('#menu-list').animate({width: 'toggle'},500);
$(this).toggleClass('inactive');
});
Here is my site http://astritbublaku.com/demos/dukagjini/

try this:
$(window).scroll(function(){
if ( $(window).scrollTop() > 0 ) {
$('#menu-list').animate({"width": minWidth },500);
$(this).addClass('inactive');
}
else
{
$('#menu-list').animate({"width": maxWidth },500);
$(this).removeleClass('inactive');
}
});

You can use following;
$(document).ready(function() {
// Start as opened
$(".book-toggle").trigger("click");
// When scrolled, if collapsible is opened, close it
$(window).scroll(function() {
// Check if it is already closed. It has class 'inactive' when it is open
if ($(".book-box").hasClass("inactive") == false) {
$(".book-toggle").trigger("click");
}
});
});

Related

How do I prevent the page from refreshing when closing the modal popup box>

So every time I close the popup modal the page will refresh and the popup will appear again so how do I prevent the page from refreshing and have the popup to fadeout once the user click close?
I am not sure if using e.preventDefault(); will do the trick.
Below are my code. Thank you.
$(document).scroll(function(){
var a = $(this).scrollTop();
if (a > 500) {
$("#mc_embed_signup").fadeIn();
} else
$(".popup-close").click(function(e){
closeSPopup();
});
});
function closeSPopup(e){
$("#mc_embed_signup").fadeTo(0);
e.preventDefault();
}
You need to pass the parameter e
$(".popup-close").click(function(e){
closeSPopup(e);
});
To not show on scroll after user clicked close, try this
$(document).scroll(function(){
console.log('scrolling - '+$("#mc_embed_signup").data('userClosed'));
if (!$("#mc_embed_signup").data('userClosed')) {
$(".popup-close").click(function(e){
closeSPopup(e);
});
var a = $(this).scrollTop();
if (a > 500) {
$("#mc_embed_signup").fadeIn();
}
}
});
function closeSPopup(e){
e.preventDefault();
$("#mc_embed_signup").data('userClosed',true);
$("#mc_embed_signup").fadeTo("slow", 0, function(){
//fadeto only set the opacity and doesn't actually hide the div
//So you need to hide the div after fadeto
$("#mc_embed_signup").hide();
}); //check fadeto here http://api.jquery.com/fadeTo/
}

Responsive menu not closing on item selection

EDIT: I'm not trying to be pushy but if someone knows how to help me with this, I'd really appreciate it.
www.kwpei.com is the site I'm working on, the issue I'm having is with the responsive menu not closing after a menu or submenu item is chosen. Ive been told the place to make the change needed is in global.js which I've included here in its current state. Could someone show me how to fix the issue?
jQuery(function( $ ){
$('.site-header').addClass('front-page-header');
$('.footer-widgets').prop('id', 'footer-widgets');
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');
$(".responsive-menu-icon").click(function(){
$(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 800) {
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});
$(".responsive-menu > .menu-item").click(function(event){
if (event.target !== this)
return;
$(this).find(".sub-menu:first").slideToggle(function() {
$(this).parent().toggleClass("menu-open");
});
});
// Local Scroll Speed
$.localScroll({
duration: 750
});
// Sticky Navigation
var headerHeight = $('.site-header').innerHeight();
var beforeheaderHeight = $('.before-header').outerHeight();
var abovenavHeight = headerHeight + beforeheaderHeight - 1;
$(window).scroll(function(){
if ($(document).scrollTop() > abovenavHeight){
$('.nav-primary').addClass('fixed');
} else {
$('.nav-primary').removeClass('fixed');
}
});
});
You can slide up the menu again on clicking any of the menu items. Try adding this bit of jquery:
$('.menu-item a').click(function () {
$('.responsive-menu').stop(true, true).slideUp();
});
EDIT:
$('.menu-item a').click(function () {
if ($(window).width() < 800) {
$('.sub-menu').stop(true, true).slideUp();
$('.responsive-menu').stop(true, true).slideUp();
$('.menu-item').removeClass('menu-open');
}
});
If 800px is your breakpoint in the media query

Back to top button not triggering properly

I have a back to top button that appears when you scroll a little bit .It's working fine but when scrolling if I get to the footer i want the button to go above the footer.
I used the jquery animate method to change the bottom css rule of the button when I get to the bottom of the page.But that effect doesn't happen instantly on my website because i have more javascript and i think it needs to go through all the code before it runs the effect and It's just not working properly.
Where is the problem ? .Here is what I have done : JSFIDDLE
var offset = 250;
var duration = 500;
$(window).scroll(function () {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
} else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').on('click', function () {
event.preventDefault();
$('html,body').animate({ scrollTop: 0 }, duration);
return false;
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$('.back-to-top').animate({ 'bottom': '400px' });
} else $('.back-to-top').animate({ 'bottom': '10%' });
});
It seems like adding a class that changes the position of the div, and toggling it when the condition is true solved the problem .

scrolling down when using JQuery slidetoggle()

I have 2 footer (footer-larg) & (footer-bottom) i need when i click a link in footer-bottom (flip) .. footer-larg toggle && scroll down to footer-bottom
until now footer-larg toggle but not scroll down
$("#flip").click(function() {
$("#footer-large").slideToggle("slow");
if ($("#footer-large").is(':visible')) {
$("html, body").animate({scrollTop: $("#footer-large").offset().top});
}
});
Why not let the browser handle the scroll?
Try this:
$("#flip").click(function() {
$("#footer-large").slideToggle("slow");
if ($("#footer-large").is(':visible')) {
window.location = '#footer-large';
}
});

Scroll bar not scrolling after active div is closed

I have a fixed menu system that slides out and covers 100% of the screen once it is pressed. When it is active the the main scrollbar you will have the ability to scroll through the menu in the active div. Once you close the menu the scrollbar will not allow me to scroll the whole site anymore, it will only scroll the length of the div the slides out.
How can I fix this issue? I need the scrollbar to control the menu once it is active, then have the ability to scroll the whole site once the menu is not active.
Here is my JS and the full code http://jsfiddle.net/8P9kh/8/
$(function(){
window.status=0;
$('#menu').click(function(){
if(window.status==0){
$('#slidingMenu').stop().animate({left:'0px'},500);
window.status=1;
$('body, html').css('overflow','hidden');
}
else{
$('#slidingMenu').stop().animate({left:'-100%'},500);
window.status=0;
$('body, html').css('overflow-y','scroll');
}
});
})
//Close menu when you click Footer
$('#more').click(function () {
var open = $('header').is('.open');
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=200'
}, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('').is('.open')) {
$('')
.removeClass('open')
.animate({
'bottom': "-=200"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('footer').slideUp(400);
}
});
$('.footerButton').click(function () {// Change wording once pressed
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=200"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#dropFooter').slideToggle(400);
}
}
});
Right now, you're setting the CSS overflow property to hidden when the menu shows up, but then setting overflow-x property to scroll, leaving the overflow property at hidden. Reset the overflow property back to auto:
$('body, html').css('overflow', 'auto');

Categories

Resources