I have a left menu and when I click it appears and there is a cross button with id close-button when I clicked on it, menu disappears, I need to close also when click anywhere except menu.
site link
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
//bodyEl.addEventListener( 'click', toggleMenu ); //
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
/**content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} ); */
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init();
})();
You'd better go with something like this. Just give an id to the div which you want to hide and make a function like this.Call this function by adding onclick event on document.
document.onClick=myFunction(event) {
if(event.target.id!="popupDiv_id" || event.target.id=="closeButton_Id")
{
document.getElementById("popupDiv_id").style.display="none";
}
}
If I understand the problem correct you can use the onblur="toggleMenu();" to run the javascript function when the element looses focus. It is the opposite of the onfocus()event.
<div class="menu-element" onblur="toggleMenu();"/>
Can also add the eventlistner in the javascript:
var x = document.getElementById("menu-wrap");
x.addEventListener("blur", toggleMenu, true);
There is some examples of it here: https://www.w3schools.com/jsref/event_onblur.asp
code look like this
$('body').on('click', function (e) {
// hide any open popovers when the anywhere else in the body is clicked
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.menu-element').has(e.target).length === 0 && $(this).is(":visible")) {
var target=$("#popupDiv_id").hide();
}
});
Simply bind a click event to the body to close the menu. Then use event.stopPropagation(); on click of the menu.
Related
I am using the snippet found at to http://tympanus.net/Development/MorphingSearch/ enlarge a search box when it is clicked..
<script>
(function() {
var morphSearch = document.getElementById( 'morphsearch' ),
searchlink = document.getElementById( 'mybtn' ),
input = morphSearch.querySelector( 'input.morphsearch-input' ),
ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' ),
isOpen = isAnimating = false,
// show/hide search area
toggleSearch = function(evt) {
// return if open and the input gets focused
if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;
if( isOpen ) {
classie.remove( morphSearch, 'open' );
// trick to hide input text once the search overlay closes
// todo: hardcoded times, should be done after transition ends
if( input.value !== '' ) {
setTimeout(function() {
classie.add( morphSearch, 'hideInput' );
setTimeout(function() {
classie.remove( morphSearch, 'hideInput' );
input.value = '';
}, 300 );
}, 500);
}
input.blur();
}
else {
classie.add( morphSearch, 'open' );
}
isOpen = !isOpen;
};
// events
searchlink.addEventListener( 'click', toggleSearch );
ctrlClose.addEventListener( 'click', toggleSearch );
// esc key closes search overlay
// keyboard navigation events
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
if( keyCode === 27 && isOpen ) {
toggleSearch(ev);
}
} );
/***** for demo purposes only: don't allow to submit the form *****/
morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
})();
</script>
All works great but as the search box is in a fixed header the page content jumps to the top when the link is clicked.
Previously when this has happened i have inserted the following...
event.preventDefault();
I can't work out where to insert this in this code though, can anyone help?
You insert it in the function that is called by the click event handlers
toggleSearch = function(evt) {
if (evt.type === 'click') {
evt.preventDefault();
}
// rest of code
}
searchlink.addEventListener( 'click', toggleSearch );
ctrlClose.addEventListener( 'click', toggleSearch );
Note the condition, it's to make sure the default action isn't prevented when the keydown handler is calling the same function
Let me start this off with I'm working with someone else's code and am still relatively new to jquery/javascript. I am also using classie.js from another file. If any of this code can be improved please let me know - I am still learning.
I would post html but it's rather long. If it's an issue let me know and I will try and get a live version of my site up.
I'm trying to toggle a mobile menu with two different open buttons: sticky-open-button and open-button.
It works fine right up until I go to close the menu element if the target is not the menu element or one of its descendants. Then it will ONLY let openbtn open the menu.
Problem Code:
// close the menu element if the target is not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== ( openbtn || stickyopenbtn ) ) {
toggleMenu();
}
} );
}
All code:
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
stickyopenbtn = document.getElementById( 'sticky-open-button' ),
closebtn = document.getElementById( 'close-button' ),
openbtn = document.getElementById( 'open-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
stickyopenbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target is not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== ( openbtn || stickyopenbtn ) ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init(); //make onclick talk to menu
})();
Your OR condition is wrong as openbtn || stickyopenbtn will always return openbtn instance so the click of stickyopenbtn won't be evaluated.
content.addEventListener('click', function (ev) {
var target = ev.target;
if (isOpen && (target !== openbtn && target !== stickyopenbtn)) {
toggleMenu();
}
});
$( document ).on('click', '.toggle_comments', function( event ){
event.preventDefault();
var container = $('div[name="comments"]');
if ( container.css('display') == 'block' ) {
container.hide();
return;
}
container.fadeIn(500);
});
When .toggle_comments is clicked, the container fades in. Is there a way to do something, ie fadeout, if anything outside the container is clicked WHILE it's display block? Bearing in mind, obviously, that .toggle_comments is outside of it in the first place. So it needs to be a live event, something that only fires while the container is in the state if display:block.
You can bind a mousedown event to document and check if the element clicked on is not div[name="comments"] like so:
$(document).mousedown(function(event)
{
var commentSection = $('div[name="comments"]');
if(!$(commentSection).is($(event.target)) && !$(event.target).closest($(commentSection)).length)
$(commentSection).fadeOut();
});
Just do different things if different elements are clicked
$( document ).on('click', function( event ){
event.preventDefault();
var target = $(event.target);
var container = $('div[name="comments"]');
if ( target.closest('.toggle_comments').length > 0 ) {
if ( container.is(':visible') ) {
container.hide();
} else {
container.fadeIn(500);
}
} else if (target.closest(container).length === 0 && container.is(':visible')) {
container.fadeOut(500);
}
});
FIDDLE
Can someone help me out with the following code? Can't get it right.
I want it to close opens toggle when clicking on new/other one.
I have this at the moment:
http://jsfiddle.net/78tDj/1/
jQuery(document).ready(function($) {
// Find the toggles and hide their content
$('.toggle').each(function(){
$(this).find('.toggle-content').hide();
});
// When a toggle is clicked (activated) show their content
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
if( el.hasClass('active') )
{
parent.find('.toggle-content').slideToggle();
el.removeClass('active');
}
else
{
parent.find('.toggle-content').slideToggle();
el.addClass('active');
}
return false;
});
}); //End
is this what you want to achieve?
jQuery(document).ready(function($) {
// Find the toggles and hide their content
$('.toggle-content').hide();
// When a toggle is clicked (activated) show their content
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
$('.toggle-content').hide();
if( el.hasClass('active') )
{
parent.find('.toggle-content').slideToggle();
el.removeClass('active');
}
else
{
parent.find('.toggle-content').slideToggle();
el.addClass('active');
}
return false;
});
}); //End
You need to hide them in your click handler:
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
$('.toggle .toggle-content').slideUp(); // <- added this!!!!
//...
jsFiddle
No need to call each, it's redundant. Also, simply hide all toggles before opening a new one ..done :-)
$('.toggle a.toggle-trigger').click(function() {
var el = $(this),
parent = el.closest('.toggle');
$('.toggle .toggle-content').slideUp();
if (!el.hasClass('active')) {
$('.toggle a.toggle-trigger').removeClass('active');
el.addClass('active');
parent.find('.toggle-content').slideDown();
}
else {
el.removeClass('active');
}
});
http://jsfiddle.net/78tDj/10/
i have a function which selects a div when double clicked, the problem is i can't unselect it afterwards , here is the script
CSS:
div.editable
{
border: solid 2px Transparent;
padding-left: 15px;
padding-right: 15px;
}
div.editable:hover
{
border-color: black;
}
</style>
SCRIPT:
// Uncomment the following code to test the "Timeout Loading Method".
// CKEDITOR.loadFullCoreTimeout = 5;
window.onload = function() {
// Listen to the double click event.
if ( window.addEventListener )
document.body.addEventListener( 'dblclick', onDoubleClick, false );
else if ( window.attachEvent )
document.body.attachEvent( 'ondblclick', onDoubleClick );
};
function onDoubleClick( ev ) {
// Get the element which fired the event. This is not necessarily the
// element to which the event has been attached.
var element = ev.target || ev.srcElement;
// Find out the div that holds this element.
var name;
do {
element = element.parentNode;
}
while ( element && ( name = element.nodeName.toLowerCase() ) &&
( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' );
if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
replaceDiv( element );
}
var editor;
function replaceDiv( div ) {
if ( editor )
editor.destroy();
editor = CKEDITOR.replace( div );
}
</script>
DIV:
<div class="editable" style="height:490px;overflow:auto;" id="text2">
<p>Click Here to edit</p>";
</div>
what i want to achieve is when i click outside or click another object or a button the div will unselect automatically.
The same way as you already handle the double click:
// Listen to the click event.
if ( window.addEventListener )
document.body.addEventListener( 'click', yourCallback, false );
else if ( window.attachEvent )
document.body.attachEvent( 'click', yourCallback );
This event will fire until another click handler is attached to a child element of body. In yourCallback you can end the edit mode.