Message field height editor
Posted: 26 Jul 2010, 14:52
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:
Add after:
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
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 -->
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 -->