So, i got a fancy dropdown that i want to slide back if clicks anywhere except on elements that are cursor:pointer..If you can understand me..
Currently I got this code:
$("html").click(function() {
if($(".user-dropdown").is(':visible')) {
$(".user-dropdown").slideToggle('fast');
}
});
You could simply verify the cursor type of element triggering event if its not pointer then slideback.
$("html").click(function() {
var cursorType = $(this).css('cursor');
if(cursorType!="pointer")
{
if($(".user-dropdown").is(':visible')) {
$(".user-dropdown").slideToggle('fast');
}
}
});
Try it out and see if it works for you.
Related
so i'm working on a meteor project and am trying to get a drop down menu to close when the user clicks outside of it. i've done this before using jquery and normal html but this time we're using velocity.js and meteor.
so on the link that opens the drop down div, i have this:
Template.layout.events({
'click #profile-btn': function () {
if (userTog == false) {
$('#user-menu').velocity("fadeIn", { duration: 150 });
userTog = true;
}
else if (userTog == true) {
$('#user-menu').velocity("fadeOut", { duration: 150 });
userTog = false;
}
},
.....
and then i use a meteor package to deal with events on the body as this isnt supported right now..
Template.body.events({
'click html': function(e, data, tpl) {
userTog = false;
$('#user-menu').velocity("fadeOut", { duration: 150 });
e.stopPropagation();
}});
however the above is just not working.. it basically just makes the menu appear then disappear straight away. is it something to do with velocity.js, meteor or am i just doing it plain wrong ?!?
any advice would be greatly appreciated!
I just had to make a material design select box, so I feel your pain :-). Here's how I solved it:
Normally, you can only focus an input or an anchor. A trick I stumbled upon is that using tabindex="0" in your element attributes allows it to gain focus, even if it's a div. What's this mean? Well, if you can focus() an element, that means you can blur() it. So, when you click the button for the dropdown, add a line at the end of the event handler like $('.dropdown-menu').focus(). Then, to escape that, just create an event handler like 'blur .dropdown-menu': function() {*..hide..*}. That way, you don't have these ugly global event watchers.
The downside is that you get a glowing blue outline (for accessibility reasons). You can get rid of this by having a line like outline: 0; in your css.
PS, the reason why yours wasn't working is because 'click #profile-btn' bubbles up to the body, so it executes both. To fix it, you need to stop that bubblin via e.stopPropagation();.
After a postback, I want my page to have focus on a child control of a gridview, but scroll the page to a different part.
the standard myGridView.Focus(), called on the Page_Load or Page_prerender, insert a
WebForm_AutoFocus('myGridViewClientID');
in the rendered html.
This function move also the scroll not to the required position
Any suggestion?
my try: use some function injected by Asp.NET:
function FocusWithoutScroll(focusId) {
var targetControl;
if (__nonMSDOMBrowser) {
targetControl = document.getElementById(focusId);
}
else {
targetControl = document.all[focusId];
}
var focused = targetControl;
if (targetControl && (!WebForm_CanFocus(targetControl))) {
focused = WebForm_FindFirstFocusableChild(targetControl);
}
if (focused) {
try {
focused.focus();
}
catch (e) {
}
}
}
but in order to use this code, I have to include some .axd resource files: it seems ASP.NET automatically include them when you set
someControl.Focus();
in your server side code. but this in turn insert the
WebForm_AutoFocus('myGridViewClientID');
which scroll the page to the wrong position
There's a client-side method scrollIntoView that scrolls page till the element is visible. You can issue server-side command:
ClientScript.RegisterStartupScript(this.GetType(), "MyScript","document.getElementById('SecondElementID').scrollIntoView();", true);
Where 'SecondElementID' is id of the element you want to scroll to.
Demo: http://jsfiddle.net/v8455c79/ this demo shows how focus can be set on one element and page scrolled to another
I'm trying to prevent my buttons from losing the active class on mouseleave, but I can't get it working.
So, my buttons are initialized with jQuery's buttonset(). They are buttons, not checkboxes. Checkboxes are out of the question because they require IDs to work.
This is my code:
$('.jquery_ui_buttonset', this.scope).buttonset();
$('.jquery_ui_buttonset > button', this.scope).each(function() {
$(this).bind('mouseleave keyup mouseup blur', function(e) {
if ($(this).hasClass('ui-state-persist')) {
e.stopImmediatePropagation();
if (e.type == 'blur') {
$(this).removeClass('ui-state-focus');
}
$(this).removeClass('ui-state-hover');
}
});
});
The idea is that if the button has the ui-state-persist class, it should not lose the ui-state-active class until both are explicitly removed. Switching of active buttons is done on click by this handler:
CMSPage.prototype.switchEditTab = function(e) {
if (e.data.params.id == null) {
return;
}
$('.editor .body', this.scope).hide();
$('.editor .header button', this.scope).removeClass('ui-state-active').removeClass('ui-state-persist');
$('.editor .body[data-tab-id=' + e.data.params.id + ']', this.scope).show();
$('.editor .header button[data-id=' + e.data.params.id + ']', this.scope)
.addClass('ui-state-active').addClass('ui-state-persist');
}
I've also tried adding e.stopPropagation() and e.preventDefault() and all their combinations, but it doesn't work. And this exact same code works for regular UI buttons (ones not in buttonset).
Any help would be appreciated.
EDIT
I still haven't resolved this problem. I would love to give you guys bounty for helping me out, but I can't since I'm a new member. Has noone ever encountered this problem in which he wanted to use buttonset() with persistently active buttons, and not checkboxes?
I am using a CSS hover trick to clean up my interface. Controls will only be shown when the cursor is hovering inside the element. I'm running into an issue when using the interface on a touch screen device. If the control button is not shown display:none and I touch where it should be, the event is still triggered for the button.
Try this fiddle both in your browser and on a touchscreen device to see what I mean...
http://jsfiddle.net/6PvCn/2/
On a touchscreen device, touch the red square and the alert should fire, without the button even showing up. I tested this on both the desktop Android Emulator and my real Android 2.3 phone.
The effect I'm going for is for the button to first be shown without firing, even if the user touches where the button "is".
I'd rather use a pure CSS solution before resorting to javascript.
Try pointer-events: none; along with display: none;
I just tested it on my real device, and it indeed executes the button's action.
You could maybe try to make the red box an image and change the image to a button by an onclick with Javascript. I would have provided you with some code if I wasn't short on time.
You can't do it with pure CSS, tapping the button will put the button into hover state and fire the click event. Instead you should fire the button off on active.
Here is the solution I came up with... http://jsfiddle.net/6PvCn/7/
On an Android touchscreen (don't know about IOS), the hover event for the hidden element is not fired if it is not shown. So basically I check to see if the element was hovered before it was clicked.
In a nutshell
$(".hidden").hover(function(e) {
if(e.type == "mouseenter") $(this).addClass("hovering");
else $(this).removeClass("hovering");
}).click(function(e) {
if(!$(this).hasClass("hovering") return false;
});
The fiddle explains the more complicated situation I had with form elements and dynamically added content. It provides a general solution as opposed to this element specific one.
I wrote a JS solution for you:
https://codepen.io/anon/pen/bmYROr
The trick is to prevent the button's click event getting fired for the first time the outer div is getting clicked because on touch devices click event has hover effect.
let isTouchDevice = true;
let isHovered = false;
document.getElementById('outer').addEventListener('click', (e) => {
if (isTouchDevice) {
if (!isHovered) {
e.stopPropagation();
}
isHovered = true;
}
}, true);
document.getElementById('outer').addEventListener('mouseleave', (e) => {
if (isTouchDevice) {
isHovered = false;
}
}, true);
document.getElementById('btn').addEventListener('click', () => {
alert("hi");
});
JScript
// Wait for the page and all the DOM to be fully loaded
$('body').ready(function() {
// Add the 'hover' event listener to our drop down class
$('.dropdown').hover(function() {
// When the event is triggered, grab the current element 'this' and
if ($(this).find('.sub_navigation').is(":visible")) {
// find it's children '.sub_navigation' and display/hide them
$(this).find('.sub_navigation').slideUp();
} else {
$(this).find('.sub_navigation').slideDown();
}
});
});
First of all here is the fiddle //
http://jsfiddle.net/Hv2HZ/
I am using wordpress to create my site...
(if that matters)
Someone helped me get the drop-down menu to work better.
But ever since I added the new JQuery script the link doesn't even work.
I tried hovering over it but no menu dropped.
When I hover on the fiddle it works.
Why is this?
And how can I fix this?! :(