Formatting Tags Via Web Forms

U

[UKLans]Khan

Guest
Hello,

I have an ASP.Net webform, I would like to be able to offer the user formatting like you get on these forums. I could do if with normal ASP and Javascript but with ASP.net this does not work.

So what I need:

- I have a number of buttons like the ones above the message box's on these forums.

- When they are click it inserts a forum tag into the message box.

- Has to work with ASP.Net

Anyone any ideas/ done this before?

Khan
 
J

Jonty

Guest
This is really JavaScript's forté. I am aware that ASP.NET has some cool forms code, which allows a form to target itself and reload the same page changing x, y and z as necessary. However, this all seems a little over the top. With JavaScript all you need is a simple script that activates on the client side when a button is pressed. Everything happens instantly on the client side, so the page doesn't have to be reloaded and ASP.NET code never comes into play (at least not until you start parsing the submitted content for the tags).

Just create your form utilising the standard (X)HTML markup code. Create a JavaScript script which inserts x when button x is pressed. Finally create the necessary ASP.NET code to parse the submitted content for the tags you wish to insert. Anyway, that's how I'd do it, if I understood what you're trying to do correctly?

I'd be more than happy to create a form and the appropriate JavaScript code for you sometime today, is you wish? The ASP.NET parsing code, however, I'd have to leave to your talents :)

Kind Regards
 
U

[UKLans]Khan

Guest
Javascript does seem the best option in that case, have you or do you know of any examples of this?

Many thanks,

Khan
 
J

Jonty

Guest
If you allow me until this evening I'll create an example for you. It's simple stuff, so even if you're not very au fait with JavaScript and the likes, you should have no trouble at all understanding what exactly is going on. All you need concentrate on then is the ASP.NET parsing (which ought not to be too hard a task).

Kind Regards
 
U

[UKLans]Khan

Guest
That would be great thanks Jonty.

Khan
 
J

Jonty

Guest
Hi Khan

