We Keep Coding

Issue with mouseenter mouseleave with PrimeNG DynamicDialog

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.

Nesting clickable components within an Anchor tag

Let's say I have some large DIV filled with content.
The content is dynamic, it could be anything, and it can include different types of clickable components - buttons, videos, links, etc.
I need the DIV itself to be clickable and route to some URL, but at the same time I need the different types of clickable components to be usable as well. If you press any of them, it shouldn't invoke the routing at the DIV level.
I've tried different approaches, none seem to work:
Wrap the entire DIV with an A tag - any click inside the DIV will route to the URL, and none of the clickable components will be usable. Moreover, this prevents having other A tags inside that DIV as you can't nest A tags
Add an onclick event to the DIV and route accordingly - this solves the A tag nesting problem, but again none of the clickable components is usable.
The only reasonable solution that I can see is to handle click events on all the clickable components and to perform stopPropagation on the attached event so it won't bubble up to the DIV.
But, this solution is just unfeasible for me as inside that DIV there could be components that are not under my control, like iframes with unknown content and functionality, video controls, etc.
Is there a different approach I can use that I'm missing?
Update:
I went ahead to manage click events and stopPropegation on the different components.
On A tags it works great.
But when I have a video element with different control buttons, I tried to wrap it in a div and stopPropegation on that DIV, but it doesn't seem to work, not sure why.
Update 2:
This is getting weirder by the minute...
So I solved the video element clicks by adding both stopPropegation and preventDefault at the wrapping DIV. I have no idea why i needed to use preventDefault. Makes no sense.
Now I'm facing a different problem with another component. I have a Bootstrap carousel, I'm wrapping it with a DIV and tried to stopPropegation on click events on that DIV, also tried to add preventDefault. When I stopPropegation on that DIV the carousel buttons stop functioning!?
Some help and explanations would be greatly appreciated..
Update 3:
I figured I could use the defaultPrevented value on the event in order to figure out if to perform the routing on the main DIV element or not.
I wrapped my main div with an A tag with a ui-sref attribute (forgot to mention this is an Angular app..), and binded to the ng-click event.
But for some reason (seems to be related to ui-sref), jQuery's IsDefaultPrevented always returned true.
So I replaced the A tag with a DIV and performed the state change inside the controller after checking the IsDefaultPrevented value.
So now it's all working. But I'm not really sure why.

Look at my code; hopefully this 'll solve your issue;
The html is consider like this :
<div id="div1" style="width:50px;height:50px;background-color:red">
Hello
</div>
The js code is like;
$(document).ready(function(){
$("#div1").click(function(){
alert("on div1");
})
$("#div1 a").click(function(e){
e.stopPropagation();
alert("on div1 a");
})
})
Now if you click on "Hello" ; only "on div1 a" alert will show.

How can I programatically get control of slick.js carousel?

Normally I get control of carousels (control you ask, means the state where I can use my arrow keys to slide them) via clicking slick.js carousels.
But I'm trying to do this with javascript code, to implement more flexible interface in my project.
Is this carousel control acquisition can be implemented programmatically? I have tried $('#my-slick-carousel').focus() but it didn't worked.
Any workarounds even not specific to the slick.js are OK, as it seems like it's a problem of delegating keypress events to the carousel jquery objects.

You were so close with your original solution attempt.
Instead of $('#my-slick-carousel').focus(), you should use $('#my-slick-carousel').find('.slick-list').focus(), because the keyboard event handlers are registered on the .slick-list element, instead of the root carousel element.

CKEditor resizable and draggable at the same time

i'm trying to make a resizable/draggable CKEditor but it doesn't seem to work for me.
I made a wrapper div containing the CKEditor "editable" inline div.
Applied jQUery UI draggable() to the wrapper div, it works, but in order to edit with CKEditor, i need to make like 3 clicks on the entire div, why is that?
Also, is there a possibility to get the "is Editor Active" event?
Thanks in advance.

The solution that I found to this problem was to force focus in the inner div when the wrapper receive a click event:
wrapper.on "click", ->
new_div.focus()

.draggable().resizable() don't work on a Button

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.