As can be seen below, instead of <button> or <input> I have used <div> to create my UI buttons. Now the problem is as soon as I click any of the buttons, the selection in the edit area (a contentEditable <div>) collapses.
Interestingly if I use <button> instead of <div> to create my UI buttons, everything works like a charm. I have seen this question asked many times before on stackoverflow, but they all use <button>. Any idea?
Your issue is that your div elements are selectable, so clicking on them automatically collapses the existing selection. You can work around this by making them "unselectable" by setting the user-select CSS property to none. This is supported in most current browsers.
Related
I am using tinyMCE editor, i need to make some contents radonly (nonEditable).
As per its documentation, if i use class "mceNonEditable" with some elements, it fulfill the requirement, but unfortunately if i select that specific element and press backspace / Enter / Delete button, it removes that content.
All i want is that, user shouldn't be able to make any contact with those elements.
Official example can be seen here.
Any how, I also tried to accomplish this with an overlay div, overlay div needs absolute position, and after applying this style, editor convert this div into drag able form.
Please help, if there is any other solution..
I've found that setting the contentEditable attribute to false on the element does the trick.
I have this text editor plunker example the problem is when I click the bold button or any other button the button doesn't show the state of the editable div, I know that could be fixed if I added a class to the button in the ng-mousedown event's function but that won't fix the problem if I click in an area with bold text that should add a class too to the correct toolbar button, maybe I should use somthing like a watcher but to watch what?
Update
OK, I did some digging, I'm trying to watch the position of the caret so I can apply the correct style to a toolbar buttons of a text editor I thought about $watchers but I never used them.
The example that i'm using is from this StackOverflow post there's a Jsfiddle in the post but I made a plunker example with AngularJS that shows how to get the caret position in the contenteditable div.
Is there a better way of doing this like get the DOM tree of the inner contenteditable div then make a map of elements and positions then use the data binding to control the state of the buttons in the toolbar?
Any help, thanks in advance.
I found the Answer in this SO post:
Rather than do all this by hand, the browser has methods to tell you if the current selection or caret is bold, italic or whatever: document.queryCommandState() (MSDN), for binary commands such as a bold and italic, and document.queryCommandValue() (MSDN) for commands with a value, such as font-related commands.
i really need help, i can't see something that is obvious, and usually then it is the best to ask for help.
I have 4 divs in a 12 column grid.Each div is clickable, and when clicked should display the corresponding div beneath it, that is initially set to display:none.
Everything is fine as long as i click on them in order from first to last, but if i first click, let's say on third div, it shows its corresponding div, but not beneath it, it shows it in place of the first corresponding div.
I am using simple slideToggle here, and really can't understand what is wrong.If i put the corresponding divs(the hidden ones) to visible, they are all displayed correctly, so it is not a CSS error.
I can provide the code, but i put it online, just click on methods tab, and you will see what i mean.
Here is the link
Sorry if i didn't explain it better, english is not my native language.Thanks!
You need to keep space for these div's. Use visibility:hidden and animation but do not use display:none which doesn't keep space for hidden element. All built-in effect functions like hide(), slideToggle() etc. will set display:none to your element.
When you tap and hold on a link inside a UIWebView (or mobile safari), it highlights the link in a gray text box.
You can control the styling of this with the webkit-tap-highlight css property.
What I'd like to know is if it is possible to either:
A. Listen to an event for when something is highlighted.
B. At a given time, find any elements that are currently highlighted.
Is this currently possible?
Looks like this guy figured it out using window.getSelection() and text.anchorNode.textContent.substr(text.anchorOffset, text.focusOffset - text.anchorOffset):
http://zaldzbugz.wordpress.com/2010/05/31/how-to-get-the-highlighted-text-in-uiwebview/
This article was also chosen as a working answer in another StackOverflow post.
Although the iPhone is a touch device, the mouseover event will be triggered when the element is highlighted. So, you can use javascript to listen the mouseover event.
have a look at this link (IN IE 8)
test page
Play around with the expanding Jquery UI checkboxes, they work ok, but sometimes the paragraph tag collopses its margins (or somthing) until you rollover the element, then it fixes itself.
Is there a problem with what I am doing, is there a workaround?
Many thanks.
To solve this I had to wrap the elements in antoher div, and set a style on that to overflow:hidden