<?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>OXT blog &#187; javascript</title>
	<atom:link href="http://blog.o-x-t.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.o-x-t.com</link>
	<description>"People say nothing is impossible, but I do nothing every day." - Whinnie The Pooh</description>
	<lastBuildDate>Wed, 25 Aug 2010 19:18:08 +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>Background spell check in TinyMCE</title>
		<link>http://blog.o-x-t.com/2010/04/11/background-spell-check-in-tinymce/</link>
		<comments>http://blog.o-x-t.com/2010/04/11/background-spell-check-in-tinymce/#comments</comments>
		<pubDate>Sun, 11 Apr 2010 09:10:49 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[spell check]]></category>
		<category><![CDATA[TinyMCE]]></category>

		<guid isPermaLink="false">http://blog.o-x-t.com/?p=239</guid>
		<description><![CDATA[TinyMCE has spellchecker plugin which checks your text when you click button. You can read how to setup it here. However what we want is to have background spell checking when we type text. Just like in regular word processor. The idea is simple &#8211; trigger spell check each time we type something. There&#8217;s a [...]]]></description>
			<content:encoded><![CDATA[<p>TinyMCE has spellchecker plugin which checks your text when you click button. You can read how to setup it <a href="http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/spellchecker">here</a>.</p>
<p>However what we want is to have background spell checking when we type text. Just like in regular word processor. The idea is simple &#8211; trigger spell check each time we type something. There&#8217;s a problem if we&#8217;ll trigger it after each letter &#8211; spell check uses Ajax request to server script, it may be very slow. We&#8217;ll solve it by triggering spell checking within 3-seconds delay after user has stopped typing.</p>
<p>Here&#8217;s the code:<br />
<span id="more-239"></span></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">tinyMCE.<span style="color: #660066;">init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">//...</span>
	<span style="color: #006600; font-style: italic;">//regular initialization here</span>
	<span style="color: #006600; font-style: italic;">//...</span>
	plugins <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;spellchecker&quot;</span><span style="color: #339933;">,</span> 
	theme_advanced_buttons1 <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;spellchecker&quot;</span><span style="color: #339933;">,</span>
	spellchecker_languages <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;English=en&quot;</span><span style="color: #339933;">,</span> 
	setup<span style="color: #339933;">:</span> mceSpellCheckRuntimeHandler
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>And setup function:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">mceSpellCheckRuntimeHandler <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>ed<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  ed.<span style="color: #660066;">addCommand</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mceSpellCheckRuntime'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    t <span style="color: #339933;">=</span> ed.<span style="color: #660066;">plugins</span>.<span style="color: #660066;">spellchecker</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">mceSpellCheckRuntimeTimer</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      window.<span style="color: #660066;">clearTimeout</span><span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">mceSpellCheckRuntimeTimer</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    t.<span style="color: #660066;">mceSpellCheckRuntimeTimer</span> <span style="color: #339933;">=</span> window.<span style="color: #660066;">setTimeout</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      t._done<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      t._sendRPC<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'checkWords'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#91;</span>t.<span style="color: #660066;">selectedLang</span><span style="color: #339933;">,</span> t._getWords<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>r<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>r.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          t.<span style="color: #660066;">active</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
          t._markWords<span style="color: #009900;">&#40;</span>r<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          ed.<span style="color: #660066;">nodeChanged</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
      <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
     <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">3000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//3 seconds</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  ed.<span style="color: #660066;">onKeyUp</span>.<span style="color: #660066;">add</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>ed<span style="color: #339933;">,</span> e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    ed.<span style="color: #660066;">execCommand</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mceSpellCheckRuntime'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>The code is not ideal, but it works. Feel free to improve it for your needs.<br />
<strong>Update.</strong> There may be an issue with focus. For example when cursor leaves tinymce it may return back to the editor. Ask me if you have this problem.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.o-x-t.com/2010/04/11/background-spell-check-in-tinymce/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Extra spacing in TinyMCE after pasting from Word</title>
		<link>http://blog.o-x-t.com/2010/03/06/extra-spacing-in-tinymce-after-pasting-from-word/</link>
		<comments>http://blog.o-x-t.com/2010/03/06/extra-spacing-in-tinymce-after-pasting-from-word/#comments</comments>
		<pubDate>Sat, 06 Mar 2010 13:26:02 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[TinyMCE]]></category>
		<category><![CDATA[Word]]></category>

		<guid isPermaLink="false">http://blog.o-x-t.com/?p=235</guid>
		<description><![CDATA[TinyMCE can add extra empty paragraphs when you insert text from Word. TinyMCE simply wraps each newline into paragraph. To solve it you need to follow these steps: Enable paste plugin. Add handler for parsing inserted text So your TinyMCE code will look like: tinyMCE.init&#40;&#123; ... plugins: &#34;paste&#34;, paste_auto_cleanup_on_paste : true, paste_postprocess : function&#40;pl, o&#41; [...]]]></description>
			<content:encoded><![CDATA[<p>TinyMCE can add extra empty paragraphs when you insert text from Word. TinyMCE simply wraps each newline into paragraph.<br />
To solve it you need to follow these steps:</p>
<ol>
<li>Enable <code>paste</code> plugin.</li>
<li>Add handler for parsing inserted text</li>
</ol>
<p>So your TinyMCE code will look like:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  tinyMCE.<span style="color: #660066;">init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        ...
      	<span style="color: #660066;">plugins</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;paste&quot;</span><span style="color: #339933;">,</span>
      	paste_auto_cleanup_on_paste <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
      	paste_postprocess <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>pl<span style="color: #339933;">,</span> o<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// remove extra line breaks</span>
            o.<span style="color: #660066;">node</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> o.<span style="color: #660066;">node</span>.<span style="color: #660066;">innerHTML</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&lt;p.*&gt;\s*(&lt;br&gt;|&amp;nbsp;)\s*&lt;\/p&gt;/ig</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>See more info on the <a href="http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/paste">official wiki</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.o-x-t.com/2010/03/06/extra-spacing-in-tinymce-after-pasting-from-word/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Prototype.js formElmt.request() and non-valid HTML</title>
		<link>http://blog.o-x-t.com/2008/05/16/prototypejs-formelmtrequest-and-non-valid-html/</link>
		<comments>http://blog.o-x-t.com/2008/05/16/prototypejs-formelmtrequest-and-non-valid-html/#comments</comments>
		<pubDate>Thu, 15 May 2008 22:56:18 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype.js]]></category>

		<guid isPermaLink="false">http://blog.o-x-t.com/?p=38</guid>
		<description><![CDATA[Handy and pretty $('myform').request() can be easily broken if you have really broken HTML. For example: &#60;table&#62; &#60;form id=&#34;myform&#34;&#62; &#60;input /&#62; &#60;input /&#62; &#60;tr&#62;&#60;td&#62;&#60;/td&#62;&#60;/tr&#62; &#60;/table&#62;&#60;/form&#62; $('myform').serialize() will return empty string for such html. As a result you&#8217;ll have ajax request with no parameters, obviously not what you&#8217;ve expected. Fix html and everything will work.]]></description>
			<content:encoded><![CDATA[<p>Handy and pretty <code>$('myform').request()</code> can be easily broken if you have really broken HTML. For example:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">table</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">form</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;myform&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #66cc66;">/</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #66cc66;">/</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">table</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">form</span>&gt;</span></pre></div></div>

<p><code>$('myform').serialize()</code> will return empty string for such html. As a result you&#8217;ll have ajax request with no parameters, obviously not what you&#8217;ve expected. Fix html and everything will work.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.o-x-t.com/2008/05/16/prototypejs-formelmtrequest-and-non-valid-html/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to make burning text in JavaScript</title>
		<link>http://blog.o-x-t.com/2007/12/21/how-to-make-burning-text-in-javascript/</link>
		<comments>http://blog.o-x-t.com/2007/12/21/how-to-make-burning-text-in-javascript/#comments</comments>
		<pubDate>Fri, 21 Dec 2007 14:19:25 +0000</pubDate>
		<dc:creator>Atuk</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[burning text]]></category>
		<category><![CDATA[dynamic text style]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://blog.o-x-t.com/2007/12/21/how-to-make-burning-text-in-javascript/</guid>
		<description><![CDATA[You can make different dynamic text effects on your html page using JavaScript function document.getElementsByTagName(&#8216;tag_name&#8217;). The idea is to select tag, which is absent in your html (for example:&#60;tt&#62;, &#60;i&#62;, &#60;b&#62; etc.). Then you should embrace all letters of your text with this tag. For example: &#8220;Hello world&#8221; transforms to &#8220;&#60;tt&#62;H&#60;/tt&#62;&#60;tt&#62;e&#60;/tt&#62;&#60;tt&#62;l&#60;/tt&#62;&#60;tt&#62;l&#60;/tt&#62;&#60;tt&#62;o&#60;/tt&#62;&#60;tt&#62; &#60;/tt&#62;&#60;tt&#62;W&#60;/tt&#62;&#60;tt&#62;o&#60;/tt&#62;&#60;tt&#62;r&#60;/tt&#62; &#60;tt&#62;l&#60;/tt&#62;&#60;tt&#62;d&#60;/tt&#62;&#8221;. After that [...]]]></description>
			<content:encoded><![CDATA[<p> You can make different dynamic text effects on your html page using JavaScript function document.getElementsByTagName(&#8216;tag_name&#8217;). The idea is to select tag, which is absent in your html (for example:&lt;tt&gt;, &lt;i&gt;, &lt;b&gt; etc.). Then you should embrace all letters of your text with this tag. For example: &#8220;Hello world&#8221; transforms to &#8220;&lt;tt&gt;H&lt;/tt&gt;&lt;tt&gt;e&lt;/tt&gt;&lt;tt&gt;l&lt;/tt&gt;&lt;tt&gt;l&lt;/tt&gt;&lt;tt&gt;o&lt;/tt&gt;&lt;tt&gt; &lt;/tt&gt;&lt;tt&gt;W&lt;/tt&gt;&lt;tt&gt;o&lt;/tt&gt;&lt;tt&gt;r&lt;/tt&gt;</p>
<p>&lt;tt&gt;l&lt;/tt&gt;&lt;tt&gt;d&lt;/tt&gt;&#8221;. After that you can dynamically change style (color, font etc.) of every letter you want accessing to it during array document.getElementsByTagName(&#8216;tt&#8217;).</p>
<p>So, you can create with your text such effects like burning, dissapearing, growing etc. Please, look at <a href="http://atuk.boloto.org/fire/">http://atuk.boloto.org/fire/</a>  to get sample scripts.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.o-x-t.com/2007/12/21/how-to-make-burning-text-in-javascript/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
