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/
Related
Have this code and tried to hide my side navbar when clicked outside the #nav, got this error.
Cannot read property 'addEventListener' of null
$( document ).ready( function() {
setTimeout(function(){
$('.menu-opener').click(function(){
$('#nav').toggleClass('active');
});
let slide = document.querySelector('#nav .active');
slide.addEventListener('click', function(e) {
if (e.target !== slide) return;
$('#nav').removeClass('active');
});
}, 1000);
});
answer is that you need to detect click outside of div you are trying to hide:
$(window).click(function() {
//Hide the menus if visible
});
//stopping above function from running when clicking on #nav itself
$('#nav').click(function(event){
event.stopPropagation();
});
Try this inside setTimeout
$('body').on('click','#nav .active', function(e){
// your logic
})
OR
$( "'#nav .active'" ).bind( "click", function(e) {
// your logic
});
instead of
let slide = document.querySelector('#nav .active');
slide.addEventListener('click', function(e) {
if (e.target !== slide) return;
$('#nav').removeClass('active');
});
Got this working with
$(document).click(function(event) {
if(!$(event.target).closest('#nav').length && !$(event.target).closest(".menu-opener").length)
{
$('#nav').removeClass('active');
}
});
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
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
here is my fiddle
I have a click function (item) that shows 'item-overlay' but i'd like to also add a hover to preview the div 'item-overlay' by 100px I added a mouseenter and mouseleave with height to my current code but this then works on click ?! this is my click function -
}).on('click', '.item', function (e) {
(".item click");
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').slideToggle('fast');
}
and an example of what i tried to do -
}).on("mouseenter", ".item", function(e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').height(100); }
}).on("mouseleave", ".item", function(e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').height(0); }
The problem is that your other open/close animations use hide and show, which also alter the display style.
Try this JSFiddle: http://jsfiddle.net/TrueBlueAussie/w4v01t46/3/
}).on("mouseenter", ".item", function (e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').css({display: "block"}).height(100);
}
}).on("mouseleave", ".item", function (e) {
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').hide().height('');
}
});
notes:
height('') will reset the height css to inherit (i.e no value).
If you want the height reset when you click again set it with the slideToggle call:
}).on('click', '.item', function (e) {
(".item click");
if ($(this).closest('.timelineTile').hasClass("clicked")) {
e.stopPropagation();
$(this).siblings('.item-overlay').height('').slideToggle('fast');
}
JSFiddle: http://jsfiddle.net/TrueBlueAussie/w4v01t46/5/
I have a working clickevent handler (don't know if it's the right word for it) on a page which uses show/hide (like tabs) if you click on one of the on-page links. This works perfectly, but now I walk into another issue.
When I link to one of the tabs from a different page, eg. /page-slug/#tabtoshow it won't show the right tab, it just shows the first (open) tab. I want it to show the right tab when a URL contains the same id, eg #tabtoshow. The tabs will have the same id as the link.
This is my current script.
$(function() {
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
});
$(document).ready(function() {
$('a[href="#ondernemen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ondernemen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#groeien"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#groeien').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#ondernemen').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#spelen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#spelen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('a[href="#ontdekken"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ontdekken').slideDown(1000);
$('#spelen').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
})
$('a[href="#ontdekken"]').parent('.label').addClass("active");
});
Thanks in advance!!
If you're moving to another physical page, not a virtual page, you will need to handle the hash on the new page. You'd need to access location.hash or location.pathname and do something based on the hash value. You could handle it similarly to this:
$(document).ready(function() {
displayTab(location.hash);
});
Your code had some repetition, I have written a more general version for you. Also, I have used location.hash to determine what tab to activate.
$(document).ready(function() {
var selector = "#ondernemen, #ontdekken, #groeien, #spelen";
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
$(selector).click(function() {
var that = this;
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$(selector).each(function() {
if ($(this).attr("id") !== $(that).attr("id")) {
$(this).slideUp(1000);
}
});
$(this).slideDown(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
});
$(location.hash).parent('.label').addClass("active");
});