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()
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 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'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 tinyMCE instance and I would like to know when the user scrolls inside the editor.
I know how to access the active editor and its iframe but so far have been unsuccessful in finding what fires the scroll event.
Seems simply enough...
You can achieve this using
$(editor.getWin()).scroll(function(){
console.log('fire scroll')
});
I'm using JQuery sortable list where I dyanmically I can modify the content inside each element (ie, textfield, color, etc). Either I indluce each element content as an iframe of div then this content is refreshed each time I move/drag and drop this element into another position. Which is weird is that it doesn't happend when I move another different element, so my question would be: is there anyway to avoid currentItem to be refreshed/reloaded after draggin it to another position?
Thanks in advance for your help (!)
This is a known bug. See: http://bugs.jqueryui.com/ticket/5575