I am trying to customize jwysiwyg jquery RTE. I would like to build an image attributes editor so that once an image is inserted into the editable region, the user would select it and then a modal window or properties panel would appear allowing the user to edit the width/height etc. Analogous to gmails image insert UI.
The problem is I am having trouble finding out how to handle the necessary image click event. Anyone know some example code or some info for where I can start?
I am just starting on something similar. Using jQuery's delegate() method, I got it to work like this:
$("#bodyoftheeditordocument").delegate("img", "click", function (evt) {
// handle click event here...
});
The cool thing about the delegate method is that it will attach this event handler to any img tag in the body, present or future. So even images inserted as part of the editing process with get wired up.
Good luck.
Mark
My solution on iOS 10 is to add a contenteditable="false" attribute to the img element which needs to be clickable.
Otherwise safari will think that your intention is to just move the caret before/after the image if it's inside an contenteditable element.
Related
I am trying to programmatically trigger a click on a wordpress page on a <a href="#"... tag which after clicked shows a div with all categories... (the div is not hidden it gets created after clicking the button)
When trying to find the click event behind this element on chrome debugger DOM in event listeners the only event attached
to this element is flatsome.js?ver=3.12.1:109
the handler is f(t) ............
using jQuery Audit, I can see the handler definition, then there are many functions like !function(t)... because it is minified.
I tried to use jQuery click, mouseup, mousedown events (also with trigger('click...') ) with no success, it gets the object, doesn't show an error, but never shows the filter menu.
Is there a way to just emulate the physical click as if it was done with the mouse? then I wouldn't need to call the function, I can't seem to find what function is behind the click event...
Thank you in advance
Dario
Have you tried the following code?
Using jQuery:
$('your-query-selector').trigger('click');
Using JavaScript:
document.querySelector('your-query-selector').click();
I'm displaying an array in HTML page. On a text column when onfocus event is fired i display the text in CKedit using CKEDITOR.replace('#elementId').
I would like hide the CKeditor once the element is not anymore selected (using onblur event) and display unformated text as it was before selecting the element.
Does anyone know how to do that?
I think, only way is destroy instance of CKEditor
CKEDITOR.instances["YourInstanceID"].destroy();
You can recreate instance again, when needed
CKEDITOR.replace("YourInstanceID")
But, may be you should check inline version:
CKEditor inline example
I think most convenient will be using inline editors. Which only appear when user select specific element.
Another option is replacing editor after event and destroy it in other way. But this approach might be a little bit laggy, because editor should be properly destroyed and recreated, what might be time consuming for a browse. Here is an example on doubleclicking the divs, similar approach you could be able to use for focusing and bluring.
Thans for your answers.
I finaly simply added or removed ckeditor editor class in the textarea tag.
This is my first post - I have searched for the answer in other questions but couldn't find anything so hoping that someone can help with this specific question?
I'm trying to track a link that's sat in a 'floating' bar in the footer of this site:
The link is #browsealoud - which is when you click on Screen reader - which upon clicking opens a pop-up which then reads out text (to assist those with sight problems).
I have set up the Tag and Trigger in Google Tag Manager, and know it works fine as when I insert the below link code in the body content, the Event is tracked in Google Analytics.
However, as this link sits in the floating grey bar in the footer, the trigger doesn't fire and I can't quite work out why. What is the best solution to allow me to track link clicks on this particular link (which appears on all pages)?
<h6>Screen reader</h6>
UPDATE: Screenshot of tag, trigger and variables below, as requested.
screenshot
It looks to me as though you've already fixed this, as I think I can see a GA event firing whenever I click.
In any case, I think your problem is likely that there are two different places that you can click to obtain the same result; the text 'Screen reader' is actually a child of the element that includes the arrow, so clicking it will obtain a different set of attributes.
I woudl set up a custom javascript variable Parent href that reads the href of the parent of the clicked object. For example...:
function() {
return {{Click Element}}.parentElement.href;
}
And then set up a trigger that fires when either Click URL or Parent href is equal to #browsealoud.
Thanks for the screenshots. I believe what you need to do is to simply enable the History listener variables
The reason is because you are trying to track a URL fragment (ie. it has a hash) which GA doesn't track by default but can be tracked through GTM via the history listeners. I would also change your trigger to this:
I'm using the MDL tab component. After a tab is clicked and it displays the content for that tab, I'd like to set the cursor focus in a certain text input within that tab's content.
My initial approach was just to handle the click event of the tab element and then set focus accordingly. The problem I'm having is that calling .focus() on the text input element isn't working because it tries to set focus before the text element is actually visible, which no browser seems to like doing for you. If I set focus inside a setTimeout() delay it works, but that doesn't feel like a very clean way to go about it.
Is there any kind of event that can be handled for when a tab is clicked and has finished displaying it's contents? I've also looked at using mutation observers to detect when the text input element is visible but browser support for those is fairly limited still.
No there is no such option. I think you have to use setTimeout or setInterval
You can look into the source. Perhaps write your own MaterialTabs constructor and register it.
Material-Design-Lite source, MaterialTab
I think there are also some libs that can do this like jQuery. You can also see
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
This works only in modern browser but has a legacy implementation.
I've added this line :
window.dispatchEvent(new Event("tabSelected"));
to the material.js file, at the end of the selectTab() function. This way, the event is fired right after the tab content is shown.
I am creating a browser extension that modifies the Twitter timeline by adding some links to each tweet row in a user's Twitter timeline.
Generally whenever the tweet row is clicked, Twitter will pop out the right-hand panel with more information, except for when the user clicks links like Retweet, Reply, etc. I'm not sure what Twitter's JavaScript is applying to these links to prevent them from causing the panel to be opened, but I'd like to do something similar. I have tried inspecting the elements in Google Chrome, but the event handlers are not revealed.
Any suggestions?
The event handlers are probably being added programmatically via script. You could try to remove the event handlers (see the docs), but it might be easier to clone the element in question, then hide the original. See cloneNode documentation for information.
Without any sample html, I can't really give you a good example, but here's a generic jsFiddle I threw together to demonstrate the concept: http://jsfiddle.net/sacCK/1/
I solved my problem by stopping the event propagation. This prevented the event from propagating to the event handler for the container element.
With jQuery I was able to apply an onclick handler like so:
$("#elementId").click(function(event) {
event.preventDefault();
event.stopPropagation();
// other actions
});