CodeSandbox: https://codesandbox.io/s/charming-banach-tvdeu
Problem
I need to use multiple content-editable on my page. One below each other. They work just fine except when I onBlur the div by clicking outside the div.
Steps to reproduce the bug
First bug
Focus on the first content-editable of either the first or second container
Put the cursor on one-hand side (beginning or end)
Click outside the content-editable on the opposite side of the cursor but still on the same line has the div
==> The content-editable doesn't blur. It first move the cursor to the very end side of the content and a second click is needed for the div to blur
Second bug
Focus on the first content-editable of either the first or second container
Put the cursor on one-hand side (begining or end)
Click outside the content-editable but on the same line as the second content-editable of the same container
==> The second content-editable focus and a second click is needed for the div to blur
If the click happens on a different container it works fine.
I also tried to implement the fix from this topic https://stackoverflow.com/a/34445203 but the zero width space has a height I can't remove.
Related
I dont know what the technical term for this is but I decided to use the term "Ghost Marks" to describe it. This is done using Chrome.
Using Bootstrap I have two tabs. There is more content in the first tab so the container is longer than the second tab. Outside (below) the tabs container there is another div with some text and a green button.
Sometimes when I click between the two tabs "Ghost Marks" of the div outside the container are left on the page. This is occurring because when I switch from the larger tab to the smaller tab the div outside the container moves up the page leaving marks as it goes along.
Here is an example of what it looks like:
It has something to do with the way chrome paints the HTML. If I press F12 the Ghost marks disappear.
I could make the 2nd tabs container the same height as the first tabs container but that would leave a lot of white space.
Any ideas how to make sure this doesn't happen?
I've two Div's on my page. one is parent div, another div as pop-up.
Currently pop-up is shown/hide on click of parent div or clicking on button inside pop-up window.
How can I achieve that pop-up will be closed when I click away (anywhere outside pop-up and parent div) ? is there any event mechanism already provided ? if yes, How to use it?
You can create another div with full width and height and z-index bigger that other content and less than pop up. Show that div whenever the pop up is showed. Then you can add this div an click event so when the user click on that div it means that it's outside of pop up.
Here is an jsfiddle for that made with jquery just to give you the idea how to make it .
Here is another one with Angular DEMO
I'm having these troubles since almost 2 full days now and see this as my last chance to get a neat solution of my 2-page-editor before giving up.
Please use Firefox first and have a look at:
http://twopageeditor.bastianschulz.com/
STEPS:
set the caret into the last row "Exiles, similes, and reviles;"
press the "down arrow" key
RESULT: the caret is in the first row on page 2
Short explaination about the implementation:
- The editor contains two separate contenteditable DIV elements.
- In case of leaving a page by moving with the cursor within an contenteditable DIV element, we just swap the places and positions of the DIV elements but the caret stays in the same DIV element. The page 2 which is on the left side, is still the same DIV element that was on the right side when we were still on page 1.
- When changes to the text are done, the unselected DIV element is blurred out because it might be out-of-date. When the selected DIV element is deselected again, its content is fully copied into the other DIV element so that all changes that have been done are kept and therefore synchronized with the other DIV element.
Now use Chrome or Safari (IE not at all, that will be my next issue...)
STEPS:
set the caret into the last row "Exiles, similes, and reviles;"
press the "down arrow" key
RESULT: the caret is in the first row 1 on page 2
BUT: this row is not visible. Press down arrow key again and it appears in the second row of page 2. When you press the arrow up key now, the content moves again, the caret is in row 1 and page 2 is displayed as it should (and like Firefox does it correctly).
REASON: right after you pressed the down arrow key on the first page you will see for a part of a second that content in this DIV is automatically scrolled by the browser so that the position of the caret is still visible. This causes a displacement of the DIV element by 20px of its CSS top attribute. When setting thereafter the new absolute value of top:-520px e.g. (the height of the page / viewport is 520px) this weird shifting of 20px is still there.
I haven't figured out a way how to stop this automatic scrolling of the content when its not visible anymore. Or at least to be able to kind of reset the contenteditable DIV back to its normal state.
Anyone ideas?
Cheers!
I have a set of clickable divs inside a container div.
I want to handle the click event of all of them in a single handler on the container div.
however this causes mobile safari to highlight the the container div when one of the inner divs is clicked.
Is there a way to maintain the single event handler and yet tell it somehow what is the right child node to highlight?
I have a div section, which is full of tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href> has focus, is there any way to lock a div section that it's contents don't move ?
So for example the code (psuedo not real) I have the following
<div>
<h4>Heading</hv>
Link 1
Link 2
Link 3
</div>
I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div "window" which is not what I want, so in effect I get <div>Link 1<div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I'm not worried about this, just what is displayed
I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.
Thanks
is there any way to lock a div section that it's contents don't move?
Not really*, but you don't really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.
(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)
What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won't participate in the tabbing order.
From what I can make of your question, you want your div to stay fixed relative to the browser window. If this is the case, it can simply be done by declaring position:absolute for the div.
If you want something else, please clarify your question.