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.
Related
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.
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.
can only use Mootools here!
Okay so I have a basic input box:
<input id='input_box' value='Name' class="validate['required']" />
The class is for MooTools floor validation.
So what I have in mind is this:
1) The input box has the text of the value inside.
2) When the user clicks on the input box, the left side of the box slides inwards (left to right), so it now shows:
Name [inputbox]
3) If the user clicks out of the box area without typing anything, then it slides back to its original position with Name inside the box area.
I was thinking of doing it this way:
Have the text positioned behind the input box, onlick animate the size of the box, then fade in the text in the position. However, my Mootools knowledge is really bad, maybe something like this (as a starting point)?
function introFunction() {
var input = new Fx.Style($('input_box'),'width':'200');
input.start(200);
}
Then apply that to onlick, but it doesnt work :/
I gave it a try. http://jsfiddle.net/fJjTN/1/
I used tween instead of Fx. Instead of doing the effect on the input field, I did it on the label.
Edit after feedback in comments
http://jsfiddle.net/47CAH/1/
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