Misc Links
Forum Archive
News Archive
File DB
 

Ads
 

Advertisement
Age of Valor - Ultima Online Free Shard
AoS/SE/ML/Custom - advanced code, dedicated staff, peerless bosses, non overpowered customs + much much more
 

Latest Forum Topics
Duke Nukem Forever
Posted by Red Squirrel
on Sep 04 2010, 1:28:13 am

Dr. Santa Claus?
Posted by Red Squirrel
on Sep 04 2010, 5:12:17 pm

Vmware Shifts Pricing Strategy
Posted by Red Squirrel
on Sep 02 2010, 7:09:04 pm

Badass Chipmunk
Posted by Triple6_wild
on Sep 01 2010, 1:06:15 am

Evony Farming And Building Helper Tool
Posted by Red Squirrel
on Sep 01 2010, 4:40:12 pm

 



Send spam to: website@xeonlive.com nick@xeonlive.com georgiapeach1241@aol.com
BBcode editor: Javascript
Client Side Scripting
By Jonathan Street


I've already mentioned several functions as I broke the html down and here I will go through them one at a time. Firstly the tag function.



This function relies on some global variables. One for each set of tags we want to use. The value of these variables tells the function whether the tag is already open.

Firstly lets assume the bold tag is being opened for the very first time. The value of b is 2 and is fed to the function in the place of v. The function begins with an if statement.



Using modulus we evaluate the value of v. Modulus gives us the remainder of a division. As v is 2 there is no remainder (2 divided by 2 gives a whole number, 1, giving a remainder of 0) and so this condition is true and the first block of code is performed.



On the first line the value of the bold (in our scenario) button will be changed to the new value. Next the post textarea is assigned to the variable post. On the third line the opening tag is added onto the end before we focus back onto the textarea.



Finally in the last line of the function we add one to the global variable. The next time the bold tag button is clicked a different course of events unfolds. v is now 3 so the modulus function returns 1 and the else section of the if statement is performed.



Instead of opening a tag we are now closing it. 'tagclose' and 'oldbut' are used instead of 'tagadd' and 'newbut' but apart from this these four lines are identical to those seen previously. Again we add one to the value of v and the whole thing is ready to start again.

Next is the font function.



This function is even simpler. The opening tag and closing tag are both supplied as variables to the function and all that happens is they are both tacked onto the end of the users post. In some bbcode editors (certainly phpBB and probably others) highlighting text and then using this function will wrap the highlighted text in the appropriate bbcode tags. This editor doesn't have this functionality. If this is something you feel your users will need it should be possible to reconstruct this functionality by looking at the source html for an editor that allows this.

Next the smilie function.



You'll notice that this is almost exactly the same as the font function. The only difference being one less variable is supplied. Needless to say I won't therefore be commenting on this any further.

Now to give the user a little help.



This function is used to display some helpful text in the helpbox whenever the user moves their mouse over one of the bbcode buttons. First we assign the strings of help text to variables. The function itself is supplied an indicator as to which button the user has just moved their mouse over. This is then converted into the correct variable and the value of the helpbox is changed to the correct string.

Next is the confirm_reset function.



The purpose of this function is to offer the user a second chance if they accidently click the start over button. We create a confirm box that tells them to click ok to continue and start over or click cancel to go back to working on what they have already done. If they click ok the first part of the statement, return true, goes into effect and the form is wiped. If they click cancel the second part of the statement goes into effect, return false, and their work is safe, the form isn't wiped.

The final function now. This is more for our benefit rather than the users but I think it is still valuable. It's the checkForm function



First of all we assign some variables for the subject box and the post box. I've imaginatively called them subject and post. The main function is two if statements, one nested inside the other. The basic idea is that if both the subject and the post are fewer than 2 characters long we don't let the submission be made and we alert the user of this. We then consider what will happen if only the subject is less than 2 characters long. Again we prevent the user submitting with return false and create an alert box. We do the same then for the post length. Finally if both the subject and post are both longer than 2 characters in length we return true and the submission is made.

