Here's the thing. I can get selected text with that solution: How to replace selected text with html in a contenteditable element?
But now i have a problem. I'm adding to website divs with different colors to mark some parts of page (i'm setting just position=absolute, top, left, width, height, backgroundColor and opacity) and now when i want to select marked text, selected is that div (which i guess have higher z-index or something else is placing it over other html). And now when i want to get selected text i'm getting nothing. Not even that div. Just null... Any idea how can i get text covered by that div?
And all these things i'm doing in UIWebView component in iOS but that's not relevant, i think.
Related
Solved. The answer to the question bellow was given to me by #freedomn-m and to found there: Set focus on div contenteditable element
For a Rich Text Editor using an editable div:
I wish the caret to be showing again in the div after, for example, a click on the font size selector. I thought that giving back the focus to the div would be enough but it isn't. Maybe I could save the position of the caret and set it back at its right position after the interruption. But something tells me there must be a much easier way to do that... Maybe something in jquery? So far I've got that:
$("#fontSizeChanger").change(function(){
var newSize = $("#fontSizeChanger").val();
$("#editor").css("font-size", newSize);
$("#editor").focus();
});
"fontSizeChanger" is the id of a drop-down box and "editor" the id of the div.
Any ideas?
Update: What I really want is to see the caret blinking in the div after for example I clicked on a button outside of it.
I haven't worked much with Javascript, but I have a rough idea of how to make an image rollover to another image. I'm trying to make an image that, when moused over, will become a transparent background to a block of text that will occupy the space the image occupied. I've seen lots of tutorials but nothing matching quite that.
Also: is there any way to format this text with css or otherwise? (Like adding padding, line breaks, etc.)
Any help or links to a site where I can figure it out would be greatly appreciated! Thanks!
This fiddle is a pure css implementation that changes the opacity of an image placed in front of the text on hover. To do this I used put the text and image containers both within a container div and set position: absolute so that they overlap. I then change the opacity of the image by using the :hover selector. Since the text is behind the image, it can't be selected. Let me know if this what your looking for, and specify what you would like differently if it isn't :)
If you want the text to stay after the mouseover, you could use javascript to toggle a class on the rollover and add some text. E.g., put an image as the background to a div with some class (e.g., class="solid-image"). When you want to change the element, just change the class (e.g., with myElement.className="translucent-image") and then you can either have text that was previously invisible or you can add text to the div (so long as it doesn't have children) by using the textContent or innerText element. E.g.:
text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";
And then add an event listener for the appropriate events.
I'm trying to do something like that:
When use enter "#" in the textbox, the colorpicker div must be opened in bottom of the cursor position. I can get the order of the cursor with element.selectionStart but it's not reliable way to do that. It must be a pixel value. Any suggestion?
If you're sure that the textfield will never scroll, you can simply replicate the font and box sizing of the textfield in a div positioned out of view, and then measure the size of a span with the same contents as the textfield.
I'm making something where a textarea gets more and more text appended. In firefox, the textarea scroll back up to the top each time.
I currently have something like textarea.scrollTop=1000000; to scroll it back down each time it changes, but it still goes up to the top for a very short time.
Is there any way to stop it doing so?
I ran into this problem, too. It happens in IE and Firefox but not Opera and Chrome.
I thought of hiding the momentary jumps to the top by "double-buffering" changes to the textarea:
Create two textareas with the exact same properties and dimensions. Only one of these is visible; the other one is hidden.
Append text to the hidden textarea: set [the value of the hidden textarea] to [the value of the visible textarea] + [text to append]. (The textarea will automatically scroll to the top, but this textarea is hidden!)
Scroll the hidden textarea to the bottom: set scrollTop to a high integer value like (-1 >>> 1).
Swap the hidden textarea with the visible one. Now the new text is shown, sans jumping to top!
You can swap the hidden/visible textareas by using one of two methods:
Use absolute positioning to place the textareas on top of each other in conjunction with toggling their visible property.
Swap the actual DOM elements. I'm not sure if this will introduce a new type of "flicker." You may have to create a div to contain the visible textarea so the layout of the page doesn't keep changing...
i thing that is problem of adding the content via the script, paste your code which append text to your textarea
I want to insert an image tag into a block of text so that the image is, say, 100 pixels down in the DIV.
<div>
A lot of text in a text block and a <img tag> somewhere
that is floated left or right and positioned inside the text block
</div>
So, the tag above is put in the text block to be floated so that it is positioned at 100px DOWN in the DIV. Now, this can't be done statically, it has to be done in javascript since 100px down in the div may be represented by different text depending on font rendering issues and such.
So, is there a way to find what "word" in a text block that is 100px down in the DIV? jQuery perhaps?
The short answer is no
Basically it comes down to the DOM doesn't give a way for you to get an elements pixel position. There are sort of hacks you can do for some browsers, but good luck getting a solution working.
If you cannot get the position of the containing div, you are not going to get the position for the text within.
Leaving aside the no, if you were to find a way to get the div's pixel height, I would follow a procedure similar to the following.
Get the text from inside the div and store it in a local var.
Inside a loop for each word in the text:
Insert a div tag into just before the word.
Get the pixel position of the div tag.
Use this to determine the closest word to pixel pos 100 down.
Once you have the closest position, create a document fragment to build up your new inner for the div
Replace the div's content with the document fragment.