I have two divs. Users can select text in either div. When they drag from one to the other, it selects parts of both and creates a big, ugly, unpredictable selection.
Is there any way to force a selection to finish in the same element it started in (i.e. by preventing it from extending into other components regardless of where the user moves their cursor)?
Related
How to make element change behavior depending on screen position? For example, imagine an input/select that opens an option box or a button that shows a dialog box, as in the image below, but notice that when the same element is at the bottom of the page, it opens the boxes to the side that has space , as a native input/select does.
I noticed this bug in even famous libraries with millions of weekly downloads, that if the element is at the bottom of the page, two unwanted situations happen: Either the element doesn't appear (it stays off the screen), or it expands the area, increasing the screen and distorting the layout.
Anyway, boxes should always open in reaction to the main element, like a "position: relative + position: absolute".
The preferred solution should be just HTML + CSS (as "pure" as possible), but if that's not possible then you can use javascript, too. How can I do this?
How can I do this?
How can I prevent the focus on child elements (in an accessible manner) unless the parent is focused?
Some context:
I'm currently building a form builder using bootstrap, that allows you to click and drag columns / panels around.
However, I want to have inputs inside this container, in order to edit properties of the formfields/inputs that will be generated.
I feel like it would be bad UI/UX and too crowded to have the controls directly clickable, so a scheme where the first click on an input in one of these containers selects the container, and the next the input element would be the best compromise, as this will let you select and or drag containers without worrying about accidentally clicking or dragging the inputs around.
Is this an accessible scheme? Will it cause any accessibility issues?
The user can press a button to create new divs on the screen. Each div is the same and has the same z-index. Newer elements display in front of older elements. The user has the ability to drag around the elements. I would like it so that when a user drags an element, that element is now permanently in front of the other elements (until a different one is created/dragged).
Is it possible to do this without keeping track of z-index somewhere in JS and increment it on creation/click? I'd like to avoid this if possible. Is there some way I can use jQuery or something to make a clicked element act as if it was recently created (which I guess is just determined by position in the DOM?)
I assume you are doing something like
container.appendChild(newDiv)
Now, when you click and drag an element, you can move it to the front.
var parent = recentlyClicked.parentElement // or container
parent.insertBefore(recentlyClicked, parent.firstChild)
This inserts your desired div as the first child of its parent, which will move to the top.
Edit: it appears that elements later in the DOM are the ones that are shown on top. In that case, you'll probably want to append the child instead.
recentlyClicked.parentElement.appendChild(recentlyClicked)
On click you could add a class to the element where the CSS targeting that class has a slightly higher z-index. This is probably the cleanest way to do it (no keeping track of z-indexes, just toggling the existence of that class on mouse down & mouse up.
Another idea (not sure if it'd work, but might be fun to try) would be to add a tabindex="0" to all the elements. They can now receive focus. Then in your CSS add a ":focus" state selector targeting those elements. Increase their z-index with that. I don't recall if the focus happens on mouse down or after a full click. It might bring along other side effects line outlines on the element you don't want. And mess with the usability of the tab key on your website. I'd probably not use this unless it's somehow really much simpler in a non-production circumstance.
I have an application that creates several hundreds of inline CKEditor instances on the same page and it is too slow to create them all at once. I want to create an editor when the user clicks a contenteditable element, like this:
$("#editor").click(function()
{
CKEDITOR.inline("editor");
});
Example fiddle: https://jsfiddle.net/adrianrosca/m3dtvcku/4/
But when I click in the middle of the text, the cursor will jump to the beginning of the content and that's not a good behaviour.
Is there a way to get the cursor to stay put or is there another way to create/destroy lots and lots of inline editors.
If I have an html page with a number of images displayed, and a user drag-selects several images (i.e. highlights them as selected) with a mouse, can I identify those images via JavaScript or otherwise?
In other words, the use-case is that I want to "tag" multiple images at once and allow a user to use a mouse to click anywhere on the screen, then hold the mouse button down while moving the mouse, creating a highlighted rectangle, thus selecting all items displayed on the page within that rectangle. The goal is then to identify only images that were selected, and present a pop-up to the user, allowing her to "tag" those highlighted images.
Sorry if this is confusing, I'm just not sure what the common terminology is to describe what I want.