We Keep Coding

Cannot open file dialog box present inside pop up screen using jQuery/JavaScript

I am trying to open the file dialog using jQuery but it's not opening inside the pop-up screen. If I am putting it outside the pop-up div it's working fine. I am providing my code below.
$(document).ready(function(){
$(document).on('click', '.brevent', function(e){
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
e.preventDefault();
console.log('hello');
});
$(document).on('change', '.file', function(){
$(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
})
$(document).ready(function() {
$("#addeventdiv").on('click', function(e) {
e.stopPropagation();
});
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("body").on('click', function(e) {
if (e.target.className == "#addeventdiv") {
} else {
$('#addeventdiv').css("display", "none");
}
});
});
Here is my full plunkr code. I have one Add event button. When user will click on this button the form will display and there user has to click on Attachment button which is not working as per expected.

Your delegation fails. Likely because the dialog blocks the document click.
Just add this to any of the loads since the button click does not need to be delegated since it exists in the code at load time
$('.brevent').on("click", function(e){
e.preventDefault();
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
console.log('hello');
});

Your handler for all clicks in #addeventdiv gets the event first and stops propagation. I think https://plnkr.co/edit/FWRAKwlUeIRarY6bZl9n?p=preview will work as you expect:
$(document).ready(function() {
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("#addeventclose").on('click', function(e) {
$('#addeventdiv').css("display", "none");
});
$("body").on('click', function(e) {
if (!$(e.target).parent("#addeventdiv").length) {
$('#addeventdiv').css("display", "none");
}
});
});
Just as a stylistic nitpick, you only need one document ready handler per file

Prevent window scrolling and then unbind after button click - Jquery

I'm trying to prevent scrolling of my site until a button is clicked and then allow scrolling. I can successfully prevent the scrolling but then I can't unbind this function. Here is my code:
Thanks in advance!
$('body').addClass('noscroll');
$('.fold-trigger').click(function(event) {
$('body').removeClass('noscroll')
console.log('removed');
});
if ($('body').hasClass('noscroll')){
$(window).bind('scroll', function(){
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
})
});
} else {
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault(false);
e.stopPropagation(false);
}
})
}
}

You should change your logic if you want to toggle this class on your body.
$('body').on('mousewheel', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
e.stopPropagation();
}
});
Then add and remove noscroll class whenever you wish.

Using JQuery to open close menu

ok so I have this script that controls an open/close of menu ....
of the three major functions (seen below) the first two work well in that the button-toggle changes its class (to an X) "active" which makes it an X.
However the fourth (commented out )function doesn't work... This was designed so that when you click on the body or anywhere other than the menu when it is open , it will close. please can someone help me to rewrite the last function so that it works.
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
/*$('body').on('click', function(e){
if( !$(this).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});*/
});
I have provided a JSFiddle below (The menu is set to full colapse on startup not open as in the demo fyi)
http://jsfiddle.net/greggy_coding/ppX53/66/

Use e.target instead of this, as this refers body and not current clicked element.
event.target
The DOM element that initiated the event.
$('body').on('click', function (e) {
if (!$(e.target).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});
Updated Fiddle

Here is the modified javascript that would work:
$(document).ready(function(){
$('#menu').multilevelpushmenu();
});
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function (e) {
e.stopPropagation();
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
$('#menu').on('click', function(e) {
e.stopPropagation();
});
$('body').on('click', function(e){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
});
});
Here is the forked working jsfiddle:
http://jsfiddle.net/ytnLyqrv/1/

Fade in fade out related div animation

So I have this code
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn().siblings('.popup').hide();
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
But I'm not quite sure how to animate it. What I want to do is when you click a link, the div fades in (it works), but when you click the related links, I don't want the box to fade out and in again (except for the texts inside it though).
Here's the fiddle
Thanks! x

Hope this works for you
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn(function(){
$(this).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the updated fiddle

To get this to fade properly both ways I think you need to play with the z-index:
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).css('z-index', 1).fadeIn(function(){
$(this).css('z-index', 0).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the fiddle

responsive jquery nav interaction - issue on resize

Requirement:
Horizontal nav in 900px or above and vertical in 900 below. but in 900 or below, the nav should hide by default and appear only when clicked on the "header"
What I have so far:
http://jsfiddle.net/0rmgpjtr/3/
$(document).ready(function(){
$('.dropdown ul:first').show();
$('.dropdown ul:first').css("display:table");
$('.dropdown li').click(function (e) {
$(this).addClass('active').siblings('li').removeClass('active');
$(this).children('ul').slideToggle('fast');
$(this).siblings('li').find('ul').slideUp('fast');
e.preventDefault();
e.stopPropagation();
});
$(document).on('click', function (event) {
$('.dropdown li').children('ul').slideUp('fast');
});
});
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.ch-logo').bind('click',function(){
$('.dropdown').slideToggle('fast');
})
}else{
console.log("900+");
$('.ch-logo').unbind()
}
}).resize();
Issue:
1. binding and unbinding the header click event is not working
2. when i click on parent link to open subnav, it is flickering after i resize the browser - actually any interaction, starts flickering the menu, may be because its tied to resize function.

http://jsfiddle.net/extca38f/
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.dropdown').hide();
$('.ch-logo').bind('click',function(){
$('.dropdown').toggle();
});
}else{
$('.dropdown').show();
}
}).resize();

Use toggle instead of slidetoggle Demo Here
$(window).on("resize", function () {
if($(window).width()<=900){
console.log("800");
$('.dropdown').hide();
$('.ch-logo').bind('click',function(){
$('.dropdown').toggle('slow');
});
}else{
$('.dropdown').show();
}
}).resize();
Check the differnce between toggle and slidetoggle