<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Stephen Groom's Blog &#187; Tutorials</title>
	<atom:link href="http://www.groomi.net/category/tutorials/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.groomi.net</link>
	<description>My personal blog featuring webmaster tutorials and resources, news and the occasional rant!</description>
	<lastBuildDate>Mon, 26 Jul 2010 08:28:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Guide: Hackintosh with Asus P5KC</title>
		<link>http://www.groomi.net/2009/05/guide-hackintosh-with-asus-p5kc/</link>
		<comments>http://www.groomi.net/2009/05/guide-hackintosh-with-asus-p5kc/#comments</comments>
		<pubDate>Sun, 10 May 2009 18:38:30 +0000</pubDate>
		<dc:creator>Stephen Groom</dc:creator>
				<category><![CDATA[Software]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.groomi.net/?p=99</guid>
		<description><![CDATA[If you read my previous post you will know that this afternoon I have spent a little while (re)installing MacOS on my PC hardware.  The reason is due to a harddrive corruption on the previous install.  I do not place the blame for this on the software I am going to tell you to use, but [...]]]></description>
			<content:encoded><![CDATA[<p>If you read my <a href="http://www.groomi.net/2009/05/bye-bye-mr-hackintosh/">previous post</a> you will know that this afternoon I have spent a little while (re)installing MacOS on my PC hardware.  The reason is due to a harddrive corruption on the previous install.  I do not place the blame for this on the software I am going to tell you to use, but mostly the choice of drivers that I had installed.  I would warn you off the drivers in question, but I stupidly neglected to take any notes on my last installation.  This time I did not!</p>
<h2>Hardware</h2>
<p>The hardware I am installing on is as follows:</p>
<ul>
<li>Asus P5KC</li>
<li>Intel Q6600</li>
<li>4GB Geil Ram</li>
<li>NVidia 8800GTX</li>
</ul>
<h2>Software</h2>
<p>There are a few choices for which installer to use when installing MacOS on PC hardware.  The one I chose was <a href="http://iatkos.wikidot.com/" target="_blank">iAtkos</a>, mostly because I already had a DVD burned lying around but I&#8217;m sure last time there was an educated reason for it.  The following Guide uses <strong>iAtkos 5.0i 10.5.5.</strong>  I&#8217;m not going to offer a download link but if you&#8217;re creative you should be able to find it pretty easily..</p>
<h2>Method</h2>
<p>This is not a step-by-step guide.  I am merely typing my notes up into readable form in the hope that it is of to some use to somebody.  For a step-by-step guide or more information about the osx86 project visit <a href="http://wiki.osx86project.org/wiki/index.php/Installation_Guides" target="_blank">their wiki</a>.</p>
<p>So&#8230;.</p>
<p>The DVD booted without any problems, I loaded the setup, chose Utility &gt; Disk Utility.  I then created a partition and set on my way.</p>
<p>I chose my new partition as the install location and then hit next.  On the next screen I chose Customize and this is where the important stuff is chosen.</p>
<p>I am not going to go into details as to what every option does (mostly because I don&#8217;t know) but there are descriptions for each on the install disc.</p>
<p><strong>Bootloader:<br />
<span style="font-weight: normal; ">PC-EFi<br />
<strong>X86 Patches:<br />
 - Decrypters<br />
 </strong>Appledecrypt<br />
<strong>- Enablers<br />
</strong>SmBios Enablers<br />
-Removepowermanagement<br />
-OHR<br />
<strong>Drivers:<br />
- VGA<br />
&#8211; Nvidia<br />
<span style="font-weight: normal; ">NVinject<br />
Efi Strings &gt; 8xxx <br />
<strong>- System<br />
</strong>Sata/IDE<br />
NTFS -3G</span></strong></span></strong></p>
<p><strong><span style="font-weight: normal; "><strong><span style="font-weight: normal; ">Once you have chosen these options (or different if you have slightly different hardware), run the installer and let it reboot.  If all has gone well you should be able to Sleep, Shutdown and Reboot.  For my the P5KC onboard lan and sound is missing.  As I don&#8217;t use onboard sound you&#8217;ll have to use your initiative.  Lan drivers however can be found <a href="http://www.insanelymac.com/forum/index.php?showtopic=40851&amp;st=340&amp;p=724044&amp;#entry724044" target="_blank">here.</a></span></strong></span></strong></p>
<p>I am now installing updates to 10.5.6 and then will quest to re-find my soundcard drivers.  I hope this information is useful to you.</p>
<p>Stephen</p>
<p>P.S.<br />
is it disc or disk?!</p>
<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.groomi.net/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://www.groomi.net/2009/05/guide-hackintosh-with-asus-p5kc/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Transfer MySQL database to remote server</title>
		<link>http://www.groomi.net/2009/04/transfer-mysql-database-to-remote-server/</link>
		<comments>http://www.groomi.net/2009/04/transfer-mysql-database-to-remote-server/#comments</comments>
		<pubDate>Wed, 22 Apr 2009 09:20:07 +0000</pubDate>
		<dc:creator>Stephen Groom</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.groomi.net/?p=79</guid>
		<description><![CDATA[This post has been rewritten.  Please see How to transfer a MySQL Database to a remote server for updated information Hey, This week I&#8217;ve moved back from my ultimate dedi to a Futurehosting VPS in an effort to cut costs and turn a larger profit from Drag Racer.  I tried to make the transfer of [...]]]></description>
			<content:encoded><![CDATA[<h2>This post has been rewritten.  Please see <a href="http://www.groomi.net/2010/03/how-to-transfe…-remote-server/" target="_self">How to transfer a MySQL Database to a remote server</a> for updated information</h2>
<p>Hey,</p>
<p>This week I&#8217;ve moved back from my <a href="http://www.groomi.net/2008/10/and-here-it-is/">ultimate dedi</a> to a <a href="http://www.futurehosting.com/virtual-servers/64bit-virtual-servers/">Futurehosting VPS</a> in an effort to cut costs and turn a larger profit from <a href="http://apps.facebook.com/drag_racer">Drag Racer</a>.  I tried to make the transfer of data as quick as possible and seeing as how my database is a few hundred MB I transferred it using mysqldump.</p>
<p>First thing&#8217;s first, you need to prepare the receiving server.  Create a user for the sending server to connect as using this command from the mysql console:</p>
<blockquote><p>GRANT ALL PRIVILAGES ON *.* TO &#8216;username&#8217; @ &#8216;  <em>[OLD SERVER IP]</em> &#8216; IDENTIFIED BY &#8216;password&#8217;;</p></blockquote>
<p>This will allow your mysql server with the IP <em>[OLD SERVER IP] </em>(replace this with it&#8217;s real ip ofcourse) to connect using the username &#8216;username&#8217; and password &#8216;password&#8217;.</p>
<p>Next we are going to use mysqldump in the linux shell (or windows cmd prompt, I&#8217;m not 100% where it&#8217;s located in windows) to dump our databases to our new server.  The syntax of the command is as follows:</p>
<blockquote><p># mysqldump -u username -p -h <em>[NEW SERVER IP]</em> <em>[DATABASE NAME(S)]</em></p></blockquote>
<p>The command to dump two databases (one called database1, the other database2) to ip 192.168.1.1 is as follows.</p>
<blockquote><p># mysqldump -u username -p -h 192.168.l.1 database1 database2</p></blockquote>
<p>mysqldump will now take a few minutes (depending on the size of the database in question) to dump the entire contents of database1 and database2 onto your new server (in this example 192.168.1.1).  I recommend that once you are finished with this, you remove the user we created to copy the database over.  To do this we use this command from the mysql console:</p>
<blockquote><p>drop user username;</p></blockquote>
<p>If you have any questions please leave them below in the comments.  I also recommend using the following website to look up the commands I showed and their uses:<br />
<a href="http://dev.mysql.com/doc/refman/5.0/en/" target="_blank">mysql.org</a></p>
<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.groomi.net/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://www.groomi.net/2009/04/transfer-mysql-database-to-remote-server/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>PHP:  Show your facebook status on your blog/website. (Works with new facebook)</title>
		<link>http://www.groomi.net/2008/11/php-show-your-facebook-status-on-your-blogwebsite-works-with-new-facebook/</link>
		<comments>http://www.groomi.net/2008/11/php-show-your-facebook-status-on-your-blogwebsite-works-with-new-facebook/#comments</comments>
		<pubDate>Fri, 14 Nov 2008 16:40:46 +0000</pubDate>
		<dc:creator>Stephen Groom</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.groomi.net/PHP:__Show_your_facebook_status_on_your_blog/website._(Works_with_new_facebook)-,59</guid>
		<description><![CDATA[Hello After searching around on the internet for some time, I discovered that all of the previous scripts that had been made to do this job had been written for the old facebook which has long since been depriciated. I then started to consider how I would go about doing this with the NEW facebook [...]]]></description>
			<content:encoded><![CDATA[<p>Hello</p>
<p>After searching around on the internet for some time, I discovered that all of the previous scripts that had been made to do this job had been written for the old facebook which has long since been depriciated.  I then started to consider how I would go about doing this with the NEW facebook since they removed the mini-feed which was vital to the old method.</p>
<p>After some fishing around in google, I resorted to copying links from images in old-method tutorials and stumbled upon this little gem: [url]http://www.facebook.com/minifeed.php[/url].  After trying out the link, and subsequently kicking myself I thought I was onto something.  I was jumping for joy as I clicked &quot;[b]Status Stories[/b]&quot; and visited the &quot;[b]Subscribe to these stories[/b]&quot; link, which returned an RSS feed.</p>
<p>I then fired up my php editor, and typed something similar to the following <br />
[php]&lt;?php<br />
$xml=simplexml_load_file(http://www.facebook.com/feeds/status.php?id=820080788&amp;viewer=820080788&amp;key=********&amp;format=rss20);<br />
print_r($xml);<br />
?&gt;[/php]</p>
<p>This returned any amount of horrible errors, and maybe you should try it for yourself to see what I mean.  After a few days of poking around, I eventually tried to fetch the same page using my Lynx text-based web browser.  What I found was that instead of return XML as it did for me (using IE, Firefox or Safari), a php page was shown with the message: <br />
&quot;You are using an incompatible web browser.</p>
<p>   Sorry, we&#8217;re not cool enough to support your browser. Please keep it<br />
   real with one of the following browsers:<br />
     * Mozilla Firefox<br />
     * Opera<br />
     * Safari<br />
     * Microsoft Internet Explorer<br />
     * Flock&quot;</p>
<p>Now I was onto something  <img src='http://www.groomi.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  .  If Facebook requires the browser to be Firefox, Opera, Safari, IE or Flock (WTF is flock) then I must have to spoof my way in by pretending to use one of these browsers.  Now I had to figure out how I was going to do this.  After much trawling of [url=http://www.php.net]php.net[/url] and [url=http://www.google.com]google[/url] I found that there was no way to do it using the method I was previously using.  After a few minutes of trying different things, I decided that I was going to fetch the xml file using curl and use the function [i]simplexml_load_file[/i] to load the string instead.</p>
<p>So off I went.  Being unfamiliar with Curl, I set about trawling [url=http://www.php.net]php.net[/url] and came up with the following:</p>
<p>All the instructions + explanations are in the php comments (Lines beginning with //)<br />
[php]&lt;?php</p>
<p>// initialize a new curl resource<br />
$ch = curl_init();</p>
<p>// set the url to fetch<br />
curl_setopt($ch, CURLOPT_URL, &#8216;http://www.facebook.com/feeds/status.php?id=[FACEBOOK USER ID]&amp;viewer=[FACEBOOK USER ID]&amp;key=[ACCESS KEY (Get this by visiting this page in your browser from http://www.facebook.com/http://www.facebook.com/minifeed.php#/minifeed.php?filter=11)]&amp;format=rss20&#8242;);</p>
<p>// don&#8217;t give me the headers just the content<br />
curl_setopt($ch, CURLOPT_HEADER, 0);</p>
<p>// return the value instead of printing the response to browser<br />
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);</p>
<p>// use a user agent to mimic a browser<br />
curl_setopt($ch, CURLOPT_USERAGENT, &#8216;Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0&#8242;);</p>
<p>// execute the curl command<br />
$xml = curl_exec($ch);</p>
<p>//close the connection<br />
curl_close($ch);</p>
<p>//load the result into a simplexml resource<br />
$sxml = simplexml_load_string($xml);</p>
<p>//Get the title (I figured this out by using print_r($sxml)<br />
$title = $sxml-&gt;channel-&gt;item-&gt;title;</p>
<p>//Same for the time<br />
$tmk = $sxml-&gt;channel-&gt;item-&gt;pubDate;</p>
<p>//strtotime returns a integer timestamp which is more useful than our string (yesterday at xxx or whatever it was)<br />
//I also cast to string using (string)$tmk as php was complaining about $tmk being a resource<br />
$timestamp = strtotime((string)$tmk);</p>
<p>//Set the time back to my desired human-readable format<br />
$time = date(&#8216;d/m/y&#8217;, $timestamp);</p>
<p>//Italicise my name.  You will have to change 11 to the correct length for your name.  I get 11 from &#8216;&lt;em&gt;Stephen&#8217;<br />
//To not italicise your name completely remove this line! \/<br />
$title = substr_replace(&#8216;&lt;em&gt;&#8217;.$title, &#8216;&lt;/em&gt;&#8217;, 11, 0);</p>
<p>//Output the result<br />
echo &#8216;&lt;p&gt;&#8217;.$time.&#8217; &#8211; &#8216;.$title.&#8217;&lt;/p&gt;&#8217;;</p>
<p>?&gt;[/php]</p>
<p>And there we have it.  If you would like to know more about this script, or I have forgotten something please leave me a comment.  I hope this is of some use to you <img src='http://www.groomi.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Thanks<br />
Stephen</p>
<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.groomi.net/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://www.groomi.net/2008/11/php-show-your-facebook-status-on-your-blogwebsite-works-with-new-facebook/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>JAVASCRIPT: Add BBCode buttons to a form (REVISITED)</title>
		<link>http://www.groomi.net/2008/10/javascript-add-bbcode-buttons-to-a-form-revisited/</link>
		<comments>http://www.groomi.net/2008/10/javascript-add-bbcode-buttons-to-a-form-revisited/#comments</comments>
		<pubDate>Wed, 01 Oct 2008 21:28:29 +0000</pubDate>
		<dc:creator>Stephen Groom</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.groomi.net/JAVASCRIPT:_Add_BBCode_buttons_to_a_form_(REVISITED)-,46</guid>
		<description><![CDATA[From looking at my visitor logs I can see that the clear favourite page on this site is my [url=http://blog.groomi.net/JAVASCRIPT:_Add_BBCode_buttons_to_a_form-,9]BBCODE Buttons[/url] tutorial. After typing a little comment into a blog on here, I realised that the script still is far from perfect and set about improving it. The problem I had, was that whenever you [...]]]></description>
			<content:encoded><![CDATA[<p>From looking at my visitor logs I can see that the clear favourite page on this site is my [url=http://blog.groomi.net/JAVASCRIPT:_Add_BBCode_buttons_to_a_form-,9]BBCODE Buttons[/url] tutorial. After typing a little comment into a blog on here, I realised that the script still is far from perfect and set about improving it.</p>
<p>The problem I had, was that whenever you inserted a piece of bbcode (wherever in the text you did it) the mouse caret (cursor) would always default back to the end of the textarea (A pain in the ass if you&#8217;re typing something before then).</p>
<p>I then set about making some additions + changes to [i]mybbcode_ins()[/i] function.</p>
<p>What I needed to do was:<br />
1. Find the current cursor position<br />
2. Find the length of the text that I will be inserting<br />
3. Add this to the current position<br />
4. Set the mouse position to the new location.</p>
<p>As always, this was a breeze in Firefox and was acheived by changing the lines</p>
<p>[code]var startPos = field.selectionStart;<br />
var endPos = field.selectionEnd;<br />
field.focus();<br />
field.value = field.value.substring(0, startPos)<br />
 + '[' + tag + '='+url+']' + linkText + '[/' + tag+']'<br />
 + field.value.substring(endPos, field.value.length);<br />
[/code] </p>
<p>to</p>
<p>[code]<br />
var startPos = field.selectionStart;<br />
var endPos = field.selectionEnd;<br />
field.focus();<br />
field.value = field.value.substring(0, startPos) + tag + field.value.substring(endPos, field.value.length);<br />
field.setSelectionRange(endPos+tag.length, endPos+tag.length);<br />
[/code]</p>
<p>I used the smilies section of the code to show the change as this is the easiest to understand.  Basically, I have done the 4 steps listed above..</p>
<p>This is all done with the line [i]field.setSelectionRange(endPos+tag.length, endPos+tag.length);[/i] which does step 1 (endPos), step 2 (tag.length), step 3 and 4 (setSelectionRange(endPos+tag.length, endPos+tag.length);)</p>
<p>This however is alot more difficult in IE..</p>
<p>Internet Explorer being as dumb as it is doesn&#8217;t have a simple way to find the current cursor position.  The way it is acheived is by:</p>
<p>1. Making a selection at the current position<br />
2. Moving the selection start to the beginning<br />
3. The cursor location is then the length of your selection<br />
Easy huh?? Not..</p>
<p>What we end up for IE is this</p>
<p>[code]var selected = document.selection.createRange().text;<br />
var ins = tag;<br />
var selected2 = document.selection.createRange();<br />
var sel = document.selection.createRange();<br />
sel.text = tag;<br />
selected2.moveStart ('character', -field.value.length);<br />
sel.moveStart('character', selected2.text.length + ins.length - selected.length);<br />
[/code]<br />
Bloody horrid when compared to the Firefox code, don&#8217;t you think??</p>
<p>Well.  Most of you have probably read the first tutorial and understood that, and are just after the new code.. I give you, [b]bbcode_ins()[/b]</p>
<p>[code]function bbcode_ins(fieldId, tag)<br />
{<br />
	field=document.getElementById(fieldId);<br />
	if(tag=='b' || tag=='i' || tag=='u' || tag == 'php' || tag == 'code')<br />
	{<br />
		if (document.selection) <br />
		{<br />
			field.focus();<br />
			var selected = document.selection.createRange().text;<br />
			var ins = '[' + tag + ']' + selected + '[/' + tag +']';<br />
			var selected2 = document.selection.createRange();<br />
			var sel = document.selection.createRange();<br />
			selected2.moveStart ('character', -field.value.length);<br />
			sel.text = '[' + tag + ']' + selected + '[/' + tag+']';<br />
			sel.moveStart('character', selected2.text.length + ins.length - selected.length);</p>
<p>		}</p>
<p>		//MOZILLA/NETSCAPE/SAFARI support</p>
<p>		else if (field.selectionStart || field.selectionStart == 0) <br />
		{<br />
			var startPos = field.selectionStart;<br />
			var endPos = field.selectionEnd;<br />
			var selected = field.value.substring(startPos, endPos);<br />
			var ins = '[' + tag + ']' + selected + '[/' + tag +']';<br />
			field.focus();<br />
			field.value = field.value.substring(0, startPos) + ins + field.value.substring(endPos, field.value.length);<br />
			field.setSelectionRange(endPos+ins.length, endPos+ins.length-selected.length);<br />
		}<br />
}<br />
	else if(tag == 'img')<br />
	{<br />
		var path = prompt('Enter image path', 'http://');<br />
		if(!path)<br />
		{<br />
			return;<br />
		}<br />
		if (document.selection) <br />
		{<br />
			field.focus();<br />
			var selected = document.selection.createRange().text;<br />
			var ins = '[' + tag + ']' + path + '[/' + tag+']';<br />
			var selected2 = document.selection.createRange();<br />
			var sel = document.selection.createRange();<br />
			sel.text = '[' + tag + ']' + path + '[/' + tag+']';<br />
			selected2.moveStart ('character', -field.value.length);<br />
			sel.moveStart('character', selected2.text.length + ins.length - selected.length);<br />
		}<br />
		//MOZILLA/NETSCAPE/SAFARI support<br />
		else if (field.selectionStart || field.selectionStart == 0) <br />
		{<br />
			var startPos = field.selectionStart;<br />
			var endPos = field.selectionEnd;<br />
			var ins = '[' + tag + ']' + path + '[/' + tag+']';<br />
			field.focus();<br />
			field.value = field.value.substring(0, startPos)<br />
			+ ins<br />
			+ field.value.substring(endPos, field.value.length);<br />
			field.setSelectionRange(endPos+ins.length, endPos+ins.length-selected.length);<br />
		} <br />
	}<br />
	else if(tag == 'url')<br />
	{<br />
		var url = prompt('Enter link URL', 'http://');<br />
		var linkText = prompt('Enter link text', '');<br />
		if(!url || !linkText)<br />
		{<br />
			return;<br />
		}<br />
		if (document.selection) <br />
		{<br />
			field.focus();</p>
<p>			var selected = document.selection.createRange().text;<br />
			var ins = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';<br />
			var selected2 = document.selection.createRange();<br />
			var sel = document.selection.createRange();<br />
			sel.text = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';<br />
			selected2.moveStart ('character', -field.value.length);<br />
			sel.moveStart('character', selected2.text.length + ins.length - selected.length);</p>
<p>		}<br />
		//MOZILLA/NETSCAPE/SAFARI support<br />
		else if (field.selectionStart || field.selectionStart == 0) <br />
		{<br />
			var startPos = field.selectionStart;<br />
			var endPos = field.selectionEnd;<br />
			var ins = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';<br />
			field.focus();<br />
			field.value = field.value.substring(0, startPos)<br />
			+ ins<br />
			+ field.value.substring(endPos, field.value.length);<br />
			field.setSelectionRange(endPos+ins.length, endPos+ins.length-selected.length);<br />
		} <br />
	}<br />
	else //For smilies<br />
	{<br />
		if (document.selection) <br />
		{<br />
			field.focus();</p>
<p>			var selected = document.selection.createRange().text;<br />
			var ins = tag;<br />
			var selected2 = document.selection.createRange();<br />
			var sel = document.selection.createRange();<br />
			sel.text = tag;<br />
			selected2.moveStart ('character', -field.value.length);<br />
			sel.moveStart('character', selected2.text.length + ins.length - selected.length);<br />
		}</p>
<p>		//MOZILLA/NETSCAPE/SAFARI support</p>
<p>		else if (field.selectionStart || field.selectionStart == 0) <br />
		{<br />
			var startPos = field.selectionStart;<br />
			var endPos = field.selectionEnd;<br />
			field.focus();<br />
			field.value = field.value.substring(0, startPos) + tag + field.value.substring(endPos, field.value.length);<br />
			field.setSelectionRange(endPos+tag.length, endPos+tag.length);<br />
		}<br />
	}<br />
}[/code]</p>
<p>I am also considering having the caret sit between the two tags.  This will be a simple subtraction of 4 from the length added to the current position.</p>
<p>Please don&#8217;t be afraid to comment or ask questions below as we have lots of people viewing the site but very few contributing.  Please drop me a comment telling me wether you hate me, appreciated my code, want to hire me for work :wave: etc etc.  I don&#8217;t bite, and will probably write some new code if I see that mine is being appreciated <img src='http://www.groomi.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Much Love<br />
Stephen</p>
<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.groomi.net/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://www.groomi.net/2008/10/javascript-add-bbcode-buttons-to-a-form-revisited/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Secure login form with AJAX, Javascript + PHP</title>
		<link>http://www.groomi.net/2008/08/secure-login-form-with-ajax-javascript-php/</link>
		<comments>http://www.groomi.net/2008/08/secure-login-form-with-ajax-javascript-php/#comments</comments>
		<pubDate>Thu, 14 Aug 2008 18:41:15 +0000</pubDate>
		<dc:creator>Stephen Groom</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.groomi.net/Secure_login_form_with_AJAX,_Javascript_+_PHP-,32</guid>
		<description><![CDATA[Hello, It has been quite a while since I posted a tutorial on this website and I have noticed that my Javascript/AJAX tutorials are in quite high demand. In between developing some other sites, I remembered how interesting it was coding my admin panel&#039;s secure AJAX login and how little documentation there was about such [...]]]></description>
			<content:encoded><![CDATA[<p>Hello, It has been quite a while since I posted a tutorial on this website and I have noticed that my Javascript/AJAX tutorials are in quite high demand.  In between developing some other sites, I remembered how interesting it was coding my admin panel&#039;s secure AJAX login and how little documentation there was about such a method on the internet.</p>
<p>[b]The theory[/b]<br />
The page I was protecting was to be accessed by me only and was to display a login prompt to all users attempting to access it.  The form would then be filled in and the data would be sent to my PHP script.  The PHP script would then need to decide wether or not the user&#039;s credentials are correct and either display the page requested or refuse the user access.  The problem that I faced was that it was very difficult to create a javascript function that would do all this while remaining secure.  I think my method is hack-proof but I will soon find out when this source code is read by the public, so here goes!</p>
<p>[b]How it&#039;s done[/b]<br />
The first thing we will need is a HTML login form, but not a normal login form.  This one will contain an [i]onSubmit[/i] attribute containing our javascript function call.  Here is the form we will be using:</p>
<p>[code]&lt;div id=&quot;content&quot;&gt;<br />
    &lt;form action=&quot;javascript:void(0);&quot; onsubmit=&quot;login(document.getElementById(&#039;user&#039;).value,document.getElementById(&#039;pass&#039;).value);&quot;&gt;<br />
        &lt;p&gt;<br />
        	Username&lt;br /&gt;&lt;input id=&quot;user&quot; type=&quot;text&quot; /&gt;&lt;br /&gt;<br />
        	Password&lt;br /&gt;&lt;input id=&quot;pass&quot; type=&quot;password&quot; /&gt;<br />
        	&lt;input id=&quot;submitpop&quot; type=&quot;submit&quot; value=&quot;&quot; /&gt;<br />
        &lt;/p&gt;<br />
    &lt;/form&gt;<br />
&lt;/div&gt;<br />
[/code]</p>
<p>The action attribute is set to call [i]javascript:void(0);[/i] which simply ensures that the form does not post the data conventionally.  The onSubmit attibute calls our javascript function, which will be used to authorise the user.  We use [i]document.getElementById(&#039;input_id&#039;).value[/i] to send the values of the user and pass text inputs to our javascript.</p>
<p>
Next, we need to create the javascript function [i]login[/i].</p>
<p>[code]function createhandler(){<br />
	var xmlhttp;<br />
	if (window.XMLHttpRequest) {<br />
	  xmlhttp = new XMLHttpRequest();<br />
	}<br />
	else if (window.ActiveXObject) {<br />
	  xmlhttp = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;);<br />
	}<br />
	return xmlhttp;<br />
}</p>
<p>function login(user,pass)<br />
{<br />
	var content=document.getElementById(&#039;content&#039;);<br />
	var xmlhttp=createhandler();<br />
	var params=&#039;user=&#039;+user+&#039;&amp;pass=&#039;+pass;<br />
	xmlhttp.open(&#039;POST&#039;, &#039;/login.php&#039;, true);<br />
	xmlhttp.setRequestHeader(&#039;Content-type&#039;, &#039;application/x-www-form-urlencoded&#039;);<br />
	xmlhttp.setRequestHeader(&#039;Content-length&#039;, params.length);<br />
	xmlhttp.setRequestHeader(&#039;Connection&#039;, &#039;close&#039;);<br />
	xmlhttp.onreadystatechange=function()<br />
	{ <br />
		if(xmlhttp.readyState==4){<br />
			if(xmlhttp.responseText!=0)<br />
			{<br />
				xmlhttp.open(&#039;POST&#039;, &#039;/loggedin.php&#039;, true);<br />
				xmlhttp.setRequestHeader(&#039;Content-type&#039;, &#039;application/x-www-form-urlencoded&#039;);<br />
				xmlhttp.setRequestHeader(&#039;Content-length&#039;, params.length);<br />
				xmlhttp.setRequestHeader(&#039;Connection&#039;, &#039;close&#039;);<br />
				xmlhttp.onreadystatechange=function()<br />
				{<br />
					if(xmlhttp.readyState==4)<br />
					{<br />
						content.innerHTML=xmlhttp.responseText;<br />
					}<br />
				};<br />
				xmlhttp.send(params);</p>
<p>			}<br />
			else<br />
			{<br />
				alert(&quot;Failled Login&quot;);		<br />
			}<br />
		}<br />
	};<br />
	xmlhttp.send(params);<br />
}[/code]</p>
<p>The [i]login[/i] function starts by calling [i]createhandler[/i].  This returns our ajax [i]XmlHttpRequest[/i] object.  The function then posts our username and password to login.php.  If login.php returns a value other than &#039;0&#039; then loggedin.php is loaded with the same user and password as login.php, this extra step probably isn&#039;t really necessary but it was the way I coded the function for my purpose.  It may be just as easy to put your content inside login.php, but for some reason I didn&#039;t.  If 0 is returned, then an alert box is called with the text &quot;Failled Login&quot; and no further action is taken.</p>
<p>That is it for the HTML and Javascript.  The next step is our php file(s) which determine wether or not a correct username + password has been entered.  For my script I used a username and password stored in a MySQL database but for ours we are going to set the correct values within the script.</p>
<p>[b]login.php[/b]<br />
[php]<?php<br />
$user=&#8217;username&#8217;; //Our username<br />
$pass=&#8217;password&#8217;; //Our password</p>
<p>if($user==$_POST['user'] &#038;&#038; $pass==$_POST['pass'])<br />
	echo 1;<br />
else<br />
	echo &#8216;Failled Login&#8217;;<br />
?>[/php]</p>
<p>This PHP script checks if the username submitted is [i]username[/i] and the password is [i]password[/i].  If the combination is correct, it displays 1, 0 if it is incorrect.</p>
<p>[b]loggedin.php[/b]<br />
[php]<?php<br />
$user=&#8217;username&#8217;; //Our username<br />
$pass=&#8217;password&#8217;; //Our password</p>
<p>if($user!=$_POST['user'] || $pass!=$_POST['pass'])<br />
	return;</p>
<p>echo&#8217;Anything below the return; statement will be displayed only if the correct password is entered.  There is no need for an error message as this page should only be accessed by a javascript hack attempt or correct password <img src='http://www.groomi.net/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> &#8217;;<br />
?>[/php]</p>
<p>The page will return blank if it is not given the correct username and password.  If it is, the page is displayed.  If you want a user to be logged in without having to enter his details again, it is a good idea to store his username + password in a session or cookie.  If you are reading this tutorial though, I would assume you already know how to do this.  If you want information about how to implement sessions or cookies into this script, please leave a comment below and I will write another tutorial.</p>
<p>Peace<br />
Stephen</p>
<p>[b]PS.[/b] I would love for someone to try to hack the system on this site so please do, this code is implemented as written on my admin login available if you right-click.  I would love to hear any weaknesses the code has so feel free to try <img src='http://www.groomi.net/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.groomi.net/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://www.groomi.net/2008/08/secure-login-form-with-ajax-javascript-php/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JAVASCRIPT: Load a page using AJAX</title>
		<link>http://www.groomi.net/2008/07/javascript-load-a-page-using-ajax/</link>
		<comments>http://www.groomi.net/2008/07/javascript-load-a-page-using-ajax/#comments</comments>
		<pubDate>Sun, 06 Jul 2008 12:43:10 +0000</pubDate>
		<dc:creator>Stephen Groom</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.groomi.net/JAVASCRIPT:_Load_a_page_using_AJAX-,19</guid>
		<description><![CDATA[I just noticed that I use one little AJAX function to load all of my pages but haven&#8217;t took the time to explain to my readers how I do it yet, so here goes . To use this create a HTML file with the following code and upload it to your web server.. [i]ajax.html[/i] [code] [...]]]></description>
			<content:encoded><![CDATA[<p>I just noticed that I use one little AJAX function to load all of my pages but haven&#8217;t took the time to explain to my readers how I do it yet, so here goes <img src='http://www.groomi.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<p>To use this create a HTML file with the following code and upload it to your web server..</p>
<p>[i]ajax.html[/i]<br />
[code]<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;ajax.js&quot;&gt;&lt;/script&gt;<br />
&lt;/head&gt;</p>
<p>&lt;body&gt;<br />
&lt;p&gt;<br />
&lt;a href=&quot;nonjs.html&quot; onclick=&quot;get('content.txt', 'content');return false;&quot;&gt;Click here to load our content using ajax&lt;/a&gt;<br />
&lt;/p&gt;</p>
<p>&lt;div id=&quot;content&quot;&gt;<br />
&lt;p&gt;<br />
Our content.txt file will be loaded here when the link above is pressed.<br />
&lt;/p&gt;<br />
&lt;/div&gt;</p>
<p>&lt;/body&gt;<br />
&lt;/html&gt;<br />
[/code]</p>
<p>Now, the html file shows us a page with the text [i]Click here to load our content using ajax[/i].  When this text is clicked it makes a call to the function get() which is defined in the next file.. ajax.js</p>
<p>[i]ajax.js[/i]<br />
[code]<br />
function createhandler(){<br />
	var xmlhttp;<br />
	if (window.XMLHttpRequest) {<br />
	  xmlhttp = new XMLHttpRequest();<br />
	}<br />
	else if (window.ActiveXObject) {<br />
	  xmlhttp = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;);<br />
	}<br />
	return xmlhttp;<br />
}<br />
function get(url, divid){ //Url to fetch + div ID to insert content into <br />
	var xmlhttp=createhandler();<br />
	xmlhttp.onreadystatechange=function (){ <br />
		if(xmlhttp.readyState==4){<br />
			document.getElementById(divid).innerHTML=xmlhttp.responseText;<br />
			xmlhttp.onreadystatechange = null;<br />
			xmlhttp.abort();<br />
		}<br />
	};<br />
	xmlhttp.open('GET', url, true);<br />
	xmlhttp.send(null);<br />
}<br />
[/code]<br />
This file defines the functions [i]get[/i] and [i]createhandler[/i].  The createhandler function is used to create our AJAX xmlhttp object used to send and receive data via ajax.  </p>
<p>The [b]get()[/b] function takes  the parameters [i]url[/i] and [i]divid[/i].  Then createhandler is called to make the xmlhttp object.</p>
<p>The code that begins [i]xmlhttp.onreadystatechange=function (){ [/i] is used to capture the onreadystatechange event and when readystate changes to 4 (READY) our divid is updated with the text taken from the url we specified.</p>
<p>The lines [i]xmlhttp.open(&#8216;GET&#8217;, url, true);xmlhttp.send(null);[/i] send a HTTP GET request to the url we specified.  The true paramater means that data can be sent and received asynchronously and does not concern us here.. Just be sure it&#8217;s true  <img src='http://www.groomi.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  .  We send null data to terminate the command.  </p>
<p>Next all you need to do is create a content.txt file with some html code in it to be loaded.  Here is an example:<br />
[i]content.txt[/i]<br />
[code]<br />
&lt;p&gt;I have just been loaded with ajax using the function get(url, divID)&lt;/p&gt;<br />
[/code]</p>
<p>To use the example above, upload all of the files into the same directory on your webserver.  I hope this gives you some insight on the basics of AJAX and how to load pages.  If you have any questions please comment this blog <img src='http://www.groomi.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Love<br />
Stephen</p>
<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.groomi.net/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://www.groomi.net/2008/07/javascript-load-a-page-using-ajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JAVASCRIPT: Custom right-click menu</title>
		<link>http://www.groomi.net/2008/06/javascript-custom-right-click-menu/</link>
		<comments>http://www.groomi.net/2008/06/javascript-custom-right-click-menu/#comments</comments>
		<pubDate>Sun, 01 Jun 2008 01:35:33 +0000</pubDate>
		<dc:creator>Stephen Groom</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.groomi.net/JAVASCRIPT:_Custom_right-click_menu-,13</guid>
		<description><![CDATA[Many of you may have already noticed that there is no text link to my Admin panel. That is because it is cleverly hidden. If you right click anywhere on this page in most modern browsers, you will be greeted by my admin logon in your cursors location . You could use this for whatever [...]]]></description>
			<content:encoded><![CDATA[<p>Many of you may have already noticed that there is no text link to my Admin panel.  That is because it is cleverly hidden.  If you right click anywhere on this page in most modern browsers, you will be greeted by my admin logon in your cursors location <img src='http://www.groomi.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<p>You could use this for whatever purpose you want, here I will just show you how I did it personally.</p>
<p>Firstly, the code for the &quot;hidden&quot; menu is always loaded with every page in this website.  It sits inside a little div tag which is hidden with css.</p>
<p>Here is how this div should look when I remove all my content::</p>
<p>[code]<br />
&lt;div id=&quot;adminpop&quot; style=&quot;display:none&quot;&gt;<br />
&lt;div onclick=&quot;this.parentNode.style.display='none'&quot;&gt;x&lt;/div&gt;<br />
&lt;/div&gt;<br />
[/code]</p>
<p>The declaration [i]style=&quot;display:none&quot;[/i] ensures that everything inside the div is hidden from view when the page is rendered.  The next div is shows an X in the hidden window which when clicked will hide it again.</p>
<p>[b]Now for the Javascript[/b]</p>
<p>[code]<br />
document.oncontextmenu=function(ev)<br />
{<br />
	var ev=ev || window.event;<br />
	var pop=document.getElementById('adminpop');<br />
	var x,y</p>
<p>	if (document.all)  //IE Workaround<br />
	{<br />
		if(ev.srcElement.tagName.toLowerCase()==&quot;input&quot; || ev.srcElement.tagName.toLowerCase()==&quot;textarea&quot;)<br />
			return;<br />
		x=ev.clientX + document.body.scrollLeft;<br />
		y=ev.clientY + document.body.scrollTop;<br />
	}<br />
	else<br />
	{<br />
		if(ev.target.tagName.toLowerCase()==&quot;input&quot; || ev.target.tagName.toLowerCase()==&quot;textarea&quot;)<br />
			return;<br />
		x=ev.pageX;<br />
		y=ev.pageY;<br />
	}<br />
	pop.style.left=x+&quot;px&quot;;<br />
	pop.style.top=y+&quot;px&quot;;<br />
	pop.style.display=&quot;block&quot;;<br />
	return false;<br />
};<br />
[/code]</p>
<p>This code should be pretty self-explanatory but I will now explain it bit by bit.</p>
<p>The first line defines our function to be called everytime the &quot;context menu&quot; is opened (This is the right-click menu).  After this we define our variables, the one that concerns us most is [b]pop[/b] which must have the same ID set as your hidden div.  [b]ev[/b] is used to capture the mouse location and [b]x + y[/b] will be used to store the information.</p>
<p>There is an if conditional which is used for cross-browser compatibility.  They both contain code that gets and sets the X and Y coordinates of the mouse cursor when the right mouse button is clicked.  They also both contain the following:<br />
[code]<br />
if(ev.srcElement.tagName.toLowerCase()==&quot;input&quot; || ev.srcElement.tagName.toLowerCase()==&quot;textarea&quot;)<br />
   return;<br />
[/code]<br />
This is optional and allows the right-click menu to still appear as normal on form elements that require typing.  I did this to allow selection and copy-pasting to occur as normal.</p>
<p>After this the last 4 lines set the coordinates, set the display CSS property to &quot;block&quot; and then [i]return:false[/i] to cancel the standard right click menu.</p>
<p>I hope this was a useful tutorial.  Please ask away in the comments if you have any problems.<br />
Thanks<br />
Stephen</p>
<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.groomi.net/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://www.groomi.net/2008/06/javascript-custom-right-click-menu/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JAVASCRIPT: Add BBCode buttons to a form</title>
		<link>http://www.groomi.net/2008/05/javascript-add-bbcode-buttons-to-a-form/</link>
		<comments>http://www.groomi.net/2008/05/javascript-add-bbcode-buttons-to-a-form/#comments</comments>
		<pubDate>Sun, 11 May 2008 23:27:43 +0000</pubDate>
		<dc:creator>Stephen Groom</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.groomi.net/JAVASCRIPT:_Add_BBCode_buttons_to_a_form-,9</guid>
		<description><![CDATA[[i]There is a follow-up tutorial to this available [url=http://www.groomi.net/JAVASCRIPT:_Add_BBCode_buttons_to_a_form_(REVISITED)-,46]here[/url] which further improves the script adding another feature which improves ease and convenience of use.[/i] Having just completed my code for buttons to insert BBCode into a textarea, I thought it was time to share my code with the world wide web. First I will show [...]]]></description>
			<content:encoded><![CDATA[<p>[i]There is a follow-up tutorial to this available [url=http://www.groomi.net/JAVASCRIPT:_Add_BBCode_buttons_to_a_form_(REVISITED)-,46]here[/url] which further improves the script adding another feature which improves ease and convenience of use.[/i]</p>
<p>Having just completed my code for buttons to insert BBCode into a textarea, I thought it was time to share my code with the world wide web.</p>
<p>First I will show you the HTML code I use at the time of this post</p>
<p>[code]&lt;input type=&quot;button&quot; onclick=&quot;bbcode_ins('comment', 'b')&quot; value=&quot;B&quot; style=&quot;width:15px;font-weight:bold;&quot; /&gt;<br />
&lt;input type=&quot;button&quot; onclick=&quot;bbcode_ins('comment', 'u')&quot; value=&quot;_&quot; style=&quot;width:15px;&quot; /&gt;<br />
&lt;input type=&quot;button&quot; onclick=&quot;bbcode_ins('comment', 'i')&quot; value=&quot;I&quot; style=&quot;width:15px;font-style:italic;&quot; /&gt;<br />
&lt;input type=&quot;button&quot; onclick=&quot;bbcode_ins('comment', 'img')&quot; value=&quot;img&quot; style=&quot;width:25px;&quot; /&gt;<br />
&lt;input type=&quot;button&quot; onclick=&quot;bbcode_ins('comment', 'url')&quot; value=&quot;url&quot; style=&quot;width:25px;&quot; /&gt;<br />
&lt;input type=&quot;button&quot; onclick=&quot;bbcode_ins('comment', 'php')&quot; value=&quot;php&quot; style=&quot;width:25px;&quot; /&gt;<br />
&lt;input type=&quot;button&quot; onclick=&quot;bbcode_ins('comment', 'code')&quot; value=&quot;code&quot; style=&quot;width:30px;&quot; /&gt;[/code]</p>
<p>This basically puts a button for each available BBCode tag into the form where the textarea is located.  The textarea in this example is called <i>comment</i> and when you click the button associated with the tag the following javascript function is called:</p>
<p>[i]bbcode_ins([b]field[/b],  [b]tag[/b]);[/i]</p>
<p>Here is the javascript associated with the [i]bbcode_ins()[/i] function</p>
<p>[code]function bbcode_ins(fieldId, tag)<br />
{<br />
	field=document.getElementById(fieldId);<br />
	if(tag=='b' || tag=='i' || tag=='u' || tag == 'php' || tag == 'code')<br />
	{<br />
		if (document.selection) <br />
		{<br />
			field.focus();<br />
			sel = document.selection.createRange();<br />
			sel.text = '[' + tag + '][/' + tag+']';<br />
		}<br />
		//MOZILLA/NETSCAPE/SAFARI support<br />
		else if (field.selectionStart || field.selectionStart == 0) <br />
		{<br />
			var startPos = field.selectionStart;<br />
			var endPos = field.selectionEnd;<br />
			field.focus();<br />
			field.value = field.value.substring(0, startPos)<br />
			+ '[' + tag + '][/' + tag+']'<br />
			+ field.value.substring(endPos, field.value.length);<br />
		} <br />
	}<br />
	else if(tag == 'img')<br />
	{<br />
		var path = prompt('Enter image path', 'http://');<br />
		if(!path)<br />
		{<br />
			return;<br />
		}<br />
		if (document.selection) <br />
		{<br />
			field.focus();<br />
			sel = document.selection.createRange();<br />
			sel.text = '[' + tag + ']' + path + '[/' + tag+']';<br />
		}<br />
		//MOZILLA/NETSCAPE/SAFARI support<br />
		else if (field.selectionStart || field.selectionStart == 0) <br />
		{<br />
			var startPos = field.selectionStart;<br />
			var endPos = field.selectionEnd;<br />
			field.focus();<br />
			field.value = field.value.substring(0, startPos)<br />
			+ '[' + tag + ']' + path + '[/' + tag+']'<br />
			+ field.value.substring(endPos, field.value.length);<br />
		} <br />
	}<br />
	else if(tag == 'url')<br />
	{<br />
		var url = prompt('Enter link URL', 'http://');<br />
		var linkText = prompt('Enter link text', '');<br />
		if(!url || !linkText)<br />
		{<br />
			return;<br />
		}<br />
		if (document.selection) <br />
		{<br />
			field.focus();<br />
			sel = document.selection.createRange();<br />
			sel.text = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';<br />
		}<br />
		//MOZILLA/NETSCAPE/SAFARI support<br />
		else if (field.selectionStart || field.selectionStart == 0) <br />
		{<br />
			var startPos = field.selectionStart;<br />
			var endPos = field.selectionEnd;<br />
			field.focus();<br />
			field.value = field.value.substring(0, startPos)<br />
			+ '[' + tag + '='+url+']' + linkText + '[/' + tag+']'<br />
			+ field.value.substring(endPos, field.value.length);<br />
		} <br />
	}<br />
}[/code]</p>
<p>[b]Now to explain the code:[/b]</p>
<p>[i]field=document.getElementById(fieldId);[/i]<br />
This sets the variable [i]field[/i] to the element to be inserted into. eg. &lt;input id=&#8221;fieldId&#8221; /&gt;</p>
<p>The second parameter tag is tested to ask a variety of different questions depending on whether it is a hyperlink, image or simple bbcode tag.  The important code is inside the if statements.</p>
<p>The first if inside of these is for IE browsers only.  The line [i]if (document.selection)[/i] will only evaluate true if the code is executed in internet explorer.  The next few lines of code then add the bbcode and give focus to the field.</p>
<p>The next alternative is with [i]else if (field.selectionStart || field.selectionStart == 0)[/i] and this evaluates to true for firefox/mozilla/safari etc etc.  Inside this statement is another method of performing the same task for browsers that don&#8217;t support the IE method.</p>
<p>[b]In summary[/b]<br />
There it is, the code that makes my wonderful bbcode buttons work.  Hope it can be of some use to somebody.  If you have any questions/suggestions regarding this post please direct them to the comments</p>
<p>Thanks <img src='http://www.groomi.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> <br />
Stephen<br />
x</p>
<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.groomi.net/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://www.groomi.net/2008/05/javascript-add-bbcode-buttons-to-a-form/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
