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.
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 have divs, which are made to textinput fields by a plugin. Also those divs are draggable.
Right now, I have reached, that if you drag the div, it gets dragged, and if you just click on it, it gets a ".focus()".
The problem is now, that if I click it once, i get a focus on it. But the cursor jumps to the beginning of the line.
What I want, is the cursor on the place, I clicked.
How can I do this with jquery? Thanks
EDIT (My JS Code):
$('.mydiv').click(function(){
//actually, it does not focus on "$(this)" but on a div inside ".mydiv" which
//is generated by the plugin
$(this).focus();
})
You could consider listening for mouseup and mousedown instead of click, which would help you distinguish between which event the user is performing. Like, if there is a mouse down event, and the user moves the mouse before a mouseup event, then you're in "drag" mode. If there's a mouseup event, and the user is not in "drag" mode, then the user has clicked, and you can fire a focus event.
That's the approach I would take without knowing more about what you're doing.
The truth is that you have a considerably more complex interface requirement than most, meaning you're going to have to give the computer more instructions to determine what to do :)
I am using a bootstrap popover on svg elements in D3. Multiple popovers can be open at any given time. What I would like to know is how to, on clicking on a popover at the back, to force it to move to the front i.e. being focused on?
Is there any way to increment the z-index of an individual popover to move it forward manually?
Thanks.
Edit:
I have managed to create a fiddle using the suggested answer. The problem arises that, with using the global variable, it increments the z-index correctly on the most forward popover, but after bringing one to the front I am not able to access the others i.e. to even click the ones behind...so the click handler is not even being called. I'm thinking there is some type of layering going on. For example: If you look at the children nodes and click on one (the link in the title of the popover), then click on another one to semi-overlap the first open one - click the one behind and it will move forward. Click the one that is now behind and nothing happens:
jsfiddle.net/Sim1/YME9j/9
Is there an alternative to incrementing the z-index to bring a popover forward without hampering interaction with those that are behind it?
You should be able to do this in a click handler:
element.on("click", function() {
d3.select(this).attr("z-index", d3.select(this).attr("z-index") + 1);
})
As #AmeliaBR pointed out, this won't really work if you have more than one popover though as the z-index is only incremented by one. In a case like this, you could have a global variable that keeps track of the maximum z-index and use that.
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.
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.