since I can not markup content inside tags I want to create my own "custom" textbox. The textbox should work as a kind of console, where the progress of battle (i.e.) is logged. I first tried to use a div, within a div, within divs for each log, but when the divs inside the outer divs exceed the max-开发者_开发技巧height, they ignore the surrounding divs.
Example:
Even if this would work I still got the problem, that there is no scrollbar, since it's not a <textarea>
.
I googled a lot, but the only thing I found where overwhelming tutorials for dynamic feedreaders etc.
What I am looking for is a simple "textbox" aka "console" with scrollbar which contents do respect the borders of that console. Accomplished with jQuery.
Thank you very much!
Solution:
Before
<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;">
<div style="padding:2px 2px 2px 2px;">
//content
</div>
</div>
After
<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;overflow-x:hidden;overflow-y:scroll;">
<div style="padding:2px 2px 2px 2px;">
//content
</div>
</div>
try setting this css on your div
overflow-x:hidden;
overflow-y:scroll;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
Then in your jQuery, when the content of the div changes do this:
$('#theDiv').get(0).scrollTop = 10000000;
I'm not sure if that's the best way, but it's what I have working.
Well, you could add a scrollbar to your div by changing the overflow-y property:
#div{
overflow-y: scroll;
}
i think it's a better option than a textarea because you can also format the text.
精彩评论