This is probably hideous code, so forgive me. Below is the source I quickly drafted (It's XHTML 1.1 compliant, but the JavaScript uses older standards for backwards compatibility). It can also be viewed online.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Prototype One</title>
  <meta content="charset=utf-8; text/html;" http-equiv="Content-Type" />

  <style type="text/css">
  Body
  {
    background-color:#EAEAEA;
    color:#475C8F;
    font-size:10px;
    font-family:tahoma,verdana,sans-serif;
  }

  Button
  {
    font-family:tahoma,verdana,sans-serif;
    font-size:10px;
    padding:3px;
  }
  
  #Bold
  {
    font-weight:bold;
  }

  #Italic
  {
    font-style:italic;
  }

  #Tooltip
  {
    background-color:#EAEAEA;
    border:none;
    color:#475C8F;
    font-size:10px;
    font-family:tahoma,verdana,sans-serif;
    margin:2px;
    width:300px;
  }

  #Underline
  {
    text-decoration:underline;
  }
  </style>

  <script type="text/javascript">
  // <![CDATA[

var TagReference =
[
"b","Insert emboldened text",false,
"i","Insert italicised text",false,
"u","Insert underlined text",false,
"uri","Insert a hyperlink",false,
"img","Insert an image",false
];

function Insert (TagKey)
{
  for (var i=0; i<TagReference.length; i++) {
    if (TagKey == TagReference[i]) {
      var TagID = i;
    }
  }

  if (TagReference[TagID+2] == false) {
    var TagPrefix = "[";
    TagReference[TagID+2] = true;
  } else {
    var TagPrefix = "[/";
    TagReference[TagID+2] = false;
  }

  document.getElementById("Textarea").value += TagPrefix + TagReference[TagID] + "]";
}

function Information (TagKey)
{
  for (var i=0; i<TagReference.length; i++) {
    if (TagKey == TagReference[i]) {
      var TagID = i;
    }
  }

  if (TagID != undefined) {
    document.getElementById("Tooltip").value = TagReference[TagID+1];
  } else {
    document.getElementById("Tooltip").value = "";
  }
}

function Prompt (TagKey)
{
  for (var i=0; i<TagReference.length; i++) {
    if (TagKey == TagReference[i]) {
      var TagID = i;
    }
  }

  var TagURI = prompt(TagReference[TagID+1],"http://");

  if (TagURI != undefined) {
    document.getElementById("Textarea").value += "[" + TagReference[TagID] + "]" + TagURI + "[/" + TagReference[TagID] + "]";
  }
}
  // ]]>
  </script>
</head>

<body>

<form action="my-code-parsing-script.aspx" method="post">
<div>

  <button id="Bold" onclick="Insert('b')" onmouseout="Information()" onmouseover="Information('b')" title="Bold">B</button>
  <button id="Italic" onclick="Insert('i')" onmouseout="Information()" onmouseover="Information('i')" title="Italic">I</button>
  <button id="Underline" onclick="Insert('u')" onmouseout="Information()" onmouseover="Information('u')" title="Underline">U</button> 
  <button onclick="Prompt('uri')" onmouseout="Information()" onmouseover="Information('uri')" title="Hyperlink">[url]http://[/url]</button> 
  <button onclick="Prompt('img')" onmouseout="Information()" onmouseover="Information('img')" title="Image">Image</button>


  <input id="Tooltip" type="text" title="Tooltip"></input>


  <textarea cols="60" id="Textarea" rows="10" title="Type your message"></textarea>

</div>
</form>

</body>
</html>

Okay, so an explanation ... are you sitting comfortably? :D Well, let's start with the XHTML markup.

[/i]XHTML

Basically, the relevant source concerns the form elements. <button> tags are used to call each function (these could just as easily be <input type="button" /> tags). The sole <input> tag is used as a form of tooltip when the user passes the mouse over any button. The <textarea> is where the user inputs his or her message, and where the buttons place their tags.

Each function is called with onsomeevent attributes in the <button> tags. The id attribute on the buttons is purely for the CSS style, whereas the id attributes for the <input> and <textarea> tags are used by the scripts and must remain intact (or if you want to change the id names, be sure to change the names in the JavaScript too). The title attributes are merely for disabled users to help them out when navigating, particularly with aural browsers.

CSS

For convenience I've placed all the CSS style information in the <style> tags in the <head>, rather than having bits of it inline in the elements. All CSS information, as you would expect, is purely presentational and does not effect how the script functions.

JavaScript

And so on to the real heart of the page: the JavaScript. There are three functions which I will deal with separately below. Each function is underpined by an array at the top of <script> element called 'TagReference'. This array works by holding information about each button which every script can then use if it needs to, think of it like a database of information. If you need to add a new button, then you need to remember to add a new line to the array. The information it holds is very simple:
Code: 
"[i]Short Button Reference[/i]","[i]Textual Tooltip Description[/i]",false,
The button reference is a short identifier used by the scripts (i.e. 'b' for bold 'img' for images etc). The tooltip description is a sentence which appears when the user passes the mouse over the button. Finally, false (no quotes) sets the default state of the button and is used to differentiate between when the tag is open (i.e. etc) and when the tag is closed (i.e. ).

Insert()

The Insert() function is the primary means of inserting tags into the <textarea>. The function is always called onclick and always includes a tag key, i.e. the Short Button Reference mentioned above; i.e.
Code: 
<button onclick="Insert('b')"> ... would insert a bold tag
The code inside the Insert() function is fairly simple. First, we cross-reference the tag key sent onclick with the Short Button Reference in the array. When a match is found, the position in the array is stored in a variable called 'TagID'. Next we check whether the tag in question is open or closed by checking whether the associated array state is set to 'true' (i.e. the tag is open) or 'false' (the tag is closed). Depending on the setting, we later output the tag in a slightly different way and we toggle the true/false setting so that it's correct for the next time. The last stage is then to simply construct and output the tag. Note the += method. This appends whatever the user has entered in the <textarea>. If we merely used =, the previous information would be erased and the tag inserted on it's own.

Information()

The Information() function acts as a simple tooltip by writing information to a text field when the user passes the mouse over a button, and erasing the information when the user moves the mouse away from the button. The onmousesomeevent events are utilised to call the function, and, as above, we send a tag key to identify which tooltip we wish to display (when clearing the tooltip, no tag key is sent).

As before, the code is very simple. We start by cross-referencing the tag key, or lack thereof, which was sent onmousesomeevent; once again storing the relevant array position in a 'TagID' variable. If a match was found (i.e. we sent a tag key requesting tooltip x be shown) then the value of the <input> field is updated accordingly via information taken from the array. If no match was found (i.e. we wish to clear any tooltips) then the value of the <input> field is erased.

Prompt()

The Prompt() function asks the user to enter a URI, and is called when inserting hyperlinks or images. Just as with Insert(), the function is called onclick and a relevant tag key is sent.

Once again, the script starts by cross-referencing the tag key with the array and storing the matched position in a 'TagID' variable. A prompt box is then actuated asking the user to enter the desired URI (the relevant tooltip also appears in the prompt box so the user isn't left unsure as to what they are being asked to enter, as well the standard "http://" prefix which is inserted in the form field). If the user presses 'OK' we then construct and insert the relevant tag. If they cancel then nothing is inserted. Once again, note we are appending (+=) not overwriting.

Phew!

Well, if you weren't confused to begin with, I'm sure you are now ;) To be honest, this code is very simple, if a little rough around the edges. The detail above is purely to (I hope!) aid your understanding of what specifically is going on. But, of course, if you have any questions, no matter how daft they may seem, please just ask :)

Hope this helps
 
U

[UKLans]Khan

Guest
Jonty, thanks very much m8, that's exactly what I was looking for. And a great explanation!

I owe you a pint!

Many thanks,

Khan
 
J

Jonty

Guest
hehe, had crossed my mind MYstIC G :p

Glad to be of help, though, Khan. If you need any help with modifying or implementing the code (or adding, say, drop down <select> lists or smilie lists etc) then just shout :)

Kind Regards
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
Top Bottom