Develop Reference

Adding code to existing .js to collapse navbar when click outside menu

Currently I use .js for my sticky navbar in Bootstrap 4.1.3 which works as desired. I have tried to insert a function in the script, which makes the navbar bar collapse on mobile phones if you click outside the menu. However, without luck. https://biogenity.com/RC19/index.html
The code I am currently using is:
$(document).ready(function () {
var stickyToggle = function (sticky, stickyWrapper, scrollElement) {
var stickyHeight = sticky.outerHeight();
var stickyTop = stickyWrapper.offset().top;
if (scrollElement.scrollTop() >= stickyTop) {
stickyWrapper.height(stickyHeight);
sticky.addClass("is-sticky");
}
else {
sticky.removeClass("is-sticky");
stickyWrapper.height('auto');
}
};
$('[data-toggle="sticky-onscroll"]').each(function () {
var sticky = $(this);
var stickyWrapper = $('<div>').addClass('sticky-wrapper');
sticky.before(stickyWrapper);
sticky.addClass('sticky');
$(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function () {
stickyToggle(sticky, stickyWrapper, $(this));
});
stickyToggle(sticky, stickyWrapper, $(window));
});
});
I want to be able to implement a similar function as the following. It is not certain that this is the best solution for "collapse when you click outside the menu".
$(document).on('click', function(event){
var $clickedOn = $(event.target),
$collapsableItems = $('.collapse'),
isToggleButton = ($clickedOn.closest('.navbar-toggle').length == 1),
isLink = ($clickedOn.closest('a').length == 1),
isOutsideNavbar = ($clickedOn.parents('.navbar').length == 0);
if( (!isToggleButton && isLink) || isOutsideNavbar ) {
$collapsableItems.each(function(){
$(this).collapse('hide');
});
}
});
Thanks in advance.

Based on your code, try this:
$(document).click(function (event) {
var clickedOn = $(event.target),
isNavbar = clickedOn.hasClass('navbar'),
// Target only nav links not all links
isNavbarLink = clickedOn.closest('.nav-link').length == 1,
navbarCollapse = $('.navbar-collapse'),
isNavbarOpen = navbarCollapse.hasClass('show');
// if its not navbar and navbar is opened
if (!isNavbar && isNavbarOpen) {
// if the user is not cliking on the nav links
if (!isNavbarLink) {
// thes close the navbar
navbarCollapse.collapse('hide');
}
}
});

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();
})
});

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/

select.js Select boxes overlapping on open

