I'm using the Slide and Push Menus from codrops (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) and it works fine but I want that the menu closes once you click outside of the menu. You can find the Html, css and Javascript on the site.
I read through a lot of similar stackoverflow threads but can't make it work.
It would be awesome if someone could help me !
As #Xufox commented before in the question. An approach like this:
function closemenu(e) {
example = document.getElementById('example');
if (e.target !== example) {
example.style.display = 'none';
}
};
document.addEventListener('click', closemenu);
You should bind this in the document or window as described in comments as a better way.. =)
Live example.
Hope it helps. Nice coding !
Related
I tried making a button toggle between two functions but I can't get it to work. Could you guys tell me why?
function a(el) {
document.getElementById("myNav").style.height = "100%";
}
function b(el) {
document.getElementById("myNav").style.height = "0%";
}
$("menubutton").click(function() {
return (this.tog = !this.tog) ? a() : b();
});
It's supposed to open/close the navigation but it does nothing at all :/
There are several errors in your code.
Anyway, if I get your requirements (i.e. jus toggling the visibility of the myNav component), and supposing menubutton is the ID of a button:
$("#menubutton").click(function() {
$("#myNav").toggle();
});
See specs:
http://api.jquery.com/toggle/
Instead, you you need a show function and an hide function for your components, to reuse somewhere else, you can use $("#myNav").show() or $("#myNav").hide()
It would be a bit long to explain why but they way I wanted to it doesn't work with toggleClass.
Anyway, Rory McRossan (first comment under my question) found the solution it was just a typo. I was pretty sure I tried this solution but I obviously didn't. Thank you Rory
I'm quite the amateur when it comes to Javascript, hence why I'm posting this on here. I've spent quite a lot of time searching for the answer but can't seem to find it.
I've created a FAQ Accordion on jsfiddle and can't for the life on me get it to add an active class/state when the tabs are extended so I can apply styling appropriately.
If anyone can be of any assistance it would be greatly appreciated :)
$(function () {
$('.acc_trigger a').click(function () {
$('.acc_trigger').next('.acc_container').slideUp();
$(this).closest('.acc_trigger').next('.acc_container').stop().slideDown();
return false;
})
$('.expand').click(function () {
$('.acc_trigger').closest('.acc_trigger').next('.acc_container').slideDown('slow');
return false;
})
$('.collapse').click(function () {
$('.acc_trigger').next('.acc_container').slideUp('slow');
return false;
})
});
jsfiddle
What yakutsa said, but to answer your question you can continue to use Jquery and use the .addClass('addedClass') to the end of whichever you wish to change.
For example if you want the opened container to have a red background
$('.acc_trigger').next('.acc_container').slideUp().addClass('addedClass');
width css
.addedClass {
background: red;
}
when you close it, use .removeClass('addedClass');
here's a fiddle
What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.
I think my problem is fairly simple, however I am unable to figure it out. I want to close a note pop up with an "x" icon/div in the top right corner of the note.
Currently I have this as the code. The only solution to minimize the note is to double click on it, which obviously isn't a viable solution.
$('.note').click(function (event) {
$(this).find('.notepopup').show();
});
$('.note').dblclick(function (event) {
$(this).find('.notepopup').hide();
});
I tried changing the second part to target the '.close' div, like this:
$('.close').click(function (event) {
$(this).find('.notepopup').hide();
});
I am beginning to think it has something to do with the relationship between .close and .notepopup - as in - .close is within the popup, whereas .note is in a sense the parent element of .notepopup
Any help would be great. If you really want to get crazy, you can look at what I'm working on: http://www.scottefloyd.com/notewebapp/demo.php
The problem is that you're looking for '.notepopup' inside '.close'. You need $(this).parents('.notepopup'); and that should get the element.
So I'm trying to achieve something seemingly very basic in jQuery. I have a number of "headers," and when I click on a header I want the info beneath that header to slide down, and all other header info to slide up (so that only one header is showing info at a time).
Here's sudo code of what I want to happen:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
[all other ('.game-info-text')].slideUp(fast)
});
For the life of me though, I can't figure out how to code that second line ([all other ('.game-info-text')]). Any help is much appreciated!
(I'm implementing this as a drupal behavior, which is why I have the "jquery-processed" class being added)
Something like:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
$('.more-info-header').not(this).children('.game-info-text').slideUp(fast);
// ^-- removes the clicked element from all `.more-info-header`
});
Reference: .not()
Sounds like you're after the jQuery UI Accordion plugin.
$('.more-info-header:not(.jquery-processed)')
.addClass('jquery-processed').click( function(e) {
var these = $(this).children('.game-info-text').slideToggle("slow");
$('.game-info-text').not(these).slideUp("fast");
});
With the not() function you can exclude the already selected elements.
Like this?
$('.more-info-header').click(function(e){
var target = e.target || e.srcElement;
$(this).children().not(target).find('.game-info-text').slideUp('fast');
$('.game-info-text', target).slideToggle("slow");
});