(skinning/forum tips) Auto-Closing Tags

[MasterVision]

Auto-Closing Tag

Auto-closing BBCode tags used in Post screen.


BROWSER Compatibility: FF, IE
Coded by : MasterVision
Test/Preview: Tested in my forum in 4 different used skin. just go to http://www.jappinoy.com - Login as test_user (pw: secret) and test here http://www.jappinoy.com/index.php?c=6

Known Issue: if you are using Internet Explorer... you must first select a text that you want to format or else, all text will be replaced by the last clicked tag.

CODE 1 : download the code and host it yourself or else it wont work.
Code link: http://h1.ripway.com/MasterVision/mvBBCodeTags.js

[MasterVision]

CODE 2 : AdminCp->HTML Templates->Manage HTML->Post Screen Section+-- Post: Code Buttons & Post Text area
if you dont have any modification in your Post Screen Section... just replace the whole code by the following code

<tr>
<td class='pformstrip' colspan="2">{ibf.lang.ib_code_buttons}</td>
</tr>
<tr>
<td class='pformleft'>
<input type='radio' class='radiobutton' name='bbmode' value='ezmode' onclick='setmode(this.value)' />&nbsp;<b>{ibf.lang.bbcode_guided}</b>

<input type='radio' class='radiobutton' name='bbmode' value='normal' onclick='setmode(this.value)' checked="checked" />&nbsp;<b>{ibf.lang.bbcode_normal}</b>
<script type='text/javascript' src='html/ibfcode.js'></script>
</td>
<td class='pformright'>
<input type='button' accesskey='b' value=' B ' onclick='mvBBCode("bold")' class='codebuttons' name='B' style="font-weight:bold" onmouseover="hstat('bold')" />
<input type='button' accesskey='i' value=' I ' onclick='mvBBCode("italic")' class='codebuttons' name='I' style="font-style:italic" onmouseover="hstat('italic')" />
<input type='button' accesskey='u' value=' U ' onclick='mvBBCode("underline")' class='codebuttons' name='U' style="text-decoration:underline" onmouseover="hstat('under')" />
<input type='button' accesskey='s' value=' S ' onclick='mvBBCode("strikeout")' class='codebuttons' name='S' style="text-decoration:strikeout" onmouseover="hstat('strikeout')" />

<select name='ffont' class='codebuttons' onchange="mvBBCode(this.options[this.selectedIndex].value)" onmouseover="hstat('font')">
<option value='0'>{ibf.lang.ct_font}</option>
<option value='Arial' style='font-family:Arial'>{ibf.lang.ct_arial}</option>
<option value='Times' style='font-family:Times'>{ibf.lang.ct_times}</option>
<option value='Courier' style='font-family:Courier'>{ibf.lang.ct_courier}</option>
<option value='Impact' style='font-family:Impact'>{ibf.lang.ct_impact}</option>
<option value='Geneva' style='font-family:Geneva'>{ibf.lang.ct_geneva}</option>
<option value='Optima' style='font-family:Optima'>Optima</option>
</select><select name='fsize' class='codebuttons' onchange="mvBBCode(this.options[this.selectedIndex].value)" onmouseover="hstat('size')">
<option value='0'>{ibf.lang.ct_size}</option>
<option value='1'>{ibf.lang.ct_sml}</option>
<option value='7'>{ibf.lang.ct_lrg}</option>
<option value='14'>{ibf.lang.ct_lest}</option>
</select><select name='fcolor' class='codebuttons' onchange="mvBBCode(this.options[this.selectedIndex].value)" onmouseover="hstat('color')">
<option value='0'>{ibf.lang.ct_color}</option>
<option value='blue' style='color:blue'>{ibf.lang.ct_blue}</option>
<option value='red' style='color:red'>{ibf.lang.ct_red}</option>
<option value='purple' style='color: purple'>{ibf.lang.ct_purple}</option>
<option value='orange' style='color: orange'>{ibf.lang.ct_orange}</option>
<option value='yellow' style='color:yellow'>{ibf.lang.ct_yellow}</option>
<option value='gray' style='color:gray'>{ibf.lang.ct_grey}</option>
<option value='green' style='color:green'>{ibf.lang.ct_green}</option>
</select>
&nbsp; <a href='javascript:closeall();' onmouseover="hstat('close')">{ibf.lang.js_close_all_tags}</a>


