Develop Reference

jQuery menu in need of additional functionality

I wanted to create a small and lean as possible menu that hides itself on scroll at certain viewport height, shows itself after You click a button, and I did, but I have 2 problems with it:
Here is a Fiddle for You to follow along.
When you show the menu by clicking the button it appears, but the only way for it to go away is if You scroll down or up. How can I make it dissapear if I click somewhere out of the #sideBar container e.g. the site.
When You refresh the page using a soft-refresh (F5) the menu appears because the browser understands that as if the page have been scrolled. Is there a way to bypass this as well?
Here is some code, just because the fiddle requires it:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
} else {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
});
$(document).ready(function(){
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
});
Thanks in advance!

Test the target:
DEMO
function hideIt() {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
function showIt() {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
hideIt()
} else {
showIt();
}
});
$(function(){
if ($(document).scrollTop() < 400) showIt(); // show at start
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) hideIt();
});
});
Here is a shorter version
DEMO
function toggleIt(show) {
if (show) {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
else {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
}
$(document).scroll(function () {
var y = $(this).scrollTop();
toggleIt(y > 400);
});
$(function(){
toggleIt($(document).scrollTop()<400);
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) toggleIt(false);
});
});

I can help with the first question, you can change your JQuery code below so that when the parent 'content' container is clicked the menu slides up.
$(document).ready(function(){
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});
I'm not sure I follow the second question? Please can you provide more information on what you mean.

For Question 1, Just put the following code in ready function
$('#content').click(function(){
$('#sideBar').slideUp();
});
EDITED
For Question 2, put following code in ready function
$(document).trigger('scroll');
In short, your ready function should look like
$(document).ready(function(){
$(document).trigger('scroll');
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});

A child, combination of #mplungjan and #Gagan Jaura's responses seems to do the job:
function hideIt() {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
function showIt() {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
hideIt()
} else {
showIt();
}
});
$(function(){
showIt(); // show at start
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) hideIt();
});
});
$(document).ready(function(){
$(document).trigger('scroll');
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});

Script not running in modal window

