I want to change this code to mouse hover.
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
When they hover on loginbox and Login form it should be visible otherwise the login form should be hidden.Right now when we click on it it shows up and when we click again it hides.
You want to use mouseover and mouseout instead of mouseup:
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseover(function() {
box.show();
button.addClass('active');
});
button.mouseout(function() {
box.hide();
button.removeClass('active');
});
});
From the docs:
The mouseover event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.
and
The mouseout event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.
Here's a simple jsFiddle to demonstrate:
http://jsfiddle.net/bryanjamesross/58TqM/1/
NOTE: You probably want to attach these events to a common parent of the box and button, so that the box doesn't hide when the mouse pointer leaves the button. Since the parent container will expand to fit the box when it gets shown, you will then be able to interact with the form until the mouse leaves the parent container area.
*EDIT*: Here's an updated version that uses CSS to achieve the intended effect, rather than manually showing/hiding the form: http://jsfiddle.net/bryanjamesross/58TqM/2/
Just use mouseenter and mouseleave instead. The last event handler seems to close the loginBox when clicked outside it, and you don't really need it, but there's no harm in keeping it as an extra precaution so the user can close the box if mouseleave for some reason should fail :
$(function() {
var button = $('#loginButton'),
box = $('#loginBox'),
form = $('#loginForm');
button.removeAttr('href').on('mouseenter mouseleave', function(e) {
box.toggle();
button.toggleClass('active');
});
$(document).on('click', function(e) {
if( !($(e.target).closest('#loginButton').length)) {
button.removeClass('active');
box.hide();
}
});
});
Related
I have some piece of code.
This code on button click open menu.
When i click on button again, menu is hidden (i remove .show class, show class has display:block rule, so i toggle visibility of this item by clicking on button).
In next line, i have event, which check what element is clicked. If i "click" outside" of menu, menu become hidden, beacuse i remove .show class.
And now i have a problem, it looks like first part of code dont work anymore (button.on('click')) - i mean, work, but second part of code is also executed, and this logic is now broken.
Have you got any idea for workaround?
Thanks
var menu = $('.main-menu');
var button = $('.burger');
button.on('click',function() {
if (menu.hasClass('show')) {
menu.removeClass('show');
$(this).removeClass('opened');
} else {
menu.addClass('show');
$(this).addClass('opened');
}
});
$(document).bind( "mouseup touchend", function(e){
var container = menu;
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.removeClass('show');
button.removeClass('opened');
}
});
maybe use jQuery toggle() method ? For example:
button.on('click',function() {
menu.toggle();
});
You need to bind an outer click event only when the button click event has been triggered, and remove the outer click event when the outer click event has been triggered:
var menu = $('.main-menu');
var button = $('.burger');
button.on('click',function() {
if (menu.hasClass('show')) {
menu.removeClass('show');
$(this).removeClass('opened');
} else {
menu.addClass('show');
$(this).addClass('opened');
}
var butbindfunc = function(e){
var container = menu;
container.removeClass('show');
button.removeClass('opened');
$(this).unbind("mouseup touchend", butbindfunc);
};
$(document).not(button).bind( "mouseup touchend", butbindfunc);
});
Note, that I have removed your condition in the document binding callback, and simple excluded it from the select set.
I'm using a hidden input to keybind my app with it but without triggering events when i write on other input-fields
-clicks on element {
-hide element
-creates an input text-field(to edit the element)
-focus the input
- on blur or submit changes the element and remove the input
}
but if you add this new event :
- click anywhere in the container {
-focus the hidden app input (so it can use keybinding)
}
when user clicks on the element it ends firing the blur event without letting the user edit it first because its activating the second block event.
so it's either skipping the focus part of the first block
or the focus of the second block is activating after the focus on the first one
I'm maybe using the wrong approach to solving it
but I don't know why it's behaving that way.
actual code:
$("#hiddenInput").focus()
var elem = $("#nameClip");
function evenConditional(id) {
if ($(id).val() !== "") {
elem.text($(id).val())
storedObj.name = $(id).val();
}
$(id).parent().remove();
elem.show();
}
$("#name").on("click", function() {
elem.hide();
elem.after(
$("<form/>").append(
$("<input/>").addClass("rename")
)
);
$(".rename").focus();
});
$(".rename").blur(function() {
evenConditional(this);
});
$(".rename").closest("form").on("submit", function(e) {
e.preventDefault();
evenConditional(this);
});
/// regaining focus on click
$(".container").on("click", function(e) {
$("#hiddenInput").focus()
});
css:
#hiddenInput {
position:absolute;
top: -2000;
}
Since the #name element is in the .container element, when you click on it, the click event bubbles up to the container, causing the click-event handler for the container to get executed.
One way to fix this would be to stop the click event from bubbling:
$("#name").on("click", function(e) {
e.stopPropagation();
There can be side effects from doing that though. Particularly, there may be other event handlers that will not get executed because of that. Such as handlers that close opened menus.
The other option would be to place conditional logic in the click handler for the container so it does not execute if the click originated with the name element.
$(".container").on("click", function(e) {
var nameElement = $("#name")[0];
if ((e.target != nameElement) and !$.contains(nameElement , e.target)) {
$("#hiddenInput").focus();
}
});
I have simple slider which I open/close on click event.
$('#tab1-slideout span').click(function () {
manageToggleStateTab1();
});
function manageToggleStateTab1() {
if (tab1ToggleState == 'collapsed') {
$('#tab1-content').slideToggle('slow');
$('#tab1-slideout span').addClass('active');
tab1ToggleState = 'expanded';
});
and on page load I set this tab1ToggleState with initial value
var tab1ToggleState = 'collapsed';
this works great but I want to expand this further in order to allow toggling state on click event anywhere outside #tab1-content container div.
I tried to wire click event anywhere on page except the one with toggle content
$(document).not($('#tab1-content')).click(function () {
manageToggleStateTab1();
});
but this not gives me desired result, div immediately slide down after it slide up.
you can use this function
// hide some divs when click on window
function actionwindowclick(e , el , action){
if (!$(el).is(e.target) // if the target of the click isn't the container...
&& $(el).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
in click event
$(document).click(function (e) {
actionwindowclick(e , '#tab1-content' , function(){
// do action here
});
});
simply this function says if the element is not a target do the action
Working Demo
and while you use $(document).click(... you will need event.stopPropagation()
so for example
$('#tab1-slideout span').click(function (event) {
event.stopPropagation();
manageToggleStateTab1();
});
Working Example
I have a div editable with a blur function set.
When I click on select box the blur is called.
Can I stop the propagation of the click on the select?
I tried
http://jsfiddle.net/LZQSC/
$("#testInput").blur(function(){alert('blur');});
$('#testDropdown').bind('mousedown',function(e){
//e.preventDefault();
e.stopPropagation();
});
Is it possible? I tried different methods but nothing worked.
You can unbind the blur function on select mouseenter and bind it again on mouseleave:
$("#testInput").blur(function(){alert('blur');});
$('#testDropdown').on('click',function(){
// Do stuff
}).on('mouseenter', function() {
$("#testInput").unbind('blur');
}).on('mouseleave', function() {
$("#testInput").bind('blur', function() {
alert('blur');
});
});
http://jsfiddle.net/LZQSC/1/
First of all:
The blur/focus change is not affected by stopping the propagation of the click. (Shall you use any of stopPropagation, stopImmediatePropagation or preventDefault - which only disables the default behavior of the click)
On the other hand:
If you'd like to retain focus on whatever element previously had the focus you should:
Remember who had the focus when beginning interaction with the select
Restore the focus when selection has been made
Working example: http://jsfiddle.net/LZQSC/3/
$("#testInput").blur(function(){console.log('blur');});
(function(){
// stores focused element reference
var focusedElement;
$('#testDropdown').on('mousedown', function(e){
// on mousedown we get the focused element
var el = $(':focus');
// if this is other than the current select element
if(el.length > 0 && el[0] !== e.currentTarget){
// save it in the var
focusedElement = el;
}
}).change(function(e){
console.log('changed');
/* do stuff */
// restore original focus
console.log('setting focus on'+focusedElement.selector);
focusedElement.focus();
});
})();
Basically I want user to click on any .editable item, which makes an input appear, copy its styles, and then if they click anywhere else, I want the input to disappear and the changes to save. I'm having difficulty making this work. I've seen a solution using event.stopPropagation, but I don't see how to include it the way I have my code structured:
$(function() {
var editObj = 0;
var editing = false;
$("html").not(editObj).click(function(){
if (editing){
$(editObj).removeAttr("style");
$("#textEdit").hide();
alert("save changes");
}
});
$(".editable").not("video, img, textarea")
.click(function(event) {
editObj = this;
editing = true;
$("#textEdit")
.copyCSS(this)
.offset($(this).offset())
.css("display", "block")
.val($(this).text())
.select();
$(this).css("color", "transparent");
});
}
copyCSS function from here
I need to distinguish between clicks on the editable object, and clicks away from it, even if that click is onto a different editable object (in which case it should call 2 events).
Try this:
$('body').click(function(event) {
var parents = $(event.target).parents().andSelf();
if (parents.filter(function(i,elem) { return $(elem).is('#textEdit'); }).length == 0) {
// click was not on #textEdit or any of its childs
}
});
$(".editable").not("video, img, textarea")
.click(function(event) {
// you need to add this, else the event will propagate to the body and close
e.preventDefault();
http://jsfiddle.net/dDFNM/1/
This works by checking if the clicked element, or any of its parents, is #textEdit.
The event.stopPropagation solution can be implemented this way:
// any click event triggered on #textEdit or any of its childs
// will not propagate to the body
$("#textEdit").click(function(event) {
event.stopPropagation();
});
// any click event that propagates to the body will close the #textEdit
$('body').click(function(event) {
if (editing) {
$("#textEdit").hide();
}
});
http://jsfiddle.net/dDFNM/2/
The problem is that you are not correctly binding to the editObj. Perhaps it will help if you move the binding to inside your .editable click handler, or even better use live() or delegate().
$("html").not(editObj)... is bound once at document ready time, and at that time editObj is false