When div[contenteditable] to empty(like $(this).html("")) then caret disappeared.
Is it bug? Also I found some other solution. using setTimeout function. but It's not perfect solution for me. when I use many contenteditables division moving focus with tab key. then that solution is not working properly.
When I tested on Ubuntu 12.04,
in Firefox 20.0
Click event : caret disappeared,
in Chrome 25.0
Focusin event : caret disappeared.
$(function() {
$("#alpha").on("click", function(e) {
console.log("click");
$(this).children().html("");
});
$("#beta").on("focusin", function(e) {
console.log("focusin");
$(this).html("");
});
});
You can test it my fiddle
Click yellow area, or other area.
Related
How do I listen for right mouse button(Context menu activation) in Ckeditor 5 when the user click on an element in the editor.
For left mouse button I use ClickObserver which works perfectly, but ClickObserver don't seem to work for the right mouse button
As per CKEditor migration document, context menu options are removed in CKEditor 5 and official standard is to use contextualToolbar.
CKEditor 5 does not come with a context menu, contextual inline
toolbar is preferred instead to offer contextual actions.
Update:
I found a hack which you could use, but I wouldn't recomment it so USE IT AT YOUR OWN RISK!
function onEditorMouseDown(evt) {
if (evt.which == 3) {
alert('You right clicked the editor!');
}
}
var elem = document.querySelector('#editor1');
var cEditor = ClassicEditor
.create(elem)
.then(function(editor) {
let container = editor.ui.view.editable.element;
if (container) {
container.addEventListener('mousedown', onEditorMouseDown);
}
})
.catch(function(err) {
console.error(err.stack);
});
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>
<h1>CKEditor 5 Example</h1>
<textarea id="editor1"></textarea>
Explanation:
What I'm doing here is finding out editable area within the editor and adding a event listener for mousedown event on the element.
I hope this helps!
I'm trying to make my webpage fullscreen. I've made it work on Chrome, but for some reason it wont work on safari. Anyone know why?
<img onclick="launchFullscreen(document.documentElement);" src="http://e-daktik.dk/ranger.gif" alt="">
<script>
// Find the right method, call on correct element
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
</script>
It would be better to try and have the user simulate this themselves (by clicking F11 or any other key for their specific browser) because this will only work with Google Chrome and Internet Explorer. You should have a message saying to click F11 or something if you really need your webpage to be full screen. I hope this helped you.
I have a TextArea in a modal Window. When the modal window is displayed, I want the focus to be set to this TextArea. I also want the TextArea to have default text when it is displayed & the cursor to be at the beginning of this text.
I call focus() on TextArea when modal window is displayed & in the focus() handler, I set the text that I want & call setSelection(0, 0) to move the cursor to position 0.
This doesn't seem to be working as the cursor remains at the end of the set text.
I am using the latest version of the SDK.
It would be great if someone could help me fix this issue. Thanks!
Titanium SDK: 3.0.2 Target platform: IOS only
Here's the code:
// 'statusUpdateArea' is my TextArea
$.tabbedBarNav.addEventListener('click',function(e)
{
statusUpdateArea.focus();
}
statusUpdateArea.addEventListener('focus',function()
{
statusUpdateArea.setValue(" - I am here'");
//API to set cursor at beginning doesn't work!!!!!! [or I don'tknow how to use it :( ]
statusUpdateArea.setSelection(0, 0);
});
Don't focus. setSelection will focus the text area for you. Focusing is preventing the selection from being properly set. Uncomment the .focus call to see it not work.
Try the following. It works for me on iOS with Titanium SDK 3.x.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var textArea = Ti.UI.createTextArea({
value: 'Some text.'
});
win.add(textArea);
win.addEventListener('open', function(evt) {
// textArea.focus();
textArea.setSelection(0, 0);
});
win.open();
Use hintText for default..You cant set the text like that.. actual setSelection is not for cusor movement . it is used to select a part of value in text field...so u cant use that method...use hint text and let the user to type ..later on u can add the default text to value of text feild it might be useful..
I got the answer to this on the Appcelerator dev forum. There seems to be a bug with the implementation on IOS:
Appcelerator Dev forum
I'm using Twitter Bootstrap with fixed layout along with jQuery Masonry on a specific page.
It's working, however starting from the second row the top positions of the divs are miscalculated and are partly covering the elements of the first row.
It looks like the script quits before rearranging the elements.
Strangely, when I open the inspector in Chrome or slightly resize the viewport the divs are jumping to their correct positions. Refreshing the page sometimes helps, sometimes doesn't...
My masonry script:
jQuery(document).ready(function(){
jQuery('.span9').masonry({
itemSelector: '.span3',
columnWidth: function( containerWidth ) {
return containerWidth / 3;
}
});
});
Is this normal behaviour? Should I add window.resize to the above script?
Placing the masonry script in the page itself or in the header, footer doesn't change it's behaviour.
I'm calling masonry.js right after jQuery, before any other Bootstrap js.
Just read the help Section here http://masonry.desandro.com/docs/help.html
The Script runs before all images have been loaded, you have to trigger it after the window loaded
$(window).load(function(){
$('#container').masonry({
// options...
});
});
When setting up dojo connections to onmouseover and onmouseout, and then adding content on mouseover, dojo fires the onmouseout event at once, since there is new content. Example:
dojo.query(".star").parent().connect("onmouseover", function() {
dojo.query("span", this).addContent("<img src='star-hover.jpg'>");
}).connect("onmouseout", function() {
dojo.destroy(dojo.query("img", this)[0]);
});
The parent() is a <td>, and the .star is a span. I want to add the hover image whenever the user hovers the table cell. It works as long as the cursor doesn't hover the image, because that will result in some serious blinking. Is this deliberate? And is there a way around it?
Edit: Just tried out something similar with jQuery, and it works as expected (at least as I expected it to work.)
$(".star").parent().hover(function() {
$("span", this).append("<img src='star-hover.jpg'>");
}, function() {
$("img", this).remove();
});
This will show the image when hovering, and remove only when moving the cursor outside the table cell.
The reason it works with jQuery in your example is because .hover uses the normalized onmouseenter/onmouseleave events. If you were to connect to those, it would work in Dojo as expected. Also, a simulation of .hover for Dojo would be:
dojo.NodeList.prototype.hover = function(over, out){
return this.onmouseenter(over).onmouseleave(out || over);
}
Then you'd just:
dojo.query("...").hover(function(e){ .. }, function(e){ .. });
The differences between mouseeneter and mouseover are why you are seeing the behavior of an immediate onmouseout firing.