I am having an issue with a custom select box using a script. It is working but for instance if you start at the bottom select box and click it, then click the middle, then the top it works as it is supposed to by closing the previous box.
However, if you click the middle box after the top one, the top box will also open and this will happen with all of the boxes.
Is there any solution to this?
Here is my jsFiddle
function tamingselect()
{
if(!document.getElementById && !document.createTextNode){return;}
var ts_selectclass='turnintodropdown'; // class to identify selects
var ts_listclass='turnintoselect'; // class to identify ULs
var ts_boxclass='dropcontainer'; // parent element
var ts_triggeron='activetrigger'; // class for the active trigger link
var ts_triggeroff='trigger'; // class for the inactive trigger link
var ts_dropdownclosed='dropdownhidden'; // closed dropdown
var ts_dropdownopen='dropdownvisible'; // open dropdown
var count=0;
var toreplace=new Array();
var sels=document.getElementsByTagName('select');
for(var i=0;i<sels.length;i++){
if (ts_check(sels[i],ts_selectclass))
{
var hiddenfield=document.createElement('input');
hiddenfield.name=sels[i].name;
hiddenfield.type='hidden';
hiddenfield.id=sels[i].id;
hiddenfield.value=sels[i].options[0].value;
sels[i].parentNode.insertBefore(hiddenfield,sels[i])
var trigger=document.createElement('a');
ts_addclass(trigger,ts_triggeroff);
trigger.href='#';
trigger.onclick=function(){
ts_swapclass(this,ts_triggeroff,ts_triggeron)
ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);
return false;
}
trigger.appendChild(document.createTextNode(sels[i].options[0].text));
sels[i].parentNode.insertBefore(trigger,sels[i]);
var replaceUL=document.createElement('ul');
for(var j=0;j<sels[i].getElementsByTagName('option').length;j++)
{
var newli=document.createElement('li');
var newa=document.createElement('a');
newli.v=sels[i].getElementsByTagName('option')[j].value;
newli.elm=hiddenfield;
newli.istrigger=trigger;
newa.href='#';
newa.appendChild(document.createTextNode(
sels[i].getElementsByTagName('option')[j].text));
newli.onclick=function(){
this.elm.value=this.v;
ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff);
ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed)
this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;
return false;
}
newli.appendChild(newa);
replaceUL.appendChild(newli);
}
ts_addclass(replaceUL,ts_dropdownclosed);
var div=document.createElement('div');
div.appendChild(replaceUL);
ts_addclass(div,ts_boxclass);
sels[i].parentNode.insertBefore(div,sels[i])
toreplace[count]=sels[i];
count++;
}
}
var uls=document.getElementsByTagName('ul');
for(var i=0;i<uls.length;i++)
{
if(ts_check(uls[i],ts_listclass))
{
var newform=document.createElement('form');
var newselect=document.createElement('select');
for(j=0;j<uls[i].getElementsByTagName('a').length;j++)
{
var newopt=document.createElement('option');
newopt.value=uls[i].getElementsByTagName('a')[j].href;
newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerHTML));
newselect.appendChild(newopt);
}
newselect.onchange=function()
{
window.location=this.options[this.selectedIndex].value;
}
newform.appendChild(newselect);
uls[i].parentNode.insertBefore(newform,uls[i]);
toreplace[count]=uls[i];
count++;
}
}
for(i=0;i<count;i++){
toreplace[i].parentNode.removeChild(toreplace[i]);
}
function ts_check(o,c)
{
return new RegExp('\\b'+c+'\\b').test(o.className);
}
function ts_swapclass(o,c1,c2)
{
var cn=o.className
if (o.nodeName.toUpperCase()=='A'&&ts_check(o,c1)){
if (ts_swapclass.lst&&ts_swapclass.lst!=o){
ts_swapclass(ts_swapclass.lst,ts_triggeroff,ts_triggeron);
ts_swapclass(ts_swapclass.lst.parentNode.getElementsByTagName('ul') [0],ts_dropdownclosed,ts_dropdownopen);
}
ts_swapclass.lst=o;
}
o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2);
}
function ts_addclass(o,c)
{
if(!ts_check(o,c)){o.className+=o.className==''?c:' '+c;}
}
}
window.onload=function()
{
tamingselect();
}

I was unable to fix the code so I found a quick work around that works perfect.
Thanks to everyone that tried.
*Fix
$( ".d2" ).click(function() {
$('.d3 .dropcontainer').css("display", "none");
});
$( ".d1" ).click(function() {
$('.d2 .dropcontainer').css("display", "none");
});
$( ".d1" ).click(function() {
$('.d3 .dropcontainer').css("display", "none");
});
$( ".d3" ).click(function() {
$('.d1 .dropcontainer').css("display", "none");
});
$( ".d3" ).click(function() {
$('.d2 .dropcontainer').css("display", "none");
});
$('.d3').click(function() {
$('.d3 .dropcontainer').css("display", "block");
});
$('.d2').click(function() {
$('.d2 .dropcontainer').css("display", "block");
});
$('.d1').click(function() {
$('.d1 .dropcontainer').css("display", "block");
});

$(document).mouseup(function (e){
div_cld = $('.dropcontainer');
div_par = $('.activetrigger');
if (!div_cld.is(e.target) && !div_par.is(e.target) && div_cld.has(e.target).length === 0) {
div_cld.find('ul').removeClass('dropdownvisible');
div_cld.find('ul').addClass('dropdownhidden');
}
});

jquery - sorting li position when other li expand

