Develop Reference

Keep caret showing in div after losing focus

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.

Force scrollbar to bottom

I am making a little messaging / chat system that is working nice and fine. The problem is, the <div> which the messages are outputted to does not scroll the way I need it to.
All the new messages are added to the bottom of the div and when more are added and the scrollbar shows up, the scrolling stays at the top of the <div>. I need this to be reversed, so that the scrolling always sticks to the bottom of the <div>.
A good example of what I want would be Steam's chat windows, or even this text input which I am using to fill out the question.
As I would like to avoid jQuery, this has me completely stuck. If you could point me in the correct direction that would be great! I am not sure if HTML and CSS can handle this, or if JavaScript is necessary at all.

The Javascript code below should keep your div's scrollbar positioned at the bottom like you described:
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
This solution and more information can be found on the link below:
http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html

I think this is a better solution:
element.scrollTop = element.scrollHeight - element.clientHeight;

For Kotlin I have used the following:
val element = view?.findViewById<ScrollView>(R.id.uidScrollElement)
element?.smoothScrollTo(0,element.measuredHeight)

How do I stop a textarea from scrolling to the top whenever I change its value

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

How can I replace the contents of a scrollable div without jumping to the top?

I have a div with the overflow: auto style. It is populated via AJAX with a result table. The rows in this div are editable, and with each edit I refresh the contents. The problem is, if the user edits something at the bottom of the div, the refresh brings them back to the top.
I had some luck using anchors with Firefox, but not all versions of IE jumped to the anchors within the div.
Is there any way to replace the contents of a div like this without having the scrollbar jump to the top? Any other suggestions? I like to refresh the entire set of results rather than just the updated row if possible, but if there are no workarounds I guess I will pursue that instead.

Before you change the data, store the scrollTop-property and after that, restore it.
Like so:
var oldScrollTop = div.scrollTop;
div.innerHTML = "new content";
div.scrollTop = oldScrollTop;

HTML textarea; scroll vertically to text

I have an HTML textarea:
<textarea>
Some text
Another text in another line
BOOM
Hello there.
</textarea>
I want to be able to vertically scroll to the word BOOM so that it is visible (it doesn't matter on which line it appears).
Is this possible?

There's actually a way to do this using window.find() and some variation for IE browsers.
Here's what I came up with so far:
var gotoText = function(text) {
function iefind(string) {
var txt = document.body.createTextRange();
if (txt.findText(string)) {
txt.scrollIntoView();
txt.collapse(false);
}
}
if(!window.find) { // ie
iefind(text);
return;
}
// a double window.find() for backwards and forward search
if(!window.find(text, false, true)){
window.find(text, false, false);
}
};

$('textarea').animate({ 'scrollTop': 30 });
of course 30 is working for my own example with my cols and rows. so find the the right value for yourself.
Note to self:
There is no way of calculating the scroll height which a particular word is at however if you set a fixed value as your css line-height then you can see the story from the point of view that of boom is on for example the 4th line then its scroll height value is 4x (x:line-height)
but i can't really right now be bothered to check how good that will work when someone zooms in the browser. but worth a try for you as you have the case.

But how do I know that BOOM is 30 from the top?
Create a <div>, add it to the page and style it with exactly the same font, white-space, dimensions, border, padding and overflow as the <textarea> object. Wrap the ‘BOOM’ in a <span>, and measure the position of the span relative to the position of the div.
(This isn't a lot of fun.)

It's possible with some javascript!
Even if I'm late I hope it can be usefull to someone else!
I published an answer here:
http://blog.blupixelit.eu/scroll-textarea-to-selected-word-using-javascript-jquery/
It works perfectly with jsut one needed rule: Set a line-height n the css of the textarea!
It calculate the position of the word to scroll to just by doing some simple mathematic calculation and it worked perfectly in all my experiments!
Feel free to ask me anything you need about the code!