The blog of roncli blog
Houston, Texas, United States
CTG Music
Trax in Space Beta
Recent Posts
WTF did Revival Productions just do?
A Tale of Two Communities
The Final Stretch
A Two Tiered, Untiered OTL
Secretly, you wish you could've done what I did
What have I done since v2?
It's Done. It's Finally Done.
The Big Picture is Starting to Wear on Me
A Low Bang to Buck Ratio
February 2005
March 2005
April 2005
May 2005
June 2005
July 2005
August 2005
September 2005
October 2005
November 2005
December 2005
January 2006
February 2006
March 2006
April 2006
May 2006
June 2006
July 2006
August 2006
September 2006
October 2006
November 2006
December 2006
February 2007
March 2007
April 2007
May 2007
June 2007
July 2007
August 2007
September 2007
October 2007
November 2007
December 2007
January 2008
February 2008
March 2008
April 2008
June 2008
July 2008
September 2008
December 2008
February 2009
July 2009
August 2009
September 2009
October 2009
November 2009
February 2010
March 2010
April 2010
June 2010
July 2010
August 2010
September 2010
October 2010
November 2010
December 2010
March 2011
June 2011
July 2011
August 2011
September 2011
October 2011
December 2011
January 2012
February 2012
April 2012
July 2012
November 2012
July 2013
April 2014
July 2014
August 2014
November 2014
December 2014
March 2015
April 2015
May 2015
June 2015
July 2015
September 2015
January 2016
February 2016
May 2016
July 2016
November 2016
March 2017
January 2018
May 2018
June 2018
January 2019
January 2021
February 2021
March 2021
August 2021
October 2021
December 2021
August 2022
November 2022
October 2023
February 2024
April 2024
Current Posts
Thursday, May 03, 2007
Textboxes Galore
Posted: 3:45:00 PM 0 comments

One of the things I am trying to do with OSMusic.Net's ASP.Net update is to make the user experience less of a chore and more fun. As I stated in a previous post, my goal was to load the presentation end with AJAX-like stuff, reserving JavaScript for mundane tasks.

Apparently, textboxes are mundane.

Microsoft provides no real way to manipulate textboxes using ASP.Net and its AJAX extensions. Thus, I had to use nothing but JavaScript to create the flashy addons that OSM's new textboxes are going to provide.

OSM's current textboxes are just unmodified textareas, with the occasional JavaScript to limit the input to a certain size. In some cases, you'd get a half-page long description of how the special codes for formatting text worked. It wasn't very intuitive and didn't get a whole lot of use.

So what I did was make a bunch of small 16x16 buttons, one for each possible tag, and two buttons specifically for the mass of smilies OSM uses. When a user clicks on a button that doesn't require anything, such as bold text, it adds a [b][/b] to the textbox, with the cursor in the middle so you can begin typing right away. If you have text highlighted, it puts the [b] in front and the [/b] at the end of the selection, so you don't have to place anything. You also get a reminder as to what the syntax is, so that if you want to type it in yourself, you can.

The other tags are a bit different. Instead of immediately inserting anything, you have to provide some information. In the case of an image, you need the URL and the alignment - left, right, or none - it will have on the page. When you click the Insert button, you get a properly constructed [img] tag at the cursor. Colors are similar, you get sliders for red, green, and blue, and the syntax updates with the color you've selected, along with a preview of what the color actually looks like.

There are two smiley pages. You just point your cursor in the box where you want to add it, click one of the two smiley page buttons, and select a smiley from the box below. No need to remember what the difference between :cheesy: and :laugh:, just select the one you want visually.

It's all packed into a control and three JavaScript source files that manage all of the textboxes on a page. I'm quite happy with how it turned out, and look forward to actually being able to use it. There's not too many sites out there that allow for such easy adding of markup text.

Labels: , ,