Created By
DMG Development
As Seen On

Main Page  |  Forums  |  Register  |  Active Topics  |  Members  |  Search

 
Username:
Password:
DMG Forums >> DMG Forums Discussion >> Tutorials & HOWTO Articles >> Formatting Buttons (bold, italic, etc) for DMG Code
Formatting Buttons (bold, italic, etc) for DMG Code
Author Topic
Stormvet


Beginner

Join Date: 1/8/2007
Posts: 12

Posted: 1/24/2007 2:47:31 PM

Here's some code I worked up and currently have added to my v 3.0 installation:

This part goes in the HEAD area. I have it so far in newtopic.aspx, newreply.aspx and topics.aspx (for the quick reply):

<script type="text/javascript">
<!--
var txt = '';

function addFormat(rc)
{
txt = '';
getSel()

if(document.selection)
{ //IE
if(document.selection.createRange().text != '') //if '' then nothing's selected
{
document.selection.createRange().text = '['+ rc + ']' + txt + '[/'+ rc + ']';
}
else
{
document.getElementById('txtReplyMessage').value = document.getElementById('txtReplyMessage').value + '[' + rc + '][/' + rc + ']';
}
}
else
{ //Not IE.. assume Mozilla?
var txtArea = document.getElementById('txtReplyMessage');
var startPos = txtArea.selectionStart;
var endPos = txtArea.selectionEnd;

strSelection = txtArea.value.substring(startPos, endPos);
if(strSelection == '') //nothing's selected
{
document.getElementById('txtReplyMessage').value = document.getElementById('txtReplyMessage').value + '[' + rc + '][/' + rc + ']';
}
else
{
var text = '['+ rc + ']' + strSelection + '[/'+ rc + ']';
txtArea.value = txtArea.value.substring(0, startPos) + text + txtArea.value.substring(endPos, txtArea.value.length);
}
}
document.getElementById('txtReplyMessage').focus();
}

function getSel()
{
if (window.getSelection)
{
txt = window.getSelection();
}
else if (document.getSelection)
{
txt = document.getSelection();
}
else if (document.selection)
{
txt = document.selection.createRange().text;
}
else return;
}
// -->
</script>


And these guys do down near the textbox the message goes into:

<button onclick="addFormat('i');">&nbsp;I&nbsp;</button>&nbsp;
<button onclick="addFormat('b');">&nbsp;B</button>&nbsp;
<button onclick="addFormat('u');">U</button>

You'll note in the script I name the textbox literally, so on the quick reply as you know the name is "txtReplyMessage" - different from "txtMessage" on the other two templates. I'm sure I could add a use of the JS function eval() to hand the target control in along with the other variable (rc) and make the function more universal.

If nothing's selected it merely adds the formatting to the end of any text already in the box. If there is a selection it appends it to front and back or the selection. This can be extended to the code and pre tags easily. The color formatting will require an adaptation of the function, both at the script level, and a dropdown list vs. a button for the different color choices.

It looks for IE and mozilla, I have no clue if it works in other browsers, and frankly don't care either, heh. If one refuses to use IE or mozilla IMO they're a retard and not worth accomodating. Harsh!

________________________
Here is my cool sig!!
grimmeissen


Administrator


Join Date: 8/30/2005
Posts: 656
Location: Cincinnati, Ohio

Posted: 1/24/2007 3:26:40 PM

Nice work. This should work great for those who want some more options on their text boxes.

I'm going to move this over to the tutorials section for others to use.

  Copyright DMG Development DMG Forums 3.2