You may well want to make the minimum length for the post longer depending on the sort of submissions you are expecting.

That's almost it now. Just one page to go.


Next Page
spacer
54915 Hits Pages: [1] [2] [3] [4] [5] [6] 29 Comments
spacer


Latest comments (newest first)
Posted by we_undertaker on May 05th 2008 (02:00)
i looke at http://www.iceteks.com/articles.php/javascript/1
i really like this text editor

but i dont know how to use it, cos i just new in PHP
could you please tell me how to use that with SQL , cos i want to have this text editor.

and in your html code :
<form action="bbcode.php" method="post" name="editform" onsubmit="return checkForm(this)">
i also dont know how to create bbcode.php , to run the form ...

please , please help me, i really need it
Thank you, Thank you so much

spacer
Posted by AdRock on August 08th 2007 (04:40)
I have followed the article and have noticed there are errors that I don't know how to fix.

I have used the exact code as provided in the article.

The first error I was able to fix which was a backslash in <textarea> which was missing but this is the main error.

When I type a word in the text area and I want to do some formatting such as bold or italic, th ewhole word is not highlighted with the start and end tags such as some words (supposed to be the [b] tags in there) but instead it just does some words[b].

One other question which is probably really stupid but is the second article the php file which is called when you preview what you have written?

spacer
Posted by Red Squirrel on August 08th 2007 (12:52)
Force be with you, always!
spacer
Posted by AltaGid on August 08th 2007 (13:01)
Hello! Help solve the problem.
Very often try to enter the forum, but says that the password is not correct.
Regrettably use of remembering. Give like to be?
Thank you!

spacer
Posted by sgreeny12 on April 04th 2007 (12:23)
Hey great tutorial. Really works except I have 1 question if you dont mind. I want to add an align right button similar to the one on devshed forms where the image is the classic microsoft alight right button. When I click on the bottom it automatically submits the script. Does anyone have any fixes? Thanks

I could make it into a smile but i wouldnt know how to have it give the close option. Can someone help me with that. Thanks


The first 3 work because they arnt images. The 4th which is the image doesnt work.
CODE
               <input type="button" src="images/icons/justifyleft.gif" class="button" value="left" name="left" onclick="java-script tag('left', '[left]', 'left*', '[/left]', 'left', 'left');"

onMouseOver="helpline('left')" />
               <input type="button" src="images/icons/justifycenter.gif" class="button" value="center" name="center" onclick="java-script tag('center', '[center]', 'center*',

'[/center]', 'center', 'center');" onMouseOver="helpline('center')" />
               <input type="button" src="images/icons/justifyright.gif" class="button" value="right" name="right" onclick="java-script tag('right', '[right]', 'right*', '[/right]',

'right', 'right');" onMouseOver="helpline('right')" />

               <input type="image" src="images/icons/justifyright.gif" class="button" value="right" name="right" onclick="java-script tag('right', '[right]', 'right*', '[/right]',

'right', 'right');" onMouseOver="helpline('right')" />

spacer
View all comments
Post comment

Age of Valor Ultima Online Server

Top Articles Latest Articles
- What are .bin files for? (592696 reads)
- Big Brother and Ndisuio.sys (143096 reads)
- PSP User's Guide (127726 reads)
- Text searching in linux with grep (115136 reads)
- SPFDisk (Special Fdisk) Partition Manager (101190 reads)
- Dynamic Forum Signatures (version 2) (4669 reads)
- Successfully Hacking your iPhone or iTouch (14341 reads)
- Ultima Online Newbie Guide (25070 reads)
- BBcode editor: PHP - The sensible approach (17910 reads)
- The Hitch Hikers guide to "the mouse" (15293 reads)
corner image

This site best viewed in a W3C standard browser at 800*600 or higher
Site design by Red Squirrel | Contact
© Copyright 2010 Ryan Auclair/IceTeks, All rights reserved