I've got a script that changes the background when an anchor touches the top of the page.
https://jsfiddle.net/u9pexc4v/
var targetOffset = $("#anchor-point").offset().top;
var $w = $(window).scroll(function () {
if ($w.scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
});
However, it does not work when it's inside the modal window.
https://jsfiddle.net/qhrmtass/

I believe you need to attach the scroll event to the element that's scrolling.
$('.remodal').scroll(function () {
console.log('Scrolling...');
if ($('.remodal').scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
});
Updated fiddle

jQuery toggle menu items and sheet

I have written code that works very well, but unfortunately it is not perfect functional. I will describe briefly the action:
When I click on '.navbar-nav li a' parent and '.sheets, .sheetsBg' get active class.
If I click again '.navbar-nav li a' is properly removed only for the menu item parent class.
code:
function manageSheetsToggle() {
var navMenuItem = '.navbar-nav li a';
$(navMenuItem).click(function (e) {
if (!isTabletResolution() && !isPhoneResolution()) {
{
var sheetId = $(this).parent().data('target');
if ($('.sheets, .sheetsBg').hasClass('active')) {
$('.sheets, .sheetsBg').removeClass('active');
}
e.preventDefault();
$(this).parent().toggleClass('active').siblings().removeClass('active');
$("#" + sheetId).toggleClass('active').siblings().removeClass('active');
$(".sheets, .sheetsBg").addClass("active");
}
} else {
$(navMenuItem).click(function (e) {
e.preventDefault();
location.href = $(this).attr('href');
}
);
}
});
$('.sheetsBg, .corpoBelt, .header').click(function () {
$(".sheets, .sheetsBg").removeClass("active");
});
}
pls help.

I hope this is what you are luking for. I changed your code a little bit, but it works fine now. Try it and let me know
<script type="text/javascript">
var sheet, ln, cn = 0;
$(document).ready(function () {
$("#toggleMenu").find("a").on("click", function (e) {
ln = $(this);
sheet = ln.parent().data('target');
$("#" + sheet).toggleClass("active").siblings().removeClass('active');
$(".sheets").find("section").each(function () {
if ($(this).hasClass("active"))
cn++;
});
if (cn) {
$(".sheets").addClass('active');
cn = 0;
} else
$(".sheets").removeClass('active');
});
$('.corpoBelt').click(function () {
$(".sheets").removeClass("active");
});
});
</script>

I think you can use siblings() selector more easier
https://jsfiddle.net/2q50kj3a/1/

jquery show hide each div onclick

I have a dynamic number of divs which generated through asp.net. I need to show each div contents by clicking on its header. I have tried this {
$(function () {
var myHead = $(".toggle-container").find(".toggle-header");
var myBody = $(myHead).parent().find(".toggle-content");
$(myHead).click(function () {
if ($(myBody).css('display') === 'none') {
$(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
$(this).parent().find(".toggle-content").slideDown("slow");
} else if ($(myBody).css('display') === 'block') {
$(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
$(this).parent().find(".toggle-content").slideUp("slow");
};
});
});
But it's working only for first header and rest of the headers doesn't collapse it's children content. Here is the JsFiddle Link what I have tried so far. Can anyone give a fix?

The problem was how you were finding the content to be displayed/hidden. You need to find the content related to the clicked header you the code var myBody = $(myHead).parent().find(".toggle-content"); should go inside the click handler as var myBody = $(this).next()
$(function () {
var myHead = $(".toggle-container .toggle-header");
$(myHead).click(function () {
var myBody = $(this).next()
if ($(myBody).css('display') === 'none') {
$(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
$(this).parent().find(".toggle-content").slideDown("slow");
} else if ($(myBody).css('display') === 'block') {
$(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
$(this).parent().find(".toggle-content").slideUp("slow");
};
});
});
Demo: Fiddle
Note: Still the up-down arrows are nor working because you need to use find() instead of children()
But it can be simplified as
jQuery(function ($) {
var $heads = $(".toggle-container .toggle-header");
$heads.click(function () {
var $this = $(this);
$this.find('i').toggleClass('icon-chevron-sign-down icon-chevron-sign-up');
$this.next().slideToggle("slow");
});
});
Demo: Fiddle

The below would work.
In your original code you had assigned the variable myBody a value at the time of load itself. Since there are many such elements, it used only the first one.
Now I have moved the value setting for the myBody variable to be inside the click event and used $(this). This will make sure that it always finds the element in relation to the current element that was clicked.
$(function () {
var myHead = $(".toggle-container").find(".toggle-header");
$(myHead).click(function () {
var myBody = $(this).parent().find(".toggle-content");
//console.log('yes');
if ($(myBody).css('display') === 'none') {
$(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
$(this).parent().find(".toggle-content").slideDown("slow");
} else if ($(myBody).css('display') === 'block') {
$(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
$(this).parent().find(".toggle-content").slideUp("slow");
};
});
});
Fiddle Demo

make 'each' cycles occur consecutively

I have two actions I need to apply to a set of DIV's, but I need one cycle to happen before the other is finished.
Here is my code:
$("div").each(function(){
//do stuff first
}).each(function(){
//do stuff next
});
but at present, do stuff next happens before do stuff first finishes. Anything I can do to stop this?
Full Script
$("div").each(function(){
if($(this).html() === "yes"){
$(this).fadeOut(time,function(){
$(this).parent().height(0);
});
}
}).each(function(){
if($(this).html() !== "yes"){
$(this).parent().height(25);
$(this).fadeIn(time);
}
});

Knowing that you want to fadeIn and then set height, will this do what you require?
var divs = $('div');
divs.fadeIn(function () {
divs.height('200');
});
Using each to allow different settings for different divs:
$('div').each(function () {
var div = $(this), toggle = true;
div.fadeIn(function () {
if (toggle = !toggle) {
div.height('200');
} else {
div.width('200');
}
});
});
Seeing your code snippet I believe I got it now:
var yesDivs = $('div').filter(function () {
return $(this).html() === 'yes';
});
yesDivs.fadeOut(time, function () {
yesDivs.parent().height(0);
$('div').filter(function () {
return $(this).html() !== 'yes';
}).fadeIn(time).parent().height(25);
});