I'm trying to make a draggable and resizable button with jQuery UI, but it seems that it can't do both.
$('.demo').resizable({grid: 10});
$('.demo').draggable({cancel:false, grid: [ 10,10 ] });
Here's my code.
Is this a jquery ui bug?
EDIT:
I've missed a </button>
Here's my edited version: http://jsfiddle.net/nagwW/13/
Is there a way to make the resize arrow more closer to the button?
As you can see in this jsFiddle here, this does appear to be an issue, mainly with buttons, probably due to the fact that a wrapper is added upon .resizable() call.
Also, you can turn any element into button with a .click value, so why not just use a div, which can use both .resize and .drag with 0 problems and then use .button on that div, along with .click.
If you notice, my fiddle does exactly that
updated fiddle with your new stuff and my div representation as well
http://jsfiddle.net/SpYk3/nagwW/25/
Although, now that i think about it, you're better off not allowing a change on the button, think about this, the user clicks the button to drag it somewhere, the drag completes, suddenly the click action is fired and their desired drag is now all messed up! That's why jquery never intended on those features being used on buttons. Could cause way to many headaches, just fyi.
Wrap your button inside a div and make it draggable and resizable, also make your button resizable. So you will have both the effects simultaneously.
Related
I'm having a problem with implementing a dynamic dialog that is to appear on mouseenter of an element and disappear on mouseleave. I'm using PrimeNG's dynamic dialog which has a modal overlay and this causes an issue where mouseleave is immediately triggered when the overlay appears causing the dialog to disappear straight away and then come back on the mouseenter; it goes into a loop.
I was able to get around this on a button by changing the button's z-index to be above the dynamic overlay's z-index. However, this doesn't seem to work on an element that's inside a table.
See my stackblitz example where if you hover over the button works, but if you hover over the span inside the table below the button, it goes into the loop as described above. My question is how do I resolve this or if there's a better way to fix the issue not using z-indexes? As far as I can see there's no way to remove the overlay in the control.
If you don't need the modal overlay, you can set the modal flag to false in your dialog configuration.
Like in this stackblitz example.
I am trying to fix a problem in an existing application that uses jQuery. The issue is that whenever I click on any link or button on the page, I see that element take a focus outline (e.g. blue glow in case of Chrome/Safari), as if that element has focus. I have to get rid of that outline after click. I do not think this is a default behavior since I am not able to replicate it on any other site. For that matter, I am not able to replicate it on a simple HTML page that has just one link.
I can not use outline:none
since I have to show the outline in case of focus using tab keys. I have tried using document.activeElement.blur() and $(element).blur() to no luck since some of the event handlers are using event.stopPropagation() and I can not go and change the code for every event handler.
Can anyone please help me with this? What could be the reason a link is retaining focus after clicking? There is nowhere in the code this is being done programmatically since its happening on every single link and button and also some li elements.
Appreciate your help in this regard.
I think that's the default behavior of Chrome and safari.
If you visit this page https://www.linkedin.com/ and click on the Email address and password field then you will see the same thing which is happening with you. I hope I am not wrong..
you can give outline:none;
for the focus/blur on the element: you just add the class .outlineborder
.outline{
outline:inherit !important;
}
$('.button').on('blur').... $(this).addClass('outline');
I feel like I understand focus():
When trying to focus on a form element, like input, it "just works", so long as the document is ready.
When trying to focus on a non-form element, like div, you must add a tabindex attribute.
tabindex adds the ability to tab to an element in precedence order (higher number the better), 0 and up. However, there's a special value, -1, that explicitly removes the element from the tab order.
When calling focus programmatically, do so within a setTimeout.
Be sure to make a setTimeout value large enough that it waits for display animations to finish, but not so late that the user has time to do other things, like click or type elsewhere.
Pretty simple, really, right? But no. It just doesn't work for me.
My specific use-case is that I have a key-nav-enabled widget that, if you hit the right key, opens a pop-over modal widget. It works great. But I can't get that modal widget to take focus. That modal widget that has no form inputs (just some text and a close link). I've added keydown/up/press events to the modal widget, I've added tabindex to various nodes and tried to focus them, but the original widget still gets the keyboard events.
DOM-wise, the modal widget, despite being new'd up within the keynav widget, is attached to the DOM at the body level, so it's not like the keyboard events are bubbling up through my modal dialog and should be stopPropagation'd, it's never getting those events.
What this means is that if you hit another key before you click in the modal widget, it opens a different modal dialog underneath the first modal dialog!
I really hope I'm missing something about focusing divs, because I have several pieces of functionality I'd like to implement that just aren't working due to (I believe) focus requests simply being ignored.
Help! What am I missing?
In the specific case I was sleuthing out, I effectively had a typo.
I was doing this, which wasn't working:
setTimeout(lang.hitch(this, this.domNode.focus), 100);
But this worked:
setTimeout(function() { this.domNode.focus() }, 100);
That said, I've had a number of issues with focus that regularly make me dread ever having to use it programmatically.
Hopefully though, the list of tips in the question will be helpful to someone.
I have a link being themed using CSS. I have up, over and down CSS properties applied which all work.
Problem is, when you hold down the mouse over a button, drag away then cancel by letting go, the down state is still being applied until you click again on some white-space.
You can see what I mean by doing the above on buttons 1, 2 and 4 here: http://jsfiddle.net/2vjbz/
How do you 'refresh' by not having to click again?
According to your CSS, I think this behavior is correct, but the problem is that mouse up event is not getting triggered and link element remains in active state. You can fix it using jQuery by invoking mouse up event for link element.
One method is to invoke it when mouse moves in pager div
$('#pager').bind("mousemove", function(event) {
$('#pager a').mouseup();
});
You might need to add conditions to make it perfect
EDIT:
You can experiment with it. This is one more method
http://jsfiddle.net/diode/2vjbz/18/
Here it cancels the drag event. Both of these worked for me.
I implemented a custom drop down with HTML, CSS and JavaScript. It works well now, but I am not happy with the way I am doing "blurring" right now. When you open the list, and then click somewhere else, it should collapse. What I did was that I added an event listener (mousedown) to the window after expanding the list, and removing the listener after collapsing. The event basically checks whether the DOM event happened on the right element using target and if not, then blur the drop down control.
I know about focus and blur. However, they only seem to work on form elements, which I find quite understandable. They also support other scenarios like when "tabbing" away.
Anyway, I am asking you if there is a better way of doing what I am doing right now. What I do just feels stupid.
Maybe you could have a dummy input and focus that when the control is active. Then watch the blur and close the list. It would not be able to be display:none but maybe opacity:0, or just out-of-view.
What I do is use mouseout to close my custom lists. I create a bounding box around my drop down. That box has the onmouseout event attached to it that closes the drop down when the mouse moves outside of it. This way you can have a little padding outside your list that would give your users a little better functionality then just mouseout on your basic list.
If you want to do it using click events, I would have a global function, like it seems you have setup, and call that function on any click events on the page.