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.
Related
I am using the iDangerous.us Swiper and running into an issue where I can't trigger any events inside of the swiper-wrapper. I am trying to fire a modal inside of each slide and nothing happens.
Any Modal I have placed inside of the swiper-wrapper will not function. I can't figure out if this is a javascript issue or a css z-index issue. I have tried multiple different Modals and they all seem to have the same effect. The Modal will work once it is outside of the swiper-wrapper element. I even tried a pure css modal and same issue, it will only fire outside of the swiper-wrapper element.
It looks like elements are cloned to make the slider work, which could potentially be killing the event listeners that are being set up.
I thought it could be an issue with the modal plugin I am using, but like I said I tried multiple different methods, including bootstrap's out of the box modal and a pure css implementation, and still no luck.
link to site:
http://bigredsun.staging.wpengine.com/our-work-index/
The 'Read More' button is the buttons that is supposed to trigger a popup modal.
Here is what I am doing:
https://gist.github.com/Jessekevon/8b694cc182a04610de16
Any help or guidance would be much appreciated!
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 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.