<?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>Binary Tides &#187; Javascript</title>
	<atom:link href="http://www.binarytides.com/blog/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.binarytides.com/blog</link>
	<description></description>
	<lastBuildDate>Sat, 24 Jul 2010 05:31:26 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Javascript Image Cropper with Mootools and PHP</title>
		<link>http://www.binarytides.com/blog/javascript-image-cropper-with-mootools-and-php/</link>
		<comments>http://www.binarytides.com/blog/javascript-image-cropper-with-mootools-and-php/#comments</comments>
		<pubDate>Thu, 23 Apr 2009 13:26:00 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://www.binarytides.com/blog/?p=46</guid>
		<description><![CDATA[MooCrop is a library which can be used to create a cropping interface in your webpage. With this library after a crop region is selected a php script can be called to crop the image on serverside. The moocrop interface provides four values that is the width , height , left and top of the [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.nwhite.net/MooCrop/">MooCrop</a> is a library which can be used to create a cropping interface in your webpage. With this library after a crop region is selected a php script can be called to crop the image on serverside. The moocrop interface provides four values that is the width , height , left and top of the crop region ; these values can be used by a php script to crop an image.</p>
<p><span id="more-46"></span></p>
<p>So these values can be obtained in the script like this :<br />$x = $_GET['x'];<br />$y = $_GET['y'];<br />$h = $_GET['h'];<br />$w = $_GET['w'];</p>
<p>For e.g. if its a jpg image then</p>
<p>$src = imagecreatefromjpeg($path);<br />where $path has the path to the image.</p>
<p>Now create a new image with height and width<br />$dest = imagecreatetruecolor($w, $h);<br />imagecopy($dest, $src, 0, 0, $x, $y, $w, $h);</p>
<p>Now overwrite the existing file :<br />imagejpeg($dest , $path);</p>
<p>You may need to do a chmod over the new file.<br />chmod($path , 0755);</p>
<p>Free memory<br />imagedestroy($dest);<br />imagedestroy($src);</p>
<p>Now $path is the new image which is cropped as per the values of x , y , h , w</p>
<img src="http://www.binarytides.com/blog/?ak_action=api_record_view&id=46&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.binarytides.com/blog/javascript-image-cropper-with-mootools-and-php/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript Optimization Techniques</title>
		<link>http://www.binarytides.com/blog/javascript-optimization-techniques/</link>
		<comments>http://www.binarytides.com/blog/javascript-optimization-techniques/#comments</comments>
		<pubDate>Thu, 21 Feb 2008 12:31:00 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.binarytides.com/blog/?p=21</guid>
		<description><![CDATA[More and more sites have begun using javascript to implement a wide array of features like DHTML, AJAX and various type of validations and processing
Reduce the size of javascript source code

The first and the most obvious suggestion for this would be to avoid whitespaces as much as possible.
Next, the prototype techniques can be used to [...]]]></description>
			<content:encoded><![CDATA[<p>More and more sites have begun using javascript to implement a wide array of features like DHTML, AJAX and various type of validations and processing</p>
<p><strong>Reduce the size of javascript source code</strong></p>
<p><span id="more-21"></span></p>
<p>The first and the most obvious suggestion for this would be to avoid whitespaces as much as possible.</p>
<p>Next, the prototype techniques can be used to reduce the size of you javascript code considerably. document.getElementById is one of the most extensively used function in javascript and when used a lot of times it increases the overall size of the javascript code considerably.<br />
One way is to use a smaller name for this general purpose function like $() just as prototype does.</p>
<pre class="brush: jscript;">
function $(element) {
  return document.getElementById(element);
}

//or the prototype way

function $(element) {
  if (Object.isString(element))
    element = document.getElementById(element);
  return element;
}

//or

function $(id) {
  if(typeof id == &quot;string&quot;)
    return(document.getElementById(id));
  return id;
}
</pre>
<p>now if there are 50 occurences of document.getElementById in your javascript file then you get a saving of 1100 characters of say nearly 1 KB!!</p>
<p>Similarly for document.getElementsByTagName</p>
<pre class="brush: jscript;">
function $$(tag) {
  return document.getElementsByTagName(tag);
}
</pre>
<p>To Get the values of input boxes</p>
<pre class="brush: jscript;">
function $V(tag) {
  return document.getElementById(element).value;
}
</pre>
<p>Fast and Space saving!!</p>
<p>Similary the document.writeln can also be named to a smaller name.</p>
<p><strong>Improving Execution Speed</strong></p>
<p>And for this the first suggestion would be to use better logic for the javascript processing, dhtml effects etc.</p>
<p>Next, un-needed variables should be removed from memory by setting them to null like :</p>
<pre class="brush: jscript;">
variable = null;
</pre>
<p>So go ahead to save space and bandwidth.</p>
<img src="http://www.binarytides.com/blog/?ak_action=api_record_view&id=21&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.binarytides.com/blog/javascript-optimization-techniques/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Detecting and Confirming browser window close/navigation events</title>
		<link>http://www.binarytides.com/blog/detecting-and-confirming-browser-window-closenavigation-events/</link>
		<comments>http://www.binarytides.com/blog/detecting-and-confirming-browser-window-closenavigation-events/#comments</comments>
		<pubDate>Sun, 16 Dec 2007 06:03:00 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.binarytides.com/blog/?p=17</guid>
		<description><![CDATA[onunload event didnt quite work in mozilla or internet explorer
another event called onbeforeunload gives a better desired effect

window.onbeforeunload = function unloadEvent()
{
   return (&#34;Are you sure you want to navigate away from the page.&#34;);
}

or still better

window.onbeforeunload = function unloadEvent()
{
   return (&#34;&#34;);
}

for just a confirmation.
This event is available on Mozilla and Internet Explorer [...]]]></description>
			<content:encoded><![CDATA[<p>onunload event didnt quite work in mozilla or internet explorer</p>
<p>another event called onbeforeunload gives a better desired effect</p>
<pre class="brush: jscript;">
window.onbeforeunload = function unloadEvent()
{
   return (&quot;Are you sure you want to navigate away from the page.&quot;);
}
</pre>
<p>or still better</p>
<pre class="brush: jscript;">
window.onbeforeunload = function unloadEvent()
{
   return (&quot;&quot;);
}
</pre>
<p>for just a confirmation.<br />
This event is available on Mozilla and Internet Explorer but probably not on Opera</p>
<img src="http://www.binarytides.com/blog/?ak_action=api_record_view&id=17&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.binarytides.com/blog/detecting-and-confirming-browser-window-closenavigation-events/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