wonder if anyone could help me on this:
when my animation expands the <li> to reveal the content, there are jumps and sometimes some places remain empty due to the floating of the <li> elements, it makes sense and it is correct but i was just wondering if i could somehow tell the <li>s to re-order in order to occupy all the available space if any.
(function ($) {
// Get all menu items with IDs starting with "filter-" and loop over them
$(".menu li[id|=filter]").each(function () {
// Get the ID add extract the page class name from it (remove "filter-" from it)
var type = $(this).attr("id").replace("filter-", "");
// Get the items in the "webbies" list with that class name
var items = $(".webbies li[class~=" + type + "]");
// Don't do anything if there aren't any
if (items.length == 0) return;
// Get a list of the other items in the list
var others = $(".webbies li:not([class~=" + type + "])");
// Add a click event to the menu item
$("a", this).click(function (e) {
// Stop the link
e.preventDefault();
// Close open item
if (openItem) {
close(openItem);
}
items.removeClass("inactive").animate({
opacity: 1
});
others.addClass("inactive").animate({
opacity: 0.2
});
});
});
var openItem;
// Opens an item
var open = function (item) {
// Close open item
if (openItem) close(openItem);
$("img", item).first().hide("slow");
item.animate({
width: 350,
height: 370
});
$("div.info", item).show("slow", function () {
$("div.fader", item).animate({
opacity: 1
});
});
// Set open item
openItem = item;
};
// Closes an item
var close = function (item) {
$("div.fader", item).animate({
opacity: 0
}, function () {
$("div.info", item).hide("slow");
item.animate({
width: 150,
height: 90
});
$("img", item).first().show("slow");
});
// Reset open item
openItem = null;
};
$(".webbies li").each(function () {
var item = $(this);
$("div.fader", item).css("opacity", 0);
$("a.showMe", item).click(function (e) {
e.preventDefault();
if (item.hasClass("inactive")) return;
open(item);
});
});
})(jQuery);
Thanks

The first thing I thought of was to use jQuery Masonry and recalculate after resizing with .masonry( 'reloadItems' )

the solution was to use masonry as linked by the previous comments, my final code is this:
jQuery(function(){
jQuery('#container').masonry({
itemSelector: '.box',
columnWidth: 190,
animate: true
});
});
(function ($) {
// Get all menu items with IDs starting with "filter-" and loop over them
$(".menu li[id|=filter]").each(function () {
// Get the ID add extract the page class name from it (remove "filter-" from it)
var type = $(this).attr("id").replace("filter-", "");
// Get the items in the "webbies" list with that class name
var items = $("#container div[class~=" + type + "]");
// Don't do anything if there aren't any
if (items.length == 0) return;
// Get a list of the other items in the list
var others = $("#container div:not([class~=" + type + "])");
// Add a click event to the menu item
$("a", this).click(function (e) {
// Stop the link
e.preventDefault();
// Close open item
if (openItem) {
close(openItem);
}
items.removeClass("inactive").animate({opacity: 1});
others.addClass("inactive").animate({opacity: 0.2});
});
});
var openItem;
// Opens an item
var open = function (item) {
// Close open item
if (openItem) close(openItem);
$("img", item).first().hide("slow");
item.width(340)
item.height(360);
$("div.fader", item).animate({opacity: 1}, function () {
$("#container").masonry('reloadItems', function () {
$("div.info", item).show("slow");
});
});
// Set open item
openItem = item;
};
// Closes an item
var close = function (item) {
$("div.fader", item).animate({opacity: 0});
$("div.info", item).hide("slow");
item.animate({width: 150, height: 100}, function () {
$("img", item).first().show("slow");
$("#container").masonry('reloadItems');
});
// Reset open item
openItem = null;
};
$("#container div.box").each(function () {
var item = $(this);
$("div.fader", item).css("opacity", 0);
$("a.showMe", item).click(function (e) {
e.preventDefault();
if (item.hasClass("inactive")) return;
open(item);
});
});
})(jQuery);