Message field height editor

[KukY13]

Have you ever written a post so long that you had to scroll for ages to get to a part of it in editor? This mod will solve your problem!

This is a toolbar floating in your top-left corner. It contains controls for ajdusting the height of the message field: Reset button, 4 preset sizes, and 2 input fields for custom heights in rows or pixels.

However, it floats in that corner and can block some contents. Because of that there is an "X" button which will minimize the toolbar to bottom-right corner, where it will display only "+" button, which will restore the toolbar.

*Also works for PM-s*

Open posting_editor.html:
Find:

Code: Select all

	<!-- IF not S_PRIVMSGS and S_DISPLAY_USERNAME -->
		<dl style="clear:left">
			<dt><label for="username">{L_USERNAME}:</label></dt>
			<dd><input type="text" tabindex="1" name="username" id="username" size="25" value="{USERNAME}" class="inputbox autowidth" /></dd>
		</dl>
	<!-- ENDIF -->

Add after:

Code: Select all

	<!-- IF S_POST_ACTION or S_EDIT_DRAFT -->
<script type="text/javascript">
function heightPredef(rows)
	{document.getElementById('message').style.height='auto';
	document.getElementById('message').rows=rows;}
function heightRows()
	{document.getElementById('message').style.height='auto';
	document.getElementById('message').rows=document.getElementById('heightInput').value;
	document.getElementById('heightInput').value='';}
function heightPixels()
	{document.getElementById('message').style.height=document.getElementById('heightPixels').value + 'px';
	document.getElementById('heightPixels').value='';}
function removeEditBox()
	{document.getElementById("editorBox").style.display='none';
	document.getElementById("removeBox").style.display='none';
	document.getElementById("addBox").style.display='block';
	document.getElementById("mainEditContainer").style.top='auto';
	document.getElementById("mainEditContainer").style.left='auto';
	document.getElementById("mainEditContainer").style.bottom='15px';
	document.getElementById("mainEditContainer").style.right='15px';}
function addEditBox()
	{document.getElementById("editorBox").style.display='inline';
	document.getElementById("removeBox").style.display='inline';
	document.getElementById("addBox").style.display='none';
	document.getElementById("mainEditContainer").style.top='15px';
	document.getElementById("mainEditContainer").style.left='15px';
	document.getElementById("mainEditContainer").style.bottom='auto';
	document.getElementById("mainEditContainer").style.right='auto';}
</script>
<div style="position:fixed;top:15px;left:15px;background:white;border:black solid 2px;padding:5px;" id="mainEditContainer">
<input type="button" id="removeBox" value="X" class="button2" onClick="removeEditBox();" />
<input type="button" id="addBox" value="+" style="display:none;" class="button2" onClick="addEditBox();" />
<span id="editorBox">
Message field height: 
<input class="button2" type="button" value="Reset/Small" onclick="heightPredef(15);" /><input class="button2" type="button" value="Medium" onclick="heightPredef(25);" /><input class="button2" type="button" value="Big" onclick="heightPredef(50);" /><input class="button2" type="button" value="Huge" onclick="heightPredef(100);" />
<input id="heightInput" style="width:50px;" type="text" placeholder="Rows" /><input class="button2" type="button" value="Update" onclick="heightRows();" /> 
<input id="heightPixels" style="width:50px;" type="text" placeholder="Pixels" /><input class="button2" type="button" value="Update" onclick="heightPixels();" />
</span>
</div>
	<!-- ENDIF -->

You can see it in action while posting on my board, but I made a simulation page for you to play with: http://kuky.99k.org/resize.html

[heredia21]

How about making it without the floating toolbar? It is better just to resize it on your own by dragging, in my opinion.

[KukY13]

How about making it without the floating toolbar? It is better just to resize it on your own by dragging, in my opinion.

I made that because the dragging I did before took a long time if I wanted the field to be bigger. This way I can just click on a button.

[heredia21]

Any way to take that off? and thanks for this!

[KukY13]

Any way to take that off? and thanks for this!

Do you mean making it bigger by default?