<input type='button' accesskey='h' value=' http:// ' onclick='tag_url()' class='codebuttons' name='url' onmouseover="hstat('url')" />
<input type='button' accesskey='g' value=' IMG ' onclick='tag_image()' class='codebuttons' name='img' onmouseover="hstat('img')" />
<input type='button' accesskey='e' value=' @ ' onclick='tag_email()' class='codebuttons' name='email' onmouseover="hstat('email')" />
<input type='button' accesskey='q' value=' QUOTE ' onclick='mvBBCode("quote")' class='codebuttons' name='QUOTE' onmouseover="hstat('quote')" />
<input type='button' accesskey='p' value=' CODE ' onclick='mvBBCode("code")' class='codebuttons' name='CODE' onmouseover="hstat('code')" />
<input type='button' accesskey='l' value=' LIST ' onclick='tag_list()' class='codebuttons' name="LIST" onmouseover="hstat('list')" />
<!--<input type='button' accesskey='l' value=' SQL ' onclick='simpletag("SQL")' class='codebuttons' name='SQL'>
<input type='button' accesskey='t' value=' HTML ' onclick='simpletag("HTML")' class='codebuttons' name='HTML'>-->


{ibf.lang.hb_open_tags}:&nbsp;<input type='text' name='tagcount' size='3' maxlength='3' style='font-size:10px;font-family:verdana,arial;border:0px;font-weight:bold;' readonly="readonly" class='row1' value="0" />
&nbsp;<input type='text' name='helpbox' size='50' maxlength='120' style='width:auto;font-size:10px;font-family:verdana,arial;border:0px' readonly="readonly" class='row1' value="{ibf.lang.hb_start}" />
</td>
</tr>
<tr>
<td colspan="2" class='pformstrip'>{ibf.lang.post}</td>
</tr>
<tr>
<td class='pformleft' align='center'>
<!--SMILIE TABLE-->

<div class='desc'><strong><a href='javascript:CheckLength()'>{ibf.lang.check_length}</a> &middot; <a href='javascript:bbc_pop()'>{ibf.lang.bbc_help}</a></strong></div>
</td>
<td class="pformright" valign='top'>
<textarea cols='80' rows='20' name='Post' tabindex='3' class='textinput' id="workarea">$data</textarea></td>
</tr>
<tr>
<td class='pformleft'><b>{ibf.lang.po_options}</b></td>
<td class='pformright'>
<!--IBF.EMO-->
<!--IBF.SIG-->
<!--IBF.TRACK-->
</td>
</tr>

<script type="text/javascript" language="javascript" src="http://your_hosting_url/yourfile.js">
//Coded by: MasterVision 070713
</script>

The code in red should be the URL where you hosted the javascript file.

Please feel free to posts comments.

[Pandemix]

Cool code. :]

[MasterVision]

Thanks.. actually there's a lot of waiting enhancement for this code.. this could be a good replacement for IFX of fmods. I actually tried that modification but too complicated, from installation and editing of codes and didnt work in my board.

So I tried to write some from basic function to more complex in the future.

In this code I also tried to have YouTube button to automatically display youtube video from taking only the video key code ( http://www.youtube.com/watch?v=vU32QuXppkQ ) so you dont have to copy the whole embed code. then I choose to have tag code for that... tag is successfully embed but my problem and currently doing enhancement is by replacing the tag in topic view to the actual code like the code below, so that it will be normally displayed.

[dohtml]
<embed src="http://www.youtube.com/v/vU32QuXppkQ" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
[/dohtml]

but I cant find a way to change it in innerHTML . If I got it working... this code could be more efficient than the code they have in fmods (IFX)

If you are interested you can also enhance this code.. and give me updates..

Thanks...

[MasterVision]

I finally made the YouTube custom Tag to work..... reference link here. http://www.fmods.com/index.php?showt...ndpost&p=65496

Proven and Tested here: http://mvtest.4.forumer.com/index.ph...=2&st=0#entry4

if you want to try this... login as test_user, password: secret

all you have to do is get the youtube last code from its URL, example vU32QuXppkQ and enclosed it with {yt}code here{/yt} or use my provided YouTube button in post screen.

[Wild Cat]

Ahh there's no question........ you are a genius MasterVision...

[MasterVision]

no i am not.. Im just trying to use what I've learned...hehehe...

[Wild Cat]

Don't be so modest

[SawanM]

MasterVision, should try out the paid version of ipb 2.3and you could become support staff on invisionpower if there is !

[MasterVision]

ah eh... PAID!? lol...

if I can move my 1.3 board database to 2.3 i will surely do it... but.. unfortunately.. we cant...