<?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>Bagesh Singh&#039;s Blog &#187; css</title>
	<atom:link href="http://www.bageshsingh.com/bagesh-blog/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bageshsingh.com/bagesh-blog</link>
	<description>Shortest Distance to  Web Solutions &#38; Software Solutions</description>
	<lastBuildDate>Wed, 22 Feb 2012 18:42:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2011/07/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2011/07/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/#comments</comments>
		<pubDate>Thu, 28 Jul 2011 18:45:56 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Home]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Others]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/?p=1399</guid>
		<description><![CDATA[1. The HTML The markup just consists of a div with an unordered list inside. The list elements contain a span for the icon and the link element: 01 &#60;div class="navigation"&#62; 02  &#60;ul class="menu" id="menu"&#62; 03     &#60;li&#62;&#60;span class="ipod"&#62;&#60;/span&#62;&#60;a href="" class="first"&#62;Players&#60;/a&#62;&#60;/li&#62; 04     &#60;li&#62;&#60;span class="video_camera"&#62;&#60;/span&#62;&#60;a href=""&#62;Cameras&#60;/a&#62;&#60;/li&#62; 05     &#60;li&#62;&#60;span class="television"&#62;&#60;/span&#62;&#60;a href=""&#62;TVs&#60;/a&#62;&#60;/li&#62; 06     &#60;li&#62;&#60;span class="monitor"&#62;&#60;/span&#62;&#60;a href=""&#62;Screens&#60;/a&#62;&#60;/li&#62; 07     &#60;li&#62;&#60;span class="toolbox"&#62;&#60;/span&#62;&#60;a [...]]]></description>
			<content:encoded><![CDATA[<h3>1. The HTML</h3>
<p>The markup just consists of a div with an unordered list inside. The list elements contain a span for the icon and the link element:</p>
<div id="highlighter_268063">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"navigation"</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code> </code><code>&lt;</code><code>ul</code> <code>class</code><code>=</code><code>"menu"</code> <code>id</code><code>=</code><code>"menu"</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>span</code> <code>class</code><code>=</code><code>"ipod"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;</code><code>a</code> <code>href</code><code>=</code><code>""</code> <code>class</code><code>=</code><code>"first"</code><code>&gt;Players&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>    </code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>span</code> <code>class</code><code>=</code><code>"video_camera"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>&gt;Cameras&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>    </code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>span</code> <code>class</code><code>=</code><code>"television"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>&gt;TVs&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>    </code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>span</code> <code>class</code><code>=</code><code>"monitor"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>&gt;Screens&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>span</code> <code>class</code><code>=</code><code>"toolbox"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>&gt;Tools&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>span</code> <code>class</code><code>=</code><code>"telephone"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>&gt;Phones&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>span</code> <code>class</code><code>=</code><code>"print"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;</code><code>a</code> <code>href</code><code>=</code><code>""</code> <code>class</code><code>=</code><code>"last"</code><code>&gt;Printers&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code> </code><code>&lt;/</code><code>ul</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>&lt;/</code><code>div</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<h3>2. The CSS</h3>
<p>The style of the navigation container and the unordered list will be the following:</p>
<div id="highlighter_317164">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>.navigation{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>position</code><code>:</code><code>relative</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>margin</code><code>:</code><code>0</code> <code>auto</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>    </code><code>width</code><code>:</code><code>915px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>ul.menu{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>list-style</code><code>:</code><code>none</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>font-family</code><code>:</code><code>"Verdana"</code><code>,</code><code>sans-serif</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>border-top</code><code>:</code><code>1px</code> <code>solid</code> <code>#bebebe</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>    </code><code>margin</code><code>:</code><code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>    </code><code>padding</code><code>:</code><code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>    </code><code>float</code><code>:</code><code>left</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>14</code></td>
<td><code>ul.menu li{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>15</code></td>
<td><code>    </code><code>float</code><code>:</code><code>left</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>16</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>Since we are making the list float, we will need some relative wrapper for the icons. You see, the icons which will be the background-images of the spans in our list, will have absolute positioning. That comes handy when you need to define a z-index, i.e. saying that some element is on top or under another one. Since we want the icons to appear on top and then dissapear under the link element, we will have to deal with z-indeces. And absolute positioning of elements in a relative container will makes things easier.</p>
<p>Now, let’s define the style for the link elements:</p>
<div id="highlighter_173548">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>ul.menu li a{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>text-decoration</code><code>:</code><code>none</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>background</code><code>:</code><code>#7E7E7E</code> <code>url</code><code>(../images/bgMenu.png) </code><code>repeat-x</code> <code>top</code> <code>left</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>    </code><code>padding</code><code>:</code><code>15px</code> <code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>    </code><code>width</code><code>:</code><code>128px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>    </code><code>color</code><code>:</code><code>#333333</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>float</code><code>:</code><code>left</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>text-align</code><code>:</code><code>center</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>border-right</code><code>:</code><code>1px</code> <code>solid</code> <code>#a1a1a1</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>    </code><code>border-left</code><code>:</code><code>1px</code> <code>solid</code> <code>#e8e8e8</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>    </code><code>font-weight</code><code>:</code><code>bold</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>    </code><code>font-size</code><code>:</code><code>13px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>    </code><code>-moz-</code><code>box-shadow</code><code>: </code><code>0</code> <code>1px</code> <code>3px</code> <code>#555</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>14</code></td>
<td><code>    </code><code>-webkit-</code><code>box-shadow</code><code>: </code><code>0</code> <code>1px</code> <code>3px</code> <code>#555</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>15</code></td>
<td><code>    </code><code>text-shadow</code><code>: </code><code>0</code> <code>1px</code> <code>1px</code> <code>#fff</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>16</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>We want to give the link elements a fixed width and some background gradient. The borders will create a nice inset effect.</p>
<p>The next hover class will be applied using jQuery, since the :hover pseudo class creates an unwanted effect: When the icon slides out it covers the link for a few milliseconds, making the hover style dissapear in that time. That is perceived as a flicker and we will avoid that by defining a class that we will simply add with jQuery when we do the icon slide out effect:</p>
<div id="highlighter_800664">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>1</code></td>
<td><code>ul.menu li a.hover{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>2</code></td>
<td><code>    </code><code>background-image</code><code>:</code><code>none</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>3</code></td>
<td><code>    </code><code>color</code><code>:</code><code>#fff</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>4</code></td>
<td><code>    </code><code>text-shadow</code><code>: </code><code>0</code> <code>-1px</code> <code>1px</code> <code>#000</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>5</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>The first and last link element should have a rounded border on the respective side, so we define two classes for those:</p>
<div id="highlighter_767494">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>1</code></td>
<td><code>ul.menu li a.first{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>2</code></td>
<td><code>    </code><code>-moz-border-radius:</code><code>0px</code> <code>0px</code> <code>0px</code> <code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>3</code></td>
<td><code>    </code><code>-webkit-border-bottom-left-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>4</code></td>
<td><code>    </code><code>border-left</code><code>:</code><code>none</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>5</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>6</code></td>
<td><code>ul.menu li a.last{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>7</code></td>
<td><code>    </code><code>-moz-border-radius:</code><code>0px</code> <code>0px</code> <code>10px</code> <code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>8</code></td>
<td><code>    </code><code>-webkit-border-bottom-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>9</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>The common style for all the icon spans will be the following:</p>
<div id="highlighter_956365">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>ul.menu li span{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>width</code><code>:</code><code>64px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>height</code><code>:</code><code>64px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>    </code><code>background-repeat</code><code>:</code><code>no-repeat</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>    </code><code>background-color</code><code>:</code><code>transparent</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>    </code><code>position</code><code>:</code><code>absolute</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>z-index</code><code>:</code><code>-1</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>top</code><code>:</code><code>80px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>cursor</code><code>:</code><code>pointer</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>The single styles for the specific icons will contain the background-image and the x-position:</p>
<div id="highlighter_462772">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>ul.menu li span.ipod{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>background-image</code><code>:</code><code>url</code><code>(../icons/ipod.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>left</code><code>:</code><code>33px</code><code>; </code><code>/*128/2 - 32(half of icon) +1 of border*/</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>ul.menu li span.video_camera{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>    </code><code>background-image</code><code>:</code><code>url</code><code>(../icons/video_camera.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>left</code><code>:</code><code>163px</code><code>; </code><code>/* plus 128 + 2px of border*/</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>ul.menu li span.television{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>    </code><code>background-image</code><code>:</code><code>url</code><code>(../icons/television.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>    </code><code>left</code><code>:</code><code>293px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>ul.menu li span.monitor{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>14</code></td>
<td><code>    </code><code>background-image</code><code>:</code><code>url</code><code>(../icons/monitor.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>15</code></td>
<td><code>    </code><code>left</code><code>:</code><code>423px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>16</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>17</code></td>
<td><code>ul.menu li span.toolbox{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>18</code></td>
<td><code>    </code><code>background-image</code><code>:</code><code>url</code><code>(../icons/toolbox.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>19</code></td>
<td><code>    </code><code>left</code><code>:</code><code>553px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>20</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>21</code></td>
<td><code>ul.menu li span.telephone{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>22</code></td>
<td><code>    </code><code>background-image</code><code>:</code><code>url</code><code>(../icons/telephone.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>23</code></td>
<td><code>    </code><code>left</code><code>:</code><code>683px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>24</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>25</code></td>
<td><code>ul.menu li span.</code><code>print</code><code>{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>26</code></td>
<td><code>    </code><code>background-image</code><code>:</code><code>url</code><code>(../icons/</code><code>print</code><code>.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>27</code></td>
<td><code>    </code><code>left</code><code>:</code><code>813px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>28</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>As you can see, we are positioning the icons in such a way, that they are centered inside of the list element. The top position is 80px initially since we want to show them to the user when the page get’s loaded. Then we will hide them in a stair-like fashion to create an awesome effect!</p>
<h3>3. The JavaScript</h3>
<p>First, we want to create the effect of the icons dissapearing in a stair-like fashion and then we will define the hover function for the list elements:</p>
<div id="highlighter_35945">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>$(</code><code>function</code><code>() {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>var</code> <code>d=1000;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>$(</code><code>'#menu span'</code><code>).each(</code><code>function</code><code>(){</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>        </code><code>$(</code><code>this</code><code>).stop().animate({</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>            </code><code>'top'</code><code>:</code><code>'-17px'</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>        </code><code>},d+=250);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>});</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>$(</code><code>'#menu &gt; li'</code><code>).hover(</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>        </code><code>function</code> <code>() {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>            </code><code>var</code> <code>$</code><code>this</code> <code>= $(</code><code>this</code><code>);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>            </code><code>$(</code><code>'a'</code><code>,$</code><code>this</code><code>).addClass(</code><code>'hover'</code><code>);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>            </code><code>$(</code><code>'span'</code><code>,$</code><code>this</code><code>).stop().animate({</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>14</code></td>
<td><code>                </code><code>'top'</code><code>:</code><code>'40px'</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>15</code></td>
<td><code>            </code><code>},300).css({</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>16</code></td>
<td><code>                </code><code>'zIndex'</code><code>:</code><code>'10'</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>17</code></td>
<td><code>            </code><code>});</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>18</code></td>
<td><code>        </code><code>},</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>19</code></td>
<td><code>        </code><code>function</code> <code>() {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>20</code></td>
<td><code>            </code><code>var</code> <code>$</code><code>this</code> <code>= $(</code><code>this</code><code>);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>21</code></td>
<td><code>            </code><code>$(</code><code>'a'</code><code>,$</code><code>this</code><code>).removeClass(</code><code>'hover'</code><code>);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>22</code></td>
<td><code>            </code><code>$(</code><code>'span'</code><code>,$</code><code>this</code><code>).stop().animate({</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>23</code></td>
<td><code>                </code><code>'top'</code><code>:</code><code>'-17px'</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>24</code></td>
<td><code>            </code><code>},800).css({</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>25</code></td>
<td><code>                </code><code>'zIndex'</code><code>:</code><code>'-1'</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>26</code></td>
<td><code>            </code><code>});</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>27</code></td>
<td><code>        </code><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>28</code></td>
<td><code>    </code><code>);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>29</code></td>
<td><code>});</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>When hovering, we add the class “hover” to the link element, make the icon appear from the top, and increase the z-Index, so that the icon stays on top of the link. When the mouse goes out, we do exactly the opposite, which creates the effect that the icon dissapears behind the link element. For that we will allow more time (800 milliseconds) because it’s such a fun effect that the user might want to enjoy a little bit!</p>
<p>And that’s all!<br />
I hope you like and enjoy it!</p>
<p>D<a href="http://www.tympanus.net/Tutorials/FancyAppleStyleNavigation/FancyAppleStyleNavigation.zip">ownload source</a></p>
<p>&nbsp;</p>
<div id="seo_alrp_related"><h2>Posts Related to CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/07/all-fixed-fade-out-menu-a-css-and-jquery-tutorial/" rel="bookmark">all Fixed Fade Out Menu: A CSS and jQuery Tutorial</a></h3><p>1. The HTML The markup is pretty simple: we have a div with a list inside. The list items will be our links, the search ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/07/how-to-add-beautiful-slide-out-navigation-a-css-and-jquery-tutorial/" rel="bookmark">how to add Beautiful Slide Out Navigation: A CSS and jQuery Tutorial</a></h3><p>1. The HTML Structure The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/11/sleek-and-smooth-animated-menu-jquery/" rel="bookmark">Sleek and Smooth animated menu using jQuery</a></h3><p>Today, I’m going to show you something interesting with jQuery. Yesterday I was thinking something to post something programming related stuff  in blog after long ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/07/how-to-add-sweet-thumbnails-preview-gallery/" rel="bookmark">how to add Sweet Thumbnails Preview Gallery</a></h3><p>The Markup The HTML structure is going to consist of a main container which will have the image wrapper for the big image, the navigation ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/11/color-palette-generator-using-jqueryas-i-continue-to-learn-jquery-i-think-its-important-that-i-begin-by-porting-over-scripts-ive-created-using-mootools-one-of-those-scripts-is-my-color-palette-g/" rel="bookmark">Color Palette Generator Using jQueryAs I continue to learn jQuery, I think it&#8217;s important that I begin by porting over scripts I&#8217;ve created using MooTools. One of those scripts is my Color Palette Generator script, which debuted on Eric Wendelin&#8217;s blog. For those of you that missed it, my script analyzes all of the colors on the page (minus images) and builds a palette of colors. Here it is in some jQuery goodness.  The XHTML  <input type="button" id="get-colors" value="Get Colors" class="button" /> <div id="colors-wrapper"></div>  All we need to begin with is the button that triggers the palette generation and a DIV container that will hold all of the DIVs my jQuery creates. The CSS  .dcolor { height:40px; } .dtext {  } .dwrapper { width:200px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; }   These CSS classes act as containers for the text DIV I generate and the color-displaying DIV I generate. Those two DIVs are held in one wrapping DIV. The jQuery JavaScript  /* when the dom is ready */ $(document).ready(function() { $(&#8216;#get-colors&#8217;).click(function() {   //my colors array var colors = new Array(); //get all elements $(&#8216;*&#8217;).each(function() { if($(this).css(&#8216;background-color&#8217;) &#038;&#038; $(this).css(&#8216;background-color&#8217;) != &#8216;transparent&#8217;) { colors.push($(this).css(&#8216;background-color&#8217;)); } if($(this).css(&#8216;color&#8217;)) { colors.push($(this).css(&#8216;color&#8217;)); } if($(this).css(&#8216;border-color&#8217;)) { colors.push($(this).css(&#8216;border-color&#8217;)); } }); //remove dupes and sort colors.sort(); //create a color block for all of them jQuery.each(colors,function(it,value) { if(!$(&#8216;div[rel=\'' + value + '\']&#8216;).length) { //inject the wrapper var wrapper_id = &#8216;w&#8217; + it; $(&#8216;<div class="dwrapper" id="' + wrapper_id + '" rel="' + value + '"> </div>&#8216;).appendTo(&#8216;#colors-wrapper&#8217;); //inject the color div $(&#8216;<div class="dcolor" style="background-color:' + value + '"> </div>&#8216;).appendTo(&#8216;#&#8217; + wrapper_id); //inject text div $(&#8216;<div class="text">&#8216; + value + &#8216;</div>&#8216;).appendTo(&#8216;#&#8217; + wrapper_id); } }); }); });   When someone clicks the &#8220;Get Colors&#8221; button, I grab every element in the DOM and collect its color, background-color, and border-color. Once I&#8217;ve cycled through all of the elements, cycle through all of the colors and display them as DIVs inside my colors-wrapper element. You&#8217;ll note that I utilized therel attribute to prevent duplicates.</a></h3><p>As I continue to learn jQuery, I think it's important that I begin by porting over scripts I've created using MooTools. One of those scripts ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2011/07/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>how to add Beautiful Slide Out Navigation: A CSS and jQuery Tutorial</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2011/07/how-to-add-beautiful-slide-out-navigation-a-css-and-jquery-tutorial/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2011/07/how-to-add-beautiful-slide-out-navigation-a-css-and-jquery-tutorial/#comments</comments>
		<pubDate>Thu, 28 Jul 2011 18:41:29 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Home]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[Interview Question]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Others]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/?p=1391</guid>
		<description><![CDATA[1. The HTML Structure The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: 1 &#60;ul id="navigation"&#62; 2  &#60;li class="home"&#62;&#60;a title="Home"&#62;&#60;/a&#62;&#60;/li&#62; 3  &#60;li class="about"&#62;&#60;a title="About"&#62;&#60;/a&#62;&#60;/li&#62; 4  &#60;li class="search"&#62;&#60;a title="Search"&#62;&#60;/a&#62;&#60;/li&#62; 5  &#60;li class="photos"&#62;&#60;a title="Photos"&#62;&#60;/a&#62;&#60;/li&#62; 6  &#60;li class="rssfeed"&#62;&#60;a title="Rss Feed"&#62;&#60;/a&#62;&#60;/li&#62; 7  &#60;li class="podcasts"&#62;&#60;a title="Podcasts"&#62;&#60;/a&#62;&#60;/li&#62; 8  &#60;li [...]]]></description>
			<content:encoded><![CDATA[<h3>1. The HTML Structure</h3>
<p>The only thing we will need for the navigation is a simple unordered list with links inside of the list elements:</p>
<div id="highlighter_498339">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>1</code></td>
<td><code>&lt;</code><code>ul</code> <code>id</code><code>=</code><code>"navigation"</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>2</code></td>
<td><code> </code><code>&lt;</code><code>li</code> <code>class</code><code>=</code><code>"home"</code><code>&gt;&lt;</code><code>a</code> <code>title</code><code>=</code><code>"Home"</code><code>&gt;&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>3</code></td>
<td><code> </code><code>&lt;</code><code>li</code> <code>class</code><code>=</code><code>"about"</code><code>&gt;&lt;</code><code>a</code> <code>title</code><code>=</code><code>"About"</code><code>&gt;&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>4</code></td>
<td><code> </code><code>&lt;</code><code>li</code> <code>class</code><code>=</code><code>"search"</code><code>&gt;&lt;</code><code>a</code> <code>title</code><code>=</code><code>"Search"</code><code>&gt;&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>5</code></td>
<td><code> </code><code>&lt;</code><code>li</code> <code>class</code><code>=</code><code>"photos"</code><code>&gt;&lt;</code><code>a</code> <code>title</code><code>=</code><code>"Photos"</code><code>&gt;&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>6</code></td>
<td><code> </code><code>&lt;</code><code>li</code> <code>class</code><code>=</code><code>"rssfeed"</code><code>&gt;&lt;</code><code>a</code> <code>title</code><code>=</code><code>"Rss Feed"</code><code>&gt;&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>7</code></td>
<td><code> </code><code>&lt;</code><code>li</code> <code>class</code><code>=</code><code>"podcasts"</code><code>&gt;&lt;</code><code>a</code> <code>title</code><code>=</code><code>"Podcasts"</code><code>&gt;&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>8</code></td>
<td><code> </code><code>&lt;</code><code>li</code> <code>class</code><code>=</code><code>"contact"</code><code>&gt;&lt;</code><code>a</code> <code>title</code><code>=</code><code>"Contact"</code><code>&gt;&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>9</code></td>
<td><code>&lt;/</code><code>ul</code><code>&gt;</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>The list is getting an ID because we want to refer to it later in the JavaScript. With jQuery, we will make the link items slide out whenever we hover over the li elements of the list.</p>
<h3>2. The CSS</h3>
<p>First, we define the CSS properties for the list:</p>
<div id="highlighter_631718">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>1</code></td>
<td><code>ul#navigation {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>2</code></td>
<td><code>    </code><code>position</code><code>: </code><code>fixed</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>3</code></td>
<td><code>    </code><code>margin</code><code>: </code><code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>4</code></td>
<td><code>    </code><code>padding</code><code>: </code><code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>5</code></td>
<td><code>    </code><code>top</code><code>: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>6</code></td>
<td><code>    </code><code>left</code><code>: </code><code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>7</code></td>
<td><code>    </code><code>list-style</code><code>: </code><code>none</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>8</code></td>
<td><code>    </code><code>z-index</code><code>:</code><code>9999</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>9</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>The navigation should always be accessible for the user, even if he scrolls down the page. So, the position should be fixed. Margin and padding are explicitly set to 0, since the unordered list has default values for them. The navigation should also be on top of all other elements on the page. That’s why we set the z-index very high.</p>
<p>Now, let’s look at the list element properties:</p>
<div id="highlighter_375457">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>1</code></td>
<td><code>ul#navigation li {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>2</code></td>
<td><code>    </code><code>width</code><code>: </code><code>100px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>3</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>For the links in the list elements, we define the following CSS properties:</p>
<div id="highlighter_413266">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>ul#navigation li a {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>display</code><code>: </code><code>block</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>margin-left</code><code>: </code><code>-85px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>    </code><code>width</code><code>: </code><code>100px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>    </code><code>height</code><code>: </code><code>70px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>    </code><code>background-color</code><code>:</code><code>#CFCFCF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>background-repeat</code><code>:</code><code>no-repeat</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>background-position</code><code>:</code><code>center</code> <code>center</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#AFAFAF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>The margin-left is set to a negative value because we want to hide most of the icon and only reveal it when we hover over the list items. Basically, we are pushing the link element to the left, outside of the visual area of the page:</p>
<p><img title="slideoututorial1" src="http://tympanus.net/codrops/wp-content/uploads/2009/11/slideoututorial11.png" alt="slideoututorial1" width="379" height="248" /></p>
<p>In the JavaScript part we will define a function that makes the elements slide out. But let’s first add some rounded borders to them (they don’t work in Internet Explorer, though):</p>
<div id="highlighter_817222">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>ul#navigation li a {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>display</code><code>: </code><code>block</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>margin-left</code><code>: </code><code>-85px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>    </code><code>width</code><code>: </code><code>100px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>    </code><code>height</code><code>: </code><code>70px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>    </code><code>background-color</code><code>:</code><code>#CFCFCF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>background-repeat</code><code>:</code><code>no-repeat</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>background-position</code><code>:</code><code>center</code> <code>center</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#AFAFAF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>    </code><code>-moz-border-radius:</code><code>0px</code> <code>10px</code> <code>10px</code> <code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>    </code><code>-webkit-border-bottom-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>    </code><code>-webkit-border-top-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>    </code><code>-khtml-border-bottom-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>14</code></td>
<td><code>    </code><code>-khtml-border-top-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>15</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>To make them really neat, we add some opacity, so that the content underneath is visible:</p>
<div id="highlighter_802253">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>ul#navigation li a {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>display</code><code>: </code><code>block</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>margin-left</code><code>: </code><code>-85px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>    </code><code>width</code><code>: </code><code>100px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>    </code><code>height</code><code>: </code><code>70px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>    </code><code>background-color</code><code>:</code><code>#CFCFCF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>background-repeat</code><code>:</code><code>no-repeat</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>background-position</code><code>:</code><code>center</code> <code>center</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#AFAFAF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>    </code><code>-moz-border-radius:</code><code>0px</code> <code>10px</code> <code>10px</code> <code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>    </code><code>-webkit-border-bottom-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>    </code><code>-webkit-border-top-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>    </code><code>-khtml-border-bottom-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>14</code></td>
<td><code>    </code><code>-khtml-border-top-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>15</code></td>
<td><code>    </code><code>opacity</code><code>: </code><code>0.6</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>16</code></td>
<td><code>    </code><code>filter:progid:DXImageTransform.Microsoft.Alpha(opacity=</code><code>60</code><code>);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>17</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>The last filter property will make this work for Internet Explorer as well.<br />
These were the common properties of all the link elements in the list. Now we will define the background image for the links in the specific list items:</p>
<div id="highlighter_618867">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>ul#navigation .home a{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>background-image</code><code>: </code><code>url</code><code>(../images/home.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>ul#navigation .about a      {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>    </code><code>background-image</code><code>: </code><code>url</code><code>(../images/id_card.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>ul#navigation .search a      {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>background-image</code><code>: </code><code>url</code><code>(../images/search.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>ul#navigation .podcasts a      {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>    </code><code>background-image</code><code>: </code><code>url</code><code>(../images/ipod.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>ul#navigation .rssfeed a   {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>14</code></td>
<td><code>    </code><code>background-image</code><code>: </code><code>url</code><code>(../images/rss.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>15</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>16</code></td>
<td><code>ul#navigation .photos a     {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>17</code></td>
<td><code>    </code><code>background-image</code><code>: </code><code>url</code><code>(../images/camera.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>18</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>19</code></td>
<td><code>ul#navigation .contact a    {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>20</code></td>
<td><code>    </code><code>background-image</code><code>: </code><code>url</code><code>(../images/mail.png);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>21</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>And that was the CSS part. Now, let’s take a look at the few lines of JavaScript that will give some life to the navigation.</p>
<h3>The JavaScript</h3>
<p>Using jQuery, we will make the icons appear whenever we hover over one of the list items. Remember, the list item itself is 100 pixel wide, only the link element is being pushed outside of the page to the left, so that it is not visible.</p>
<p>We define the following function (before the end of the body tag) that get’s executed whenever we hover over a li:</p>
<div id="highlighter_286111">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>$(</code><code>function</code><code>() {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code> </code><code>$(</code><code>'#navigation &gt; li'</code><code>).hover(</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>  </code><code>function</code> <code>() {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>   </code><code>$(</code><code>'a'</code><code>,$(</code><code>this</code><code>)).stop().animate({</code><code>'marginLeft'</code><code>:</code><code>'-2px'</code><code>},200);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>  </code><code>},</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>  </code><code>function</code> <code>() {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>   </code><code>$(</code><code>'a'</code><code>,$(</code><code>this</code><code>)).stop().animate({</code><code>'marginLeft'</code><code>:</code><code>'-85px'</code><code>},200);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>  </code><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code> </code><code>);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>});</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>So, when hovering, we want the specific link element to get a left margin of -2 pixels, and that nicely animated, and not too slow (200 milliseconds). Moving the mouse out shall put the link element back to it’s old position (-85 pixels). The stop() function “stops all the currently running animations on all the specified elements” which gives the beautiful effect when, for example, hovering over all elements very quickly.</p>
<p>What would be really nice now, is to make the user aware that there is such an amazing navigation on your web page. Like it is now, the user will merely see some grey borders sticking out from the left side of the page. What could be better for showing the menu than actually showing the navigation shortly when the page loads. So, here we go.</p>
<p>So, we will initially let the navigation be visible. For that we change the left margin of the link elements:</p>
<div id="highlighter_129172">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>ul#navigation li a {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>display</code><code>: </code><code>block</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>margin-left</code><code>: </code><code>-2px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>    </code><code>width</code><code>: </code><code>100px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>    </code><code>height</code><code>: </code><code>70px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>    </code><code>background-color</code><code>:</code><code>#CFCFCF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>background-repeat</code><code>:</code><code>no-repeat</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>background-position</code><code>:</code><code>center</code> <code>center</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#AFAFAF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>    </code><code>-moz-border-radius:</code><code>0px</code> <code>10px</code> <code>10px</code> <code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>    </code><code>-webkit-border-bottom-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>    </code><code>-webkit-border-top-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>    </code><code>-khtml-border-bottom-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>14</code></td>
<td><code>    </code><code>-khtml-border-top-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>15</code></td>
<td><code>    </code><code>opacity</code><code>: </code><code>0.6</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>16</code></td>
<td><code>    </code><code>filter:progid:DXImageTransform.Microsoft.Alpha(opacity=</code><code>60</code><code>);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>17</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>And we add the following line at the beginning of the JavaScript function:</p>
<div id="highlighter_617331">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>$(</code><code>function</code><code>() {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code> </code><code>$(</code><code>'#navigation a'</code><code>).stop().animate({</code><code>'marginLeft'</code><code>:</code><code>'-85px'</code><code>},1000);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code> </code><code>$(</code><code>'#navigation &gt; li'</code><code>).hover(</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>  </code><code>function</code> <code>() {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>   </code><code>$(</code><code>'a'</code><code>,$(</code><code>this</code><code>)).stop().animate({</code><code>'marginLeft'</code><code>:</code><code>'-2px'</code><code>},200);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>  </code><code>},</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>  </code><code>function</code> <code>() {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>   </code><code>$(</code><code>'a'</code><code>,$(</code><code>this</code><code>)).stop().animate({</code><code>'marginLeft'</code><code>:</code><code>'-85px'</code><code>},200);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>  </code><code>}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code> </code><code>);</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>});</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>With that line we defined that it should take 1 second to give a left margin of -85 pixels to all the link elements in the list. Through the margin that we set we will show the navigation to the user and with the JavaScript we will then hide it.</p>
<p>And that’s it!</p>
<p>If you are a shadow-freak (like me), you can also add these lines to the CSS of the link element:</p>
<div id="highlighter_611849">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>ul#navigation li a {</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td><code>    </code><code>display</code><code>: </code><code>block</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>    </code><code>margin-left</code><code>: </code><code>-2px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td><code>    </code><code>width</code><code>: </code><code>100px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>    </code><code>height</code><code>: </code><code>70px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>    </code><code>background-color</code><code>:</code><code>#CFCFCF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td><code>    </code><code>background-repeat</code><code>:</code><code>no-repeat</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>    </code><code>background-position</code><code>:</code><code>center</code> <code>center</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td><code>    </code><code>border</code><code>:</code><code>1px</code> <code>solid</code> <code>#AFAFAF</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>    </code><code>-moz-border-radius:</code><code>0px</code> <code>10px</code> <code>10px</code> <code>0px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>    </code><code>-webkit-border-bottom-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>    </code><code>-webkit-border-top-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>    </code><code>-khtml-border-bottom-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>14</code></td>
<td><code>    </code><code>-khtml-border-top-right-radius: </code><code>10px</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>15</code></td>
<td><code>    </code><code>-moz-</code><code>box-shadow</code><code>: </code><code>0px</code> <code>4px</code> <code>3px</code> <code>#000</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>16</code></td>
<td><code>    </code><code>-webkit-</code><code>box-shadow</code><code>: </code><code>0px</code> <code>4px</code> <code>3px</code> <code>#000</code><code>;</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>17</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>Adding the box shadow and removing opacity, will give the navigation items a 3D look. Leaving the opacity makes them look cool, too, try it out and enjoy!</p>
<div id="seo_alrp_related"><h2>Posts Related to how to add Beautiful Slide Out Navigation: A CSS and jQuery Tutorial</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/07/all-fixed-fade-out-menu-a-css-and-jquery-tutorial/" rel="bookmark">all Fixed Fade Out Menu: A CSS and jQuery Tutorial</a></h3><p>1. The HTML The markup is pretty simple: we have a div with a list inside. The list items will be our links, the search ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/07/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/" rel="bookmark">CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation</a></h3><p>1. The HTML The markup just consists of a div with an unordered list inside. The list elements contain a span for the icon and ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/07/how-to-add-sweet-thumbnails-preview-gallery/" rel="bookmark">how to add Sweet Thumbnails Preview Gallery</a></h3><p>The Markup The HTML structure is going to consist of a main container which will have the image wrapper for the big image, the navigation ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/11/sleek-and-smooth-animated-menu-jquery/" rel="bookmark">Sleek and Smooth animated menu using jQuery</a></h3><p>Today, I’m going to show you something interesting with jQuery. Yesterday I was thinking something to post something programming related stuff  in blog after long ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/jquery-1-4-4-fadetoggle-function/" rel="bookmark">jQuery 1.4.4 fadeToggle() function</a></h3><p>So far, we have been using the slideToggle() and toggleClass() functions. The new jQuery 1.4.4 now introduces the fadeToggle() function. fadeToggle() provides built in toggle ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2011/07/how-to-add-beautiful-slide-out-navigation-a-css-and-jquery-tutorial/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>html dom creating checkbox dynamically</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2011/07/html-dom-creating-checkbox-dynamically/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2011/07/html-dom-creating-checkbox-dynamically/#comments</comments>
		<pubDate>Fri, 22 Jul 2011 14:43:17 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[createElement checkbox]]></category>
		<category><![CDATA[createElement sample]]></category>
		<category><![CDATA[dom checkbox]]></category>
		<category><![CDATA[dom checkbox setattribute]]></category>
		<category><![CDATA[dynamic checkbox create]]></category>
		<category><![CDATA[dynamic checkbox dom]]></category>
		<category><![CDATA[dynamic checkbox dom html]]></category>
		<category><![CDATA[how to create an html checkbox dom]]></category>
		<category><![CDATA[html checkbox]]></category>
		<category><![CDATA[html checkbox create dynamic]]></category>
		<category><![CDATA[html checkbox dynamically]]></category>
		<category><![CDATA[html dom creating checkbox dynamically]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/?p=1365</guid>
		<description><![CDATA[Posts Related to html dom creating checkbox dynamicallyGet and Set Form Element Values using jQueryOne of the most frequently asked questions about jQuery is to Get or Set values of HTML Form elements. The jQuery val() method lets you ...Using the jQuery Validation Plugin to choose atleast one CheckBox before submitting the FormLet us see [...]]]></description>
			<content:encoded><![CDATA[<div>
<p><code>
<pre class="brush: plain; title: ; notranslate">&lt;/code&gt;&lt;html&gt;
&lt;head&gt;
&lt;script type='text/javascript'&gt;
function createCheckBox(){

var myCheckBoxUnchecked = document.createElement('input');

myCheckBoxUnchecked.setAttribute('type','checkbox');

myCheckBoxUnchecked.setAttribute('value','checkbox');

var myCheckBoxChecked = document.createElement('input');

myCheckBoxChecked.setAttribute('type','checkbox');

myCheckBoxChecked.setAttribute('value','checkbox');

myCheckBoxChecked.checked = true;

var handler = document.getElementById('checkbox_here');

handler.appendChild(myCheckBoxUnchecked);

handler.appendChild(myCheckBoxChecked);

}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type='button' value='Create Checkbox' onClick='createCheckBox()' /&gt;
&lt;div id='checkbox_here'&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;&lt;code&gt;</pre>
<p></code></p>
</div>
<div id="seo_alrp_related"><h2>Posts Related to html dom creating checkbox dynamically</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/get-and-set-form-element-values-using-jquery/" rel="bookmark">Get and Set Form Element Values using jQuery</a></h3><p>One of the most frequently asked questions about jQuery is to Get or Set values of HTML Form elements. The jQuery val() method lets you ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/using-the-jquery-validation-plugin-to-choose-atleast-one-checkbox-before-submitting-the-form/" rel="bookmark">Using the jQuery Validation Plugin to choose atleast one CheckBox before submitting the Form</a></h3><p>Let us see how to use the jQuery Validation Plugin to choose atleast one checkbox before submitting the form &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;style ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/11/how-to-make-model-without-a-table-easy-decision/" rel="bookmark">How To Make Model Without a Table? Easy Decision!</a></h3><p>The answer is simple: class ModelWithoutTable extends AppModel { var $useTable = false; } How To Make Controller Without a Model? class MyController extends AppController ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/08/check-or-uncheck-all-in-a-group-of-checkbox-in-javascript/" rel="bookmark">Check or Uncheck All in a Group of Checkbox in JavaScript</a></h3><p>JavaScript code to be kept before head tag. 1 2 3 4 5 6 7 8 9 10 11 12 13 &lt;SCRIPT LANGUAGE="JavaScript"&gt; function CheckAll(chk) ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2011/07/html-dom-creating-checkbox-dynamically/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Quick Calendar Using AJAX and PHP</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2011/01/quick-calendar-using-ajax-and-php/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2011/01/quick-calendar-using-ajax-and-php/#comments</comments>
		<pubDate>Tue, 11 Jan 2011 10:46:25 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[Home]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[Others]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/?p=1001</guid>
		<description><![CDATA[Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are new to programming. There are many web calendars in the market but some of them are quite complicated. If we are not able to understand the code, it becomes harder [...]]]></description>
			<content:encoded><![CDATA[<div>
<p>Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are new to programming. There are many web calendars in the market but some of them are quite complicated. If we are not able to understand the code, it becomes harder for us to customise the calendar to fit into our existing application. As such, we need to create a calendar that can plug itself into any system seamlessly without problems. Whether we are using WordPress, Mambo/Joomla or Drupal, we should only need to insert one line into our code for the calendar to work. ie something like this:</p>
<div><code> &lt;?php<br />
require_once('quick_calendar.php');<br />
?&gt; </code></div>
<p>If you are already bored at this point or not interested to know how to create a web calendar, feel free to see a live demo of the simple calendar here. The installation procedures is in the <a href="http://web-developer.sitecritic.net/quick_calendar.txt">source code</a>.</p>
<p>Other than configuring the database access for the calendar, I do not want to change other things. With AJAX, I could even make the page static as I navigate between different months in the calendar. In this tutorial, I would like to share with you a simple calendar I created that fufills the objectives discussed above. The tutorial assumes that you have basic knowledge of PHP and SQL but don&#8217;t worry, the actual code is minimal and you should be able to customise it easily by reading at the comments. I used PHP 4 so that it is compatible with most servers. You should also be able to re-create the calendar easily in other programming languages using the same logic.</p>
<h2>The First Step: Problem Identification</h2>
<p>Perhaps the hardest part in creating a calendar is to come up with a good solution to display the days of the month in the correct column, ie Monday, Tuesday..etc.</p>
<table border="1" cellspacing="2" cellpadding="2" width="400">
<tbody>
<tr>
<th colspan="7">Apr 2006</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
</tr>
<tr>
<td align="center">9</td>
<td align="center">10</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">13</td>
<td align="center">14</td>
<td align="center"><strong>15</strong></td>
</tr>
<tr>
<td align="center">16</td>
<td align="center">17</td>
<td align="center">18</td>
<td align="center">19</td>
<td align="center">20</td>
<td align="center">21</td>
<td align="center">22</td>
</tr>
<tr>
<td align="center">23</td>
<td align="center">24</td>
<td align="center">25</td>
<td align="center">26</td>
<td align="center">27</td>
<td align="center">28</td>
<td align="center">29</td>
</tr>
<tr>
<td align="center">30</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
</tbody>
</table>
<p>Let us take April 2006 for example. There are 30 days and 6 rows in the calendar. If we are given a day in the month, say 15, we have to know that it falls on a saturday and is in the third row (third week). We cannot take for granted that the first day is always the first cell in the table (top left cell). Sometimes, we get 4 or 5 weeks in a month. Only if we know how many days are there in a certain month and which day the <em>first of the month</em> falls in only can we construct the calender as shown above.</p>
<h2>Getting Crucial information From The PHP Date function</h2>
<p>PHP provides a date() function that gives us alot of useful information about the days and months of the year. To built the calendar for any month, We need 2 important pieces of information from the Date function, ie the &#8220;number of days in the month&#8221; and a &#8221;numeric representation of the first day of the month&#8221;.</p>
<p>I can get today&#8217;s date easily from the following code:</p>
<pre>// get year, eg 2006
$year = date('Y');
// get month, eg 04
$month = date('n');
// get day, eg 3
$day = date('j');</pre>
<p>To get the number of days in this month, I will use the both the date and mktime function like so:</p>
<pre>// get number of days in month, eg 28
$daysInMonth = date("t",mktime(0,0,0,$month,1,$year));</pre>
<p>The numeric representation of the day of the week ranges from 0 to 6. 0 is sunday and 6 is saturday. Again, to get the numeric first day of this month, the function mktime comes in handy.</p>
<pre>// get first day of the month, eg 4
$firstDay = date("w", mktime(0,0,0,$month,1,$year));</pre>
<h2>The Monthly Calendar As A 2-D Array</h2>
<p>If we look at the calendar again for April 2006, we will see that it is actually a table(grid) filled with values starting from 1 to x (no of days in the month). The first day of the month is a variable though&#8230; It can occur in any day of the week. In the table, imagine each cell as having coordinates (x,y), starting from the top left cell as (0,0) and the bottom right cell as (5,6). In the month of April, the first day of the month is stored in coordinate (0,6). So, the plan now is to store the days of the month in a 2-D Array.</p>
<p>Firstly, we want to know the number of cells needed.</p>
<pre>// calculate total spaces needed in array
$tempDays = $firstDay + $daysInMonth;</pre>
<p>Then we want to know the number of rows needed.</p>
<pre>// calculate total rows needed
$weeksInMonth = ceil($tempDays/7);</pre>
<h2>Populating The 2-D Array</h2>
<p>Knowing the number of rows and columns in the 2-D array, we can now fill the arrays with values using 2 for-loops. The first cell will start with a value of 1 and the subsequent cells will have their values increased by 1 till it reaches the end of the array.</p>
<div><code> &lt;?php<br />
for($j=0;$j&amp;lt;$weeksInMonth;$j++) {<br />
for($i=0;$i&amp;lt;7;$i++) {<br />
$counter++;<br />
$week[$j][$i] = $counter;<br />
}<br />
}<br />
?&gt; </code></div>
<p>For the month of April, the temporary array should be something like this:</p>
<table border="1" cellspacing="2" cellpadding="2" width="400">
<tbody>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
</tr>
<tr>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">10</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">13</td>
<td align="center">14</td>
</tr>
<tr>
<td align="center">15</td>
<td align="center">16</td>
<td align="center">17</td>
<td align="center">18</td>
<td align="center">19</td>
<td align="center">20</td>
<td align="center">21</td>
</tr>
<tr>
<td align="center">22</td>
<td align="center">23</td>
<td align="center">24</td>
<td align="center">25</td>
<td align="center">26</td>
<td align="center">27</td>
<td align="center">28</td>
</tr>
<tr>
<td align="center">29</td>
<td align="center">30</td>
<td align="center">31</td>
<td align="center">32</td>
<td align="center">33</td>
<td align="center">34</td>
<td align="center">35</td>
</tr>
<tr>
<td align="center">36</td>
<td align="center">37</td>
<td align="center">38</td>
<td align="center">39</td>
<td align="center">40</td>
<td align="center">41</td>
<td align="center">42</td>
</tr>
</tbody>
</table>
<h2>The Magic Offset</h2>
<p>As you can see, the array above is not correct. The first day of April, ie value 1 should be in (0,6) instead of (0,0). Remeber the variable $firstDay? It is the numeric representation of the first day of month which happens to be 6 in April 2006. If we subtract  $firstDay from all the values in the array, we will get the array as follows:</p>
<table border="1" cellspacing="2" cellpadding="2" width="400">
<tbody>
<tr>
<td align="center">-5</td>
<td align="center">-4</td>
<td align="center">-3</td>
<td align="center">-2</td>
<td align="center">-1</td>
<td align="center">0</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
</tr>
<tr>
<td align="center">9</td>
<td align="center">10</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">13</td>
<td align="center">14</td>
<td align="center">15</td>
</tr>
<tr>
<td align="center">16</td>
<td align="center">17</td>
<td align="center">18</td>
<td align="center">19</td>
<td align="center">20</td>
<td align="center">21</td>
<td align="center">22</td>
</tr>
<tr>
<td align="center">23</td>
<td align="center">24</td>
<td align="center">25</td>
<td align="center">26</td>
<td align="center">27</td>
<td align="center">28</td>
<td align="center">29</td>
</tr>
<tr>
<td align="center">30</td>
<td align="center">31</td>
<td align="center">32</td>
<td align="center">33</td>
<td align="center">34</td>
<td align="center">35</td>
<td align="center">36</td>
</tr>
</tbody>
</table>
<p>You should now be able to guess what we are going to do next. Looking at the array above, you see that we already got the values we want but we also have some unwanted values. Any number less than 1 or more than $daysInMonth (number of days in a month) should be ignored.</p>
<div><code> &lt;?php<br />
function fillArray() {<br />
// create a 2-d array<br />
for($j=0;$j&lt;$this-&gt;weeksInMonth;$j++) {<br />
for($i=0;$i&lt;7;$i++) {<br />
$counter++;<br />
$this-&gt;week[$j][$i] = $counter;<br />
// offset the days<br />
$this-&gt;week[$j][$i] -= $this-&gt;firstDay;<br />
if (($this-&gt;week[$j][$i] &lt; 1) || ($this-&gt;week[$j][$i] &gt; $this-&gt;daysInMonth)) {<br />
$this-&gt;week[$j][$i] = "";<br />
}<br />
}<br />
}<br />
}<br />
?&gt; </code></div>
<p>This is the core function in the entire calendar generation algorithm.</p>
<h2>Displaying The Calendar</h2>
<p>Getting the values right in the 2-D array, we are now ready to display them. Now, we will create a table and start looping again using the <code>foreach</code> function.</p>
<pre>&lt;table width="400" border="1" cellpadding="2" cellspacing="2"&gt;
	&lt;tr&gt;
		&lt;th colspan='7'&gt;&lt;?= date('M', mktime(0,0,0,$month,1,$year)).' '.$year; ?&gt;&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Sun&lt;/th&gt;
		&lt;th&gt;Mon&lt;/th&gt;
		&lt;th&gt;Tue&lt;/th&gt;
		&lt;th&gt;Wed&lt;/th&gt;
		&lt;th&gt;Thur&lt;/th&gt;
		&lt;th&gt;Fri&lt;/th&gt;
		&lt;th&gt;Sat&lt;/th&gt;
	&lt;/tr&gt;

&lt;?php
foreach ($week as $key =&gt; $val) {
	echo "&lt;tr&gt;";
	for ($i=0;$i&lt;7;$i++) {
		echo "&lt;td align='center'&gt;$date&lt;/td&gt;";
	}
	echo "&lt;/tr&gt;";
}
?&gt;
&lt;/table&gt; 
</pre>
<p>The final display will be like this:</p>
<table border="1" cellspacing="2" cellpadding="2" width="400">
<tbody>
<tr>
<th colspan="7">Apr 2006</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
</tr>
<tr>
<td align="center">9</td>
<td align="center">10</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">13</td>
<td align="center">14</td>
<td align="center">15</td>
</tr>
<tr>
<td align="center">16</td>
<td align="center">17</td>
<td align="center">18</td>
<td align="center">19</td>
<td align="center">20</td>
<td align="center">21</td>
<td align="center">22</td>
</tr>
<tr>
<td align="center">23</td>
<td align="center">24</td>
<td align="center">25</td>
<td align="center">26</td>
<td align="center">27</td>
<td align="center">28</td>
<td align="center">29</td>
</tr>
<tr>
<td align="center">30</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
</tbody>
</table>
<p>We now have a plain calendar.</p>
<h2>Adding Special Dates To The Calendar</h2>
<p>This calendar only tells you &#8220;the days of a week&#8221; at the moment and is not very useful. Most online calendar will have reminders as well. Say for example, if my birthday falls on the 4th of April, I want the number 4 in the calendar be displayed differently, possible with a hyperlink in which upon clicking on it, will perform some task like redirecting me to a certain page or displaying more information about myself in a popup windows..etc. To do that, we need to a table in the database with at least 6 columns: id, day, month, year, link, desc.</p>
<pre>CREATE TABLE calendar ( 

id INT NOT NULL AUTO_INCREMENT ,

  day VARCHAR( 2 ) NOT NULL ,

  month VARCHAR( 2 ) NOT NULL ,

  year VARCHAR( 4 ) NOT NULL ,

  link VARCHAR( 255 ) NOT NULL ,

  desc TEXT NOT NULL ,

  PRIMARY KEY ( id )
);
</pre>
<p>We then need to insert some data into the table for testing:</p>
<pre>INSERT INTO calendar ( id , day , month , year , link , desc ) 

VALUES (
'', '24', '*', '2006', 'http://www.sitecritic.net', 'Check your web cccount on the 24th of   every month. 2006 only!'
), (
'', '5', '11', '2006', 'some_javascript_funtion',   'Olympics, remember to buy ticket   from alice.'
),(
'', '2', '1', '2007', 'some_javascript_funtion',   'early 2007. Any new plans for   the year?'
), (
'', '9', '*', '*', 'http://www.evolt.org', 'Remember to check updates from   evolt.org every month.'
);
</pre>
<p><em>The * under the month or year column means every month or year. </em></p>
<p>Next, we do a query and extract the  important dates for a certain month and store it in an array.</p>
<div><code> &lt;?php<br />
$sql = "SELECT * FROM calendar WHERE (month='$month' AND year='$year') || (month='*' AND year='$year') || (month='$month' AND year='*') || (month='*' AND year='*')";<br />
$rs = $db-&gt;query($sql);<br />
while ($rw = $rs-&gt;fetchRow()) {<br />
extract($rw);<br />
$links[] = array('day'=&gt;$day', 'month'=&gt;$month, 'year'=&gt;$year, 'link'=&gt;$link, 'desc=&gt;$desc);<br />
}<br />
?&gt; </code></div>
<p>If we create a class to generate the calendar, we need to pass the $links array into the class like so:</p>
<div><code> &lt;?php<br />
$cal = &amp;new Calendar($cArray, $today, $links, $css);<br />
$cal-&gt;render();<br />
?&gt; </code></div>
<p>The <code>$cArray</code> is a class containing the array for the plain calendar as shown in step 6. The  <code>$today</code> variable is today&#8217;s date. The <code>$links</code> variable contains the important dates in this month. With the <code>$css</code> variable, we can decorate the calendar table and make it look nicer.</p>
<h2>Adding AJAX Capability</h2>
<p>To make the calendar more user friendly, we want to be able to navigate easily between the months or years without refreshing the page. Thanks to AJAX, we can now do that easily. If the user clicks on &#8220;next month&#8221; for example, we need to call the AJAX function to refresh the calendar without refreshing the page. We do that using XMLHttpRequest. This is the main code that does the trick.</p>
<pre>http.open('get', 'quick_calendar.php?m='+m+&amp;y='+y+'&amp;ran='+ran_no);</pre>
<p>After I get a response from the AJAX function, i need to update the calender. The calendar is wrapped around with the div tag called &#8216;quickCalender&#8217;. I just need to rewrite the contents of the tag on the fly.</p>
<pre>document.getElementById("quickCalender").innerHTML = http.responseText;</pre>
<h2>Conclusion and Future Improvements</h2>
<p>In this tutorial, we went through the concept of how to create a web calendar using AJAX and PHP. I left the details in the code to prevent the tutorial becoming too long and indigestable. If you look at the code hard enough, you will notice that I packed alot of codes in one file. As a good programming practice, I should have broken them down into smaller parts/files. Because the objective of this project is to create a quick &#8220;plug and forget&#8221; calendar system, I did that on purpose.</p>
<p>Also, the object oriented approach I used in the code may not be flexible enough if I want to have different layouts for the calendar. The problem can be easily fixed by using inheritance, ie creating a superclass for the QuickCalendar class. We can then have BrownCalendar, SpecialCalendar &#8230;etc.</p>
<p>Hope you enjoy reading this tutorial as much as I wrote it. The full demo can be seen here and source code is <a href="http://web-developer.sitecritic.net/quick_calendar.txt">here</a>.</p>
</div>
<div id="seo_alrp_related"><h2>Posts Related to Quick Calendar Using AJAX and PHP</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/01/how-to-create-a-calendar-in-php/" rel="bookmark">How to Create a Calendar in PHP</a></h3><p>PHP date functions make it easy to generate calendars on-the-fly. calendar image by Christopher Hall from Fotolia.com // The PHP programming language features date and ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/01/how-to-make-a-php-calendar/" rel="bookmark">How to make a PHP calendar</a></h3><p>In this tutorial you will learn how to build your own web based calendar using PHP. This calendar is made from two parts. On top ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/5-jquery-calendar-plugins-that-can-be-used-on-websites/" rel="bookmark">5 jQuery Calendar Plugins that can be used on Websites</a></h3><p>Online calendars can be very useful to share and publish your schedules. One of the most common requests I receive from my jQuery readers is ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/jquery-week-calendar/" rel="bookmark">jquery-week-calendar</a></h3><p>IMPORTANT – Project status. Page History IMPORTANT – Project status. Due to other commitments, I will no longer be maintaining this project for the foreseeable ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/05/mysql-date-and-time-functions/" rel="bookmark">MySQL Date and Time Functions</a></h3><p>Name Description ADDDATE() Add dates ADDTIME() Add time CONVERT_TZ() Convert from one timezone to another CURDATE() Return the current date CURRENT_DATE(), CURRENT_DATE Synonyms for CURDATE() ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2011/01/quick-calendar-using-ajax-and-php/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to Create a Calendar in PHP</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2011/01/how-to-create-a-calendar-in-php/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2011/01/how-to-create-a-calendar-in-php/#comments</comments>
		<pubDate>Tue, 11 Jan 2011 10:42:15 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[blogs]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Date-Time manipulation]]></category>
		<category><![CDATA[Home]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[Interview Question]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[mysql]]></category>
		<category><![CDATA[Others]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[Php interview question]]></category>
		<category><![CDATA[Electrical and Telephone Services Here. Compare Up to 4 Quotes]]></category>
		<category><![CDATA[Find Computer]]></category>
		<category><![CDATA[Free Service & No Obligation. Read more: How to Create a Calendar in PHP | eHow.com http://www.ehow.com/how_6201748_create-calendar-php.html#ixzz1Aiq05xEk]]></category>
		<category><![CDATA[ph calendar]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/?p=996</guid>
		<description><![CDATA[PHP date functions make it easy to generate calendars on-the-fly. calendar image by Christopher Hall from Fotolia.com // The PHP programming language features date and time functions that simplify creating a monthly calendar. The &#8220;date()&#8221; function returns a formatted date, or parts of a date, for a given UNIX timestamp. The &#8220;mktime()&#8221; function returns a [...]]]></description>
			<content:encoded><![CDATA[<div><img title="PHP date functions make it easy to generate calendars on-the-fly." src="http://i.ehow.com/images/a05/t8/ck/create-calendar-php-200X200.jpg" alt="PHP date functions make it easy to generate calendars on-the-fly." /></p>
<div id="nointelliTXT">PHP date functions make it easy to generate calendars on-the-fly.</div>
<div>
<div id="jsArticleIntroImageCredit">
<div id="nointelliTXT">calendar image by Christopher Hall from Fotolia.com</div>
</div>
</div>
<p><script type="text/javascript">// <![CDATA[
						jQuery(document).ready(function(){
							jQuery('.intro .thumbnail a:first').attr('href','http://i.ehow.com/images/a05/t8/ck/create-calendar-php-800X800.jpg');
						});
// ]]&gt;</script></div>
<div><!-- google_ad_section_start() --></p>
<p id="intelliTxt">The PHP programming language features date and time functions that simplify creating a monthly calendar. The &#8220;date()&#8221; function returns a formatted date, or parts of a date, for a given UNIX timestamp. The &#8220;mktime()&#8221; function returns a Unix timestamp for a given date and time. By combining the two, you can retrieve the name of the month, the first and last days of the month, and other useful values for printing your calendar. Create a basic calendar, then build on it to customize it for your needs.</p>
<h2>Instructions</h2>
<p><!-- google_ad_section_start() --></p>
<div>
<h2>Things You&#8217;ll Need:</h2>
<ul>
<li> PHP code editor or text editor</li>
</ul>
</div>
<ol id="intelliTxt">
<li id="jsArticleStep1">
<div>1</div>
<p>Start your calendar code by setting the default timezone for your area. This will ensure the current month and today are displayed correctly.</p>
<p>&lt;?php<br />
date_default_timezone_set(&#8216;America/Denver&#8217;) ;</li>
<li id="jsArticleStep2">
<div>2</div>
<p>Check the script&#8217;s $_REQUEST array to see if the &#8220;month&#8221; and &#8220;year&#8221; variables were set. If not, set them to today&#8217;s values and assign to variables named $month and $year.</p>
<p>if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date(&#8220;n&#8221;);<br />
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date(&#8220;Y&#8221;);<br />
$month = $_REQUEST["month"];<br />
$year = $_REQUEST["year"];</p>
<p>date(&#8220;n&#8221;) returns the numerical month, and date(&#8220;Y&#8221;) returns the four digit year. See the &#8220;PHP Manual: date&#8221; documentation linked in the References section for a full list of formatting string characters.</li>
<li id="jsArticleStep3">
<div>3</div>
<p>Generate a timestamp, using mktime(), for the first day of the provided month and year. Set the time parameters to &#8220;0.&#8221; The time is not necessary for printing a calendar.</p>
<p>$timestamp = mktime(0, 0, 0, $month, 1, $year) ;</li>
<li id="jsArticleStep4">
<div>4</div>
<p>Create variables to hold the name of the month ($monthtxt), the numerical last day of the month ($lastday), and the numerical day of the week the first day of the month falls on ($firstdow, where Sunday is &#8220;0&#8243;).</p>
<p>$monthtxt = date(&#8220;F&#8221;, $timestamp) ;<br />
$lastday = date(&#8220;t&#8221;, $timestamp) ;<br />
$firstdow = date(&#8220;w&#8221;, $timestamp) ;<br />
?&gt;</li>
<li id="jsArticleStep5">
<div>5</div>
<p>Create the calendar header, printing the month ($monthtxt) and year ($year) above a table with seven columns topped with day-of-the-week column headers.</p>
<p>&lt;h2&gt;<br />
&lt;?php echo $monthtxt ?&gt;<br />
&lt;?php echo $year ?&gt;<br />
&lt;/h2&gt;</p>
<p>&lt;table&gt;<br />
&lt;tr&gt;<br />
&lt;th&gt;S&lt;/th&gt;<br />
&lt;th&gt;M&lt;/th&gt;<br />
&lt;th&gt;T&lt;/th&gt;<br />
&lt;th&gt;W&lt;/th&gt;<br />
&lt;th&gt;T&lt;/th&gt;<br />
&lt;th&gt;F&lt;/th&gt;<br />
&lt;th&gt;S&lt;/th&gt;<br />
&lt;/tr&gt;</li>
<li id="jsArticleStep6">
<div>6</div>
<p>Start a for loop to step through each table cell in the calendar. The value $d will count through the number of table cells from the upper left cell (&#8220;0&#8243;) of the table through the cell containing the last day of the month ($lastday + $firstdow &#8211; 1).</p>
<p>&lt;?php<br />
for ($d = 0 ; $d &lt; ($lastday + $firstdow) ; $d++) {</li>
<li id="jsArticleStep7">
<div>7</div>
<p>Calculate the day of the month being printed into the table.</p>
<p>$curday = $d &#8211; $firstdow + 1 ;</li>
<li id="jsArticleStep8">
<div>8</div>
<p>Start a new table row if the current count lands on the first table column. $d % 7 returns the remainder of $d / 7. When $d % 7 is 0, the count is on the &#8220;Sunday&#8221; column.</p>
<p>if (($d % 7) == 0) echo &#8220;&lt;tr&gt;\n&#8221; ;</li>
<li id="jsArticleStep9">
<div>9</div>
<p>Print the table cell. When $d has counted up to the first table cell containing a valid day of the month, it will print the value for that day in the table cell.</p>
<p>echo &#8220;&lt;td&gt;&#8221; ;<br />
if ($d &gt;= $firstdow) echo $curday ;<br />
echo &#8220;&lt;/td&gt;\n&#8221; ;</li>
<li id="jsArticleStep10">
<div>10</div>
<p>End the table row if the current count lands on the last table column. When $d % 7 is 6, the count is on the &#8220;Saturday&#8221; column.</p>
<p>if (($d % 7) == 6) echo &#8220;&lt;/tr&gt;\n&#8221; ;</li>
<li id="jsArticleStep11">
<div>11</div>
<p>End the for loop, PHP container, and the table.</p>
<p>}<br />
?&gt;<br />
&lt;/table&gt;</li>
<li id="jsArticleStep12">
<div>12</div>
<p>Try out your PHP script. Call it with the month and year to print a calendar for a specific month (for example, http://yoursite.com/calendar.php?month=2&amp;year=2008).</li>
</ol>
<div>
<a href="http://www.ehow.com/how_6201748_create-calendar-php.html#ixzz1AipuTICY"><br />
</a></div>
</div>
<p><a href="http://www.ehow.com/how_6201748_create-calendar-php.html#ixzz1Aipmfos2"></a></p>
<div id="seo_alrp_related"><h2>Posts Related to How to Create a Calendar in PHP</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/01/how-to-make-a-php-calendar/" rel="bookmark">How to make a PHP calendar</a></h3><p>In this tutorial you will learn how to build your own web based calendar using PHP. This calendar is made from two parts. On top ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/01/quick-calendar-using-ajax-and-php/" rel="bookmark">Quick Calendar Using AJAX and PHP</a></h3><p>Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/05/mysql-date-and-time-functions/" rel="bookmark">MySQL Date and Time Functions</a></h3><p>Name Description ADDDATE() Add dates ADDTIME() Add time CONVERT_TZ() Convert from one timezone to another CURDATE() Return the current date CURRENT_DATE(), CURRENT_DATE Synonyms for CURDATE() ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/05/php-date-functions-list/" rel="bookmark">PHP Date Functions List</a></h3><p>checkdate — Validate a gregorian date date — Format a local time/date getdate — Get date/time information gettimeofday — Get current time gmdate — Format ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/jquery-week-calendar/" rel="bookmark">jquery-week-calendar</a></h3><p>IMPORTANT – Project status. Page History IMPORTANT – Project status. Due to other commitments, I will no longer be maintaining this project for the foreseeable ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2011/01/how-to-create-a-calendar-in-php/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Prevent Your CSS and JavaScript Files From Being Cached</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2010/11/prevent-your-css-and-javascript-files-from-being-cached/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2010/11/prevent-your-css-and-javascript-files-from-being-cached/#comments</comments>
		<pubDate>Tue, 30 Nov 2010 17:23:48 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Home]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Others]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/?p=932</guid>
		<description><![CDATA[Some websites use highly volatile, oft-changing CSS and JavaScript files. In the case of these files, it&#8217;s important that the developer prevent browsers from caching them. How do we do that? By using a phantom querystring, of course. We&#8217;ll use PHP to tack the current time onto the file reference. The PHP &#60;link href=&#8221;/stylesheet.css?&#60;?php echo [...]]]></description>
			<content:encoded><![CDATA[<div>Some websites use highly volatile, oft-changing CSS and JavaScript files. In the case of these files, it&#8217;s important that the developer prevent browsers from caching them. How do we do that? By using a phantom querystring, of course. We&#8217;ll use PHP to tack the current time onto the file reference.</div>
<p><a name="more"></a></p>
<h2>The PHP</h2>
<div>
<div>&lt;link href=&#8221;/stylesheet.css?&lt;?php echo time(); ?&gt;&#8221; rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; /&amp;glt;</div>
<div>&lt;&#8211; RENDERS &#8211;&gt;</div>
<div>&lt;link href=&#8221;/stylesheet.css?1234567890&#8243; rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; /&amp;glt;</div>
<div>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;/site-script.js?&lt;?php echo time(); ?&gt;&#8221;&gt;&lt;/script&gt;</div>
<div>&lt;&#8211; RENDERS &#8211;&gt;</div>
<div>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;/site-script.js?1234567890&#8243;&gt;&lt;/script&gt;</div>
<div>It&#8217;s a very simple technique and doesn&#8217;t affect your CSS or JavaScript code in any way.</div>
</div>
<div id="seo_alrp_related"><h2>Posts Related to Prevent Your CSS and JavaScript Files From Being Cached</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/11/uploading-largebig-files-in-php-using-htaccess-2/" rel="bookmark">Uploading large(big) files in PHP using .htaccess</a></h3><p>I’ve seen that many of my friends are struggling with the uploads of the bigger or larger files in PHP. After looking at their struggle, ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/04/collection-of-robots-txt-files/" rel="bookmark">Collection of Robots.txt Files</a></h3><p>The implementation of a suitable robots.txt file is very important for search engine optimization. There is plenty of advice around the Internet for the creation ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/03/how-to-pass-javascript-variable-to-php/" rel="bookmark">how to Pass javascript variable to PHP</a></h3><p>There is lots of way to pass the php script data in javascript like simply echoing php varible in PHP. Yes you can simply echo ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-work-with-directories-in-php/" rel="bookmark">how to work with Directories in php</a></h3><p>As is necessary for any language, PHP has a complete set of directory support functions. PHP gives you a variety of functions to read and ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/11/6-reasons-to-use-javascript-libraries-frameworks/" rel="bookmark">6 Reasons To Use JavaScript Libraries &#038; Frameworks</a></h3><p>I've seen many articles around the internet from JavaScript fundamentalists that advocate writing your own JavaScript code instead of using JavaScript frameworks like MooTools, Prototype / Scriptaculous,jQuery, MochiKit, YUI Library, ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2010/11/prevent-your-css-and-javascript-files-from-being-cached/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Top Floating message box using jQuery</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2010/11/top-floating-message-box-using-jquery-2/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2010/11/top-floating-message-box-using-jquery-2/#comments</comments>
		<pubDate>Wed, 10 Nov 2010 04:20:25 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[Home]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Others]]></category>
		<category><![CDATA[tips and technique]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[message box]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/?p=837</guid>
		<description><![CDATA[I’ve shown you how to create a alert box using jQuery. This time, I’ve come up with another tutorial to show you how to display floating message box in the top of  the browser using jQuery. The message box always get displayed at the top of the browser although you move across the document with [...]]]></description>
			<content:encoded><![CDATA[<p>I’ve shown you how to create a alert box using jQuery. This time, I’ve come up with another tutorial to show you how to display floating message box in the top of  the browser using jQuery. The message box always get displayed at the top of the browser although you move across the document with help of scroll bar. Now, let’s kick out this tutorial for creating floating message box using jQuery.</p>
<p>LIVE DEMO</p>
<h4>HTML code for floating message box using jQuery</h4>
<pre>&lt;div id="message_box"&gt;
    &lt;img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" /&gt;
    The floating message goes here
&lt;/div&gt;
&lt;div&gt;
  ..............
  other content goes here
  ..................
&lt;/div&gt;</pre>
<p>The message box which is going to float in the top of the browser is inside the div with id “message-box” and this div is defined with the class “cornerbox”. And the small image with id “close_message” to close the message box and is displayed in the right hand side by setting the float attribute of CSS to right .</p>
<h4>CSS code for floating message box using jQuery</h4>
<pre>#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}</pre>
<p>You can see that CSS code for the floating message box is straightforward and you can change the color , size etc. according to your choice. But keep in mind that, “position” property must be absolute so that this message box doesn’t distract the other boxes and “z-index” must be set higher so that the it overlaps the other content of the web page.</p>
<h4>jQuery code for floating message box</h4>
<pre>&lt;script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js"&gt;&lt;/script&gt;</pre>
<p>You must notice that I’ve used jquery 1.2.6 in this example as dimension plugin of jquery is embedded in the this version of jQuery. If you use the lesser version of jQuery than 1.2.6 then must use the dimension plugin of jQuery to use this example.</p>
<pre>//scroll the message box to the top offset of browser's scrool bar
$(window).scroll(function()
{
  $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});</pre>
<p>As you can when the window gets scrolled this function is called and the box gets moved as the “top” property of message box is set to different pixel using scrollTop() function, which had been the part dimension plugin of jQuery. This function return the scroll top offset of the matched element and in our example this return the scroll top offeset of the browser’s window. Another thing you must notice in the animate function that queue is set to false which makes the animation to skip the queue and begins running immediately otherwise the animation may stuck in the queue and looks ugly.</p>
<pre>//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
  //the messagebox gets scrool down with top property and gets hidden with zero opacity
  $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});</pre>
<p>It is the simple animation when the image with close sign is clicked, the message box slides down below and gets hidden because its opacity set to zero in the animation function.</p>
<p><a href="http://roshanbh.com.np/codes/floating-message-jquery.zip" target="_blank">DOWNLOAD FULL SOURCE CODE </a></p>
<div id="seo_alrp_related"><h2>Posts Related to Top Floating message box using jQuery</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/03/top-floating-message-box-using-jquery/" rel="bookmark">Top Floating message box using jQuery</a></h3><p>Last time, I</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/08/textbox-to-accept-only-numbers-digits-using-jquery-2/" rel="bookmark">Textbox to accept only numbers (digits) using jquery</a></h3><p>Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/03/how-to-display-pop-up-message-on-mouse-clicked-position-using-jquery/" rel="bookmark">How to display pop-up message on mouse clicked position using jQuery</a></h3><p>Yesterday, my friend rajesh asked me how can we get the mouse clicked position and display the pop-up message in that mouse clicked position using ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/generic-error-message-in-an-ajax-call-using-jquery/" rel="bookmark">Generic Error Message in an Ajax call using jQuery</a></h3><p>The jquery $.ajaxSetup() allows you to set default values for future Ajax requests. Here’s how to use this function to set a default generic error ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/customize-the-display-of-error-messages-while-using-the-jquery-validation-plugin/" rel="bookmark">Customize the Display of Error Messages while using the jQuery Validation Plugin</a></h3><p>Here’s a simple way to customize the placement of the error labels while using the jQuery Validation Plugin. We will display the error message in ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2010/11/top-floating-message-box-using-jquery-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>all Post of ajax javascript php magento jquery and all web developement related tutorials</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2010/11/all-post-of-ajax-javascript-php-magento-jquery-and-all-web-developemen-related-tutorial/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2010/11/all-post-of-ajax-javascript-php-magento-jquery-and-all-web-developemen-related-tutorial/#comments</comments>
		<pubDate>Tue, 09 Nov 2010 18:17:53 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[ABCpayments]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[Ajax interview question]]></category>
		<category><![CDATA[Authorize.net]]></category>
		<category><![CDATA[blogs]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[cakephp]]></category>
		<category><![CDATA[cakephp interview question]]></category>
		<category><![CDATA[CCAvenue]]></category>
		<category><![CDATA[Citibank-Payment gateway]]></category>
		<category><![CDATA[coding technique]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[cURL PHP]]></category>
		<category><![CDATA[Date-Time manipulation]]></category>
		<category><![CDATA[Drupal]]></category>
		<category><![CDATA[drupal interview question]]></category>
		<category><![CDATA[EBS Payment Gateway]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[General interview technique]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[Google Checkout]]></category>
		<category><![CDATA[HDFC Payment Gateway]]></category>
		<category><![CDATA[Home]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[HR interview question]]></category>
		<category><![CDATA[htaccess]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[humor]]></category>
		<category><![CDATA[Innovative Gateway]]></category>
		<category><![CDATA[Interview Question]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Joomla]]></category>
		<category><![CDATA[joomla interview question]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Magento]]></category>
		<category><![CDATA[magento interview question]]></category>
		<category><![CDATA[Mambo]]></category>
		<category><![CDATA[mysql]]></category>
		<category><![CDATA[mysql interview question]]></category>
		<category><![CDATA[Nochex Payment Gateway]]></category>
		<category><![CDATA[OPENX]]></category>
		<category><![CDATA[Os-Commerce]]></category>
		<category><![CDATA[oscommerce interview question]]></category>
		<category><![CDATA[Others]]></category>
		<category><![CDATA[Payment Gateway]]></category>
		<category><![CDATA[Paypal]]></category>
		<category><![CDATA[PEAR PHP]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php attack]]></category>
		<category><![CDATA[PHP Graph Generation]]></category>
		<category><![CDATA[Php interview question]]></category>
		<category><![CDATA[PHP Third Party Tools]]></category>
		<category><![CDATA[PHPBB]]></category>
		<category><![CDATA[PHPList]]></category>
		<category><![CDATA[Poll & Competetion]]></category>
		<category><![CDATA[PSBill Payment Gateway]]></category>
		<category><![CDATA[seo]]></category>
		<category><![CDATA[Smarty]]></category>
		<category><![CDATA[Symfony]]></category>
		<category><![CDATA[Tapestry Script]]></category>
		<category><![CDATA[tips and technique]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[Typo3]]></category>
		<category><![CDATA[Web Security]]></category>
		<category><![CDATA[web services]]></category>
		<category><![CDATA[website review]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[WP Plugins]]></category>
		<category><![CDATA[ZEND Framework]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/?p=834</guid>
		<description><![CDATA[Sleek and Smooth animated menu using jQuery by Bagesh singh 1 person liked this Today, I’m going to show you something interesting with jQuery. Yesterday I was thinking something to post something programming related stuff  in blog after long time and I came across a website, whose menu impressed me a lot. But checking it [...]]]></description>
			<content:encoded><![CDATA[<p>Sleek and Smooth animated menu using jQuery</p>
<p>by Bagesh singh</p>
<p>1 person liked this</p>
<p>Today, I’m going to show you something interesting with jQuery. Yesterday I was thinking something to post something programming related stuff  in blog after long time and I came across a website, whose menu impressed me a lot. But checking it in a while, I found it it was built using mootools.  Since it was in mootools, I thought of replicating it in jQuery. I have two example of similar menu, first using jQuery core and CSS and another uses jQuery easing plugin to give bounce effect to the same menu.And I’ve added one more example which I though would be nice menu to show you guys.</p>
<p>VIEW DEMO</p>
<p>First of let me start, with the images which i’ve used in the background to create the first two menus.</p>
<p>and</p>
<p>Please note that the please keep the left image as big as possible if you’re menu text can be long.</p>
<p>Now, let’s look at the html code</p>
<p>Html code for the animated jquery menu</p>
<p>&lt;ul&gt;</p>
<p>&lt;li class=&#8221;first&#8221;&gt;&lt;a href=&#8221;#&#8221;&gt;Home&lt;/a&gt;&lt;/li&gt;</p>
<p>&lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Portfolio&lt;/a&gt;&lt;/li&gt;</p>
<p>&lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;About us&lt;/a&gt;&lt;/li&gt;</p>
<p>&lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;</p>
<p>&lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Blog&lt;/a&gt;&lt;/li&gt;</p>
<p>&lt;li class=&#8221;last&#8221;&gt;&lt;a href=&#8221;#&#8221;&gt;Tutorials&lt;/a&gt;&lt;/li&gt;</p>
<p>&lt;li class=&#8221;bg&#8221;&gt;&lt;div&gt;&lt;/div&gt;&lt;/li&gt;</p>
<p>&lt;/ul&gt;</p>
<p>All the list elements are fairly simple and the list with class “bg” is the one which holds the background image for the menu. The code is same for the first and second example but for the third example we use list with class ybg instead of bg.</p>
<p>&lt;li class=&#8221;ybg&#8221;&gt;&lt;/li&gt;</p>
<p>CSS code for the smooth jQuery menu</p>
<p>ul.nav { list-style:none;  overflow:hidden;  }</p>
<p>ul.nav li { float:left; height:39px; background-color:#000;  padding:0 5px;  }</p>
<p>ul.nav li.first {</p>
<p>-moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;</p>
<p>-moz-border-radius-bottomleft:9px;  -webkit-border-bottom-left-radius:9px;</p>
<p>}</p>
<p>ul.nav li.last {</p>
<p>-moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px;</p>
<p>-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;</p>
<p>}</p>
<p>ul.nav li.bg {</p>
<p>margin:7px 0px 0px 3px; padding-right:8px; position:absolute;</p>
<p>z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top;</p>
<p>}</p>
<p>ul.nav li .left { background:url(bg.png) no-repeat left top; height:39px;  }</p>
<p>ul.nav li a {</p>
<p>padding:8px 20px;  color:#FFF; font-size:18px; font-weight:bold; display:block;</p>
<p>text-decoration:none; z-index:100; position:relative;</p>
<p>}</p>
<p>ul.nav li.ybg {</p>
<p>background-color:#FB0; position:absolute; z-index:50;</p>
<p>left:165px; width:55px; height:4px; margin-top:6px;</p>
<p>}</p>
<p>As you can see there, I’ve used CSS3 rounded corners for the first and last elements of list(obviously doesn’t work IE). Furthermore, the list with class bg is used for the first and second menu examples where the image is used in the background and which moves around on mouse hover on menu with sleek effect. Please note that this list must be positioned absolutely.</p>
<p>The ybg class is used for the background effect for the third menu in the example, which first moves to the menu which has current mouse position and then starts sliding down.</p>
<p>After this, let’s get into jQuery code for providing the sleek effect for the hover menu.</p>
<p>jQuery code for animation in the  on menu</p>
<p>$(&#8216;#nav1 li a&#8217;).hover(function()</p>
<p>{</p>
<p>var offset=$(this).offset();</p>
<p>var thiswidth =$(this).width()+13;</p>
<p>$(&#8216;#nav1 li.bg&#8217;).stop().animate({left:offset.left+&#8221;px&#8221;,width:thiswidth+&#8221;px&#8221;},600);</p>
<p>},</p>
<p>function()</p>
<p>{</p>
<p>$(&#8216;#nav1 li.bg&#8217;).stop().animate({left:&#8221;155px&#8221;,width:&#8221;60px&#8221;},600);</p>
<p>});</p>
<p>The above is the code for the first menu. You can see that on the hover effect of anchor, first we’ve calculated the offset of menu and also width of the anchor element. Then, finally used animate function of jQuery to move the menu and increse the width of the background to create the nice and sleek effect.</p>
<p>As you can see the second function of hover menu, which is called when mouse is released from the anchor, just reset back the menu to it’s original position.</p>
<p>The code is exactly same for the second menu except the following line,</p>
<p>$(&#8216;#nav3 li.bg&#8217;).stop().animate({left:&#8221;155px&#8221;,width:&#8221;60px&#8221;},600,&#8217;easeOutBounce&#8217;);</p>
<p>You can see the difference easily where I’ve used easeOutBounce easing effect for the bounce out effect when mouse is released form the menu.</p>
<p>$(&#8216;#nav2 li a&#8217;).hover(function()</p>
<p>{</p>
<p>var offset=$(this).offset();</p>
<p>var thiswidth =$(this).width()+13;</p>
<p>$(&#8216;#nav2 li.ybg&#8217;).stop().animate({left:offset.left+9+&#8221;px&#8221;,width:thiswidth+&#8221;px&#8221;},400,function(){</p>
<p>$(this).animate({height:&#8221;28px&#8221;},150);</p>
<p>});</p>
<p>},</p>
<p>function()</p>
<p>{</p>
<p>$(&#8216;#nav2 li.ybg&#8217;).stop().animate({height:&#8221;4px&#8221;},150,function(){</p>
<p>$(this).animate({left:&#8221;165px&#8221;,width:&#8221;55px&#8221;},600,&#8217;easeOutBounce&#8217;);</p>
<p>});</p>
<p>});</p>
<p>And you can see in the above code of the third menu, first of all the menu gets slided to the current position of menu and then the height of the background gets increased to 28px, giving a nice effect. And when mouse is released from the menu, the same things happens but in the reverse order.</p>
<p>DOWNLOAD SOURCE CODE</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 26, 2009 5:55 PM</p>
<p>Back to blogging after 7 months</p>
<p>by Bagesh singh</p>
<p>1 person liked this</p>
<p>Hello friends, I’m extremely sorry for being away for a long time from this blog. I was missing this blog a lot but due to many circumstances I hadn’t had time to update this blog. There were many things happened to my life. But Finally, I’m back to the track and will start updating this blog regularly.</p>
<p>What I’ve been doing??</p>
<p>First of all, let me tell you one thing, I’ve been a married man now so there are a lot of responsibilities ahead for me. On the other hand, I’d been in Bangalore for last six months working for a start-up company there. And Finally, I’ve moved back to Kathmandu  and started a joint venture with Haico Duisters called Proshore Nepal. It is a Dutch-Nepali company, which has a head office in the Netherlands and  development office in Kathmandu.</p>
<p>Apart from personal stuffs,  let’s talk about technical stuffs.</p>
<p>I’ve written 5 series of articles about web widgets, how to create them and use them on Packt Publishing . You can check those articles here.</p>
<p>Development of Web Widget &#8211; Introductory article</p>
<p>Developing a wiki-seek Widget (a widget to search in wikipedia.org)</p>
<p>Pop-up Image Widget – a widget to show the pop-up image on mouse over event</p>
<p>RSS Web Widget -  A widget to display the titles with link from specified RSS feed</p>
<p>Delicious Tagometer Widget – A widget to display Tagometer from delicious.com</p>
<p>Furthermore, this blog has also been considered as a 10 Interesting PHP blogs by AjaxLine.A great thank to them for considering this blog to that level.</p>
<p>What’s Next??</p>
<p>Well in the last six months, I’ve been contacted by many people asking what happened to you,  when you’ll start updating your blog etc. First of all, I would like to thanks those people who has much interest to this blog.  My plan will be to post 2 or 3 articles a week and I’ll be focusing more on the quality than quantity in upcoming days.</p>
<p>If you really want to be in touch with me then you can follow me on twitter where I post useful web development related stuffs which I find on the web. Believe me, I don’t post stuffs like what I’m eating now, what i had for breakfast and what I’ll be having for dinner and when I’ll be heading for the dinner.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 15, 2008 3:00 AM</p>
<p>Some of Confusing English</p>
<p>by Bagesh singh</p>
<p>Sorry friends for irregularity.I’m back to Sunday Fun after after a two weeks break.Here goes the Sunday fun of today taking some rest from  programming. Today I’m going to talk about English language. It’s become one of the most essential language for me and hope for many people as well. But here are some of CONFUSING ENGLISH terms that makes me headache, would u help me?</p>
<p>1. If Fed Ex and UPS were to merge, would they call it Fed UP?</p>
<p>2. Do Lipton Tea employees take coffee breaks?</p>
<p>3. If olive oil comes from olives, where does baby oil come from?</p>
<p>4. If people from Poland are called Poles, why aren’t people from Holland called Holes?</p>
<p>5. Do infants enjoy infancy as much as adults enjoy adultery?</p>
<p>6. Why the man who invests all your money called a broker?</p>
<p>7. If horrific means to make horrible, does terrific mean to make terrible?</p>
<p>8. Why is it called building when it is already built?</p>
<p>9. If a book about failures doesn’t sell, is it a success?</p>
<p>10. If you’re not supposed to drink and drive, then why do bars have parking lots?</p>
<p>11. If you take an Oriental person and spin him around several times, does he become disoriented?</p>
<p>12. If vegetarians eat vegetables, what do humanitarians eat?? Human ??</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 12, 2008 5:07 AM</p>
<p>CodeIgniter : A recommendation for PHP Programmer</p>
<p>by Bagesh singh</p>
<p>I was thinking to publish this post way before but between my irregularity and busy schedule I couldn’t do that. Today, I would like to tell you that Why I choose CodeIgniter for my current project and recommend it for other programmers? I’ve used CakePHP for my one previous project in which I’ve used the version 1.1.7 of Cake. I must admit that CakePHP is a great MVC framework with but there are many performance issues in the related to CakePHP and I decided not to use it until the final version of 1.2.0 of CakePHP which is still in RC phase while writing this post.</p>
<p>Why I recommend PHP Programmers to use CodeIgniter?</p>
<p>Yes I’ve decided to use it along with this I’ve asked my programmer friends out there in office to use it. You’re wondering why I choose CodeIgniter rather than using Zend Framework, which add more values in PHP programmer’s career.Let’ me answer them all in the reasons below.</p>
<p>The main issue which I got attracted with CodeIgniter is its performance. CodeIgniter is faster than other popular PHP MVC frameworks. Take a look at these Benchmark test done by Rasmus Lerdorf(creator of PHP programming), here , here in here. And also take a look at another benchmark test . So it’s clear that CI is faster than other Framework. Rasmus also told that he liked CodeIgniter because it is faster, lighter and the least like a framework.</p>
<p>Another main reason behind recommendation, it has very low learning curve. CodeIgniter Downloads come with a tremendous user guide which is a great documentation like PHP Manual to begin with. And from my personal experience, CodeIgniter has very low learning curve compared to CakePHP and Zend Framework. If you’re a beginner for PHP frameworks then I recommend to go with CodeIgniter at begining.</p>
<p>The coding conventions are flexible and simple. Ironically, CakePHP has very strict coding conventions so you must be very careful about cases of characters while coding.</p>
<p>Why not Zend Framework and why CodeIgniter? Ok, one question goes here what is so good about Zend Framwork ? Eventual answer is ZF contain huge set of libraries and classes compared to any other framework. OK I agree, but another great news is that You can use Zend Framework’s classes in the CodeIgniter using hooks in CI. So you can use huge amount of Zend’s libraried in CI as well.</p>
<p>These are the main reason why I recommend for using CodeIgniter for PHP programmers.But I still believe that I’ll be using CakePHP for once I get final version of 1.2.0 because I still believe that it is robust,  has a  great design patters and great tool for group development .</p>
<p>If you recommend any other PHP framework, please let us know why you recomment that framework.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 4, 2008 12:25 AM</p>
<p>Win free service worth $417 from fecoding.com</p>
<p>by Bagesh singh</p>
<p>Today, I would like to announce another competition in this blog and this time the price will be high than the previous competition which was held before two month. At that time, the winning price was worth $29 but this time it is $417.Thanks to Steve Rodrigue for holding this competition.</p>
<p>This competition is announced by fecoding.com and here are the rules and prizes for this competition.</p>
<p>Prizes :</p>
<p>There will be three winners of this contest.</p>
<p>The winner will be chosen from random.org.</p>
<p>The winner will get free PSD to XHTML/CSS services from fecoding.com , each PSD to XHTML/CSS worth $139 so total prize of competition will be $417.</p>
<p>How to enter into the competetion?</p>
<p>Just subscribe to RSS feed of this blog with email address and post a comment with the same email address.</p>
<p>The winner will be chosen from the comments number for example if the numbers(which will be taken from random.org) 1, 3, 11 means that the winner will be the person posting  first, third and eleventh person to post the comment will be the winner.</p>
<p>The first winner will be chose from first three people who post the comments using random.org and the rest will be chosen randomly from total commentators.</p>
<p>So friends, don’t be late be the first three people to post the comment and Subscribe to RSS feed via Email.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 3, 2008 12:47 AM</p>
<p>How did I reduce CPU overhead problem caused by MySql?</p>
<p>by Bagesh singh</p>
<p>From last day, We were having problem with a project which was shut down in the middle due to heavy traffic. As a technical manager, I was the person who to take charge over the project bring it down to the track. After doing few benchmark test, I came to know that the MySql access from a PHP file was creating the overhead to the CPU of the server.</p>
<p>Problem of CPU Overhead with MySql</p>
<p>Let me explain the problem clearly first,</p>
<p>We’re working on a website which was similar to http://www.swoopo.co.uk/ and as you can see clearly in that website the most recent data should be fetched form MySql database in each second. in the PHP page, which was being called from Ajax every second, had around 5 SQL queries to retrieve data from server.</p>
<p>First of all, I optimized that page reducing the 5 queries into single query by using left outer joins among 3 tables. And then, I did benchmark test by using Apache benchmark tool(ab) 50 request with concurrency of 50 with the following command.</p>
<p>ab -n 50 -c 50 http://xyz.com/ajax_page.php</p>
<p>And then in another SSH shell prompt, I run the top command to view the CPU usages parallelly.</p>
<p>I was still horrified that the CPU usages by mysql after 50 concurrent user was going out of control(100%) despite of optimized query. But many joins have been used in that single query and lots of data were there in those tables so the database overhead was high even though it was a single query.</p>
<p>How did I reduced the CPU overload drastically caused by MySql?</p>
<p>Now, the first challenge was to reduce the database access. It was clear that it was caused by concurrent database overhead in the PHP page which was being called in every second. Here is the simple steps what I did to reduce the database overhead.</p>
<p>I created another PHP file in which I’ve transferred the mysql query causing CPU overhead and called it from Cronjob.</p>
<p>Created a temporary table for storing the output given by PHP page called from CronJob.</p>
<p>Then, I scheduled the CronJob in every second, don’t tell me that CronJob can’t be run less than a minute, take a look at this post before saying this.And from each call, the output data was stored in the temporary table.</p>
<p>And, finally from the Ajax the a new PHP page was called which was only accessing the data from temporary table with single row.</p>
<p>I did the same benchmarking again to the newly made page(which is accessing data only from temporary table) and saw that CPU usages after the this process reduced drastically.</p>
<p>I know I can further reduce the CPU overhead by storing the temporary data in a text file. You guyz know that I’m lazy so that part is left for another day.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Nov 26, 2008 3:34 PM</p>
<p>Urgently upgrade your wordpress to version 2.6.5</p>
<p>by Bagesh singh</p>
<p>Today, I was working on the on backend of this blog for the more customization of the new theme which I’ve just installed in the blog, I got a message in backend saying that wordpress 2.6.5 is available upgrade now. It is the urgent security released by WordPress and if you’re running a WordPress powered blog then upgrade it to version 2.6.5. It is a XSS exploit discovered in the 2.6.5 release.</p>
<p>If you are not a programmer or tech savvy person, and worried about possible damage to upgrade of files then don’t worry there is a great plugin of wordpress for doing this which is developed by techiebuzz.  This wordpress automatic upgrade plugin is damn good and I’m using it for updating the version of this blog. I upgraded the wordpress in just two minutes just following few instruction given by this plugin.</p>
<p>So friends don’t be late before somebody started exploiting your wordpress blog , upgrade it now.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Nov 26, 2008 5:34 AM</p>
<p>Bagesh singhbh.com.np got a new look….</p>
<p>by Bagesh singh</p>
<p>It was a long run and I’ve waited for this moment. As the information  and post was growing, I always wanted to change the previous theme of this blog and today finally the moment has come. Here goes the new theme of this blog. Please let me know what do  you think about this theme. Which one is better this one or previous one ?</p>
<p>I would like to hear the honest response from you guyz and let me know any feedback and Improvement I’ve to do if there is any. Here is the some of the feeback from my twitter friend quickly after changing the theme.</p>
<p>Hope to hear some honest comment from you.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Nov 23, 2008 12:48 PM</p>
<p>Height of various stuffs in IT peoples…</p>
<p>by Bagesh singh</p>
<p>Another weekend, time to take break form coding stuffs and enjoy the holiday with some fun.So If you’re a regular reader then you might have remembered that I just try to post something funny in the Sunday, taking break from coding stuffs.Today, I’ve come up with the height of stuffs in the IT peoples hope you will like it.read on and enjoy…</p>
<p>HEIGHT OF ISOLATION:</p>
<p>Two persons sitting side by side using emails to communicate with each other.</p>
<p>HEIGHT OF HELPLESSNESS:</p>
<p>Receiving no emails for a week.</p>
<p>HEIGHT OF COWARDICE:</p>
<p>Two persons fighting through emails.</p>
<p>HEIGHT OF CARELESSNESS:</p>
<p>Writing a love mail and doing a ‘Send All.’</p>
<p>HEIGHT OF FRUSTRATION:</p>
<p>The email server being down.</p>
<p>HEIGHT OF TIMEPASS:</p>
<p>A person sending email to himself</p>
<p>HEIGHT OF REPETITION:</p>
<p>Forwarding an email to someone and receiving the same email forwarded back to you By some one in the receiving chain.</p>
<p>HEIGHT OF BROWSING:</p>
<p>U r swimming in the water tank and shout ‘F1 F1 F1 ‘ instead of shouting ‘HELP’ when u are unable to swim…</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Nov 22, 2008 1:21 AM</p>
<p>Get the book “The Art &amp; Science of CSS” at free of cost</p>
<p>by Bagesh singh</p>
<p>Are you a web developer ? Are you a web designer? The you must not leave this offer. I don’t know weather you know about this offer or not. Sitepoint is giving the book The Art &amp; Science of CSS at free of cost. I think you’re might interested in getting this book, just follow the simple instruction and that great book will be yours.</p>
<p>Here is the steps you’ve to do to get that book at free of cost…</p>
<p>1) Follow sitepointdotcom at twitter and they will send you the direct message to you at twitter.</p>
<p>OR</p>
<p>2) If  you don’t have twitter account the, go here  http://twitaway..com/ and enter your email address. They will send you the download link of that book in your email address.</p>
<p>If you have twitter account then follow me on twitter @Bagesh singhbh. We can stay in touch to share our experiences.Believe me twitter is great place for sharing messages.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Nov 17, 2008 4:47 PM</p>
<p>PHP Framworks !! Why , when and which ?</p>
<p>by Bagesh singh</p>
<p>Well!! I know it’s been a long time, but what to do so many things to do and I’m having hard time to maintain this blog these days.Hope I will be regular like I was before. Today, I’m going to talk about some of the popular MVC PHP frameworks. A few people has asked me what is CakePHP, or What is CodeIgniter? How to to use them ? When to use them ? Today, I’m going to talk about PHP frameworks which I’ve used. Please note that the choice of choosing a framework is personal preference and the statement and this post is not going to say that this framework is better than this framework.</p>
<p>What are the benefits of using MVC PHP frameworks ?</p>
<p>Well there are many benefits of using PHP frameworks, let’s see some of the main benefits of using them.</p>
<p>They PHP frameworks follows some design pattern, so when you use these framework you’ve to follow their coding convention which makes your code clean and extensible for future purpose.</p>
<p>The Popular PHP frameworks like CakePHP, CodeIgniter, Zend Framework , Symfony follows Model View Controller(MVC) design pattern which separates business logic from user interface making the code cleaner and extensible.</p>
<p>As everybody can guess, these frameworks contains a lot of libraries to make your job easier. For example, to validate a from you don’t have write much code as you’ve to in normal coding scenario, just few lines of code calling the library might be enough for it.</p>
<p>While working on a large project in a team, these MVC PHP framework will be a great tool for development as you can assign a developer to develop MVC part of a module for a developer and integration will be quite easy of these developed module at final level.</p>
<p>These MVC framework will really helps you to develop the project rapidly, if you know one framework well then you’ll never worry about the project deadline.</p>
<p>Most of these MVC frameworks uses clear url approach making your web project SEO friendly.</p>
<p>Furthermore, if you want charge money to visitors who download or access content of your website then this software is highly useful.</p>
<p>What are disadvantage of using MVC PHP frameworks?</p>
<p>A coin has two parts similarly a bright stuff always have dark part as well .</p>
<p>Different framework have different coding convention, Depending upon the the framework, you’ll have to learn coding convention for the framework you want to follow. So depending upon the framework, it might to struggle at the beginning.</p>
<p>While coding using these framework, sometime you’ll not find any library or helpers which might be useful for you so you’ll have to struggle bit at that time.</p>
<p>If you don’t have OOP experience then PHP MVC framework are not you. First build a solid knowledge of OOP with PHP then only think about choosing any framework.</p>
<p>PHP frameworks are not for the small projects from my point of view, because in a very simple project custom coding will work faster than setting up a framework.</p>
<p>Which framework should I choose?</p>
<p>This is the one of the most discussed question about the PHP framworks. So it depends upon particular person and project which framework will best suit for you. But depending upon my experience, I can show you some way to choose the framework.</p>
<p>If you’re just want to use MVC framework for your next project, then I suggest you to go for CodeIgniter. It is very easy to learn and well-documented.Furthermore, it’s very flexible because it is not so strict on naming conventions etc. Furthermore, Model is optional while coding in codeIgniter so it is not necessary to use model for each controllers.</p>
<p>If you’re coding architecture savvy, then I suggest you to go with CakePHP, probably the most popular PHP framework but I must admit. This framework’s coding style is similar to Ruby on Rails and naming conventions are strict in this framework.So if you’re working on a huge project in a team then this project will be the right choice for you.</p>
<p>If you’ve to use a lot web services external APIs in your project then Zend Framework will be right choice for you, it contains huge libraries for external APIs compared to any other PHP MVC framework. The main benefits of this framework is that you can use them as components(without using MVC) in your project or you can follow Zend framework’s MVC architecture to develop your project. The other benefits of this framework is that you can use it inside any of the above two MVC frameworks. And, this framework one of the most favourite of people when I conducted the poll for the best PHP framework ?</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Nov 2, 2008 5:43 PM</p>
<p>Cool out of Office Auto Replies</p>
<p>by Bagesh singh</p>
<p>I know I’ve been much irregular these days and what to do I’m going through some busy schedule these days. Sorry for that but today I’m here with another fun post of Sunday. I think the auto responders I’ve posted here are very useful if you’re going for holiday and looking for the best auto responder for the holiday then I recommend to use any of the auto replies of below.</p>
<p>1. I am currently out at a job interview and will reply to you if I fail to get the position. Be prepared for my mood.</p>
<p>2. You are receiving this automatic notification because I am out of the office.</p>
<p>If I was in, chances are you wouldn’t have received anything at all.</p>
<p>3. I will be unable to delete all the unread, worthless emails you send me until I return From holiday on 4 April. Please be patient and your mail will be deleted in the order It was received .</p>
<p>4. Thank you for your email. Your credit card has been charged Â£5.99 for the first ten Words and Â£1.99 for each additional word in your message.</p>
<p>5. The e-mail server is unable to verify your server connection and is unable to deliver This message. Please restart your computer and try sending again.</p>
<p>6. Thank you for your message, which has been added to a queuing system…</p>
<p>You are Currently in 352nd place, and can expect to receive a reply in approximately 13 weeks.</p>
<p>7. I’ve run away to join a different circus.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Oct 26, 2008 5:37 PM</p>
<p>How to ralax in office ?</p>
<p>by Bagesh singh</p>
<p>1 person liked this</p>
<p>Sorry friends….I couldn’t post the doze for sunday in past two weeks. But I’m with with the sunday fun again this week. Everybody knows that Sunday is fun-day and developers don’t want to go through coding on this day. Now, take a look a picture below and you’ll get idea what to do when you get bored at your office tomorrow so enjoy …</p>
<p>This is how not-tech people survives a day in office.</p>
<p>But this the way tech people survives a day in office!!!!</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Oct 26, 2008 7:13 AM</p>
<p>Model File upload overlay box using jQuery and Thickbox</p>
<p>by Bagesh singh</p>
<p>Few times back, sNare asked me how do display wordpress like overlay box where you can pass the variables when you click on the link and manipulate simultaneous actions in the overlay until user choose to close it. Today, I’ve come up with the solution of this with model upload overlay box using thickbox, a jquery plugin. I’ve used the Iframe content of thickbox while displaying the box as modal box.</p>
<p>LIVE DEMO</p>
<p>How to use the thickbox as modal overlay box?</p>
<p>Let’s look at the step by step to use thickbox for passing variables.</p>
<p>First of all, we have to include jQuery JavaScript Library to our page,</p>
<p>&lt;script src=&#8221;jquery.js&#8221;&gt;&lt;/script&gt;</p>
<p>After this, include the thickbox plugin of jQuery,</p>
<p>&lt;script src=&#8221;thickbox-compressed.js&#8221;&gt;&lt;/script&gt;</p>
<p>There is a CSS for using thickbox which also need to linked to the current page,</p>
<p>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;thickbox.css&#8221; media=&#8221;screen&#8221; /&gt;</p>
<p>Now, let’s look at the anchor tag which passes the variables to overlay box and keep the overlay at top no matter how many simultaneous accesses occur in the box.</p>
<p>&lt;a href=&#8221;file_upload.php?post_id=5&amp;TB_iframe=true&amp;height=200&amp;width=300&amp;modal=true&#8221; class=&#8221;thickbox&#8221; &gt;&lt;strong&gt;Upload Files&lt;/strong&gt;&lt;/a&gt;</p>
<p>If you want to know how to use the thickbox, then you can checkout their home page which contains good documentation. The main point is, class=’thickbox’ must be used for the displaying the content in overlay.</p>
<p>How to pass variables to overlay box (thickbox)?</p>
<p>If you look at the href attribute of anchor tag, you can see clearly that I’ve passed post_id variable with value 5 to file_upload.php, which can be easily fetched from PHP using $_GET['post_id'].</p>
<p>How to make overlay box stay opened on simultaneous access?</p>
<p>Now this is part which many people has asked me how to do it. To use thickbox in this fashion, you’ve to use it in iframe content mode.The following property of thickbox make it remained open on simultaneous access,</p>
<p>TB_iframe=true</p>
<p>Furthermore, We’ve used the following property to display the overlay box as modal box.</p>
<p>modal=true</p>
<p>DOWNLOAD SOURCE CODE</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Oct 22, 2008 5:14 PM</p>
<p>Opencrypt: A useful memembership management Software</p>
<p>by Bagesh singh</p>
<p>Today, I would like to talk about OpenCrypt, a useful membership software which has impressed me a lot at the first glance with it’s features. If you go through their online demonstration page you will see how this software works. If you’re building a website based on membership then you can consider using this software in your project for security and robustness which is built using Perl and PHP.</p>
<p>Why membership software is needed?</p>
<p>As the name specifies, if you are building a website which may have different members like free members, paid members (such as monthly subscription) etc. Furthermore, if you want to allow access to certain content to paid members and block access for free members to these areas then this software is very useful for security and flexibility.</p>
<p>Furthermore, if you want charge money to visitors who download or access your website content then this software is highly useful.</p>
<p>Features of OpenCrypt</p>
<p>Here are some of the main features of the OpenCrypt membership software:</p>
<p>1) Manage membership subscriptions and member’s areas</p>
<p>2) Automated membership renewal and billing system</p>
<p>3) Intregrated shopping cart</p>
<p>4) In built point system and download manager for allowing you to charge for accessing your content and downloads.</p>
<p>5) Template based front-end for easy customization.</p>
<p>6) Helpdesk, article management and affiliate systems.</p>
<p>These are the main feature of this software. For full feature detail you can check their membership software features page.</p>
<p>But one small suggestion, when I logged in inside the user management area there was still the link for login which I think should not have been there if a user is logged in. Please take this as my suggestion part.</p>
<p>But overall, this software has impressed me a lot while looking at their online demonstration and I’ll suggest you to give this software a try if your website is mainly focused on the membership subscriptions.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Oct 21, 2008 12:50 AM</p>
<p>jQuery plugin: word-counter for textarea</p>
<p>by Bagesh singh</p>
<p>Sorry friends on the way of move to new home I’ve been lost from the blog as I didn’t have internet connection for few last weeks. Now, I’m back and I try to be regular as much as I can. Inspired from the new feature of wordpress 2.6.x which displays word count of each post, I’ve developed jQuery plugin to display word-count of Textarea. Please note that it is word count plugin not character counter.</p>
<p>LIVE DEMO</p>
<p>Jquery plugin: Word-count code</p>
<p>jQuery.fn.wordCount = function(params)</p>
<p>{</p>
<p>var p =  {</p>
<p>counterElement:&#8221;display_count&#8221;</p>
<p>};</p>
<p>var total_words;</p>
<p>if(params) {</p>
<p>jQuery.extend(p, params);</p>
<p>}</p>
<p>//for each keypress function on text areas</p>
<p>this.keypress(function()</p>
<p>{</p>
<p>total_words=this.value.split(/[s.?]+/).length;</p>
<p>jQuery(&#8216;#&#8217;+p.counterElement).html(total_words);</p>
<p>});</p>
<p>};</p>
<p>VIEW PLUGIN’S CODE</p>
<p>As you can in the above code, I assume that each words of a paragraph are separated by the either spaces or dots(.) . Please have your suggestion if i can more characters to improve this plugin.</p>
<p>How to use this plugin?</p>
<p>Well, you can guess that a Textarea is needed of whose words are counted and another element like div or span needed to display the word count.</p>
<p>For example, the below HTML code contains Textarea (whose total word is counted) and span (for displaying counted word).</p>
<p>&lt;textarea id=&#8221;word_count&#8221; cols=&#8221;30&#8243; rows=&#8221;6&#8243;&gt;&lt;/textarea&gt;</p>
<p>Total word Count : &lt;span id=&#8221;display_count&#8221;&gt;0&lt;/span&gt;</p>
<p>Remember that the id of text area is “word_count” and “display_count“.</p>
<p>Now, let look at the jQuery code for displaying word count of text area , note that we are calling the function wordCount() which we’ve just developed in the plugin of jQuery.</p>
<p>$(&#8216;#word_count&#8217;).wordCount();</p>
<p>Note: display_count  is default id of element which is already defined in the plugin if you want to use the different id of elment then you’ve to override the value of variable counterElement which contains the id of element displaying word count.</p>
<p>$(&#8216;#word_count&#8217;).wordCount({counterElement:&#8221;word_counter&#8221;});</p>
<p>DOWNLOAD EXAMPLE CODE</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Oct 6, 2008 2:00 AM</p>
<p>Characteristics of experienced programmer</p>
<p>by Bagesh singh</p>
<p>hello guyz….I’m shifting to new home so I will not be able to post for few days as I’ve to get another internet connection in new place and connect it but I’ve not forgotten to post the special dose of Sunday to make you laugh. In this post, I’m going to tell you some characteristics of experienced programmer. After reading this post, please let me know weather you fall within this category or not?</p>
<p>When you are counting objects, you go like “0,1,2,3,4,5, 6,7,8,9,A, B,C,D…” .</p>
<p>When asked about a bus schedule, you wonder if it is 16 or 32 bits.</p>
<p>When your wife says “If you don’t turn off that darn machine and come to bed,then I am going to divorce you!”, and you chastise her for for omitting the else clause.</p>
<p>When you are reading a book and look for the space bar to get to the next page.</p>
<p>When you look for your car keys using: “grep keys /dev/pockets”</p>
<p>When after fooling around all day with routers etc, you pick up the phone and start dialing an IP number.</p>
<p>When you get in the elevator and double-press the button for the floor you want.</p>
<p>When not only do you check your email more often than your paper mail, but you remember your {network address} faster than your postal one.</p>
<p>When you go to balance your checkbook and discover that you’re doing the math in octal.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Oct 4, 2008 11:43 PM</p>
<p>Creating and Parsing JSON data with PHP</p>
<p>by Bagesh singh</p>
<p>Yesterday, I was in a party and a guy came near to me and asked me what is JSON and how can handle it via PHP. Today, I’m going to tell you something about JSON data and how we can handle them via PHP. Although, JSON stands JavaScript Object Notation, it is used by many other technologies like PHP and Java for data interchange format over the Internet.</p>
<p>What is JSON?</p>
<p>JSON is ultra-weight data interchange data format used over the internet for transferring the data. While XML is a dominant data interchange format over the internet but JSON is less complex and light-weight data.</p>
<p>Though it was first made to be used with JavaScript for accessing remote data, it is now used by many other languages because JSON data is platform independent data format.</p>
<p>Data Types and Example of JSON data</p>
<p>JSON supports various kind of data types which included numbers, strings, booleans as well as array datas and obviously object (collection of key:value pairs, comma-separated and enclosed in curly brackets).</p>
<p>Now, let’s look at the example of simple format of JSON data for a detail of a employee,</p>
<p>{&#8220;id&#8221;:&#8221;1&#8243;,&#8221;name&#8221;:&#8221;mike&#8221;,&#8221;country&#8221;:&#8221;usa&#8221;,&#8221;office&#8221;:["microsoft","oracle"]}</p>
<p>Creating and Parsing JSON data format in PHP</p>
<p>To handle JSON data there is JSON extension in PHP which is aviable after PHP 5.2.0. Two funcitons : json_encode() and json_decode() are very useful converting and parsing JSON data through PHP.</p>
<p>First of all, let’s look at the PHP code to create the JSON data format of above example using array of PHP.</p>
<p>$json_data = array (&#8216;id&#8217;=&gt;1,&#8217;name&#8217;=&gt;&#8221;mike&#8221;,&#8217;country&#8217;=&gt;&#8217;usa&#8217;,&#8221;office&#8221;=&gt;array(&#8220;microsoft&#8221;,&#8221;oracle&#8221;));</p>
<p>echo json_encode($json_data);</p>
<p>The above code generates the JSON data exactly as above. Now, let’s decode above JSON data in PHP.</p>
<p>$json_string=&#8217;{&#8220;id&#8221;:1,&#8221;name&#8221;:&#8221;mike&#8221;,&#8221;country&#8221;:&#8221;usa&#8221;,&#8221;office&#8221;:["microsoft","oracle"]} &#8216;;</p>
<p>$obj=json_decode($json_string);</p>
<p>Now, the $obj variable contains JSON data parsed in PHP object which you can display using code below.</p>
<p>echo $obj-&gt;name; //displays mike</p>
<p>echo $obj-&gt;office[0]; //displays microsoft</p>
<p>As you can guess,$obj-&gt;office is an array and you can loop through it using foreach loop of PHP,</p>
<p>foreach($obj-&gt;office as $val)</p>
<p>echo $val;</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Oct 2, 2008 11:30 PM</p>
<p>Modules and Server required for video sharing websites</p>
<p>by Bagesh singh</p>
<p>Few days back, I was discussing about projects with a chat friend and I’ve informed him that we’re working on the video emailing project where users upload the video and it will be converted into .flv format before storing in the server for minimizing file size. Then he shoot me bunch of questions, What is required for this in PHP ? What kind of server is required ? and which server should I choose?</p>
<p>What kind of server and modules are required for video projects?</p>
<p>If you want to built a video sharing website then you must have FFMPEG module should be installed in your web server.Then you can use script like PHPMotion to make a Youtube like video sharing website.</p>
<p>Another question is What kind of server is required ? The answer is either go for Dedicated server-a completely user owned server or go for Virtual Private Server (VPS). In VPS, server’s resources like CPU, memory are partitioned among the various users and making each part like a private server which makes VPS. In VPS, you’ll have complete access your part of machine and you can access root folder using SSH.You can also restart the server , CPU of which is partitioned to you.</p>
<p>If you are wondering which server to choose then I recommend you to choose VPS Server for video sharing website as It is very cheap compared to dedicated server.</p>
<p>Which web hosting provider should I choose?</p>
<p>You must know that most of the web hosting providers don’t have FFMPEG installed in their server.If you don’t know any FFMPEG hosting then I would recommend you to check out hostv.com .They have FFMPEG enabled VPS Hosting which means you will not have much hassle for installing FFMPEG. Furthermore, they also have Red5 ,open source flash sever,pre-installed in their VPS Hosting for making video sharing website more robust.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 30, 2008 6:41 PM</p>
<p>Getting random number between range of two numbers in JavaScript</p>
<p>by Bagesh singh</p>
<p>Yesterday, Steve asked me how can we have random number function in JavaScript like rand() function of PHP where the programmer can specify the range of two numbers within which we need the random number. Today, I’m going to share two functions in JavaScript, In first function , you can specify the number and the function generate the random number between 1 and N. In another JavaScript function, you can specify range of two numbers between which you’ve to get a random number. Furthermore, there is optional last parameter in these function for decimal places, if provided, will return the random number with the decimal places specified in the third parameter.</p>
<p>Getting random number in JavaScript</p>
<p>Getting random number is very easy you can use JavaScript function random() of Math object to get the random number between 0 and 1. For example, above JavaScript statement returns a random number between 0 and 1.</p>
<p>alert(Math.random()); // returns number like 0.3871769046200184</p>
<p>JavaScript function to get random number between 1 and N</p>
<p>//function to get random number from 1 to n</p>
<p>function randomToN(maxVal,floatVal)</p>
<p>{</p>
<p>var randVal = Math.random()*maxVal;</p>
<p>return typeof floatVal==&#8217;undefined&#8217;?Math.round(randVal):randVal.toFixed(floatVal);</p>
<p>}</p>
<p>As, you can see in the above JavaScript function, there are two parameters. One for the maximum value(N) up to which random number have to be generated. The second parameter is optional which specifies number of digits after decimal point.If not provided, this function returns integer.</p>
<p>JavaScript function to get random number between a range</p>
<p>//function to get random number upto m</p>
<p>function randomXToY(minVal,maxVal,floatVal)</p>
<p>{</p>
<p>var randVal = minVal+(Math.random()*(maxVal-minVal));</p>
<p>return typeof floatVal==&#8217;undefined&#8217;?Math.round(randVal):randVal.toFixed(floatVal);</p>
<p>}</p>
<p>The above JavaScript funciton accepts three parameters.The first and second parameter is mandatory while the third is optional. The first and second parameter specifies the range between which the random number has to be generated. The thir parameter is optional which specifies number of floating point digits, if not provided, the above JavaScript function returns integer random number.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 28, 2008 10:40 AM</p>
<p>Diplomatic statements from Project Mangers</p>
<p>by Bagesh singh</p>
<p>Today is the Sunday and as you know I always take break from the coding in the weekend and try to make you laugh as much as I can.  This week I’ve come up with another diplomatic sentences spoken by the Project Managers peoples. Read the hidden meaning of actual sentences below and analyze what your project managers means to say if they will speak any of the below sentences.</p>
<p>1.”We will do it” means “You will do it”</p>
<p>2.”You have done a great job” means “More work to be given to you”</p>
<p>3.”We are working on it” means “We have not yet started working on the same”</p>
<p>4.”Tomorrow first thing in the morning” means “Its not getting done “At least not tomorrow!”</p>
<p>5.”After discussion we will decide-I am very open to views” means “I have already decided, I will tell you what to do”</p>
<p>6.”There was a slight miscommunication” means “We had actually lied”</p>
<p>7.”Lets call a meeting and discuss” means “I have no time now, will talk later”</p>
<p>8.”We can always do it” means “We actually cannot do the same on time”</p>
<p>9.”We are on the right track but there needs to be a slight extension of the deadline” means “The project is screwed up, we cannot deliver on time.”</p>
<p>10.”We had slight differences of opinion “means “We had actually fought”</p>
<p>11.”Make a list of the work that you do and let’s see how I can help you” means “Anyway you have to find a way out no help from me”</p>
<p>12.”You should have told me earlier” means “Well even if you told me earlier that would have made hardly any difference!”</p>
<p>13.”We need to find out the real reason” means “Well I will tell you where your fault is”</p>
<p>14.”Well Family is important; your leave is always granted. Just ensure that the work is not affected,” means, “Well first finish your work first then whatever you do I don’t give damn…”</p>
<p>15.”We are a team,” means, “I am not the only one to be blamed”</p>
<p>16.”That’s actually a good question” means “I do not know anything about it”</p>
<p>17.”All the Best” means “You are in trouble”</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 28, 2008 10:00 AM</p>
<p>Google PageRank Update…This blog is PR6 now</p>
<p>by Bagesh singh</p>
<p>Sorry sorry sorry………..I’m very very sorry that I couldn’t be regular in last week. I’m very very sorry for this as I was very busy with a project. But yesterday morning as I’ve opened this blog and see that unusual stat in the Google toolbar and it showed Google PageRank-6. I thought I was the stat of some other website.</p>
<p>But today morning again, I’ve opened the website and it was PR6 then I’ve checked the stat with prchecker.info the it was confirmed that it’s PR6 now. This blog had PR5 before this PR update.</p>
<p>What about urs blog ? PR is decreased or increased ?</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 23, 2008 5:36 PM</p>
<p>6 free ajax chat applications using PHP</p>
<p>by Bagesh singh</p>
<p>While talking about chat application, these days people hate those kind application made in PHP which need page refreshing. In this post, I’ll show you six different free Ajax chat applications which might be very useful if you’ve to use Ajax based chat application. Depending upon the requirement of your chat application, you can use them. I might have missed another good Ajax based chat application, if you find any the please post it to the comments.</p>
<p>Ajax Chat from http://blueimp.net</p>
<p>A powerful Ajax chat application with a lot of features at free of cost. Customize the layout and Use it in your project.</p>
<p>Ajax- IM</p>
<p>It is not a only a chat application, it is a instant messenger that’s why it is named as Ajax-IM. Very useful for implementing in community based websites.</p>
<p>PHPfreeChat</p>
<p>Another great Ajax chat application build in PHP.Very easy to customize and use. You can even create rooms for chatting as well.</p>
<p>Chatr</p>
<p>Another simple ajax chat application with limited functionality built in PHP.</p>
<p>Ajax chat from Ajax-chat.org</p>
<p>Very simple, lightweight and easy to use another Ajax chat application built in PHP.</p>
<p>Ajax chat from Blogoscopted</p>
<p>Fancy and avatar based ajax chat application built in PHP. As you can see in the above image, it looks like you’re really inside a chat room for chtting.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 21, 2008 12:31 PM</p>
<p>Very Cool CV…</p>
<p>by Bagesh singh</p>
<p>Another Sunday and time to take break from coding, programming and all. Today, I got a really interesting email from a Indian friend of mine and a CV was attached with that email. I don’t know who has made this COOL CV but what I think you should really make a CV like this and use it for future purpose and do let me know the response from the new employer  .</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 18, 2008 12:04 PM</p>
<p>Table row manipulation using jQuery JavaScript</p>
<p>by Bagesh singh</p>
<p>In a jQuery tutorial, I’ve shown how to display different color in alternate row of table using jQuery. This time I’ve come up with advanced version of same tutorial where you can add different color in alternate row of table whereas you can display a different color when mouse moves over each row of table furthermore you can assign a different color to table row when mouse is clicked in the table row.</p>
<p>View Live Demo</p>
<p>HTML code for table row filtering using jQuery</p>
<p>&lt;table border=&#8221;0&#8243; width=&#8221;40%&#8221;&gt;</p>
<p>&lt;tr&gt;&lt;td&gt;Michael&lt;/td&gt;&lt;td&gt;21&lt;/td&gt;&lt;/tr&gt;</p>
<p>&lt;tr&gt;&lt;td&gt;Sam&lt;/td&gt;&lt;td&gt;22&lt;/td&gt;&lt;/tr&gt;</p>
<p>&lt;/table&gt;</p>
<p>As you can see there is nothing special in the above code where I’ve defined a table with id “mytable”.</p>
<p>CSS code for table row manipulation</p>
<p>.oddtr</p>
<p>{</p>
<p>background-color:#EFF1F1;</p>
<p>}</p>
<p>.eventr</p>
<p>{</p>
<p>background-color:#F8F8F8;</p>
<p>}</p>
<p>.trover</p>
<p>{</p>
<p>background-color: #0099CC;</p>
<p>}</p>
<p>.trclick</p>
<p>{</p>
<p>background-color: #00CCCC;</p>
<p>}</p>
<p>As you can above code, I’ve defined four different classes with four different color. oddtr for coloring the odd row of table, similarly eventr for even row of table then trover class for displaying different color when mouse moves over the table row i.e on mouse over event. Finally, trclick class for displaying different color of the row when mouse is clicked in the table row. Note that you can change these colors according to your choice.</p>
<p>jQuery’s JavaScript code for table row manipulation</p>
<p>//these two line adds the color to each different row</p>
<p>$(&#8220;#mytable tr:even&#8221;).addClass(&#8220;eventr&#8221;);;</p>
<p>$(&#8220;#mytable tr:odd&#8221;).addClass(&#8220;oddtr&#8221;);;</p>
<p>//handle the mouseover , mouseout and click event</p>
<p>$(&#8220;#mytable tr&#8221;).mouseover(function() {$(this).addClass(&#8220;trover&#8221;);}).mouseout(function() {$(this).removeClass(&#8220;trover&#8221;);}).click(function() {$(this).toggleClass(&#8220;trclick&#8221;);});</p>
<p>The first two line of jQuery adds two differnt classes to the alternate rows of  table with id “mytable“. The last line of jQuery acts for three differnt on the table row. When mouse is moved over the table row trover class is added to that table row. When mouse moves away form that table row trover class is removed from that particular row and finally when mouse is clicked on tha particular row it toggles the class trclick on that particular row.</p>
<p>Download Full Source Code</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 16, 2008 12:09 AM</p>
<p>A new search engine</p>
<p>by Bagesh singh</p>
<p>Which search engine do you use for searching the stuff you’re looking for? I know the answer and I don’t think I’ve to tell you or write the answer out here. But today, I’m going to talk about a new search engine I’ve came across, RankNoodle.com &#8211; define itself as a human powered search. But I didn’t understand what is the reason behind their saying of Human Powered Search &#8211; it must be the rating system in the search result but I’m still not clear with this term yet. I tried to look at the answer of my question in different section of this website but couldn’t find the answer. When I went to their about us page, I didn’t find anything. I think they need to update their about us page and explain us clearly about them so that each visitor come to know the detail of this new search engine.</p>
<p>Search Result from RankNoodle.com</p>
<p>I’ve tried the to the search result of this new search engine. First, I tried the keyword PHP Ajax Blog and thanks to the the search result. This blog is ranked top in the search result and even before the blog of Sitepoint.com. I found one very good thing about this search result, there was list of videos from youtube related to search at the right hand side of the search related page.Unlike many search result of google and yahoo, where you’re going to many pages of search result this search engine showed only one search result page for this keyword and which were quite relevant to keyword.</p>
<p>The most wonderful thing about their search result is the rating system &#8211; you can vote up and down the search result. This feature really have some great benefits where the people can say weather the search result is relevant to search keyword or not. But this feature can be a misleading search result if some company hires people and ask for them to vote up the search result of their website.</p>
<p>I also wanted to look at the result of php developer jobs keyword in RankNoodle.com.I’m really impressed with the search result of this page. I found 5 conversation related to this search keyword and this is really a good feature in this new search engine.Though, I couldn’t found from where I can add the question and answer for this conversation.</p>
<p>Finally, I would I’ve a mixed up feeling for this new search engine. First of all, they have to add more information page where they should describe the features about this search engine. And, they have to really care about the new rating feature in the search result page which can be intruded at any time by malicious user.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 16, 2008 12:03 AM</p>
<p>Solving European characters (Western charset) problem with Ajax and PHP</p>
<p>by Bagesh singh</p>
<p>Today, I would like to tell you how to handle character set problem which occurs during the data fetched from PHP using Ajax mainly on the western characters(European charset).Lots of people asked me about this problem where these European charset is displayed in unreadable format after fetching it from ajax.</p>
<p>Problem with European Charset with Ajax and PHP</p>
<p>Suppose that I’ve the following code in PHP file, which output the string which contain the european characters.</p>
<p>&lt;?php</p>
<p>$str=&#8221;€-accentuée&#8221;;</p>
<p>echo $str;</p>
<p>?&gt;</p>
<p>Now, let’s use the Ajax from JavaScript using Jquery Code to fetch the data from PHP.</p>
<p>&lt;script&gt;</p>
<p>$(function()</p>
<p>{</p>
<p>$(&#8216;#charsetdiv&#8217;).load(&#8220;test2.php&#8221;);</p>
<p>});</p>
<p>&lt;/script&gt;</p>
<p>&lt;div&gt;&lt;/div&gt;</p>
<p>If you’ve not used jQuery then you might be wondering about the ajax code, you can check the benefits of jquery from this post and download free ebook of jQuery.</p>
<p>After getting value from Ajax, the division with id “charsetdiv”, let’s look at the output.</p>
<p>?-accentu?e</p>
<p>Solving western Character Set problem with Ajax and PHP</p>
<p>The above problem is occurred because of not defining proper charset to these European characters. We can solve this problem by sending the header which define the appropriate Character Set for these characters.Let’s see, how I solve this problem just adding the header which define the charset Windows-1256 &#8211; which support Arabic as well as European characters.</p>
<p>&lt;?php</p>
<p>header(&#8220;Content-Type: text/html; charset=Windows-1256n&#8221;);</p>
<p>$str=&#8221;€-accentuée&#8221;;</p>
<p>echo $str;</p>
<p>?&gt;</p>
<p>After adding that header in PHP, you’ll get the appropriate european characters in your Ajax enabled application.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 14, 2008 10:18 PM</p>
<p>Pain of web developers</p>
<p>by Bagesh singh</p>
<p>Every sunday I post some funny jokes or pictures related to Technology but today I’m going to post a so true video for the Web Developer guyz. A big thanks goes to  Bogdan who sent me the link of this video. I really have to admire this video and have to say thanks to the person who has made this video.This is so true video which tells what many web developer are going through their development process and in their office.</p>
<p>Popout</p>
<p>Are you going through the same pain?</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 11, 2008 2:31 PM</p>
<p>The winner of premium template is ……</p>
<p>by Bagesh singh</p>
<p>Today, I would like to announce the winner of the competition held for a free premium templates from buytemplates.net.And I would like to thanks all the people who has participated in this competition. Although, The participants are not as mush as I’ve expected but this is the first competition I’ve run in this blog. Let me announce the winner of the free premium template from buytemplates.net.</p>
<p>And the winner is</p>
<p>The winner of this competition is : Kamy from http://kamy.ca .</p>
<p>Kamy Please choose the appropriate template from http://buytemplates.net and mail me at bhattaraiBagesh singh[at]yahoo[dot]com .</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 10, 2008 3:59 PM</p>
<p>W3c markup validation and Big websites &#8211; Is it really needed?</p>
<p>by Bagesh singh</p>
<p>Today, I would like to talk about W3C XHTML validation service.This service checks the XHTML of your website and reports you if your web page have any error or warning according to standard of W3C. If you are talking about this website currently you’ll find 74 Errors, 24 warning(s) and frankly I’ve never been bothered about correcting those errors of XHTML because it takes a bit of time and believe me I’m a very lazy boy. In this post, I would like to show you a interesting data of W3C validation among the top rated websites.You’ll be amazed to come to know that they’re also lazy like me  .</p>
<p>W3C XHTML validation of Big website.</p>
<p>I’ve checked the W3C’s XHTML validation among the top 7 wesites rated by ALEXA. You can look at the result below.</p>
<p>As you can see in the above stat, Microsoft’s websites only cared about W3C validation. Other websites are not really worried about this validation. I’m even wondered above stat from Gooogle which don’t have much elements in their home page but a search box and some hyperlinks.</p>
<p>Is XHTML validation really needed in your web page?</p>
<p>I’m not the person who can decide weather the XHTML validation is really needed or not in you web page. But you know web designers spent a lot time for XHTML validations of each page. Do you think it really worth ? Why the big guns website doesn’t follow the W3C standard? Is your website is XHTML valid ? Please share your thought.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 8, 2008 11:39 PM</p>
<p>Solving Floating point number precision lost problem in PHP</p>
<p>by Bagesh singh</p>
<p>The problem of precision lost in floating point number in PHP haunted me for about 10 minutes yesterday but I quickly figured out the problem and solved it as I was aware of this problem. But, I would like to post here it here so that many others PHP programmers, who are not aware with this kind of problem ,get solution easily and don’t get stuck with it.</p>
<p>Calculation problem floating Point number in PHP</p>
<p>First of all, let me show you a small piece of example of the PHP code which I was working on.</p>
<p>$no_of_time=(0.60-0.55)*100;</p>
<p>var_dump($no_of_time); //displays float(5)</p>
<p>for($i=1;$i&lt;=$no_of_time;$i++)</p>
<p>{</p>
<p>echo $i;</p>
<p>}</p>
<p>In the above code,  the line var_dump($no_of_time); displays float(5). Ok, this is a expected result. But what about the loop, which runs just for 4 time. The above loop runs just for four time although var_dump () outputs that it is 5. Yes, it is 5 but with lost precision and that why never ever trust on the regular arithematic calculation with the floating point numbers in PHP. It always gives the wrong result because of the problem of lost precision. You can also see this warning in the PHP’s website.</p>
<p>Solving the problem of floating point precision in PHP</p>
<p>To solve this problem in floating point number, you need the function which calculates and support the calculation of floating point number of any precision. And, I recommend you to use BC Math functions, the binary calculator, of PHP for calculations  of floating point number to prevent yourself from the problem of precision lost. But note down that, these functions always returns calculated output as string.Now, let’s try to solve the problem of above code rewrite it using bcsub and bcmul functions of PHP.</p>
<p>$no_of_time=bcmul(bcsub(0.60,0.55,2),100);</p>
<p>var_dump($no_of_time); //display string(1) &#8220;5&#8243;</p>
<p>for($i=1;$i&lt;=$no_of_time;$i++)</p>
<p>{</p>
<p>echo $i;</p>
<p>}</p>
<p>Now the above, loop runs 5 times without any problem.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 7, 2008 11:43 AM</p>
<p>Examples of different Marketing Terms</p>
<p>by Bagesh singh</p>
<p>As you know in the weekend, I would like to make you guys laugh rather than roaming around the code. So, another Sunday and time for some laugh. These days I’m putting my hands over the Internet Marketing and I was collecting more knowledge of marketing(I’m a science student and very poor in marketing stuffs).Here are the examples of different marketing terms which was given to me by one of my good friend.</p>
<p>1. You see a gorgeous girl at a party. You go up to</p>
<p>her and say: “I am very rich. “Marry me!”</p>
<p>- That’s Direct Marketing…”</p>
<p>2. You’re at a party with a bunch of friends and see a</p>
<p>gorgeous girl. One of your friends goes up to her and pointing at you says: “He’s very rich.”Marry him.”</p>
<p>-That’s Advertising…”</p>
<p>3. You see a gorgeous girl at a party. You go up to</p>
<p>her and get her telephone number. The next day, you</p>
<p>call and say: “Hi, I’m very rich. “Marry me</p>
<p>- That’s Telemarketing…”</p>
<p>4. You’re at a party and see gorgeous girl. You get up</p>
<p>and straighten your tie, you walk up to her and pour</p>
<p>her a drink, you open the door (of the car)”Marry Me?”</p>
<p>- That’s Public Relations…”</p>
<p>5. You’re at a party and see gorgeous girl. She walks</p>
<p>up to you and says:”You are very rich!</p>
<p>“Can you marry ! me?”</p>
<p>- That’s Brand Recognition…”</p>
<p>6. You see a gorgeous girl at a party. You go up to</p>
<p>her and say: “I am very rich. Marry me!” She gives you</p>
<p>a nice hard slap on your face.</p>
<p>- “That’s Customer Feedback…”</p>
<p>7. You see a gorgeous girl at a party. You go up to</p>
<p>her and say: “I am very rich. Marry me!” And she</p>
<p>introduces you to her husband.</p>
<p>- “That’s demand and supply gap…”</p>
<p>8. You see a gorgeous girl at a party. You go up to</p>
<p>her and before you say anything, another person come</p>
<p>and tell her: “I’m rich. Will you marry me?” and she</p>
<p>goes with him</p>
<p>- “That’s competition eating into your market share…”</p>
<p>9. You see a gorgeous girl at a party. You go up to</p>
<p>her and before you say: “I’m rich, Marry me!” your</p>
<p>wife arrives.</p>
<p>- “That’s restriction for entering new markets…”</p>
<p>I was wondering what would the appropriate term for explaining “Affiliate Marketing” using above example. Anybody please!!!</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 5, 2008 6:33 AM</p>
<p>Changing textbox value from dropdown list using Ajax and PHP</p>
<p>by Bagesh singh</p>
<p>Yesterday Tarquin macey asked me how can we change the value of the textbox based using Ajax and PHP based on the changing value of the dropdown list.Today, I’ve come up with a solution from him.In this post, you’ll see how to get the currency code of a country from PHP using Ajax and this currency code will replace the value of textbox each time the dropdown list changes.</p>
<p>View Live Demo</p>
<p>Writing Code for changing textbox value from dropdown list using Ajax and PHP</p>
<p>After looking at the above demo, let’s start writing code for the changing the currency code value in the textbox form Ajax using PHP when you changes the country from the dropdown list.</p>
<p>HTML Code</p>
<p>&lt;select onChange=&#8221;getCurrencyCode(&#8216;find_ccode.php?country=&#8217;+this.value)&#8221;&gt;</p>
<p>&lt;option value=&#8221;"&gt;Select Country&lt;/option&gt;</p>
<p>&lt;option value=&#8221;1&#8243;&gt;USA&lt;/option&gt;</p>
<p>&lt;option value=&#8221;2&#8243;&gt;UK&lt;/option&gt;</p>
<p>&lt;option value=&#8221;3&#8243;&gt;Nepal&lt;/option&gt;</p>
<p>&lt;/select&gt;</p>
<p>&lt;input id=&#8221;cur_code&#8221; &gt;</p>
<p>As you can in the above code, there are two main components one dropdown list whose name is country and contains the list country in it.The JavaScript function getCurrencyCode() is called when user change value in the list. Note down the name and id of textbox which will have the currency code fetched from Ajax.</p>
<p>JavaScript Code for changing textbox value without refreshing the page</p>
<p>function getCurrencyCode(strURL)</p>
<p>{</p>
<p>var req = getXMLHTTP();</p>
<p>if (req)</p>
<p>{</p>
<p>//function to be called when state is changed</p>
<p>req.onreadystatechange = function()</p>
<p>{</p>
<p>//when state is completed i.e 4</p>
<p>if (req.readyState == 4)</p>
<p>{</p>
<p>// only if http status is &#8220;OK&#8221;</p>
<p>if (req.status == 200)</p>
<p>{</p>
<p>document.getElementById(&#8216;cur_code&#8217;).value=req.responseText;</p>
<p>}</p>
<p>else</p>
<p>{</p>
<p>alert(&#8220;There was a problem while using XMLHTTP:n&#8221; + req.statusText);</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>req.open(&#8220;GET&#8221;, strURL, true);</p>
<p>req.send(null);</p>
<p>}</p>
<p>}</p>
<p>In the first line of the above code, the XMLHTTPRequest object is created using getXMLHTTP() function. To look at the the structure of this function, take a look at this old post change the value of dropdown list using Ajax and PHP . After checking the appropriate value of readystate(4 means completed) and status(200 means ok) property of XMLHTTPRequest object, the value of textbox is replaced with the returned value from PHP using Ajax . The response ,which is can be accessed via req.responseText property, is written to textbox via the value property of textbox.</p>
<p>PHP code for changing the value of textbox using Ajax and PHP</p>
<p>&lt;?php</p>
<p>$country=$_REQUEST['country'];</p>
<p>switch($country)</p>
<p>{</p>
<p>case &#8220;1&#8243; :</p>
<p>echo &#8220;USD&#8221;;</p>
<p>break;</p>
<p>case &#8220;2&#8243; :</p>
<p>echo &#8220;GBP&#8221;;</p>
<p>break;</p>
<p>case &#8220;3&#8243; :</p>
<p>echo &#8220;NPR&#8221;;</p>
<p>break;</p>
<p>}</p>
<p>?&gt;</p>
<p>As you can see the above PHP code, it is fairly simple which just print the currency code value according to the name of country. The value which is in the echo statement is going to returned from PHP via Ajax.</p>
<p>Download Full Source Code</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 3, 2008 12:24 AM</p>
<p>Choosing the best among the web hosting providers</p>
<p>by Bagesh singh</p>
<p>You’ll be in a great confusion if you have to buy the service from a new web hosting provider. There are many web hosting providers in the market and you’ve to choose the best among them so that you’ll not be suffered by choosing it. Most of the customers suffers from bad web hosting companies due to their unreliability and lacking of sustainability in the high volume of traffic.So, I always suggest you to compare the features of web hosting providers before buying it.</p>
<p>How to compare and get suitable web hosting provider?</p>
<p>There are many web hosting review and rating websites where you can find the information and review among the good web hosting providers. You can compare the features among the leading hosting providers in market. If you want to find the comparison among the different leading web hosting providers then you can view this web hosting rating website.webhostingratings.com is a new web hosting rating website where they are trying to build one of the biggest web hosting provider guide.</p>
<p>How to find a suitable web hosting plan? The answer of this question is a bit complicated. It depends upon the requirement of you and your websites.For example, if you have a web development company then what kind of web hosting plan will you buy ? My answer would be Reseller Hosting Providers as I can sell the web spaces among my customers where I act like a secondary web hosting provider. You can also buy Shared hosting or Virtual Private hosting(VPS) depending upon your requirement. If you want to know more about them then you can check the web hosting tutorials from webhostingratings.com.</p>
<p>Things you’ve to care about before choosing a web hosting provider</p>
<p>Here are the list of things you have to care about before choosing a web hosting provider.</p>
<p>Web Space &#8211; What is the size of space they are providing at the give cost ? Is is cheaper than others?</p>
<p>Bandwidth &#8211; What is the limitation of bandwidth(data transfer allowed) per month allowed? Is is enough for you per month ? Is it better than the other web hosting providers?</p>
<p>Uptime &#8211; Uptime measure weather the given web hosting provider is reliable or not. For example, 99% uptime tells that you’re going to get hassle for 1 minute in every 100 minute. Is that web hosting provider has the uptime of 99.99% or not?</p>
<p>Awards &#8211; Weather the web hosting providers you’re going to choose has got any web hosting awards for their excellent service or not. This measure also justify their excellency about the service.</p>
<p>These are the most basic things you’ve to look after before choosing the best web hosting provider.So, if you’ve to buy a web hosting provider then I recommend to read the reviews and their features from http://webhostingrating.com .</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Sep 2, 2008 10:27 PM</p>
<p>Force download multiple files in a zip archive using PHP</p>
<p>by Bagesh singh</p>
<p>In this post, I’ll show you how can you download the multiples files in a zip archive using PHP. I’ve made a function in PHP where you’ve to pass the parameters the array of files to be zipped, the second parameter is file name as which zip archive file has to be downloaded and finally the path of files where files to be zipped are located.(assuming that they are all in same folder)</p>
<p>PHP function to download mutiple files in a zip archive</p>
<p>//function to zip and force download the files using PHP</p>
<p>function zipFilesAndDownload($file_names,$archive_file_name,$file_path)</p>
<p>{</p>
<p>//create the object</p>
<p>$zip = new ZipArchive();</p>
<p>//create the file and throw the error if unsuccessful</p>
<p>if ($zip-&gt;open($archive_file_name, ZIPARCHIVE::CREATE )!==TRUE) {</p>
<p>exit(&#8220;cannot open &lt;$archive_file_name&gt;n&#8221;);</p>
<p>}</p>
<p>//add each files of $file_name array to archive</p>
<p>foreach($file_names as $files)</p>
<p>{</p>
<p>$zip-&gt;addFile($file_path.$files,$files);</p>
<p>}</p>
<p>$zip-&gt;close();</p>
<p>//then send the headers to foce download the zip file</p>
<p>header(&#8220;Content-type: application/zip&#8221;);</p>
<p>header(&#8220;Content-Disposition: attachment; filename=$archive_file_name&#8221;);</p>
<p>header(&#8220;Pragma: no-cache&#8221;);</p>
<p>header(&#8220;Expires: 0&#8243;);</p>
<p>readfile(&#8220;$archive_file_name&#8221;);</p>
<p>exit;</p>
<p>}</p>
<p>Download Source code</p>
<p>In the above PHP function, first of all the object of ZipArchive class. Remember that this library is bundled in PHP after the version of PHP 5.2 only.If you’re using the PHP version older than that one then you’ve to get it from PECL extension.</p>
<p>After that, we’ve tried to create the zip arhive with the open() function using the ZIPARCHIVE::CREATE flag.After successfully creating the archive, each files whose names are passed as array are added to zip file using addFile() function of ZipArchive() class.Then, this zip archive is closed using close() function of same class.</p>
<p>And, finally different headers are passed through PHP to force download the newly created zip file.</p>
<p>Example of Using Above PHP function</p>
<p>$file_names=array(&#8216;test.php&#8217;,'test1.txt&#8217;);</p>
<p>$archive_file_name=&#8217;zipped.zip&#8217;;</p>
<p>$file_path=dirname(__FILE__).&#8217;/';</p>
<p>zipFilesAndDownload($file_names,$archive_file_name,$file_path);</p>
<p>The above PHP function call is straighforward and after calling that function you’ll get the zip archive containing mutiple files passed as array in the first parameter of the function.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 31, 2008 3:54 PM</p>
<p>Few Programming Jokes</p>
<p>by Bagesh singh</p>
<p>Another Sunday and time for some laugh. I’ve selected some of the humor related to programming and IT for this weekend. I think they are  fun and will bring some laugh to your face. Enjoy the programming related joke.</p>
<p>Programming &amp; IT related Jokes</p>
<p>A software engineer was smoking in office.</p>
<p>Girl says, Cant you see the warning? “smoking is injurious to health”</p>
<p>the engineer says…….. …</p>
<p>We bother only about Errors not Warnings !!!!</p>
<p>—————————————————————————-</p>
<p>Once a programmer drowned in the sea. Many Marines where at that time on the beach, but the programmer was shouting “F1 F1″ and nobody understood it.</p>
<p>—————————————————————————-</p>
<p>Q. How did the programmer die in the shower?</p>
<p>A. He read the shampoo bottle instructions: Lather. Rinse. Repeat.</p>
<p>—————————————————————————-</p>
<p>Error messages under consideration for Windows Vista</p>
<p>• Smash forehead on keyboard to continue.</p>
<p>• Press any key to continue or any other key to quit.</p>
<p>• BREAKFAST.SYS halted… Cereal port not responding.</p>
<p>• Close your eyes and press escape three times.</p>
<p>• File not found. Should I fake it? (Y/N)</p>
<p>• Runtime Error 6D at 417A:32CF: Incompetent User.</p>
<p>• Enter any 11-digit prime number to continue.</p>
<p>• Bad command or file name! Go stand in the corner.</p>
<p>• Windows message: “Error saving file! Format drive now? (Y/Y)”</p>
<p>• Windows VirusScan 1.0 &#8211; “Windows found: Remove it? (Y/N)”</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 30, 2008 1:41 AM</p>
<p>Get free ebooks of essential PHP and JavaScript tips , tricks &amp; Hacks</p>
<p>by Bagesh singh</p>
<p>As you might know that this blog and tradepub.com are providing free magazines to the reader of this blog. You can check the free magazines and E-book in the free magazines resource of this blog. You can find a collection of great resources of IT knowledge from here. And, today I’m here to highlight the great E-books from sitepoint.com on essential PHP and JavaScript tips , tricks  and other resources.</p>
<p>Free E-book on the essential tips, tricks and hacks of JavaScript and PHP</p>
<p>You can find the great list of resources for the web developer in the list below. You can check them out grab a copy of your E-book right now.</p>
<p>The PHP Anthology: 101 Essential Tips, Tricks &amp; Hacks, 2nd Edition &#8211; Free 207 Page Preview!</p>
<p>The JavaScript Anthology: 101 Essential Tips, Tricks &amp; Hacks &#8211; Free 158 Page Preview</p>
<p>Other resources which are be very useful for the web developer. Do check them out and get a copy of yours.</p>
<p>The Principles Of Project Management &#8211; Free 66 Page Preview!</p>
<p>The ASP.NET 2.0 Anthology: 101 Essential Tips, Tricks &amp; Hacks &#8211; Free 156 Page Preview</p>
<p>Run Your Own Web Server Using Linux &amp; Apache &#8211; Free 191 Page Preview</p>
<p>Remote Replication Best Practices for Oracle 10g using XP Continuous Access</p>
<p>Best Practices for Implementing HP Quality Center Software</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 28, 2008 2:38 AM</p>
<p>Handling array of HTML Form Elements in JavaScript and PHP</p>
<p>by Bagesh singh</p>
<p>Today, I would like to share the way of handling array of HTML FORM elements using JavaScript and PHP.Well, it’s very easy to get the data from the array of HTML form elements in PHP and using them but in JavaScript it’s a bit tricky to handle the array of HTML form elements. I had a hard time to handle them via JavaScript in past thats why I’m posting it here so that people will not have hard time to cope with array of form elements in JavaScript and PHP.</p>
<p>Array of HTML form elements</p>
<p>You can create the array of Form Elements for grouping the similar kind of object or data. The array of elements are very useful in the context where you don’t know how many similar kind of data user have to enter. For example, you have a form where user have to enter his education qualification then you might not know how many of the textboxes are required for a person and in such kind situation you can dynamically generate array of the elements in the form for entering such kind of information.</p>
<p>&lt;input size=&#8221;20&#8243; maxlength=&#8221;40&#8243; /&gt;</p>
<p>&lt;input size=&#8221;20&#8243; maxlength=&#8221;40&#8243; /&gt;</p>
<p>&lt;input size=&#8221;20&#8243; maxlength=&#8221;40&#8243; /&gt;</p>
<p>As you can in the above code, there are array element of textbox defined with the name “education”.Now, let’s see how can we handle them via JavaScript and PHP.</p>
<p>How to handle array of HTML form elements using PHP</p>
<p>If you submit the the the form with the above the array of elements then you can assess it via array of $_POST['education'] in PHP. You can use foreach() loop to access the value of the value of these form elements via PHP.</p>
<p>foreach($_POST['education'] as $key=&gt;$value)</p>
<p>echo $key.&#8217; &#8216;.$value;</p>
<p>Normally, posted variable are contained within the POST array but when you post the array of Form Elements then at that time the values are contained within the array of array i.e within $_POST['education'] in above exmaple.</p>
<p>How to handle array of Form elements using JavaScript</p>
<p>Handling the array of Form element part is a bit tricky. Now, let try to access the values of the above elements using JavaScript. First, let’s store the above object in a JavaScript variable</p>
<p>var mutli_education = document.form_name.elements["education[]&#8220;];</p>
<p>After storing the object in the variable, we can access the individual variables in the following way in JavaScript</p>
<p>for(i=0;i&lt;mutli_education.length;i++)</p>
<p>{</p>
<p>alert(mutli_education[i].value);</p>
<p>}</p>
<p>As you can see, you can get how many elements are there in the array using the lengh property and you can use the value property to get the value of the indivisual element.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 24, 2008 12:10 PM</p>
<p>Using your laptop for various useful works</p>
<p>by Bagesh singh</p>
<p>You can’t imagine how powerful a laptop can be. You’ll be surprised after looking at the Images below. How a laptop can be used for serving various useful and general needs as well. I’m really impressed by their multi-purpose use of their laptop. Do you use your laptop in the same way these guyz are doing?</p>
<p>Using laptop as a Nut Cracker</p>
<p>Using Laptop as a Pillow</p>
<p>Using Laptop in Table Tennis</p>
<p>Using Laptop as a Chair</p>
<p>Aren’t these guyz are amazing ? What about your laptop ? Will you use it for serving the same purpose as seen above?</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 22, 2008 1:04 PM</p>
<p>Win a template worth $29.9 from buytemplates.net at free of cost</p>
<p>by Bagesh singh</p>
<p>Today for the first time, I’m running a competition in this blog. This is the great chance for win a premium templates from buytemplates.net at free of cost.You don’t need to do much hassle for entering inside this competition just subscribe to RSS feed of this blog via e-mail and you’re in. I’ll choose the winner and the lucky winner will get the the template from the buytemplates.net .</p>
<p>Rule for entering the competetion</p>
<p>Subscribe to RSS feed of this blog via e-mail.</p>
<p>After subscribing, leave the comment to this post and please explain a good reson why do you need the template from the buytemplates.net .</p>
<p>Be sure that you leave the comment with the same email address which you’ve used for subscribing the RSS feed otherwise you’ll be disqualified from the competition.</p>
<p>If you’ve already subscribed to RSS feed of this blog via email then leave the comment with the same email address.</p>
<p>So guys don’t waste your time, hurry up and subscribe to RSS feed of this blog. Once I choose the winner he’ll select a template from buytemplates.net and mail me the link then I’ll send the template to him/her.</p>
<p>Short review of buytemplates.net</p>
<p>Buytemplates.net contains the large varieties of quality website templates. These varieties of website templates are divided into various category in their website for user’s convenience.Personally, what I found this website offers the quality template at low cost compared to other similar websites. If you are a flash freak then you can choose large collection of flash templates from their website and buy them.I don’t think you can get such a great quality flash templates in similar website as low as $29.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 20, 2008 4:58 PM</p>
<p>Broadband connection’s speed and my experience</p>
<p>by Bagesh singh</p>
<p>Few days back, I was talking to a friend from Europe and we’re sharing our experience about Internet. I told him that I’m using 64 kbps broadband internet connection at home and he was shocked after hearing that. He even told me that he can’t Imagine life with such a low broadband  Connection. He is using 25-28 mpbs broadband connection at home.Now, it’s time for me to become shocked. As, I don’t know when such kind of high speed broadband connection will be available at Nepal. I hope I’ll be able to use such a great high speed Internet connection at my home at a reasonable price in near future.</p>
<p>Paying for 64kbps and using 800kbps connection</p>
<p>A interesting fact I’m goint to tell you, I use a technique to boost up the speed of Internet connection at my home.I’m not going to reveal the ISP’s name whose broadband Internet connection. Most Interestingly, I usually get the Internet connection of 800kbps at home by using this hack but the normal speed provided by the ISP is 64kbps. Sorry guys I’m also not going to reveal that technique as well otherwise my ISP will fix that hack and I won’t be able to browse at high speed  . Hence, I’m paying for 64kbps speed and using around 800kbps. Thanks to Mandip, one of my neighbour, for introducing this technique to me which really helped me to boost up the broadband speed othewise watching youtube video is just a Imagnitation in the speed of 64kbps.</p>
<p>What I use to check the speed of broadband connection</p>
<p>I’m using the broadband speed test from www.broadband-expert.co.uk to test the speed of broadband Internet Connection. If you have to check the speed of your broadband Internet Connection then you can use this link to check your broadband speed. This website shows both of upload and download speed of your broadband connection.</p>
<p>As, I know there are diversed reader of this blog. Please post the comments to let us know  that what is the speed broadband connection you’re using at your home?</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 19, 2008 3:48 PM</p>
<p>Move an object on mouse wheel scroll event using JavaScript</p>
<p>by Bagesh singh</p>
<p>Today, I’ve come along with another post where you’ll see how to move a object within web page when you scroll the mouse wheel using JavaScript.In this example, when you move the mouse wheel the object i.e div moves upwards or downwards depending upon the scrolling direction the mouse wheel. Now, let’s look at the detail of this tutorial in JavaScript.</p>
<p>View Live Demo</p>
<p>HTML and CSS for object to be scrolled on mouse wheel movement</p>
<p>&lt;div&gt;This block moves as you move mouse wheel.&lt;/div&gt;</p>
<p>As you can see above code, the object which is going to be moved is placed in the division with id object. For the above division, I’ve defined style and you can see the CSS code below. Remember that ,you can change the below CSS code according to your need but remember that the position should be absolute.</p>
<p>#object {</p>
<p>font-weight:bold;</p>
<p>background:yellow;</p>
<p>padding:5px;</p>
<p>width:300px;</p>
<p>position:absolute;</p>
<p>left:500px;</p>
<p>top:200px;</p>
<p>}</p>
<p>JavaScript code for handling mouse scroll event.</p>
<p>window.onload = function()</p>
<p>{</p>
<p>//adding the event listerner for Mozilla</p>
<p>if(window.addEventListener) document.addEventListener(&#8216;DOMMouseScroll&#8217;, moveObject, false);</p>
<p>//for IE/OPERA etc</p>
<p>document.onmousewheel = moveObject;</p>
<p>}</p>
<p>First of all, we need to attach the mouse wheen scroll event to the document.As you can see in the first line of above function, event listner “moveObject” is added to the mouse scroll event in the document for Mozilla browsers and in the second line event handler “moveObject” is called for document.onmousewheel event for browsers like IE and Opera etc.</p>
<p>Now look at the mouse wheel scroll event handler function “moveObject”</p>
<p>function moveObject(event)</p>
<p>{</p>
<p>var delta = 0;</p>
<p>if (!event) event = window.event;</p>
<p>// normalize the delta</p>
<p>if (event.wheelDelta)</p>
<p>{</p>
<p>// IE &amp; Opera</p>
<p>delta = event.wheelDelta / 120;</p>
<p>}</p>
<p>else if (event.detail) // W3C</p>
<p>{</p>
<p>delta = -event.detail / 3;</p>
<p>}</p>
<p>var currPos=document.getElementById(&#8216;object&#8217;).offsetTop;</p>
<p>//calculating the next position of the object</p>
<p>currPos=parseInt(currPos)+(delta*10);</p>
<p>//moving the position of the object</p>
<p>document.getElementById(&#8216;object&#8217;).style.top=currPos+&#8221;px&#8221;;</p>
<p>}</p>
<p>As you can see in the above function first the scrolling delta value is calculated. The delta variable holds the value  -1 or 1 depending upon the movement of the wheel.</p>
<p>After calculating the detail value, the top offset of the object is taken using offsetTop property using JavaScript. After that, the next position of the object is calculated, which is 10 pixel up or down from the current position of the object.</p>
<p>Finally, style.top property is used to set the current position of the object using JavaScript.</p>
<p>Download Full Source Code</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 17, 2008 4:39 PM</p>
<p>Software engineer and his wife</p>
<p>by Bagesh singh</p>
<p>Another weekend and time for some laugh. Ok guys in this post I’ll show you the conversation between husband and wife and you’ll find the great reply from the husband who is a software engineer.  I think you guyz will also reply the same kind of answers to your wife. Please let me know if you answer the same way or different way to your wife.</p>
<p>Husband &#8211; hey dear, I am logged in.</p>
<p>Wife &#8211; would you like to have some snacks?</p>
<p>Husband &#8211; hard disk full.</p>
<p>Wife &#8211; have you brought the saree.</p>
<p>Husband &#8211; Bad command or file name.</p>
<p>Wife &#8211; but I told you about it in morning</p>
<p>Husband &#8211; erroneous syntax, abort, retry, cancel.</p>
<p>Wife &#8211; hae bhagwan !forget it where’s your salary.</p>
<p>Husband &#8211; file in use, read only, try after some time.</p>
<p>Wife &#8211; at least give me your credit card, I can do some shopping.</p>
<p>Husband &#8211; sharing violation, access denied.</p>
<p>Wife &#8211; I made a mistake in marrying you.</p>
<p>Husband &#8211; data type mismatch.</p>
<p>Wife &#8211; you are useless.</p>
<p>Husband &#8211; by default.</p>
<p>Wife &#8211; who was there with you in the car this morning?</p>
<p>Husband &#8211; system unstable press ctrl, alt, del to Reboot.</p>
<p>Wife &#8211; what is the relation between you &amp; your Receptionist?</p>
<p>Husband &#8211; the only user with write permission.</p>
<p>Wife &#8211; what is my value in your life?</p>
<p>Husband &#8211; unknown virus detected.</p>
<p>Wife &#8211; do you love me or your computer?</p>
<p>Husband &#8211; Too many parameters.</p>
<p>Wife &#8211; I will go to my dad’s house.</p>
<p>Husband &#8211; program performed illegal operation, it will Close.</p>
<p>Wife &#8211; I will leave you forever.</p>
<p>Husband &#8211; close all programs and log out for another User.</p>
<p>Wife &#8211; it is worthless talking to you.</p>
<p>Husband &#8211; shut down the computer.</p>
<p>Wife &#8211; I am going</p>
<p>Husband &#8211; Its now safe to turn off your computer</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 16, 2008 12:21 AM</p>
<p>New flavour of website for nepali music lovers</p>
<p>by Bagesh singh</p>
<p>Today I’m going to talk about a new Nepali music website which I liked a lot. I couldn’t stop talking about this new website. I think there are very few music websites which are dedicated to Nepali musics. Every person loves the music of their country which gives them the musical taste of their country. I’m here to  talk about nepali music website &#8211; ProNepal.com .</p>
<p>What I liked in this Nepali music website that they’ve varities of nepali songs which are well categorized under various categories. I also liked the site’s simple navigation of this website. Just select the songs and start playing it from the embedded flash player from ProNepal which is also one of the plus point of this  website over the conventional musical sites which require real player for playing music.</p>
<p>Along with Nepali songs, this website also has different video sections dedicated for Nepali Videos. You can see the list of Nepali Video which are directly fetched from youtube.com. Furthermore, these great list of videos are categorized by artists.</p>
<p>The other good this about this website is Users can upload and share their music collection. Yes you can upload the musics you liked and share it among the other Nepali music fans.</p>
<p>In conclusion, ProNepal is a great website for Nepali music lovers who want to listen Nepali Songs from Internet. Their video category has impressed me a lot as I’ve not found such a massive collection of Nepali Videos which was directly taken from Youtube in any Nepali music website.</p>
<p>And I know many reader of this blog don’t understand Nepali, if you don’t then please listen to Nepali Songs and do let me know if you like it or Not.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 15, 2008 3:44 PM</p>
<p>Making dashed or dotted link using CSS</p>
<p>by Bagesh singh</p>
<p>Today, one of the friend of my office asked me how to make dotted or dashsed link as he was looking for “text-decoration” for making it.Today, I’ve come up with a very simple technique to make a dotted or dashed hyperlink using CSS.This technique might be known to most of you guys but it might be useful for those guys who don’t know about this technique.</p>
<p>Making dotted and dashed link using CSS</p>
<p>a</p>
<p>{</p>
<p>border-bottom:1px dotted #FF0000;</p>
<p>text-decoration:none;</p>
<p>color:#FF0000;</p>
<p>}</p>
<p>As, you can can you can use the border-bottom property to add the border in the bottom and then you must specify that text-decoration property to “none” to remove the underline from hyperlink which comes default in hyperlink. In the similar fashion, you can create dashed underline link with the following example code.</p>
<p>a</p>
<p>{</p>
<p>border-bottom:1px dashed #FF0000;</p>
<p>text-decoration:none;</p>
<p>color:#FF0000;</p>
<p>}</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 13, 2008 5:16 PM</p>
<p>Making Money from blog with the help of WP Affiliate Elite</p>
<p>by Bagesh singh</p>
<p>Everybody tells me that my blog is under monetized. Ya it is a bitter truth of this blog. I’m always looking for the better option to make money from this blog. And, you must know that affiliate marketing is one the best and largest method of monetizing your blog. Today, I’ve purchased a great plugin WP affiliate eliite for improving the affiliate marking income with the help of this blog. Let me show you how much money you can earn from affiliate marketing and how this plugin helps to make money for you.</p>
<p>How much money a person can earn from affiliate marketing?</p>
<p>Just look at the image below, you can see how much money a person can earn from affiliate marketing. Jeremy Shoemaker, a biggest name in Internet Marketing, made around $700,000 in a month from affiliate marketing.</p>
<p>A better plugin of WordPress for making money from blog</p>
<p>With the help of WP affiliate eliite plugin, you can easily convert the useful keyword of your blog post to affiliate links and start making more money from your blog.</p>
<p>It just cost $47 to purchase that WP affiliate eliite plugin.Why don’t you start making money from blog from affiliate marketing with the help of this plugin. I think video speaks more than writing, check out the video from creator of WP affiliate eliite to know how this plugin helps you for making money from your blog.</p>
<p>Popout</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 13, 2008 12:15 AM</p>
<p>How to filter user submitted data easily in PHP?</p>
<p>by Bagesh singh</p>
<p>Yesterday, I saw one of my friend was working on the the contact form and was filtering the user input data(posted variables) individually. He was using a function in PHP to filter the input and using  tedious approach while calling the filtering function for each variables with coding  each of them in single line . Today, I’m going to show you how can you filter the posted variables easily using callback function in PHP.</p>
<p>PHP function to filter the user supplied data.</p>
<p>function filter_data($val)</p>
<p>{</p>
<p>return htmlentities($val,ENT_QUOTES);</p>
<p>}</p>
<p>This is just a example of very simple function is PHP to filter the user ssubmitted data.But ,you can add more code according to your requirement to make this function robust.</p>
<p>Common programmer’s approach to filter submitted data in PHP</p>
<p>$name=filter_data($_POST['name']);</p>
<p>$email=filter_data($_POST['email']);</p>
<p>$website=filter_data($_POST['website']);</p>
<p>It was the approach which I’ve used in beginning of my career and most of the beginner PHP programmer use this approach to filter the posted variables.And, the above list can be long if there are more posted data.At that time, it will be very irritating to use the same kind of line in many places.</p>
<p>Using array_map() function to filter the posted data in PHP</p>
<p>As you know, POST variables are super global array in PHP and you can use array_map() function in PHP to filter the input using the callback function. Let’s see how you can filter the the posted data easily,</p>
<p>$post=array_map(&#8220;filter_data&#8221;,$_POST);</p>
<p>As you can, each values of POST variables is mapped into another array using a call back function filter_data() which is defined above.</p>
<p>Now, you can access the filtered variables easilly with $post['name'] or $post['email'] etc.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 12, 2008 12:17 AM</p>
<p>Smart contact form for your websites</p>
<p>by Bagesh singh</p>
<p>I think most of the business websites you’ve made must have a contact form in that website. Is your contact form is the best contact form? Now you may ask me what is best contact form!!! I think a contact us form should not be a just a form for contacting you it should provide more marketing information like details of the referrers of the visitors who contact you, keyword used to search and contact you etc. for analyzing marketing detail of your website.</p>
<p>The bestcontactform.com provides the  web forms in with the various marketing and SEO functionality I’ve mentioned above. You can even integrate the marketing and SEO functionality in the existing web form. Most Interestingly, you can integrate their contact form with wordpress as well. Along with these features, Bestconctactform also have built-in captchas to protect against anti-spam emails.</p>
<p>The best part of this form is that you don’t need any programming skill to built this contact form.</p>
<p>If it is so easy and enriched with many features then why don’t you check their website and get this kind of contact for your business.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 11, 2008 2:42 AM</p>
<p>WeddingQuery……..Marriage special SQL Query</p>
<p>by Bagesh singh</p>
<p>Today, I got a very funny and hilarious email from a friend of mine. It is so funny and hilarious that I couldn’t stop myself for posting it. It is the SQL query created by a programmer who is just going to get married and take a look at this cool SQL query created by him and also don’t forget to read the  short and sweet reply from the girl as well.</p>
<p>BOY’S QUERY</p>
<p>CREATE PROCEDURE MyMarriage (</p>
<p>BrideGroom Male (25) ,</p>
<p>Bride Female(20) )</p>
<p>AS</p>
<p>BEGIN</p>
<p>SELECT Bride FROM Beautiful_ Brides</p>
<p>WHERE FatherInLaw = ‘Millionaire’</p>
<p>AND Count(Car) &gt; 20 AND HouseStatus =’ThreeStoreyed’</p>
<p>AND BrideEduStatus IN (B.TECH ,BE ,Degree ,MCA ,MiBA)</p>
<p>AND Having Brothers= Null</p>
<p>AND Sisters =Null</p>
<p>SELECT Gold ,Cash,Car,BankBalance</p>
<p>FROM FatherInLaw</p>
<p>UPDATE MyBankAccout</p>
<p>SETMyBal = MyBal + FatherInLawBal</p>
<p>UPDATE MyLocker</p>
<p>SET MyLockerContents = MyLockerContents + FatherInLawGold</p>
<p>INSERT INTO</p>
<p>MyCarShed VALUES(’BMW’)</p>
<p>END</p>
<p>GO</p>
<p>Then the girl writes the below query in reply:</p>
<p>DROP HUSBAND;</p>
<p>Commit;</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 9, 2008 11:21 PM</p>
<p>Display different text on status bar of hyperlink of all browsers</p>
<p>by Bagesh singh</p>
<p>Yesterday, Jacob mailed me and asked me how can I show different text or link in the status bar of browsers like Firefox or safari when mouse is over the link.He found the technique which only worked for IE but not for other browser but I’ve come up with a technique which works for all browser. This kind of technique is quite useful if you want to hide the actual link in status bar of browsers and show the different URL instead of actual one.</p>
<p>Old technique to display different status bar text</p>
<p>If you search in google with the keyword change status bar text , you’ll find that many codes in different websites which are using window.status to change the text of the status bar while mouse is over the link. For example,</p>
<p>&lt;a href=&#8221;http://www.sell.com/?referrer=225&#8243; onMouseOver=&#8221;window.status=&#8217;http://www.sell.com&#8217;;</p>
<p>return true&#8221;&gt;Click here &lt;/a&gt;</p>
<p>The above link displays “http://www.sell.com” instead of “http://www.sell.com/?referrer=225″ in the status bar when mouse is mover the hyperlink. But, the main drawback of above code is that it only works in Internet Explorer(IE) . It doesn’t change the status bar text of the link in any other browsers like “Firefox”, “Safari” etc.</p>
<p>How to display diferent URL of links in status bar of Firefox , Safari etc ?</p>
<p>To change the satus bar text of the the link in firefox and safari you’ve to just use a small technique with the help of “href” and “Onclick” attribute of the hyperlink. Let’s look at the this technique step by step,</p>
<p>First, make a javaScript function and define it exactly as below,</p>
<p>&lt;script language=&#8221;javascript&#8221;&gt;</p>
<p>function redirect(URL)</p>
<p>{</p>
<p>document.location=URL;</p>
<p>return false;</p>
<p>}</p>
<p>&lt;/script&gt;</p>
<p>Now, define the hyperlink with the status bar text in href attribute and call the above function from onClick attribute of the link like below,</p>
<p>&lt;a href=&#8221;http://www.sell.com&#8221; onclick=&#8221;return</p>
<p>redirect(&#8216;http://www.sell.com/?referrer=225&#8242;);&#8221;&gt;Click here&lt;/a&gt;</p>
<p>As we know the we see the text in status bar which is defined in the href attribute of the hyperlink. And when you click the link, code within onclick event of element is called. We’ve taken the benefit of this phenomenon to show the different text .</p>
<p>But remember, this technique also have a drawback as it doesn’t work if JavaScript is diabled in the web browsers. In that case, the browers will be redirecteed to URL in the href attribute. If you worried about disabled JavaScript then you can check this post to knnow how to handle disabled JavaScript in browser.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 8, 2008 3:15 PM</p>
<p>Useful flash Components for your website</p>
<p>by Bagesh singh</p>
<p>Today again, I’m going to talk about another website which might be very useful for the web developers  who use flash in their web application to add more interactivity to their web applications.  Flashloaded.com contains huge list of useful flash components and extension. You can buy these flash components from their website with reasonable price and even you can get few components at free of cost. Most interestingly, to use these components in flash you require very little or no coding.</p>
<p>These flash components are used for extending the functionality of flash. These flash components or flash extensions are installed in Flash Authoring environment(IDE).</p>
<p>Various Flash Components</p>
<p>Flashloaded.com has varieties of flash components divided in various categories like Menus, CMS, sounds and effects, charts etc. These exclusive collections of flash components or extensions can be useful to you for adding more visualization, effects and interactivity to your web based projects.</p>
<p>Now, I’m going to talk about few flash components from their website which I liked during my browsing to that website.</p>
<p>3D Menus Component</p>
<p>You can view the demo of 3D menu flash components in their website. You can different kind of 3D fancy in their website menu available at reasonable price. Once you buy them, you can easily create fancy menus with a very little code in your web application.</p>
<p>Hotflashvideo extension</p>
<p>Another very useful flash extension, which might be handy tool if you’re going to build a community based website or video portal. This extension allows you to easily add interactive hotspots to your Flash Video without embedding a heavy .flv into your SWF file. You can view the demo of hotstop and this extension from here.</p>
<p>http://www.flashloaded.com/flashcomponents/hotflashvideo/example1.html</p>
<p>If you click on the man in the video, you’ll see the detail of that person in the right hand side. Isn’t this a cool component?</p>
<p>Try Free Components</p>
<p>Even flashloaded.com is providing some of the components at free of cost. You can download and use them in your project. Why don’t you try and use these free flash components from flashloaded.com?</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 6, 2008 5:12 PM</p>
<p>Freeiconsdownloads.com : Free high quality Icons</p>
<p>by Bagesh singh</p>
<p>Today, I was searching for free icons for a website. And, I found a very useful website freeiconsdownloads.com. Free Icons Downloads offer over 230 high quality Royalty Free Icons sets. The best thing about them is all the Icon-set displayed in their website is free to download.You know many of similar kind of website offers high quality icons but you’ve to spend some money for this which you’ve not do in this website.</p>
<p>Icons divided in Various Category</p>
<p>There are more than 15 categories under which icons are categorized in Free Icons Download. So it will be easy for you to find the icon of certain category of your choice. Furthermore, you can browser the icon-sets by various options such as Latest, Most Downloads, Most Populars .</p>
<p>Useful Icons</p>
<p>Whenever I need icons for me, my first choice is Freeiconsdownloads as they have exclusive collections of useful items icons divided under various category. You can find the icons in that website easily navigating from different category.</p>
<p>Other free designing Stuff</p>
<p>Including free Icons,Freeiconsdownload has many other free designing stuffs like free banners, free logos and designs and interfaces. You can browser all these other free designing stuffs from the right sider bar of their website.</p>
<p>Have look at freeiconsdownloads.com , it very useful website for for designing stuffs which you may need on your daily works.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 5, 2008 12:09 AM</p>
<p>Increase the feedburner’s feedcount with simple hack</p>
<p>by Bagesh singh</p>
<p>Wish this tips could have known to me few days back then I could have been the blogging idol organized by dailyblogtips.com.It will take just 5 minute to hack the stat of feedburner’s feedcount. And you can do it very easily. Just watch this video from Joop Dorresteijn from thenextweb.org. You are just one day from adding hundreds and thousand subscribers.Why don’t you increase the feedburner’s feedcount stat and get high ranking in  the sites like reviewme.com and start promoting your blog.</p>
<p>Popout</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 4, 2008 10:11 PM</p>
<p>How to display pop-up message on mouse clicked position using jQuery</p>
<p>by Bagesh singh</p>
<p>Yesterday, my friend Sujit asked me how can we get the mouse clicked position and display the pop-up message in that mouse clicked position using jQuery.Today, I’ve come up with the tutorial for the solution of this problem. In this tutorial, you’ll see how to display the pop-up message in mouse clicked position using jQuery. When you click the mouse in any position of document, the pop-up message gets displayed with the mouse position around the middle part of the pop-up message.</p>
<p>Live Demo                 Download Full Source Code</p>
<p>HTML code to display pop-up message on mouse clicked position</p>
<p>&lt;div class=&#8221;popup_msg&#8221;&gt;</p>
<p>&#8230;.you can write the mssage here&#8230;</p>
<p>&lt;/div&gt;</p>
<p>As you can above, the element displaying pop-up message is defined with the id “popup_div” and class of this element is “popup_msg“. You can write your custom message inside that div.</p>
<p>CSS code to display pop-up message on mouse clicked position</p>
<p>.popup_msg{</p>
<p>position:absolute;</p>
<p>z-index:10;</p>
<p>width:172px;</p>
<p>height:102px;</p>
<p>text-align:center;</p>
<p>color:#FF0000;</p>
<p>font: 14px Verdana, Arial, Helvetica, sans-serif;</p>
<p>background:url(bg_image.gif) bottom right no-repeat;</p>
<p>display:none;</p>
<p>}</p>
<p>The above CSS attribute is straightforward and you can change the attribute according to your requirement. But remember that, the position attribute should be set to absolute value and z-index should be greater than the other element’s z-index. Furthermore, the width and height attribute must be set according to the background image of pop-up message.</p>
<p>JavaScript ( jQuery ) code for displaying pop-up message</p>
<p>$(document).click(function(e)</p>
<p>{</p>
<p>//getting height and width of the message box</p>
<p>var height = $(&#8216;#popuup_div&#8217;).height();</p>
<p>var width = $(&#8216;#popuup_div&#8217;).width();</p>
<p>//calculating offset for displaying popup message</p>
<p>leftVal=e.pageX-(width/2)+&#8221;px&#8221;;</p>
<p>topVal=e.pageY-(height/2)+&#8221;px&#8221;;</p>
<p>//show the popup message and hide with fading effect</p>
<p>$(&#8216;#popuup_div&#8217;).css({left:leftVal,top:topVal}).show().fadeOut(1500);</p>
<p>});</p>
<p>As the above code is well document. I’m just going to give you the brief description. First of all, we took the height and width of the pop-up element. After that, we’ve calculated the left and top offset of element so that it gets displayed with the mouse position is around in it’s middle part. of the element With the last line of jQuery code, pop-up message’s left and top position is set and displayed. This pop-up message gets hidden with fading effect with the fadeOut() function of jQuery.</p>
<p>Live Demo                  Download Full Source Code</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Aug 4, 2008 12:09 AM</p>
<p>CRM software solutions for your business</p>
<p>by Bagesh singh</p>
<p>Customers are the backbone of business. “Maintain the old customers and get the new customers” is the basic logic behind the successful business.So, CRM (Customer Relationship Management) is the vital component of your business and you should always manage good relationship with customer for the continuous growth of your business. For this, CRM software or sales automation software is used to support these processes by storing and managing information of customers and future customers.</p>
<p>If you want to manage the good relationship with customers  of your business and gain more customers then you can check the sales automation software from CIS group &#8211; Sales Companion. As mentioned in their site, with the help of latest mobile technology Sales Companion allows the sales representative and delivery personnel manager to manage their sales cycle.</p>
<p>Route Companion , a complete direct store delivery software, is a complete software solution that allows you to manage the direct store delivery activities. With the help of hand held computer devices, delivery personnel can manage their daily activities with the help of this route accounting software.</p>
<p>Companion suite has got very good reviews from their clients as a CRM software. The major corporate clients in business are using this software suite which includes Coca-cola, Danone, Nestle and many more. So, If you want to improve and manage customer relationship in your business then why don’t you give Companion Suite a try.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 31, 2008 5:54 PM</p>
<p>Web Services and PHP &#8211; SOAP vs XML-RPC vs REST</p>
<p>by Bagesh singh</p>
<p>What is web services?</p>
<p>In a typical web surfing scenario, a visitor visits a website and use the functionality provided by that particular website.HTTP request is send to server from web browsers and server responses are translated by browser to display the desired result of the visitor. But, this scenario has been changed in the recent days. You don’t need to visit the particular website to use their service and functionality if they are providing web services. Web services are set of platform independent exposed APIs(functions) which can be used used from remote server over the Internet. There are basically two parties involved in this, one which provides a set of exposed APIs and the another one ,commonly know as web services consumers,is the party which uses the functionality and services provided by web services providing party.</p>
<p>There are different method for providing web services but the most common are SOAP, XML-RPC and REST .</p>
<p>SOAP</p>
<p>SOAP was the acronym of Simple Object Access Protocal but this acronym was dropped in the version of 1.2 of SOAP. It is method for exchanging XML based message over the Internet for providing and consuming web services. SOAP message are transferred forming the SOAP-Envelope.You can view the typical SOAP Message articture from here. SOAP is widely criticized for it’s design complexity.</p>
<p>In PHP 5, there is built-in extension for the providing and consuming web services. But, I personally prefer Nusoap toolkit of PHP for providing and consuming web services using SOAP in PHP.</p>
<p>XML-RPC</p>
<p>XML-RPC (remote procedure call) another way of providing and consuming web services. It uses XML to encode and decode the remote procedure call along with it’s parameter. Compared to the articture of SOAP, it has simpler architecture. You can even define data type of parameters of procedure in XML-RPC. You can visit the official website www.xmlrpc.com to know more about XML-RPC.</p>
<p>In PHP, there is extension which contain various functions for facilating XML-RPC request and response. But the functions xmlrpc_encode_request() and xmlrpc_decode_request() available in PHP is very useful for when it comes to encode and decode XML-RPC request and response.</p>
<p>I’ve built  Nepali Currency Converter using XML-RPC web services provided by foxrate.org.</p>
<p>REST</p>
<p>Representational State Trasfer(REST) is comparatively simpler method for providing and consuming web services. Nowadays, this method is becoming popular in the arena of web services. Unlike above two method, it is not necessary to use XML as a data interchange format in REST. REST architecture is basically focused on two things : Resources and Interface.RESTful  is another term to define REST web services .</p>
<p>Resources are application’s state and functionality which is represented by a unique URL. The resources share a uniform interface to transfer the state between the client and server.</p>
<p>For example the URL, http://example.com/product/11 can be a resource.Suppose, GET method is used to retrieve product detail from that URL, POST method is used to modify the production information and DELETE method can be used to delete the product from the same URL. Here, the HTTP methods works as a interface to access the resources.</p>
<p>Talking about PHP, the format of information(representation) returned can be in XML, JSON or even in HTML format. DOM functions, SimpleXML functions and JSON functions comes handy when you are handling RESTful interfaces in PHP.</p>
<p>I also want to know your view. Please participate in the poll below.</p>
<p>Note: There is a poll embedded within this post, please visit the site to participate in this post&#8217;s poll.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 29, 2008 11:33 PM</p>
<p>jQuery is the most popular JavaScript and Ajax Framework</p>
<p>by Bagesh singh</p>
<p>In last poll, Many people supported Zend Framework as the first choice for the PHP developments. And, today I would like to announce the result of the poll “which is the best JavaScript and Ajax framework ?” I would like to thanks all of you 690 voters who has participated in this poll. Today, I’ve no hesitation on saying that jQuery is the most popular and leading choice of web developer as a JavaScript and Ajax framework.</p>
<p>You can look at the poll result below. There is no dispute that  John Resig’s JavaScript library (jQuery) is their first choice as 52% web developers have voted for this library. In this blog, I’ve also posted many jQuery tutorials, Check them out .</p>
<p>Note: There is a poll embedded within this post, please visit the site to participate in this post&#8217;s poll.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 28, 2008 11:48 PM</p>
<p>Nepali Currency Converter is launched</p>
<p>by Bagesh singh</p>
<p>I was thinking to build some tool in this blog. And today,I am happy to inform you that I’ve made a currency conversion tool which converts the foreign currency to Nepali currency. I’ve used AJAX along with API from foxrate.org to make this Nepali currency conversion tool. The main benefit of this tool is you can convert from currency of many countries to Nepali currency. This currency conversion tool might be very useful if you’re going to visit Nepal to estimate your budget.</p>
<p>View Nepali Currency Converter Tool</p>
<p>You might be wondering, why this person hasn’t posted the code here. Don’t worry I’m a good boy, I’ll post the code for currency conversion in next post and you’ll also be able to make the currency convertion tool for your  native currency.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 27, 2008 2:05 PM</p>
<p>Some true acronyms</p>
<p>by Bagesh singh</p>
<p>Another weekend, time for some laugh. Today I’m going to post few acronyms and their actual meaning. And believe me, you’ll enjoy these true full-forms.  Have a look at these and enjoy.</p>
<p>PCMCIA &#8211; People Can’t Memorize Computer Industry Acronyms</p>
<p>ISDN &#8211; It Still Does Nothing</p>
<p>APPLE &#8211; Arrogance Produces Profit-Losing Entity</p>
<p>SCSI -  System Can’t See It</p>
<p>DOS &#8211; Defunct Operating System</p>
<p>BASIC &#8211; Bill’s Attempt to Seize Industry Control</p>
<p>IBM &#8211; I Blame Microsoft</p>
<p>DEC &#8211; Do Expect Cuts</p>
<p>CD-ROM &#8211; Consumer Device, Rendered Obsolete in Months</p>
<p>OS/2 &#8211; Obsolete Soon, Too.</p>
<p>WWW &#8211; World Wide Wait</p>
<p>MACINTOSH &#8211; Most Applications Crash; If Not, The Operating System Hangs</p>
<p>WINDOWS &#8211; Will Install Needless Data On Whole System</p>
<p>MICROSOFT &#8211; Most Intelligent Customers Realize Our Software Only Fools Teenagers</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 25, 2008 5:01 PM</p>
<p>Get the IT magazines, journals and white paper at free of cost</p>
<p>by Bagesh singh</p>
<p>Hello friends….Today I’m very happy to announce a good news for the readers of Bagesh singhbh.com.np. In collaboration with tradepub.com. Today, I’ve launched http://Bagesh singhbh.tradepub.com, it a free book and magazine store and the resources available are all in free of cost. So don’t be late start surfing the store right now and get the free copy IT related magazines, journals and white papers.</p>
<p>For, your convince I’ve short-listed few of the highlighted magazine, journal and white papers without paying a single cent. Here are some of the good list do subscribe them for free of cost.</p>
<p>Oracle Magazine &#8211; Popular oracle technology related magazine</p>
<p>eWeek &#8211; One of the popular Information technology source magazine</p>
<p>Security Source &#8211; New magazine focused on the security on the web</p>
<p>Good Architecture and Security &#8211; A white paper provided by Motorola for web security</p>
<p>Delivering Integrated Security, Recovery, and Archive Protection with Symantec Backup Exec 12</p>
<p>Blind Sql Injection &#8211; A while paper provided by HP for web application security</p>
<p>Dr. Dobb’s Journal &#8211; It enables programmers to write the most efficient and sophisticated programs</p>
<p>Full Data Encryption2</p>
<p>8 Surefire Strategies for Monetizing Your B2B Website</p>
<p>There are just a few in the list, you can get more free magazines, journals , white papers from http://Bagesh singhbh.tradepub.com. Go get them for free of of cost.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 23, 2008 5:48 PM</p>
<p>State preserved bottom hanging message box using jQuery</p>
<p>by Bagesh singh</p>
<p>Last time, I’ve made the top floating message box using jquery. And a lot of people has asked me how can I preserve the state of that message box so that when it is closed.It won’t be open to for some time interval. Today, I’ve come with state preserved bottom hanging message box. When you close the message box, it’s state is preserved in cookie created using JavScript so that this message box won’t show up for certain hours.</p>
<p>View Live Demo</p>
<p>I’m not going to post the HTML code, it is same the previous post of floating message box using jQuery. You can refer to that article for HTML code.</p>
<p>CSS code for state preserved hanging message</p>
<p>#message_box {</p>
<p>position: absolute;</p>
<p>left: 0px;</p>
<p>z-index: 10;</p>
<p>background:#ffc;</p>
<p>padding:5px;</p>
<p>border:1px solid #CCCCCC;</p>
<p>text-align:center;</p>
<p>width:99%;</p>
<p>display:none;</p>
<p>color:#0000FF;</p>
<p>font: bold 12px Verdana, Arial, Helvetica, sans-serif;</p>
<p>}</p>
<p>The element with id “message_box” is made hidden first with it’s position set to “absolute” for making it hanging. Other attribute you can change according to your need.</p>
<p>JavaScript Code for state preserved hanging message box</p>
<p>As this time, I’ve come up with the state preserved solution. I’ve used JavaScript for setting and getting value from cookie. I’ve used two functions getCookie() directly taken from w2school’s JavaScript cookie tutorial.But I’ve modified the setCookie() functions where you can set the cookie expirty time in number of hours Here is that function,</p>
<p>//function to set the cookie name, values and expiry time in hours</p>
<p>function setCookie(c_name,value,expireHours)</p>
<p>{</p>
<p>var exhour=new Date(); //create the current date object</p>
<p>exhour.setHours(exhour.getHours()+1); //setting hours</p>
<p>document.cookie=c_name+ &#8220;=&#8221; +escape(value)+</p>
<p>((expireHours==null) ? &#8220;&#8221; : &#8220;;expires=&#8221;+exhour.toGMTString());</p>
<p>}</p>
<p>Now, let’s dig through the jQuery code to provide the state preserved bottom hanging message box.</p>
<p>//when the close button at right corner of the message box is clicked</p>
<p>$(&#8216;#close_message&#8217;).click(function()</p>
<p>{</p>
<p>//the messagebox gets scrool down with top property and gets hidden with zero opacity</p>
<p>$(&#8216;#message_box&#8217;).animate({ top:&#8221;-=15px&#8221;,opacity:0 }, &#8220;slow&#8221;);</p>
<p>setCookie(&#8216;show_message&#8217;,'no&#8217;,1); //cookies is set to &#8220;no&#8221; value</p>
<p>});</p>
<p>As you can see above, when the cross icon is clicked the message box gets hidden and furtheremroe, it sets a cookie “show_message” with value “no” which expires in one hour. Now, look at the jquery code,</p>
<p>if(getCookie(&#8216;show_message&#8217;)!=&#8217;no&#8217;)</p>
<p>{</p>
<p>var pos=parseInt($(window).scrollTop())+parseInt($(window).height());</p>
<p>$(&#8216;#message_box&#8217;).css(&#8220;top&#8221;,pos-26+&#8221;px&#8221;);</p>
<p>$(&#8216;#message_box&#8217;).show(); //display the message box</p>
<p>//scroll the message box to the top offset of browser&#8217;s scrool bar</p>
<p>$(window).scroll(function()</p>
<p>{</p>
<p>var pos=parseInt($(window).scrollTop())+parseInt($(window).height());</p>
<p>$(&#8216;#message_box&#8217;).animate({top:pos-26+&#8221;px&#8221; },{queue: false, duration: 500});</p>
<p>});</p>
<p>}</p>
<p>As, you can see there is condition to show the message box and  code inside scroll event to execute. If the cookie is not set then the message box gets displayed and it will be shown to the bottom of the page according to the requirement.</p>
<p>Download Full Source Code</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 20, 2008 4:43 PM</p>
<p>Strucutures of Females in defined by C programmer</p>
<p>by Bagesh singh</p>
<p>Today, I’ve got a interesting email from one of my friend which contains the structure of female defined by a C programmer. This programmer did a research on female and defined their structure in C programming. Checkout these cool structures of females and have fun  .</p>
<p>Struct female_professional s</p>
<p>{</p>
<p>double styles;</p>
<p>short skirts;</p>
<p>long time_to_understand_ problems;</p>
<p>float mind;</p>
<p>void knowledge;</p>
<p>char non_co-operative;</p>
<p>}</p>
<p>Struct married_females</p>
<p>{</p>
<p>double weight;</p>
<p>Short tempered;</p>
<p>long gossip;</p>
<p>Float hopes;</p>
<p>void word;</p>
<p>char unstable;</p>
<p>}</p>
<p>Struct engaged_females</p>
<p>{</p>
<p>double time_on_phone;</p>
<p>short attention_on_ work;</p>
<p>long boast;</p>
<p>float on_cloud_nine;</p>
<p>void understanding;</p>
<p>char edgy;</p>
<p>}</p>
<p>Struct newly_married_ females</p>
<p>{</p>
<p>double dinner_invitation;</p>
<p>Short time_at_work;</p>
<p>long lunch_break;</p>
<p>void bank_balance;</p>
<p>char hen_pecked;</p>
<p>}</p>
<p>Struct husband_wife_ professionals</p>
<p>{</p>
<p>double income;</p>
<p>Short tempered;</p>
<p>long time_no_see_ each_other;</p>
<p>void love_life;</p>
<p>char money_making;</p>
<p>}</p>
<p>Struct beautiful_city_ girl</p>
<p>{</p>
<p>double boyfriends;</p>
<p>short affairs;</p>
<p>long stories;</p>
<p>void greymatter;</p>
<p>char flirt;</p>
<p>}</p>
<p>Struct old_lady</p>
<p>{</p>
<p>double chin;</p>
<p>Short memory;</p>
<p>long sighs ;</p>
<p>void attention_from_ men ;</p>
<p>char chatterbox;</p>
<p>}</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 17, 2008 6:16 PM</p>
<p>Getting country , city name from IP address in PHP</p>
<p>by Bagesh singh</p>
<p>Yesterday, miaki asked me how can we get the country name from the IP address in PHP. Today, I’ve come up with the answer of this question. I’ve used the API from hostip.info to fetch the country name , city name and country code from the given IP address. I’ve mad this function in PHP which uses XML response from hostip.info and extracted country name, city name and country code using regular expression.</p>
<p>Function to return country, city name from IP address in PHP</p>
<p>function countryCityFromIP($ipAddr)</p>
<p>{</p>
<p>//function to find country and city from IP address</p>
<p>//Developed by Bagesh singh Bhattarai http://Bagesh singhbh.com.np</p>
<p>//verify the IP address for the</p>
<p>ip2long($ipAddr)== -1 || ip2long($ipAddr) === false ? trigger_error(&#8220;Invalid IP&#8221;, E_USER_ERROR) : &#8220;&#8221;;</p>
<p>$ipDetail=array(); //initialize a blank array</p>
<p>//get the XML result from hostip.info</p>
<p>$xml = file_get_contents(&#8220;http://api.hostip.info/?ip=&#8221;.$ipAddr);</p>
<p>//get the city name inside the node &lt;gml:name&gt; and &lt;/gml:name&gt;</p>
<p>preg_match(&#8220;@&lt;Hostip&gt;(s)*&lt;gml:name&gt;(.*?)&lt;/gml:name&gt;@si&#8221;,$xml,$match);</p>
<p>//assing the city name to the array</p>
<p>$ipDetail['city']=$match[2];</p>
<p>//get the country name inside the node &lt;countryName&gt; and &lt;/countryName&gt;</p>
<p>preg_match(&#8220;@&lt;countryName&gt;(.*?)&lt;/countryName&gt;@si&#8221;,$xml,$matches);</p>
<p>//assign the country name to the $ipDetail array</p>
<p>$ipDetail['country']=$matches[1];</p>
<p>//get the country name inside the node &lt;countryName&gt; and &lt;/countryName&gt;</p>
<p>preg_match(&#8220;@&lt;countryAbbrev&gt;(.*?)&lt;/countryAbbrev&gt;@si&#8221;,$xml,$cc_match);</p>
<p>$ipDetail['country_code']=$cc_match[1]; //assing the country code to array</p>
<p>//return the array containing city, country and country code</p>
<p>return $ipDetail;</p>
<p>}</p>
<p>Download Source Code</p>
<p>As you can see, I’ve documented all the PHP code and I don’t think I need explain anymore about that code. Just notice that, this function returns the array containg three key elements “country” , “city” and “country_code”. Each elements have the value of city, country and country code.</p>
<p>Now, look the the how we can use the above function in PHP,</p>
<p>$IPDetail=countryCityFromIP(&#8217;12.215.42.19&#8242;);</p>
<p>echo $IPDetail['country']; //country of that IP address</p>
<p>echo $IPDetail['city']; //outputs the IP detail of the city</p>
<p>Notice that the above PHP function returns the array containing the country , city and country code from IP Address and we can use them in PHP. If you want to know how to get IP address in PHP, you can check this post how you can get real IP address in PHP.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 16, 2008 10:04 PM</p>
<p>My First Google Adsense Cheque</p>
<p>by Bagesh singh</p>
<p>Hello friends you must know Google Adsense is one of the popular way of monetizing the blog. Today, I’ve got the first cheque from Google and I would like to share it with you guyz. It is not that  big money I’m making from Adsense. In first six month, I was able to make just $165. But, making money from a blog goes slowly and steadily. Most Importantly, this is tech blog and most visitor are aware of Google Adsense so they don’t click on the Google ads usually.</p>
<p>The above cheque doesn’t contain the big amount but it is my first cheque from Google and you must know that everything which comes first in your life is always precious and so this cheque is.  Hope this might be a ladder for huge adsense cheque for me in future  .</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 16, 2008 4:02 AM</p>
<p>Getting technorati ranking in PHP without using their API</p>
<p>by Bagesh singh</p>
<p>Today, I was going through the Technorati API to find the rank of the blog using PHP. Those who doesn’t know about Technorati, Technorati is known as the authority for tracking, indexing and ranking the blog sytems. When I went through the Technorati Api, I found that it is not that hard to get the ranking of a blog which is indexed in Technorati.You need to get the developer API  key from Technorati and use their Web Services to get the ranking of a blog.</p>
<p>But, those who are not registered to the Technorati, here is the shortcut method to get the ranking of blogs indexed under Technorati without using their Api. I’ve used the following  URL of technorati</p>
<p>“http://www.technorati.com/blogs/&lt;blog-url&gt;”</p>
<p>and used some regular expression to find the ranking of the blog indexed under technorati withoug using their API.</p>
<p>PHP code to find the technorati ranking without using API</p>
<p>&lt;?php</p>
<p>//enter the blog url don&#8217;t include http</p>
<p>$blog_url=&#8221;Bagesh singhbh.com.np&#8221;;</p>
<p>//seeting the URL for technorati</p>
<p>$technorati_url=&#8221;http://www.technorati.com/blogs/&#8221;.$blog_url;</p>
<p>//get the html code of the URL</p>
<p>$html_values=file_get_contents($technorati_url);</p>
<p>//get the string within &lt;div class=&#8221;rank&#8221;&gt;&lt;/div&gt;</p>
<p>preg_match(&#8220;@&lt;divb[^&gt;]* class=&#8221;rank&#8221;&gt;(.*?)&lt;/div&gt;@si&#8221;,$html_values,$matches);</p>
<p>//strip out of the HTML element from the matches</p>
<p>$rankvalue=strip_tags($matches[1]);</p>
<p>//geting the the rank values out of the string</p>
<p>preg_match(&#8220;/(d+(,d+)?(,d+)?)/&#8221;,$rank_value,$matches);</p>
<p>//Display the rank.</p>
<p>echo &#8220;Technorati rank is : &#8220;.$matches[0];</p>
<p>?&gt;</p>
<p>Download Source Code</p>
<p>As you can above, I’ve used file_get_contens() function of PHP to get the content from Technorati. The rank of the blog if found under the division “&lt;div class=”rank”&gt;&lt;/div&gt;” in that page of Technorati, you can verify it by viewing the source of that page. After that, I’ve used few regular expression to find the ranking of the blog in PHP.</p>
<p>One thing you must notice that this code will works under this design of Technorati, if the technorati will change the design then there is no guarantee that this code will work at that scenario.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 13, 2008 3:17 PM</p>
<p>Top Floating message box using jQuery</p>
<p>by Bagesh singh</p>
<p>Last time, I’ve shown you how to create a alert box using jQuery. This time, I’ve come up with another tutorial to show you how to display floating message box in the top of  the browser using jQuery. The message box always get displayed at the top of the browser although you move across the document with help of scroll bar. Now, let’s kick out this tutorial for creating floating message box using jQuery.</p>
<p>LIVE DEMO</p>
<p>HTML code for floating message box using jQuery</p>
<p>&lt;div&gt;</p>
<p>&lt;img id=&#8221;close_message&#8221; style=&#8221;float:right;cursor:pointer&#8221; src=&#8221;12-em-cross.png&#8221; /&gt;</p>
<p>The floating message goes here</p>
<p>&lt;/div&gt;</p>
<p>&lt;div&gt;</p>
<p>&#8230;&#8230;&#8230;&#8230;..</p>
<p>other content goes here</p>
<p>&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;</p>
<p>&lt;/div&gt;</p>
<p>The message box which is going to float in the top of the browser is inside the div with id “message-box” and this div is defined with the class “cornerbox”. And the small image with id “close_message” to close the message box and is displayed in the right hand side by setting the float attribute of CSS to right .</p>
<p>CSS code for floating message box using jQuery</p>
<p>#message_box {</p>
<p>position: absolute;</p>
<p>top: 0; left: 0;</p>
<p>z-index: 10;</p>
<p>background:#ffc;</p>
<p>padding:5px;</p>
<p>border:1px solid #CCCCCC;</p>
<p>text-align:center;</p>
<p>font-weight:bold;</p>
<p>width:99%;</p>
<p>}</p>
<p>You can see that CSS code for the floating message box is straightforward and you can change the color , size etc. according to your choice. But keep in mind that, “position” property must be absolute so that this message box doesn’t distract the other boxes and “z-index” must be set higher so that the it overlaps the other content of the web page.</p>
<p>jQuery code for floating message box</p>
<p>&lt;script language=&#8221;javascript&#8221; src=&#8221;jquery-1.2.6.min.js&#8221;&gt;&lt;/script&gt;</p>
<p>You must notice that I’ve used jquery 1.2.6 in this example as dimension plugin of jquery is embedded in the this version of jQuery. If you use the lesser version of jQuery than 1.2.6 then must use the dimension plugin of jQuery to use this example.</p>
<p>//scroll the message box to the top offset of browser&#8217;s scrool bar</p>
<p>$(window).scroll(function()</p>
<p>{</p>
<p>$(&#8216;#message_box&#8217;).animate({top:$(window).scrollTop()+&#8221;px&#8221; },{queue: false, duration: 350});</p>
<p>});</p>
<p>As you can when the window gets scrolled this function is called and the box gets moved as the “top” property of message box is set to different pixel using scrollTop() function, which had been the part dimension plugin of jQuery. This function return the scroll top offset of the matched element and in our example this return the scroll top offeset of the browser’s window. Another thing you must notice in the animate function that queue is set to false which makes the animation to skip the queue and begins running immediately otherwise the animation may stuck in the queue and looks ugly.</p>
<p>//when the close button at right corner of the message box is clicked</p>
<p>$(&#8216;#close_message&#8217;).click(function()</p>
<p>{</p>
<p>//the messagebox gets scrool down with top property and gets hidden with zero opacity</p>
<p>$(&#8216;#message_box&#8217;).animate({ top:&#8221;+=15px&#8221;,opacity:0 }, &#8220;slow&#8221;);</p>
<p>});</p>
<p>It is the simple animation when the image with close sign is clicked, the message box slides down below and gets hidden because its opacity set to zero in the animation function.</p>
<p>DOWNLOAD FULL SOURCE CODE</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 11, 2008 10:29 PM</p>
<p>Tips to increase search engine traffic for your blog</p>
<p>by Bagesh singh</p>
<p>Which kind of traffic are you interested for your blog ? Is it traffic from social media or Is it traffic from search engine ? Which kind of traffic  is the better for your blog ? It must be one the which is consistent and regular and it is the traffic from search engine. It’s been around 6 month when I started blogging in this domain. And nowadays, this blog is getting more than 1500 visits from the search engine.For detail,You can see the picture below directly taken from Google Analytics.</p>
<p>I think search engine traffic is the best traffic for your blog. Unlike social media traffic which are flashy, search engine traffic is consistent and regular. I’m so happy that this newborn blog is getting good amount of traffic from the search engine.</p>
<p>Do you know tips to build search engine traffic for your blog ?  Do you want to how to build the search engine traffic for your blog ?</p>
<p>Subscribe the RSS feed of this blog by email</p>
<p>Why might be surprising why I’m not posting the tips here and asking you subscribe to rss feed of this blog by email. The answer of this question is blogging Idol competition. I’ve to increase RSS subscribers to win this competition. So, Subscribe Now and make me Blogging Idol and get the tips to increase search engine traffic for your blog.</p>
<p>I’ll email the tips to build search engline traffic for your blog in the first week of next week. Don’t miss the tips to build and increase the search engine traffic for your blog. Subscribe Now By Email</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 10, 2008 4:18 PM</p>
<p>Bagesh singhbh.com..Is that a coincidence or bargaining attempt?</p>
<p>by Bagesh singh</p>
<p>You might have heard that Jeremy Shoemaker’s (www.shoemoney.com) twitter account with user name “shoemoneymedia” was deleted by twitter for some violation of rule and within few hours this account was taken by another person and started tweeting in the name of Jeremy. Well, Shoemoney is one of the biggest name in the Internet Marketing and somebody would really like to use his name so that he can make some deal with him.</p>
<p>But as far as I remember, I’d checked somewhere around 40 days back in godaddy.com weather Bagesh singhbh.com is available or not and it was available at that time.Today, mistakely I’ve typed “Bagesh singhbh.com” instead of “Bagesh singhbh.com.np” and saw that it is already registered. I thought there is somebody whose name is similar to me and might have registered that domain.</p>
<p>But, it is not as simple as the way I’ve thought it. That domain is for SALE guyz, a good news for me. Seems that “Bagesh singhbh” become a popular name in the Internet …LOL. Most Interestingly, you should place the bid of more than 60 euro to purchase that domain. Oufff…In that cost I can buy more than 7 or 8 domains from godaddy.com.</p>
<p>Here is the whois detail of “Bagesh singhbh.com”.</p>
<p>WHOIS information for: Bagesh singhbh.com :</p>
<p>[whois.ename.com] Domain Name : Bagesh singhbh.com Registrant</p>
<p>Contact : æ?¨å¿—æ˜Ž Registrant</p>
<p>Organization : æ?¨å¿—æ˜Ž</p>
<p>Administrative Mail : 592675@qq.com</p>
<p>Status : clientDeleteProhibited</p>
<p>clientTransferProhibited</p>
<p>Domain Name Server : ns1.sedoparking.com ns2.sedoparking.com</p>
<p>Registration Date :2008-5-27 Expiration Date : 2009-5-27</p>
<p>And here is the page from where you can buy the Bagesh singhbh.com, if you’re interested you can buy from there.</p>
<p>http://www.sedo.com/search/details.php4?domain=Bagesh singhbh.com&amp;partnerid=14460&amp;language=e</p>
<p>I’m not sure the domain registrant targetted me and placed that domain for auction or it is just a coincidence. I don’t think there is any company with the name of “Bagesh singhbh”. What do you think ? Please leave your thought on comments below.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 9, 2008 12:01 PM</p>
<p>Anti Spam protection for your organization’s email server</p>
<p>by Bagesh singh</p>
<p>Are you getting annoyed by spam emails? Are you spending a lot of time in deleting junk emails ? Then , you’re heading towards to get the spam filtering firewall for your incoming emails.To fight against junk emails, I recommend you to  check out anti spam filtering service provided by Primetech. I think it worth paying $2.50 per month to protect your mailbox from spam emails if you and your organization is wasting hours of to delete those emails. You might be wondering how the spam email are filtered by them. All the incoming email to your email server are routed through the Barracuda anti-SPAM servers providing maximum filtration against the junk emails</p>
<p>Primetec is also providing Barracuda Spam firewall. It incorporates both hardware and software to provide anti spam security of your email server protecting viruses, spam, spoofing and spyware attacks.Barracuda Span Firewall can be a safeguard for the email servers of your organization.</p>
<p>If you’re concerned about blocking certain website or blocking IM in your organization then you can check other products from Primetec. They are also providing web security services and products.Barracuda Web Filter can be used for content filtering, application blocking and spyware protection according to the Internet usage policy of your organization. Furthermore, you can use Barracuda IM Firewall for your organization if you want to manage the network operation of the instant messaging services. Barracuda Web Application Controllers, another product from Primentch, can be used for the protection against hackers attempting to exploit vulnerabilities in Web applications of your organization.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 7, 2008 6:17 PM</p>
<p>5 useful Google search tips you might now know</p>
<p>by Bagesh singh</p>
<p>I never knew that Google search can be used as calculator, currency converter or height and weight unit converter. Today I’ve discovered few Google search technique and I would like to share those technique with you. Look at the few useful search technique and you’ll get the answer “Why Google is the superior search engine?”.</p>
<p>Google search tips to find time of a city or country</p>
<p>You can use “time” keyword followed by name of the city or country to find the current time of that country of city in Google search.</p>
<p>Examples :</p>
<p>time kathmandu</p>
<p>time new york</p>
<p>Google search tips for Currency conversion</p>
<p>you can use keyword like “1 USD in AUD” or “1 singapore money in japanese money” to find the currency difference using Google search.</p>
<p>Examples :</p>
<p>1 USD in thailand money</p>
<p>1 singapore money in australian money</p>
<p>Google Search tips for Unit conversion</p>
<p>You can use the following kind of examples to convert the various unit of height and weight.</p>
<p>Examples:</p>
<p>1feet in meter</p>
<p>1feet in cm</p>
<p>1kg in pounds</p>
<p>Google search as calculator</p>
<p>You can enter math expression in Google search box to get the calculated result. For example, you can put the following expression in the Google search to find result of the calucation.</p>
<p>Examples:</p>
<p>(30+45)+5^2</p>
<p>((30+45)+554)^2</p>
<p>Using Google search as Dictionary</p>
<p>You can use the Google as a dictionary as well. Just you have to type the keyword as “define:keyword” in google search box and you’ll get the meaning of that word.</p>
<p>Examples:</p>
<p>define:intelligent</p>
<p>define:blog</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 6, 2008 5:14 PM</p>
<p>How to control the case of characters using CSS?</p>
<p>by Bagesh singh</p>
<p>How are you controlling the case of the characters in your project. Talking about me, I was using ucwords() function of PHP to control the case of the characters when required. Today, I come to know  two new property of CSS which controls the output of the case of the characters of the words.</p>
<p>You can control the characters using “text-transform” and “font-variant” property of the CSS to do this. You can change the characters of words to upper case, lower case and capitalize the first character of the word.Furthermore, you can use “font-variant” to display the font in small caps font i.e. all the lower case characters are converted into uppercase character but have small font size compared to text with character capitalized. Let’s see example,</p>
<p>Example of using text-transform and font-variant</p>
<p>&lt;span style=&#8221;text-transform: capitalize&#8221;&gt;bill gates&lt;/span&gt; =&gt; bill gates</p>
<p>&lt;span style=&#8221;text-transform:lowercase&#8221;&gt;Bill Gates&lt;/span&gt; =&gt;  Bill Gates</p>
<p>&lt;span style=&#8221;text-transform: uppercase&#8221;&gt;bill gates&lt;/span&gt; =&gt; bill gates</p>
<p>&lt;span style=&#8221;font-variant:small-caps&#8221;&gt;Bill Gates&lt;/span&gt; =&gt; Bill Gates</p>
<p>As you can see clearly in the example how the character of case is changed using text-transform and font-variant property of CSS. I hope these property might be useful for those people who didn’t know about these properties. But “text-transform” should have had one more attribute to capitalize the first character of sentence, I’m missing that  .</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 4, 2008 12:04 AM</p>
<p>Different Flavours of Icons for Subscribing RSS Feed of this blog</p>
<p>by Bagesh singh</p>
<p>I know you all have heard about the blogging Idol competition and I’m one of the participant of that competition. The winner will be the one who will be able to get more and more number of RSS subscribers in the month of July. And, to add some flavor in this   competition, I’ve come up with different RSS Icons for subscribing to RSS feed of this blog. Let’s see how many RSS subscribers this blog will get from these ICONS.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 3, 2008 1:40 AM</p>
<p>Flashing Alert Message Box using JQuery</p>
<p>by Bagesh singh</p>
<p>As you can see in the poll running on this blog, jQuery is leading among the other JavaScript framework by a good margin. And, this blogger is also a great fan of jQuery.This time, I’ve come up with another tutorial of jquery. In this post I’ll show you how to make sliding and flashing alert box in top left corner of the browser using jQuery. This alert box gets displayed with animation when the page is loaded for the first time.</p>
<p>Live Demo</p>
<p>Let’s start looking at the HTML, CSS and JavaScript Code in jquery to make the animated alerting message box using jQuery.</p>
<p>HTML code for Flashing Alert Message using jQuery</p>
<p>&lt;div&gt;</p>
<p>&lt;img id=&#8221;close_message&#8221; style=&#8221;float:right;cursor:pointer&#8221; src=&#8221;12-em-cross.png&#8221; /&gt;</p>
<p>&lt;strong&gt;Massive Offer &lt;/strong&gt;</p>
<p>&lt;p&gt;The detail of this offer goes here dude just Grab this offer !!!!!!! &lt;/p&gt;</p>
<p>&lt;/div&gt;</p>
<p>As you the message box which I want to display is inside the “div” element with id “object”. And there is an image inside of this box with id “close_window”, when this image is clicked the message box gets vanished with fading effect.</p>
<p>CSS code for Flashing Alert Message Box using jQuery</p>
<p>.message{</p>
<p>border:1px solid #CCCCCC;</p>
<p>position:absolute;</p>
<p>width:150px;</p>
<p>border:1px solid #c93;</p>
<p>background:#ffc;</p>
<p>padding:5px;</p>
<p>left:0px;</p>
<p>top : -170px;</p>
<p>}</p>
<p>As you know, I’m very poor in selecting good colors, please forgive me for the bad design of the alert box.</p>
<p>Above is the class which I’ve used for flashing message box. The position property must be “absolute” and the top property should be choosen such a way that the message box gets hidden in the top part of the browser. The other part property of CSS is straightforward you can change them according to your need.</p>
<p>JavaScript code in jQuery for Flashing Alert Message Box</p>
<p>$(document).ready(function()</p>
<p>{</p>
<p>//first slide down and blink the message box</p>
<p>$(&#8220;#object&#8221;).animate({</p>
<p>top: &#8220;0px&#8221;</p>
<p>}, 2000 ).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);</p>
<p>//close the message box when cross red image is clicked</p>
<p>$(&#8220;#close_message&#8221;).click(function()</p>
<p>{</p>
<p>$(&#8220;#object&#8221;).fadeOut(&#8220;slow&#8221;);</p>
<p>});</p>
<p>});</p>
<p>As you know, we’ve placed the message box in the top of the browser in such a way that it is not visible in the browsers. Now, the above jQuery code is used this message box to get slide down and gets flashed in the browser. For this, I’ve used animate() and fadeOut() and fadeIn() functions of jQuery.</p>
<p>And, when the close image of the message box is clicked, the alert box gets vanished with the fading effect.</p>
<p>Download Full Source Code</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jul 1, 2008 11:04 PM</p>
<p>Help me to become the first Blogging Idol</p>
<p>by Bagesh singh</p>
<p>There is a fun competition on organized by dailyblogtips.com named as Blogging Idol Competetion. This is competition among those blogs of which have less than 1,000 RSS Subscribers and I’ve also participated in this.The question is who is going to be the winner? The blog which will be able increase more number of RSS subscribers in the month of July that other blogs will be announced as the winner.</p>
<p>Will this blog be the winner of this competition??</p>
<p>Friend, it all you people who can make me win in this competition. If I will be able to get more no. of RSS subscribers in this month. So, my target will be to get more and more and more RSS subscribers in this month. But there is one problem with me, I’m very poor in marketing  .</p>
<p>But effort of you guys can make me to win this competition. If you are good in marketing I’m looking for the tips from you to increase the number of RSS subscribers .</p>
<p>How can you subscribe to the RSS feed of this blog ?</p>
<p>You can directly put your email address to the email subscription box in the right sidebar of this blog and after subscribing you must activate your subscription by clicking on the link.</p>
<p>I know you all use Firefox browsers to browse the web and all you need to subscribe to the RSS feed using Firefox Live bookmark. You can do this by clcking on the “Subscribe in reader” link in the top of the right sidebar of this blog. In the next page, you have to may have to click on the “View XML Feed” and the subscribing using firefox live bookmark.</p>
<p>You can also Subscribe using google reader of google. I think you all have have the gmail accounts then you can use google reader to subscribe to this blog.</p>
<p>You can use My Yahoo and other RSS subscription resources to subscribe the RSS feed of this blog.</p>
<p>Why Should I subscribe to this blog ?</p>
<p>In this month, I’m going to post some of the useful and interesting tutorials and some of them includes</p>
<p>1) Animated flashing message box using jQuery</p>
<p>2) Animated Tooltip using jQuery</p>
<p>3) Creating Rounded Corner box without using Images</p>
<p>3) Vibrating Ajax login in PHP</p>
<p>5) State Preserved Accordion menu using jQuery (Last time I’ve posted how to create accordion menu using jQuery but State was not preserved in that example) .</p>
<p>UPDATE : Blogging Idol is live now. Here is the list of Competitor of Blogging Idol.</p>
<p>Help me to become the First Blogging Idol and For this</p>
<p>Subscribe to RSS feed of this blog</p>
<p>or</p>
<p>Subscribe by Email</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 30, 2008 11:21 PM</p>
<p>How to disable context menu in browsers ?</p>
<p>by Bagesh singh</p>
<p>Today, I would like to share a fairly simple technique to disable right click menu of the website. I was using around 10-15 lines of JavaScript code to disable the menu that appears on the right click on the browser.</p>
<p>Here the code which you can use in the body tag of the document.</p>
<p>&lt;body&gt;</p>
<p>As you can see, this code blocks the context menu i.e the menu which appears on the right click on the browsers. I’ve tested this code with major four browsers IE. Firefox, Opera and Safari. It worked well in all three browsers except Opera.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 28, 2008 11:01 PM</p>
<p>How to display panel (div) only in Internet Explorer (IE)</p>
<p>by Bagesh singh</p>
<p>If you view this blog in Internet Explorer(IE), you’ll a small yellow panel in the top of this blog but you can’t see that block if you open this blog in other browsers. And, a lot of people has asked me how can we do that, today I would like to share that tips with you guys. This IE specific comments will be easy for you to cope with the wired CSS bugs found in IE as well.</p>
<p>To display panel (div) only in Internet Explorer (IE)</p>
<p>&lt;!&#8211;[if IE]&gt;</p>
<p>&lt;div&gt; Only displayed only in IE .&lt;/div&gt;</p>
<p>&lt;![endif]—-&gt;</p>
<p>To display panel in non-IE browsers only</p>
<p>&lt;![if !IE]&gt;</p>
<p>&lt;div&gt;Only displyed in non IE browsers like FF, Safari etc.&lt;/div&gt;</p>
<p>&lt;![endif]&gt;</p>
<p>To display panel in IE 6 only</p>
<p>&lt;!&#8211;[if IE 6]&gt;</p>
<p>&lt;div&gt;Only displyed in non IE 6.&lt;/div&gt;</p>
<p>&lt;![endif]—-&gt;</p>
<p>To display div in other IE versions except IE 5 (won’t be dislayed in NON-IE browsers)</p>
<p>&lt;!&#8211;[if !IE 5]&gt;</p>
<p>&lt;div&gt;</p>
<p>It will be displayed in other version of IE except IE 5.</p>
<p>It will not be displayed in non IE browsers.</p>
<p>&lt;/div&gt;</p>
<p>&lt;![endif]—-&gt;</p>
<p>To display div in other IE versions except IE 6 (will be displayed in NON-IE browsers as well)</p>
<p>&lt;![if !IE 5]&gt;</p>
<p>&lt;div&gt;</p>
<p>It will be displayed in other version of IE except IE 5.</p>
<p>It will be displayed in non IE browsers.</p>
<p>&lt;/div&gt;</p>
<p>&lt;![endif]&gt;</p>
<p>To display panel in greater version of IE 6 i.e. on IE 7 , IE 8 etc.</p>
<p>&lt;!&#8211;[if gt IE 6]&gt;</p>
<p>&lt;div&gt;Displayed in greater version of IE 6 i.e on IE 7 or IE 8 etc.&lt;/div&gt;</p>
<p>&lt;![endif]—-&gt;</p>
<p>To display div in IE 6 and greater version of IE only</p>
<p>&lt;!&#8211;[if gte IE 6]&gt;</p>
<p>&lt;div&gt;It will be displayed in IE6 and other greater version of IE.&lt;/div&gt;</p>
<p>&lt;![endif]—-&gt;</p>
<p>To display div in IE 7 and previous version of IE 7.</p>
<p>&lt;!&#8211;[if lte IE 7]&gt;</p>
<p>&lt;div&gt;</p>
<p>Displayed in IE 7 and lesser version of IE on IE 6 , IE 5 etc.</p>
<p>&lt;/div&gt;</p>
<p>&lt;![endif]—-&gt;</p>
<p>Now, let me explain some specific terms you’ve seen out there in the conditions,</p>
<p>lt &#8211; less than</p>
<p>lte &#8211; less than or equal to</p>
<p>gt &#8211; greter than</p>
<p>gte &#8211; greater than or equal to</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 28, 2008 10:24 PM</p>
<p>Get travel insurance before visiting new places</p>
<p>by Bagesh singh</p>
<p>One of my friend in Australia planning a flight to Nepal and it was a good news for me . It’s been a good news for me and I wanted to welcome him but don’t know when the political parties call bandh(strikes). Furthermore, crime rate is going up a bit of high these days in Nepal. It is true that traveling to any country which is new to you, is unpredictable and circumstances can be unpredictable.</p>
<p>I advised him for get the Travel Insurance Direct and come to Nepal. He was wondering where to get the cheap and online travel insurance and I showed his www.1cover.com.au. In Australia, most of the people are getting travel insurance from the travel agency from where people have to pay extra commission to travel agency. If you get the travel insurance from www.1cover.com.au, you’ll save around 66% of amount in travel insurance.</p>
<p>One of the other benefits this company is that they’re providing online travel insurance policy via Internet. You can get the quote from their website. If you’re traveling to Nepal, then check their website why do you need to get the travel insurance!!</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 26, 2008 2:39 PM</p>
<p>Which is the best JavaScript and Ajax Framework ?</p>
<p>by Bagesh singh</p>
<p>Last time, I had published a poll asking which is the best PHP framework and in that poll Zend Framework stand out itself to be the most popular PHP framework among the PHP developers. This time ,I’ve come up with another Poll and I would you to participate in this POLL “Which is the best JavaScript and Ajax Framework?”.</p>
<p>There are many JavaScript and Ajax framework available in the web and I think a lot of Web developers are confused which one to begin with. Today, I would like to hear from you which is the best JavaScript Framework among the popular JavaScript framework jquery, prototype.js, mootools, Dojo and YUI.</p>
<p>First let’s see some facts about these framework.If you look at the google trend of these JavaScript and Ajax framework Dojo seems to be dominant in the year 2007 but jQuery seems to be popular these days.</p>
<p>And if you look at this Slick speed selecter test , it seems that Mootools is providing better performance than the other JavaScript frameworks. Prototype.js is one of the oldest JavaScript and Ajax framework which is widely used in many high profile websites over the Internet. Furthermore, YUI which is supported by yahoo and is another strong framework in the list.</p>
<p>If you ask me which one is best JavaScript framework?, My personal favorite is jQuery as you can  see lots of examples in this blog with jQuery. One plus point of jQuery is that it is supported by large community and have a very good documentaion with example in jquery.com.</p>
<p>But I would like to hear from you which JavaScript and Ajax Framework you recommend for other to  use in their project.</p>
<p>Note: There is a poll embedded within this post, please visit the site to participate in this post&#8217;s poll.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 25, 2008 4:22 PM</p>
<p>Zend framework is the most popular PHP framework</p>
<p>by Bagesh singh</p>
<p>Today, I would to announce the result of poll which I’ve started last week titled “Which is the best PHP framework?”. And it seems Zend framework is one of the most popular PHP framework among the PHP project developers.</p>
<p>Result of the POLL &#8211; The Popularity of PHP Framework</p>
<p>Note: There is a poll embedded within this post, please visit the site to participate in this post&#8217;s poll.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 23, 2008 4:39 PM</p>
<p>Prevent your website being displayed inside IFRAME</p>
<p>by Bagesh singh</p>
<p>Sites like Google Image search and goodphptutorials.com displays the website under the IFRAME and I don’t think you guyz want your site to be displayed it under the IFRAME. If you want to protect your site to be displayed under the IFRAME then here is the tips for you.</p>
<p>JavaScript Code Prevent web page being displayed inside iframe</p>
<p>Place the following piece of code in JavaScript to those pages which you want to prevent being displayed inside the IFRAME.</p>
<p>&lt;script&gt;</p>
<p>&lt;!&#8211;</p>
<p>if (top.location.href != self.location.href)</p>
<p>top.location.href = self.location.href;</p>
<p>//&#8211;&gt;</p>
<p>&lt;/script&gt;</p>
<p>The above code is simple and straightforward. First of all, it is checked that if url of the top frame is different to the URL containing the JavaScript code, if they are different then the website comes out of the IFRAME and gets displayed in the browser. This is how we can prevent your web page being displayed inside IFRAME but note that javascript must be enabled otherwise the code won’t take any action.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 22, 2008 4:09 PM</p>
<p>Prevent form post request from another domain in PHP</p>
<p>by Bagesh singh</p>
<p>HTTP POST request from outside domain is one of the way of attacking your website. A intruder can use JavaScript in other domain or localhost to send the repetitive POST request to your web page  containing PHP script. We must prevent this kind of cross domain form posting which might be harmful of our website.</p>
<p>Example of form post a spam</p>
<p>Let’s suppose that, we have a contact form in our website and we’re posting the detail of the form to “contact.php” file. A intruder can use JavaScript in another domain and can send the repetitive post request by placing “http://our-site/contact.php” in the action field of their code and spam our website.</p>
<p>How to check the form being posted from another domain</p>
<p>Last time, I’ve posted the article about useful server variables in PHP. Among them, we can use HTTP_REFERRER server variables to prevent the cross domain form post request. You can look at the  example code in PHP below to check the POST request is from the same domain or different domain.</p>
<p>//if example.com is there in HTTP_REFERRER variable</p>
<p>if(strpos($_SERVER['HTTP_REFERER'],’example.com’))</p>
<p>{</p>
<p>//only process operation here</p>
<p>}</p>
<p>HTTP_REFERRER variable is used here to check where the post request came from. Then, along with strpos() function of PHP, we can check weather the HTTP_REFERRER variable contains our domain as a referrer website or not. If the post request is from our domain then only we can execute the remaining code of our page.</p>
<p>A better approach</p>
<p>The HTTP_REFERRER headers can be disabled or faked and we can’t rely 100% on it.But, we can also use cookie to check for the cross-site post request forgery. And, you know that cookies are also unreliable anyway.</p>
<p>One of the better approach will be to use use a hidden field in the form which contains the md5() value of a salt (a secret value stored in the database) with another dynamic value like session id or IP address of the user and verifying it with PHP when the post request of that form comes in PHP.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 19, 2008 4:11 PM</p>
<p>Useful Keyboard Shortcut keys in Mozilla Firefox</p>
<p>by Bagesh singh</p>
<p>Today, I was playing with Firefox 3 and really enjoyed surfing the net with Firefox 3. It looks really cool. Today, I discovered some of the useful keyboard shortcut keys for the Mozilla Firefox Browser. I want to share this with you guys.</p>
<p>Useful Shortcut keys in Mozilla Firefox</p>
<p>Ctrl + T &#8211; Open new tab in the Firefox browser.</p>
<p>Ctrl + W &#8211; Closes the active tab of the browser</p>
<p>Ctrl + SHIFT + T &#8211; Reopens the recently closed Tab</p>
<p>Middle Mouse Click &#8211; When you click the link with scrolling button, Firefox automatically opens the link in new tab</p>
<p>Ctrl + L &#8211; Move the cursor to the address bar of the browser</p>
<p>Ctrl + K &#8211; Move the cursor to the search bar of the top right side of Firefox</p>
<p>SpaceBar &#8211; Scroll down the page</p>
<p>Shift + SpaceBar &#8211; Scroll Up the page</p>
<p>Ctrl + “+” &#8211; Zoom in the current web page</p>
<p>Ctrl + “-” &#8211; Zoom out the current web page</p>
<p>Ctrl + R or F5 &#8211; Refresh the page</p>
<p>Ctrl + F5 &#8211; Refresh the page fetching content from the server not from the cache</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 18, 2008 4:04 PM</p>
<p>Firebug and Google Toolbar was not working for me in Firefox 3</p>
<p>by Bagesh singh</p>
<p>Today, I got the new and over talked Firefox 3 today. It looks great from all the point of view but there are some sad stuff along with this download for me. I couldn’t use some of my Firefox add-ons with this new version of Firefox3.</p>
<p>Update : sorry guyz for posting it in a hurry, it’s working for me right now, actually id didn’t work in the first installation of Firefox 3, Thanks guyz for commenting.</p>
<p>Too sad, Firbug is not compatible</p>
<p>I’m really upset that Firebug is not compatible with the current version. It is one of my favorite add-ons of Firefox. Firebug is very useful and popular add-ons among web developers. Let’s hope new compatible version of firebug will be released asap.</p>
<p>Google Toolbar is also not compatible</p>
<p>Another one of the most popular add-ons of Mozilla, google toolbar is also not compatible with the Firefox 3. Come on, I store most of the bookmarks in Ggoogle and it seems that I won’t be able to store those books via Google Toolbar until this add-ons is revised for Firefox 3.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 18, 2008 1:14 AM</p>
<p>Let’s set the “world record” by downloading Firefox 3</p>
<p>by Bagesh singh</p>
<p>Which is your favorite web browser? It’s not going to be IE if you’re a web designer of developer. My personal favorite browser is Mozilla Firefox. And it is the one of the most popular browser among the tech people. Today is one of the great day for Mozilla.</p>
<p>They are officially lunching Firefox 3 and I couldn’t wait for it. It has a lot of new feature like one click bookmarking, much faster load times etc. You can get the detail of the new feature of the Mozilla Firefox 3 from here.</p>
<p>And, Spread Firefox has announced to set the world record by downloading Firefox 3 within 24 hour when it is available for download. And, I’m with it, I love this browser. Please download it within 24 hour to set this world record of most software downloaded in 24 hour.</p>
<p>Here is the download page of the Firefox 3, download it and let’s try to set the world record.</p>
<p>But I’m waiting waiting waiting and waiting………………….. and Now it is available for download.</p>
<p>UPDATE: It’s not going to break world record for sure……Mozilla’s site is down after the download of Firefox 3 is available for download……oufff……Mozilla guyz, You let us down.</p>
<p>UPDATE: It’s up again….let’s start downloading it guys</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 17, 2008 10:44 AM</p>
<p>Don’t use “and” and “or” logical operator in PHP, it has flaw</p>
<p>by Bagesh singh</p>
<p>Today, When I was doing some programming stuffs and I found out that there is serious flaw in the “and” , “or” logical operator of PHP. I’m not talking about the symbol “||” and “&amp;&amp;” logical operator. I’m talking about the “and” and “or” logical operator (operator with words).</p>
<p>Example of the flaw of using “and” and “or” logical operator</p>
<p>Look at the following example and notice the output of this example,</p>
<p>$return_val = false or true;</p>
<p>var_dump($return_val);  //prints bool(false)</p>
<p>$return_val = true and false;</p>
<p>var_dump($return_val);  //prints bool(true)</p>
<p>As you can see in the first example, “bool(false)” is the output in the browser. I don’t need to tell you that “false or true” is always true and there is no doubt about this. But look at the output, what a freaking output by the “or” operator of PHP.</p>
<p>And now, just look at the second example, you’ll see “bool(true)” as a output to the browser. What a ridiculous result? How can “true and false” can be true, it must be “false” without any doubt.</p>
<p>But, you’ll not get such a kind of rediculous result with “||” and “&amp;&amp;” logical operator.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 15, 2008 5:38 PM</p>
<p>Don’t marry a girl related to IT profession!!</p>
<p>by Bagesh singh</p>
<p>Today I found a interesting information about marrying a girl who is related to IT profession. And, it suggest that not to marry a girl who is related to the software development field. You want to know why just check out the reason below.</p>
<p>Never marry a Testing girl since she always doubts U.</p>
<p>Never marry a DATABASE girl since she always wants her husband to be a UNIQUE key.</p>
<p>Never marry a C girl because she always have a tendency to BREAK the things and EXIT from house.</p>
<p>Never marry a C++ girl as u may encounter some problems in INHERITANCE.</p>
<p>Never marry a JAVA girl since she always throws EXCEPTIONS.</p>
<p>Never marry a VB girl since she has divorce FORM with her always.</p>
<p>Never marry a UNIX girl ,she always dump u with a core.</p>
<p>Never marry a PASCAL girl ,she always scolds u as rascal.</p>
<p>Never marry a COBOL girl since she may be very good in DIVISION of families.</p>
<p>Never marry a NETWORK girl since she may be very good in shooting troubles.</p>
<p>Did you get that ??? LOL……</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 14, 2008 9:41 PM</p>
<p>Which is the best PHP framework ?</p>
<p>by Bagesh singh</p>
<p>I’ve been asked a lot of times which is the best PHP framework. Well, it’s a very difficult question to answer this question and there are some pros and corns in each framework. So, today I would to hear your views via poll. Please let everybody know which is the best PHP framework among CakePHP, Symfony, Zend Framework, CodeIgniter and Seagull. So that, it will be easier for the PHP developer to choose right framework for the next project. And please post the comment, if you’ve something more to say.</p>
<p>Note: There is a poll embedded within this post, please visit the site to participate in this post&#8217;s poll.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 12, 2008 11:15 PM</p>
<p>Parsing the XML in easy way using PHP</p>
<p>by Bagesh singh</p>
<p>Parsing the XML has been a tough task among the programmer of PHP. I frequently get questions from my friend and via email “How can we parse XML in an easy way? It seems to be a tough task”. If SimpleXML extension is loaded in PHP then it’s not a tough task. But, keep in mind that SimpleXML extension of PHP is only available from the PHP 5.0.</p>
<p>How to check weather simpleXML extension is loaded or not?</p>
<p>You can use the “phpinfo()” function available in PHP to know weather “SimpleXML” extension is loaded or not in PHP. You can see a separate section “SimpleXML” with detail information about this on “phpinfo()”.</p>
<p>Example of parsing xml in easy way using SimpleXML functions</p>
<p>First of all let , look at the simple xml format of the molecule database which I’m going to parse in our example,</p>
<p>&lt;?xml version=&#8217;1.0&#8242;?&gt;</p>
<p>&lt;moleculedb&gt;</p>
<p>&lt;molecule name=&#8217;Alanine&#8217;&gt;</p>
<p>&lt;symbol&gt;ala&lt;/symbol&gt;</p>
<p>&lt;code&gt;A&lt;/code&gt;</p>
<p>&lt;/molecule&gt;</p>
<p>&lt;molecule name=&#8217;Lysine&#8217;&gt;</p>
<p>&lt;symbol&gt;lys&lt;/symbol&gt;</p>
<p>&lt;code&gt;K&lt;/code&gt;</p>
<p>&lt;/molecule&gt;</p>
<p>&lt;/moleculedb&gt;</p>
<p>As you can see, I’ve included both attribute and value of the element in above XML structure. Now, I’ll show you How can we parse the above XML data in an easy way using PHP</p>
<p>PHP code to parse XML using SimpleXML</p>
<p>//this is a sample xml string</p>
<p>$xml_string=&#8221;&lt;?xml version=&#8217;1.0&#8242;?&gt;</p>
<p>&lt;moleculedb&gt;</p>
<p>&lt;molecule name=&#8217;Alanine&#8217;&gt;</p>
<p>&lt;symbol&gt;ala&lt;/symbol&gt;</p>
<p>&lt;code&gt;A&lt;/code&gt;</p>
<p>&lt;/molecule&gt;</p>
<p>&lt;molecule name=&#8217;Lysine&#8217;&gt;</p>
<p>&lt;symbol&gt;lys&lt;/symbol&gt;</p>
<p>&lt;code&gt;K&lt;/code&gt;</p>
<p>&lt;/molecule&gt;</p>
<p>&lt;/moleculedb&gt;&#8221;;</p>
<p>//load the xml string using simplexml function</p>
<p>$xml = simplexml_load_string($xml_string);</p>
<p>//loop through the each node of molecule</p>
<p>foreach ($xml-&gt;molecule as $record)</p>
<p>{</p>
<p>//attribute are accessted by</p>
<p>echo $record['name'], &#8216;  &#8216;;</p>
<p>//node are accessted by -&gt; operator</p>
<p>echo $record-&gt;symbol, &#8216;  &#8216;;</p>
<p>echo $record-&gt;code, &#8216;&lt;br /&gt;&#8217;;</p>
<p>}</p>
<p>As you see the above string is parsed using simplexml_load_string() function and the data are stored in the formed of array object of SimpleElement. After that, the array element is displayed by using foreach() loop of PHP.</p>
<p>Well, you might have already guessed the output of the parsed XML in browser. People who couldn’t guess the output don’t worry I’m a good guy and never leave the suspense in the middle. Here is the output of the code.</p>
<p>Alanine ala A</p>
<p>Lysine lys K</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 10, 2008 3:13 PM</p>
<p>Some Magical and weired bug in Microsoft Windows</p>
<p>by Bagesh singh</p>
<p>Today, I got a interesting email from one of my friend. And, There were few magical bug about Microsoft windows and Microsoft word in that email. I tried it and found that these are really interesting bug and don’t know what is this and why these bugs haven’t been solved by Microsoft.</p>
<p>MAGICAL BUG #1</p>
<p>An Indian discovered that nobody can create a FOLDER anywhere on the computer which can be named as “CON”. This is something pretty cool…and unbelievable… Microsoft the whole Team, couldn’t answer, why this happened!</p>
<p>TRY IT NOW ,IT WILL NOT CREATE FOLDER NAMED ” CON ” IN MICROSOFT WINDOWS</p>
<p>MAGICAL BUG #2</p>
<p>For those of you using Windows, do the following:</p>
<p>1) Open an empty notepad file</p>
<p>2.) Type &#8211; Bush hid the facts (without the quotes)</p>
<p>3.) Save it as whatever you want.</p>
<p>4.) Close it, and re-open it.</p>
<p>is it just a really weird bug? <img src='http://www.bageshsingh.com/bagesh-blog/wp-includes/images/smilies/icon_confused.gif' alt=':-?' class='wp-smiley' /> ?</p>
<p>MAGICAL BUG #3</p>
<p>Microsoft crazy facts</p>
<p>This is something pretty cool and neat…and unbelievable… At Microsoft the whole Team, including Bill Gates, couldn’t answer why this happened!</p>
<p>It was discovered by a Brazilian. Try it out yourself…</p>
<p>Open Microsoft Word and type</p>
<p>=rand (200, 99)</p>
<p>And then press ENTER.. And see the magic..</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 8, 2008 11:31 AM</p>
<p>Block Shuffling effect using jquery</p>
<p>by Bagesh singh</p>
<p>Last time, I showed you how to navigate the content in various effect using jQuery. In this post, I’ll show you how can you generate the shuffle effect i.e one block moves under another block with sliding from the left.</p>
<p>LIVE DEMO</p>
<p>Now let’s look at the various code to perform this task.</p>
<p>HTML and CSS code for shuffling the block</p>
<p>This code is same as the the one I’ve shown you in the content navigation effect using jquery post. Please refer to that post to view the HTML and CSS code for detail. Note that, each link’s “href” attribute is pointing to the “id” element of the block.</p>
<p>JavaScript code in jQuery to shuffle the block</p>
<p>//when the anchor is clicked</p>
<p>$(&#8220;a.linkclass&#8221;).click(function()</p>
<p>{</p>
<p>//check weather the visible block and clicked link&#8217;s block is same or different</p>
<p>if($(this).attr(&#8220;href&#8221;)!=&#8221;#&#8221;+$(&#8220;.msg_body:visible&#8221;).attr(&#8220;id&#8221;))</p>
<p>{</p>
<p>//reduces the z-index and margin of left side increased and decreased by 400px and hide</p>
<p>$(&#8220;.msg_body:visible&#8221;).css(&#8220;z-index&#8221;,&#8221;0&#8243;).animate({marginLeft: &#8220;-=400px&#8221;},&#8221;500&#8243;).animate({marginLeft: &#8220;+=400px&#8221;},&#8221;500&#8243;).hide(&#8220;1&#8243;);</p>
<p>//increase the z-index of the new visible block</p>
<p>$($(this).attr(&#8220;href&#8221;)).css(&#8220;z-index&#8221;,&#8221;10&#8243;).fadeIn(400);</p>
<p>}</p>
<p>}</p>
<p>When the anchor with the “linkclass” is clicked, first of all it is check that weather the clicked anchor’s link is same as the visible block. If it is the same then the animation doesn’t take place. When these are different, then the visible block’s “z-index” is decreased to zero and it gets slides to the left and then into right by using altering the value in the “margin-left” property. And, finally this block gets hidden. In the meanwhile, block whose name in the “href” attribute of the clicked anchor gets visible with fade in effect and “z-index” of this block is set to “10″ so that it overlaps the slided block.</p>
<p>Download Full Source Code</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 5, 2008 11:44 AM</p>
<p>Function to rotate image in PHP</p>
<p>by Bagesh singh</p>
<p>GD library in PHP is very useful for image processing and you can do a lot image manipulation from it. In this post, I’ll show you a simple Image manipulation (image rotation)using the function provided below in PHP. You’ll see how easy it is to rotate an image using PHP.</p>
<p>Function to rotate image using GD library of PHP</p>
<p>function rotateImage($sourceFile,$destImageName,$degreeOfRotation)</p>
<p>{</p>
<p>//function to rotate an image in PHP</p>
<p>//developed by Bagesh singh Bhattara (http://Bagesh singhbh.com.np)</p>
<p>//get the detail of the image</p>
<p>$imageinfo=getimagesize($sourceFile);</p>
<p>switch($imageinfo['mime'])</p>
<p>{</p>
<p>//create the image according to the content type</p>
<p>case “image/jpg”:</p>
<p>case “image/jpeg”:</p>
<p>case “image/pjpeg”: //for IE</p>
<p>$src_img=imagecreatefromjpeg(”$sourceFile”);</p>
<p>break;</p>
<p>case “image/gif”:</p>
<p>$src_img = imagecreatefromgif(”$sourceFile”);</p>
<p>break;</p>
<p>case “image/png”:</p>
<p>case “image/x-png”: //for IE</p>
<p>$src_img = imagecreatefrompng(”$sourceFile”);</p>
<p>break;</p>
<p>}</p>
<p>//rotate the image according to the spcified degree</p>
<p>$src_img = imagerotate($src_img, $degreeOfRotation, 0);</p>
<p>//output the image to a file</p>
<p>imagejpeg ($src_img,$destImageName);</p>
<p>}</p>
<p>The above function takes takes three argument, first one is the source image to be rotated and the second one is the name of file which is resulted after rotating the original image. And, the last parameter is the degree of the rotation of Image.</p>
<p>In this PHP function, first of all the information about the source image is stored in “$imageinfo” array. The MIME type of the file are stored in “mime” key of the “$imageinfo” array. And then appropriate image resource is created using the proper MIME type. And then, imagerotate() function of PHP is used for the rotation of the image then imagejpeg() is used to output the image to a file.</p>
<p>Example of the roation of Image using PHP function</p>
<p>Look at the original Image which I’m going to rotate in PHP</p>
<p>Now let’s look at the php code to call the above function see the result of rotated image with that function</p>
<p>&lt;?php rotateImage(&#8216;girl.jpg&#8217;,'rotated.jpg&#8217;,90); ?&gt;</p>
<p>&lt;?php rotateImage(&#8216;girl.jpg&#8217;,'rotated.jpg&#8217;,-45); ?&gt;</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 2, 2008 3:59 PM</p>
<p>Letter to Bill Gates about the flaw in Microsoft’s Products</p>
<p>by Bagesh singh</p>
<p>Today I got a funny forwarded email from my friend Hari and I couldn’t stop posting it here in my blog. Just checkout the problem Banta is having in his new computer with various software products from Microsoft.</p>
<p>Subject : Problems with the Computers</p>
<p>Dear Mr. Bill Gates,</p>
<p>We have bought a computer for our home and we have found some problems, which I want to bring to your attention.</p>
<p>1) There is a button ‘Start’ but there is no ‘Stop’ button. We request you to check this.</p>
<p>2) We find there is ‘Run’ in the menu. One of my friends clicked ‘Run’ he ran up to Amritsar! So, we request you to change that to ‘Sit’, so that we can click that by sitting.</p>
<p>3) One doubt is whether any ‘Re-scooter’ is available in system? I find only ‘Re-cycle’, but I own a scooter at my home.</p>
<p>4) There is ‘Find’ button but it is not working properly. My wife lost the door key and we tried a lot trace the key with this ‘Find’ button, but were unable to trace. Please rectify this problem.</p>
<p>5) My child learnt ‘Microsoft Word’ now he wants to learn ‘Microsoft Sentence’, so when you will provide that?</p>
<p>6) I brought computer, CPU, mouse and keyboard, but there is only one icon, which shows ‘My Computer’: when you will provide the remaining items?</p>
<p>7) It is surprising that windows says ‘My Pictures’ but there is not even a single photo of mine. So when will you keep my photo in that.</p>
<p>8 ) There is ‘MICROSOFT OFFICE’ what about ‘MICROSOFT HOME’ since I use the PC at home only.</p>
<p>9) You provided ‘My Recent Documents’. When you will provide ‘My Past Documents’?</p>
<p>10) You provide ‘My Network Places’. For God shake please do not provide ‘My Secret Places’. I do not want to let my wife know where I go after my office hours.</p>
<p>Regards,</p>
<p>Banta</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jun 1, 2008 3:39 PM</p>
<p>How to make accordion menu using jquery</p>
<p>by Bagesh singh</p>
<p>Last time, I’ve shown how to create accordion using jquery. But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.</p>
<p>Live Demo of accordion menu using jQuery</p>
<p>HTML structure for accordion menu using jQuery</p>
<p>&lt;div class=&#8221;menu_list&#8221;&gt;</p>
<p>&lt;p class=&#8221;menu_head&#8221;&gt;Header-1&lt;/p&gt;</p>
<p>&lt;div class=&#8221;menu_body&#8221;&gt;</p>
<p>&lt;a href=&#8221;#&#8221;&gt;Link-1&lt;/a&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;p&gt;Header-2&lt;/p&gt;</p>
<p>&lt;div class=&#8221;menu_body&#8221;&gt;</p>
<p>&lt;a href=&#8221;#&#8221;&gt;Link-1&lt;/a&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;p class=&#8221;menu_head&#8221;&gt;Header-3&lt;/p&gt;</p>
<p>&lt;div class=&#8221;menu_body&#8221;&gt;</p>
<p>&lt;a href=&#8221;#&#8221;&gt;Link-1&lt;/a&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;/div&gt;</p>
<p>As you can see the structure, the elements of the menu are inside the div with class “menu_list”. And each blocks of menu contains the header with class “menu_head” and div with class “menu_body”. Note that, there is another pane with the id “secondpane” whose code is similar as above and not posted above.</p>
<p>CSS code for accordion menu using jQuery</p>
<p>.menu_list {</p>
<p>width: 150px;</p>
<p>}</p>
<p>.menu_head {</p>
<p>padding: 5px 10px;</p>
<p>cursor: pointer;</p>
<p>position: relative;</p>
<p>margin:1px;</p>
<p>font-weight:bold;</p>
<p>background: #eef4d3 url(left.png) center right no-repeat;</p>
<p>}</p>
<p>.menu_body {</p>
<p>display:none;</p>
<p>}</p>
<p>.menu_body a {</p>
<p>display:block;</p>
<p>color:#006699;</p>
<p>background-color:#EFEFEF;</p>
<p>padding-left:10px;</p>
<p>font-weight:bold;</p>
<p>text-decoration:none;</p>
<p>}</p>
<p>.menu_body a:hover {</p>
<p>color: #000000;</p>
<p>text-decoration:underline;</p>
<p>}</p>
<p>I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight forward and you can change is according to your need. Note that, the display property in “menu_body” is set to “hidden” so that the menu links are hidden when the page is loaded. Furthermore, the display property in the link inside “menu_body” class is set to “block” so that each menu appears in new line. You can see a image in the “menu_head” class, this is the image which gets changes with the visibility of the menu item in each menu’s head.</p>
<p>I’ve used the images from sweetie icon pack, you can download the other beautiful icon from the their website.</p>
<p>Javascript Code using jQuery</p>
<p>Now finally look at the JavaScript code to accomplish this, first of we need to import the jQuery library</p>
<p>&lt;script language=&#8221;javascript&#8221; src=&#8221;jquery.js&#8221;&gt;&lt;/script&gt;</p>
<p>And, then we need to write few lines of simple code in jQuery to do this, let’s look at the jquery code of the first accordion menu whose visibility gets toggled on the mouse click event on each header,</p>
<p>//slides the element with class &#8220;menu_body&#8221; when paragraph with class &#8220;menu_head&#8221; is clicked</p>
<p>$(&#8220;#firstpane p.menu_head&#8221;).click(function()</p>
<p>{</p>
<p>$(this).css({backgroundImage:&#8221;url(down.png)&#8221;}).next(&#8220;div.menu_body&#8221;).slideToggle(300).siblings(&#8220;div.menu_body&#8221;).slideUp(&#8220;slow&#8221;);</p>
<p>$(this).siblings().css({backgroundImage:&#8221;url(left.png)&#8221;});</p>
<p>});</p>
<p>When the paragraph with class “menu_head” inside the element with the id “firstpane” gets clicked, the background image of it changed to down arrow. And then, next div with class “menu_body” gets slided in toggling it’s visibility. Furthermore, the other sibling’s div with class “menu_body” gets slided up. And then, the background image of the other sibling’s of “p” is changed to left arrow. Now look at the code of the accordion menu under mouse over effect.</p>
<p>//slides the element with class &#8220;menu_body&#8221; when mouse is over the paragraph</p>
<p>$(&#8220;#secondpane p.menu_head&#8221;).mouseover(function()</p>
<p>{</p>
<p>$(this).css({backgroundImage:&#8221;url(down.png)&#8221;}).next(&#8220;div.menu_body&#8221;).slideDown(500).siblings(&#8220;div.menu_body&#8221;).slideUp(&#8220;slow&#8221;);</p>
<p>$(this).siblings().css({backgroundImage:&#8221;url(left.png)&#8221;});</p>
<p>});</p>
<p>This code is preety similar to the above code but the difference is only that this accordion menu works on the mouse over effect whereas the above accordion menu works on the mouse click event.</p>
<p>Download Source Code</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 30, 2008 1:16 PM</p>
<p>How to execute PHP code entered from textbox or textarea</p>
<p>by Bagesh singh</p>
<p>Yesterday, Sujit asked me how can we execute the php code entered through textarea in PHP. In many cases, it’s not good to execute the php code entered from textarea in PHP from the secruity point of view but in some cases you may have to do this and I’m going to tell you here how you can do this in PHP.</p>
<p>Execute the PHP code entered through textbox or textarea</p>
<p>echo &#8220;echo &#8216;test&#8217;;&#8221;; //just prints echo &#8216;test&#8217;;</p>
<p>Above line just prints echo ‘test’; , you can’t do it from that way. For executing the php code entered form textarea, you have to take the help of useful PHP function called eval() . Take a look at few examples of eval() function to execute the PHP code which is supplied as a string.</p>
<p>eval(&#8220;echo &#8216;test&#8217;;&#8221;); // prints test in browser</p>
<p>eval(&#8221; phpinfo(); &#8220;); //outputs the information provided by phpinfo()</p>
<p>Isn’t that easy to do? eval() comes handy when you’ve to execute the PHP code which is supplied as a string . But always be careful, there are a lot of dangerous things can be done if PHP code can be executed from eval() to invade the security of your website.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 27, 2008 3:03 PM</p>
<p>Default arguments in the functions of PHP</p>
<p>by Bagesh singh</p>
<p>If you are unaware of default argument in function then you should know that you candefine the function with default arguments in PHP as you can do it C and C++. Providing default arguments in the function can be very useful when you’ve to extend the the functionality of the previously written functions.</p>
<p>Example of using default argument in the function of PHP</p>
<p>Let’s suppose that you’ve already written a function to “calculate the amount collected in day by site”</p>
<p>function getAmountCollected($day)</p>
<p>{</p>
<p>//code for function goes here</p>
<p>}</p>
<p>Assume that this function is called from around 20 places in your project. After sometime, your client asked you to find the ” amount collected by site in that date range”. For this case, you need to pass two parameters(start date and end date) to the function.</p>
<p>Do you write another function or extend the functionality of the same function?</p>
<p>I would use the same function for this purpose to minimize the code. But one major problem, we’ve already called the functions from many places with the single argument. How can we define the same function which can be called both with single and double argument? In this case, default argument comes handy,</p>
<p>function getAmountCollected($day, $end_day=’none’)</p>
<p>{</p>
<p>//code for function goes here</p>
<p>}</p>
<p>As you can see above, we’ve placed the second argument in this function like “$end_day=’none’“, which is called the default argument of the function. You can call this function with both single and double arguments.</p>
<p>And, when the second argument is not supplied while calling the function, the variable “$end_day” contains “none” value in it. i.e when we call this function called like this with single argument</p>
<p>getAmountCollected(’2008-05-14′); //remember single argument</p>
<p>then the second parameter will have “none” value in it in the called function.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 25, 2008 12:02 AM</p>
<p>7 Useful functions to tighten the security in PHP</p>
<p>by Bagesh singh</p>
<p>Security is a very important aspect of programming. In PHP, there are few useful functions which is very handy for preventing your website from various attacks like SQL Injection Attack , XSS attack etc.Let’s check few useful functions available in PHP to tighten the security in your project. But note that this is not a complete list, it just list of functions which I found useful for using in your project.</p>
<p>1) mysql_real_escape_string() &#8211; This function is very useful for preventing from SQL Injection Attack in PHP . This function adds backslashes to the special characters like quote , double quote , backslashes to make sure that the user supplied input are sanitized before using it to query. But, make sure that you are connected to the database to use this function.</p>
<p>2) addslashes() &#8211; This function works similar as mysql_real_escape_string(). But make sure that you don’t use this function when “magic_quotes_gpc” is “on” in php.ini. When “magic_quotes_gpc” is on in php.ini then single quote(’) and double quotes (”) are escaped with trailing backslashes in GET, POST and COOKIE variables. You can check it using the function “get_magic_quotes_gpc()” function available in PHP.</p>
<p>3) htmlentities() &#8211; This function is very useful for to sanitize the user inputted data. This function converts the special characters to their html entities. Such as, when the user enters the characters like “&lt;” then it will be converted into it’s HTML entities &lt; so that preventing from XSS and SQL injection attack.</p>
<p>4) strip_tags() &#8211; This function removes all the HTML, JavaScript and php tag from the string. But you can also allow particular tags to be entered by user using the second parameter of this function. For example,</p>
<p>echo strip_tags(”&lt;script&gt;alert(’test’);&lt;/script&gt;”);</p>
<p>will output</p>
<p>alert(’test’);</p>
<p>5) md5() &#8211; Some developers store plain password in the database which is not good for security point of view. This function generates md5 hash of 32 characters of the supplied string. The hash generated from md5() is not reversible i.e can’t be converted to the original string.</p>
<p>6) sha1() &#8211; This function is similar to md5 but it uses different algorithm and generates 40 characters hash  of a string compared to 32 characters by md5().</p>
<p>7) intval() &#8211; Please don’t laugh. I know this is not a security function, it is function which gets the integer value from the variable. But you can use this function to secure your php coding. Well, most the values supplied in GET method in URL are the id from the database and if you’re sure that the supplied value must be integer then you can use this function to secure your code.</p>
<p>$sql=”SELECT * FROM product WHERE id=”.intval($_GET['id']);</p>
<p>As, you can see above, if you’re sure that the input value is integer you can use intval() as a secrity function as well.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 22, 2008 12:48 PM</p>
<p>Interesting Definitions of IT job People’s Designations</p>
<p>by Bagesh singh</p>
<p>Today, I’ve got a interesting forward mail from one of my friend and I couldn’t stop posting it here. Check out some of the very funny and interesting definitions of the various designations of the people related to the IT jobs. Please don’t take the definitions too seriously. These definitions are just for fun and nothing to do with the professional world.</p>
<p>1. Project Manager is a Person who thinks nine Women can deliver a baby in One month.</p>
<p>2. Developer is a Person who thinks it will take 18 months to deliver a Baby.</p>
<p>3. Onsite Coordinator is one who thinks single Woman can deliver nine babies in one month.</p>
<p>4. Client is the one who doesn’t know why he wants a baby.</p>
<p>5. Marketing Manager is a person who thinks he can deliver a baby even if no man and woman are available.</p>
<p>6. Resource Optimization Team thinks they don’t Need a man or woman; They’ll produce a child with zero resources.</p>
<p>7. Documentation Team thinks they don’t care whether the child is delivered, they’ll just document 9 months.</p>
<p>8. Quality Auditor is the person who is never happy with the PROCESS to produce a baby.</p>
<p>9. Tester is a person who always tells his wife that this is not the Right baby.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 19, 2008 12:32 AM</p>
<p>how to choose suitable web hosting provider ?</p>
<p>by Bagesh singh</p>
<p>Previously, this blog was hosted under a web server provided by a local web hosting provider out here in Nepal. I had few problems with that hosting provider and made up my mind to change the web hosting provider and I didn’t know which provider will be the best to choose among many found in the Internet.</p>
<p>Before choosing the web hosting provider, you should consider these main important factors and features in that server,</p>
<p>1) Uptime of server</p>
<p>2) Provided web space and allowed band-width per month</p>
<p>3) Allowed domains per account</p>
<p>4) The bonus features provided in particular product</p>
<p>5) The feedback or review provided by other users</p>
<p>6) Price per year</p>
<p>After all, I’ve chosen bluehost.com for the web hosting of this blog and of my other websites. Many many thanks to http://webhostinggeeks.com for the reviews of various web hosting providers in their website. As, you can see in their home page there are the list of top 10 web hosting providers and these top ten provider are based upon their features, price and the other bonus features. And, for each hosting provider in their list, they’ve all the details displayed in their website. Monitoring the uptime of various web hosting provider has been the one of the best feature for me in their website. Uptime gives the idea that how reliable that particular web hosting provider is. It can be measure for choosing best provider if you don’t want your website to be down many times in a day.</p>
<p>Furthermore, every web hosting provider endorses their product s is the best in the market but the crucial thing is user’s feedback about that hosting provider and thanks to webhostinggeeks for web hosting reviews on their website. You can read the other user’s feedback in their website before choosing any web hosting provider.And, you can post your own review about your web hosting provider in this website.</p>
<p>Finally, if you think you need more information for choosing your web hosting provider then you can check web hosting articles on their website. There are very useful information, articles and posts about various web hosting resources in this section. These high quality articles might be very useful for choosing appropriate and best web hosting provider for you.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 16, 2008 4:01 PM</p>
<p>Some unusual comparison operations in PHP</p>
<p>by Bagesh singh</p>
<p>Today I was working for a project and a weired comparison operation in PHP got my brain out for 2 hour and after searching in google I could able to figure out the problem and I’m posting here so that you guys who are unaware of this kind of comparison will not suffer in future. First let’s see two examples the unusual comparison in PHP.</p>
<p>var_dump(0 == &#8220;c&#8221;); //returns true</p>
<p>var_dump(&#8220;5&#8243; == &#8220;05&#8243;); // returns true</p>
<p>As you can see above the two comparison result are unusual. 0==”c” is true which should be acoording to the logic because 0 is not equal to “C” and . But there is unusual comparison rule in PHP which states that,</p>
<p>“If you compare integer with strings then the string is converted to integer”</p>
<p>when “c” is converted into string it becomes 0 and returns true.</p>
<p>Now, let’s look at the second example although the string “5″ is not equal to “05″ but it returns true. Here is another rule for this</p>
<p>“If you compare two numerical strings, they are compared as numerical value”.</p>
<p>Hence, the second statement compares like 5==5 which is always true.</p>
<p>Overcoming such situation with Identical Operator(”===”) in PHP</p>
<p>Identical operator are represented with three equel signs (===) in PHP. Let’s see what is an identical operator is,</p>
<p>$var1===$var2, it returns true if $var1 is equal to $var2 and $var1 and $var2 are of same type.</p>
<p>Now let’s look at the above comparison operation with identical operator</p>
<p>var_dump(5 === &#8220;05&#8243;); //false &#8211; different type of data</p>
<p>var_dump(0 === &#8220;d&#8221;); //false &#8211; different type of data</p>
<p>As, you can see identical operator gives exact result for comparing different type of data.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 14, 2008 10:03 AM</p>
<p>Create mobile sites in a fly using mobilemo</p>
<p>by Bagesh singh</p>
<p>Have you accessed this blog through your mobile phones or PDA? It looks very big and totally inaccessible from those devices. These blog is basically designed and formatted to be fitted for the PC not for the small screened devices.And, you might know that the sites designed for mobile devices are known as “WAP sites” as it uses Wireless Application and they are designed to be fitted for the small screened mobile devices.</p>
<p>I was looking to create a WAP site to promote this blog on the mobile devices and today my search is over. I found a fantastic website called http://www.mobilemo.com/. You can create mobile sites in simple and easy way using tools available in this website. Mobilemo offers a user-friendly platform to create and manage mobile website for the people all around the world. You can promote your classified website, auction websites, blogs through Mobilmo by creating mobile sites in a fly . Most interestingly, they’ve easy to use interface for creating mobile website which is great for those people who are not much familiar with web development. I’ve just created a mobile site on www.mobilemo.com/Bagesh singhbh. I’m customizing the layout of this site soon. Mobilemo provides background templates and customizable color schemes which can’t be found in other plain text WAP sites. Furthermore, Mobilemo also provides an interactive emulator which shows how mobile sites will look like when viewed through a mobile devices and previews the changes made in real-time. If you are looking to create mobile sites for your business then at least give a try and sign up to http://www.mobilemo.com.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 13, 2008 4:13 PM</p>
<p>8 useful server variables available in PHP</p>
<p>by Bagesh singh</p>
<p>You guys must have know about server variables in PHP. Server Variables are those variables which are inside the super global array named $_SERVER available in PHP. There are many server variables in PHP and some of them are very useful for fore developing PHP projects. I’m going to post here some of the very useful server variables available in PHP development.</p>
<p>8 Useful server variables available in PHP</p>
<p>1) $_SERVER['REQUEST_URI'] &#8211; It return the URL in to access the page which is executing the script. If you need to type http://www.example.com/product.php?id=5 to access the page then $_SERVER['REQUEST_URI'] returns “/product.php?id=5″.</p>
<p>2) $_SERVER['DOCUMENT_ROOT'] &#8211; Returns the root directory of the server which is specified in the configuration file of server. This variable usually returns the path like “/usr/yoursite/www” in Linux and “D:/xamps/xampp/htdocs” in windows.</p>
<p>3) $_SERVER['HTTP_HOST'] &#8211; Returns the host’s name as found in the http header. This variable usually returns the path like “example.com” when the you find “http://example.com” in browser’s address-bar and return “www.example.com” when you see http://www.example.com in the address-bar. This is quite useful when you’ve to preserve session while making online payment using PHP since session stored for “http://example.com” is not same as for the “http://www.example.com”.</p>
<p>4) $_SERVER['HTTP_USER_AGENT'] &#8211; Returns the user agent’s (browser) detail accessing the web page. We can use strpos($_SERVER["HTTP_USER_AGENT"],”MSIE”) to detect Microsoft Internet explorer or you can use strpos($_SERVER["HTTP_USER_AGENT"],”Firefox”) to detect firefox browser in PHP.</p>
<p>5) $_SERVER['PHP_SELF'] &#8211; Returns the file-name of the currently executing script. Let’s suppose that you’re accessing the URL http://www.example.com/product.php?id=5 then $_SERVER['PHP_SELF'] returns “/product.php” in your script.</p>
<p>6) $_SERVER['QUERY_STRING'] &#8211; Returns the query string if query string is used to access the script currently executing. Query strings are those string which is available after “?” sign.if you use $_SERVER['QUERY_STRING'] in the script executing the following URL “http://www.example.com/index.php?id=5&amp;page=product” then it returns “id=5&amp;page=product” in your script.</p>
<p>7) $_SERVER['REMOTE_ADDR'] &#8211; Returns the IP address of remote machine accessing the current page. But you can’t relie on $_SERVER['REMOTE_ADDR'] to get the real IP address of client’s machine. See this article to know how to get real IP addrees in PHP.</p>
<p>8 ) $_SERVER['SCRIPT_FILENAME'] &#8211; Returns the absolute path of the file which is currently executing. It returns path like “var/example.com/www/product.php” in Linux and path like “D:/xampp/xampp/htdocs/test/example.php” in windows.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 11, 2008 4:54 PM</p>
<p>All kind of vehicle services for you</p>
<p>by Bagesh singh</p>
<p>Today, I was talking with my friend who stays in Ripon, a city of England. He wanted to buy a medium-size vehicle and I’ve suggested him to buy Land Rover vehicle.He said he couldn’t afford it. Then I showed him a website which provides various services for LandRover like providing Loan for vehicles, servicing of vehicles and you can also buy preowned vehicles from them.</p>
<p>Their website is http://www.riponlandrover.co.uk.Ripon Land Rover is established before 25 years ago and you know experience does count a lot. They offer wide range of new and preowned vehicle. Most importantly, they’ve fully qualified Land Rover trained technicians.These highly qualified professionals work 7 days in a week for providing their services. And, if your vehicle’s body is damaged, don’t worry they do repair the body of your vehicle as well. I know some people can’t afford buy a vehicle, but don’t worry they will also provide loan and finance for buying new and preowned vehicle from their store.If you are staying in that region then I highly recommend you to use their service for buying vehicle, for repairing vehicle and also for buying quality parts of your vehicle.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 11, 2008 12:38 PM</p>
<p>Date format validation in PHP</p>
<p>by Bagesh singh</p>
<p>Today Sushil asked me how can we validate the date which is entered from textbox in “YYYY-MM-DD” format. Well, we can validate the format of the date using regular expression but how to validate weather that date is valid date or not, such as “2007-02-29″ is the correct format of the date but it’s not the valid date.</p>
<p>To overcome that situation, I’ve used checkdate() function available in PHP for validation of date.</p>
<p>Function to validate date format in PHP</p>
<p>function checkDateFormat($date)</p>
<p>{</p>
<p>//match the format of the date</p>
<p>if (preg_match (&#8220;/^([0-9]{4})-([0-9]{2})-([0-9]{2})$/&#8221;, $date, $parts))</p>
<p>{</p>
<p>//check weather the date is valid of not</p>
<p>if(checkdate($parts[2],$parts[3],$parts[1]))</p>
<p>return true;</p>
<p>else</p>
<p>return false;</p>
<p>}</p>
<p>else</p>
<p>return false;</p>
<p>}</p>
<p>In the above function, first of all format of date is validated using regular expression. As you can see the in the preg_match() function, there are three expression each separated by “-” and there can be only digits of length of 4,2 and 2 in these expressions. If the date format is incorrect then this function returns “false” value. And, if the supplied string contains the valid date format then the part matching each expression are stored in the “$parts” array. Such as, if we supply “2007-03-12″ then “2007″, “03″ and “12″ are stored in the “$parts” array. After that, checkdate() function of PHP is used check weather the supplied date is valid date or not.</p>
<p>Example</p>
<p>echo checkDateFormat(&#8220;2008-02-29&#8243;); //return true</p>
<p>echo checkDateFormat(&#8220;2007-02-29&#8243;); //return false</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 8, 2008 12:29 PM</p>
<p>Animated content navigation effect using jquery</p>
<p>by Bagesh singh</p>
<p>I always get bored with the same stuffs. And, I see same kind of content navigation to the different websites. Click a link, let’s the whole web page gets loaded and new page gets displayed. It would be better to show another content in the same page with few animation without loading the whole page.</p>
<p>In this post, I’ll show you how to make various animation to the content using jQuery. First of let’s start looking at the HTML and CSS code,</p>
<p>HTML Code for animated content navigation</p>
<p>&lt;a href=&#8221;#home&#8221; &gt;Home&lt;/a&gt;</p>
<p>&lt;a href=&#8221;#about_us&#8221; &gt;About Us&lt;/a&gt;</p>
<p>&lt;a href=&#8221;#service&#8221; &gt;Services&lt;/a&gt;</p>
<p>&lt;a href=&#8221;#contact_us&#8221; class=&#8221;linkclass&#8221; &gt;Contact Us&lt;/a&gt;</p>
<p>&lt;div&gt;</p>
<p>&lt;div id=&#8221;home&#8221;&gt; content goes here &lt;/div&gt;</p>
<p>&lt;div id=&#8221;about_us&#8221;&gt; content goes here &lt;/div&gt;</p>
<p>&lt;div id=&#8221;service&#8221;&gt; content goes here &lt;/div&gt;</p>
<p>&lt;div id=&#8221;contact_us&#8221;&gt;  content goes here &lt;/div&gt;</p>
<p>&lt;/div&gt;</p>
<p>As you can see above, the “href” attribute of the anchor tag is pointing to the id of the “div”. “Home” anchor tag is pointing to “#home”. In jquery, id of a element is represented by adding “#” prefix to the id of that element.</p>
<p>CSS code for animated content navigation</p>
<p>.container</p>
<p>{</p>
<p>width:312px;</p>
<p>margin-top:20px;</p>
<p>}</p>
<p>.msg_body</p>
<p>{</p>
<p>border:1px solid #CCCCCC;</p>
<p>padding: 5px;</p>
<p>width: 300px;</p>
<p>background-color:#F4F4F8;</p>
<p>text-align:justify;</p>
<p>position:absolute;</p>
<p>}</p>
<p>.linkclass</p>
<p>{</p>
<p>font-weight:bold;</p>
<p>color:#006699;</p>
<p>}</p>
<p>Above CSS code is pretty straight forward and you can change it according to your need. Note that, there is position attribute to “absolute” in the “msg_body” class. Now let’s look at various the javaScript code in jQuery to make the various animated content navigation</p>
<p>Faded content navigation</p>
<p>View Live Demo</p>
<p>//hide the all div except first one</p>
<p>$(&#8216;.msg_body:not(:first)&#8217;).hide();</p>
<p>//when the anchor is clicked content gets faded</p>
<p>$(&#8220;a.linkclass&#8221;).click(function()</p>
<p>{</p>
<p>$(&#8216;.msg_body&#8217;).fadeOut(&#8220;slow&#8221;);</p>
<p>$($(this).attr(&#8220;href&#8221;)).fadeIn(&#8220;slow&#8221;);</p>
<p>});</p>
<p>In the first line of javaScript code, all the element with class “msg_body” is made hidden except the first element with same class. And when the anchor with class “linkclass” is clicked, the element with class “msg_body” gets faded out which is being displayed in browser. And, the element with the id value in the “href” attribute of the clicked anchor tag, get displayed in browser with fading effect.</p>
<p>Shutter like content navigation effect</p>
<p>View Live Demo</p>
<p>//hide the all div except first one</p>
<p>$(&#8216;.msg_body:not(:first)&#8217;).hide();</p>
<p>//when the anchor is clicked content gets faded</p>
<p>$(&#8220;a.linkclass&#8221;).click(function()</p>
<p>{</p>
<p>$(&#8216;.msg_body&#8217;).hide(&#8220;fast&#8221;);</p>
<p>$($(this).attr(&#8220;href&#8221;)).show(&#8220;slow&#8221;);</p>
<p>});</p>
<p>The code is same as the above code but here “hide()” and “show()” function of jQuery is used to hide and display the content in different manner.</p>
<p>Sliding Content Navigation Effect</p>
<p>View Live Demo</p>
<p>//hide the all div except first one</p>
<p>$(&#8216;.msg_body:not(:first)&#8217;).hide();</p>
<p>//when the anchor is clicked content gets faded</p>
<p>$(&#8220;a.linkclass&#8221;).click(function()</p>
<p>{</p>
<p>$(&#8216;.msg_body&#8217;).slideUp(&#8220;slow&#8221;);</p>
<p>$($(this).attr(&#8220;href&#8221;)).slideDown(&#8220;slow&#8221;););</p>
<p>});</p>
<p>This is another content navigation effect with sliding manner. “slideUp()” and “slideDown()” functions of jQuery is used to display this kind of effect.</p>
<p>Download full source code</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 7, 2008 2:43 PM</p>
<p>Promote your website in web directory</p>
<p>by Bagesh singh</p>
<p>You guys all know that this time I’ve got PR-5 from Google in the latest PR update. PR is basically a measure of the link popularity of your website and It’s always good to have your website listed in the web directory for the better page-rank.</p>
<p>Today, I’ve come across a web directory called http://www.dirmania.org. It is seems to be a better web directory with compared to other web directory. Many of the web directory got penalized by Google but this website have maintained the page-rank of 3 in the latest PR update by Google. They provide direct back-links to your website if your website gets listed to their directory. Furthermore, It also displays the page-rank of the listed website in this web directory. Website are listed under various category. If you want to get listed to that web directory it just costs $4 for standard listing and $6 for express listing. But, it can be a free directory for you. “Free” refers that if you are offering some unconditional gift to them then you may get listed to that directory for free of cost.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 5, 2008 2:23 AM</p>
<p>Understanding and Validating Integers in PHP</p>
<p>by Bagesh singh</p>
<p>I’ve found many of my friends struggling with the validation of integers i.e. the numbers with only digits in PHP. Some of them were wondering why is_int() or is_integer() functions of PHP sometimes works and sometimes won’t.</p>
<p>If you become clear with the concept of integer and string in PHP then you’ll obviously come to know that why those functions are not working sometime to validate integers in PHP. Let’s look at this by an example</p>
<p>$a=&#8217;10&#8242;;</p>
<p>$b=10;</p>
<p>As you can see above, $a is string and $b is a integer and thats what does matter in PHP. Now, let’s try is_int() to validate the integers in PHP.</p>
<p>echo is_int($a); //returns false</p>
<p>echo is_int($b); //return true</p>
<p>And many of the PHP programmers tries to validate the posted values such as is_int($_POST['quantity']) and it just returns the false values although there are only digits in posted quantity.Why it is so? Because, $_POST['quantity'] is just a string and nothing more than a string. Values posted from the form’s element can’t be other variable type than string.</p>
<p>How to validate integers (digits) in PHP?</p>
<p>We can use regular expression to check weather posted value contains the integers only or not. But the regular expression might be a tedious task for people who are not good in using regular expression.</p>
<p>The best solution is using a function called ctype_digit() available in PHP. It just check weather the strings contains only digits or not. If you try using ctype_digit($_POST['quantity']) then It will just give you the desired result. But one thing you keep in mind that “ctype_digit()” is character type function the supplied parameter must be a string to get the proper result. And you can use “strval()” function available in PHP to convert any other data type to string in PHP</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 2, 2008 6:06 PM</p>
<p>How to redirect browser to https (ssl) in php</p>
<p>by Bagesh singh</p>
<p>Most of the e-commerce website uses payment gateway for online payment. And, those sites uses SSL (secure socket layer) connection to transfer data to and from the payment gateway.</p>
<p>In the common scenario, most of the sites uses “http” protocol and you can see “http” in the browser’s address bar. But in the above scenario,we need to redirect the browser to “https” which means that “Hypertext Transfer Protocol over Secure Socket Layer”.</p>
<p>Ok let’s see a real example, type “http://www.gmail.com” in browser after a while the “http” gets converted to “https” in address bar, which means this site is transferring the data over SSL protocal.</p>
<p>How to redirect the browser to https when site is using http protocal in PHP?</p>
<p>First of all, you should know that SSL must be installed in the server. To redirect the browser to “https” , we must know that the site is using SSL or not at the moment. And for this, there is a server variable in PHP called “HTTPS”. $_SERVER['HTTPS'] returns “on” values when the site is using SSL connection.</p>
<p>Function to redirect the browser to “https” in PHP</p>
<p>function redirectToHTTPS()</p>
<p>{</p>
<p>if($_SERVER['HTTPS']!=”on”)</p>
<p>{</p>
<p>$redirect= “https://”.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];</p>
<p>header(”Location:$redirect”);</p>
<p>}</p>
<p>}</p>
<p>Above function is quite simple, you can call the function in that page where you’ve to redirect the browser to “https” .This function will preserver you script file name and query string in browser.</p>
<p>Redirecting whole website to “https” using .htaccess</p>
<p>You can call the above function in each and every page to redirect the browser to “https”. But rather than doing so it will be better to write three line of code in .htaccess file to redirect the whole website to use SSL connection throughout the pages.</p>
<p>RewriteEngine On</p>
<p>RewriteCond %{HTTPS} !on</p>
<p>RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}</p>
<p>Just copy and paste the above code in .htaccess file then the whole website will be redirected to “https” when the browser is opened in “http” mode. The browser just get redirected using url rewriting in .htaccess.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>May 1, 2008 8:23 PM</p>
<p>Upgrade your wordpress &#8211; easily and quickly</p>
<p>by Bagesh singh</p>
<p>Hello bloggers mates….well it might be little bit late for alerting you but I think you should upgrade your WordPress blog if you’re using the old version of it. There are a lot of security flaw in the previous versions.Furthermore, if you search in google with the keyword “My blog hacked” and you’ll get around 1,060,000 results.</p>
<p>I’ve not upgraded my blog till yesterday and I was using wordpress 2.3.1 version. I knew about the security vulnerabilities but I was afraid of losing data or site with some possible mistake in upgrading. But today, I successfully upgraded to WordPress 2.5.1 and it was so easy , I did it within 1 minute.</p>
<p>Why to upgrade the wordpress ?</p>
<p>Technorati has announced not to inedex those blogs which are not upgraded.</p>
<p>There are a lot of security flaw in 2.3.X version of wordpress.</p>
<p>Upgarde the wordpress within a minute</p>
<p>Upgarding note at wordpress is time consuing and difficult from a newbie’s point of view. Few days back, I’ve found a fantastic plugin called wordpress automatic upgrade , It is just a great plugin for for upgrading WordPress. I was able to upgrade the wordpress within a minute. A great thanks to http://techie-buzz.com.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 29, 2008 3:57 PM</p>
<p>Google’s Latest PR Update &#8211; I’m winner this time</p>
<p>by Bagesh singh</p>
<p>Last time, I was was really disappointed by the google’s PR update. I was really unknown about some google’s terms and this blog have lost the PR and it went to zero. And believe me, this blog is lame without the traffic of google as it gets more visitor from search engine than the any of the referring site and can’t go against the terms of google.</p>
<p>It seems that google updated the PR recently and this time I’m the winner. Google has really seen the importance of this website and this site moved from PR 0 to PR 5 .Yes, it’s PR 5.</p>
<p>Now, it’s showing “92″ backlinks in the google. After being slapped by google last time, I would have to say it’s been really a great PR update for me.</p>
<p>Please share your feeling about the latest PR update from Google.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 27, 2008 6:44 PM</p>
<p>How to know and handle disabled javascript in browser</p>
<p>by Bagesh singh</p>
<p>In this blog, I’ve been writing a lot of tips and tutorials using JavaScript. I really love JavaScript and hope that you guyz also like it. But what to do when JavaScript is disabled in the client’s browser?. I would like to redirect the visitor to a warning page where he’ll be suggested to enable the JavaScript.</p>
<p>In many scenario, we must need JavaScript in some pages and we never want to process that page.In this post, I’ll show you how to know and handle the disabled JavaScript in browser.</p>
<p>First click on the below link to see a JavaScript enabled page. Now, disable the javaScript in browser and click the below link.</p>
<p>View the Demo</p>
<p>How to know JavaScript is disabled in browser?</p>
<p>As you guyz know, &lt;script&gt;&lt;/script&gt; tag is used for javaScript. Same way there is &lt;noscript&gt;&lt;/noscript&gt; tag which gets in action when the Javascript is diabled in browser.</p>
<p>&lt;script&gt;code here gets executed when javascript is enabled&lt;/script&gt;</p>
<p>&lt;noscript&gt;code here gets executed when javascript is diabled&lt;/noscript&gt;</p>
<p>How to handle diabled javascript in browser?</p>
<p>When javascript is diabled I always want user to be redirected to a page to show warning to enabled javascript.But, JavaScript is diabled how to do this ? well there is meta tag in HTML named “meta refresh” which will redirect you to another page in the interval specified in that header</p>
<p>&lt;noscript&gt;</p>
<p>&lt;META HTTP-EQUIV=&#8221;Refresh&#8221; CONTENT=&#8221;0;URL=disabled.html&#8221;&gt;</p>
<p>&lt;/noscript&gt;</p>
<p>As, you can see above code inside noscript, there is “meta refresh” tag with intevel of “0″ second. As, the javascipt is disabled in that page, the browser gets redirected to “disabled.html” to show some warning message</p>
<p>Download Example Files</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 24, 2008 5:44 PM</p>
<p>Ajax login validation system in PHP using jQuery’s animation</p>
<p>by Bagesh singh</p>
<p>Last time, I’ve showed you how to check user availability in Ajax using jQuery’s fading effect. But I’ve just shown the example without connecting the database and some people have faced problem with database connecting solution of that problem.In this post, I’ll show you how to use Ajax login system in php using jQuery and some animation as well.</p>
<p>View Demo</p>
<p>In this example, first of all we’ll validate the user login detail from ajax showing the messages with some animation. If authenticated, the user will be redirected to the secure page “secure.php”. If you’ll try to directly access “secure.php”, you can’t do that.</p>
<p>Now let’s look at the code how to do this,</p>
<p>HTML Code</p>
<p>&lt; form method=&#8221;post&#8221; action=&#8221;" id=&#8221;login_form&#8221; /&gt;</p>
<p>&lt; input name=&#8221;username&#8221; value=&#8221;" maxlength=&#8221;20&#8243; /&gt;</p>
<p>&lt; input name=&#8221;password&#8221; value=&#8221;" maxlength=&#8221;20&#8243; /&gt;</p>
<p>&lt; input name=&#8221;Submit&#8221; value=&#8221;Login&#8221; /&gt;</p>
<p>&lt; /form &gt;</p>
<p>As you can see in html code, we’ve created the form with id “login_form”.</p>
<p>And furthermore, the CSS code is same as the one available in the pervious post of checking user availability in ajax and php.</p>
<p>JavaScript Code for Ajax Login validation system in PHP</p>
<p>First of all we need to use the jQuery library in our code,</p>
<p>&lt; script src=&#8221;jquery.js&#8221; type=&#8221;text/javascript&#8221;&gt;&lt;/script &gt;</p>
<p>Now let’s look at the code in javaScript to call ajax and show the animated message with fading effects.</p>
<p>$(&#8220;#login_form&#8221;).submit(function()</p>
<p>{</p>
<p>//remove all the class add the messagebox classes and start fading</p>
<p>$(&#8220;#msgbox&#8221;).removeClass().addClass(&#8216;messagebox&#8217;).text(&#8216;Validating&#8230;.&#8217;).fadeIn(1000);</p>
<p>//check the username exists or not from ajax</p>
<p>$.post(&#8220;ajax_login.php&#8221;,{ user_name:$(&#8216;#username&#8217;).val(),password:$(&#8216;#password&#8217;).val(),rand:Math.random() } ,function(data)</p>
<p>{</p>
<p>if(data==&#8217;yes&#8217;) //if correct login detail</p>
<p>{</p>
<p>$(&#8220;#msgbox&#8221;).fadeTo(200,0.1,function()  //start fading the messagebox</p>
<p>{</p>
<p>//add message and change the class of the box and start fading</p>
<p>$(this).html(&#8216;Logging in&#8230;..&#8217;).addClass(&#8216;messageboxok&#8217;).fadeTo(900,1,</p>
<p>function()</p>
<p>{</p>
<p>//redirect to secure page</p>
<p>document.location=&#8217;secure.php&#8217;;</p>
<p>});</p>
<p>});</p>
<p>}</p>
<p>else</p>
<p>{</p>
<p>$(&#8220;#msgbox&#8221;).fadeTo(200,0.1,function() //start fading the messagebox</p>
<p>{</p>
<p>//add message and change the class of the box and start fading</p>
<p>$(this).html(&#8216;Your login detail sucks&#8230;&#8217;).addClass(&#8216;messageboxerror&#8217;).fadeTo(900,1);</p>
<p>});</p>
<p>}</p>
<p>});</p>
<p>return false;//not to post the  form physically</p>
<p>});</p>
<p>As you can see above this code is preety much similar to the previous post of checking username availability in ajax and php and you can see the explanation of the above code from that post. But in above code, where the user is validated, he’ll be logged into the “secure.php” using “document.location” in JavaScript.</p>
<p>$(&#8220;#password&#8221;).blur(function()</p>
<p>{</p>
<p>$(&#8220;#login_form&#8221;).trigger(&#8216;submit&#8217;);</p>
<p>});</p>
<p>Well, as you can see above javaScript’s code, when focus is moved away from the password it also call the for sumit action. Basically whenever you hit tab button in password field, it starts validating the user detail using ajax.</p>
<p>PHP Code for Ajax Login validation system</p>
<p>First of all lets’s look at the code of the “ajax_login.php”.</p>
<p>//get the posted values</p>
<p>$user_name=htmlspecialchars($_POST['user_name'],ENT_QUOTES);</p>
<p>$pass=md5($_POST['password']);</p>
<p>//now validating the username and password</p>
<p>$sql=”SELECT user_name, password FROM tbl_user WHERE user_name=’”.$user_name.”‘”;</p>
<p>$result=mysql_query($sql);</p>
<p>$row=mysql_fetch_array($result);</p>
<p>//if username exists</p>
<p>if(mysql_num_rows($result)&gt;0)</p>
<p>{</p>
<p>//compare the password</p>
<p>if(strcmp($row['password'],$pass)==0)</p>
<p>{</p>
<p>echo “yes”;</p>
<p>//now set the session from here if needed</p>
<p>$_SESSION['u_name']=$user_name;</p>
<p>}</p>
<p>else</p>
<p>echo “no”;</p>
<p>}</p>
<p>else</p>
<p>echo “no”; //Invalid Login</p>
<p>As you can see above, the user login detial is validated from the database. If the user login detail doesn’t exists, it just returns the “no” values and if the user login detial does exists the it just return “yes” values with setting username in session variable.</p>
<p>Finally, let’s look at the code of secure.php</p>
<p>if(empty($_SESSION['u_name']))</p>
<p>header(”Location:index.html”);</p>
<p>//if logout then destroy the session and redirect the user</p>
<p>if(isset($_GET['logout']))</p>
<p>{</p>
<p>session_destroy();</p>
<p>header(”Location:index.html”);</p>
<p>}</p>
<p>echo ” &lt;a href=’secure.php?logout’&gt;&lt;b&gt;Logout&lt;b&gt;&lt;/a&gt; “;</p>
<p>echo ” &lt;div align=’center’&gt;You Are inside secured Page&lt;/a&gt; “;</p>
<p>As you can see above the code of “secure.php” is simpleforward. If the user is not authenticated by session then he’ll be redirected to “index.html”. And there is link for “logout” in this page form where user can destroy the seession.</p>
<p>Download Full Source Code</p>
<p>Implementation Guide:</p>
<p>To implement this code, dump the tbl_user “table” available in the zip file to your database and configure the database connection in “ajax_login.php”.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 21, 2008 9:21 PM</p>
<p>Change default directory page using .htaccess</p>
<p>by Bagesh singh</p>
<p>I know you guzy all know about index file. This is the default file which is executed in the web server. For example, if you type”http://Bagesh singhbh.com.np” in this the browser, the “index.php” gets loaded first. This “index.php” file is commonly know as directory index file.</p>
<p>Basically , the default executed file in the web directory starts with “index” such as “index.php”, “index.htm”, “index.html”, “index.aspx” etc.</p>
<p>Last time in one server, I’ve faced a problem. “index.html” as getting executed by default but “index.php” as not getting executed.In such kind of scenario, we may need to change the default file to be executed in the web directory.</p>
<p>Changing Default Directory index page using .htaccess</p>
<p>The default directory index pages are defined in the apache’s configuration file and it can be override from .htaccess file. To do so put the following code in the .htaccess file,</p>
<p>DirectoryIndex index.html index.htm index.php index.cgi</p>
<p>Remember that you can also append the other names of files in the DirectoryIndex directive and the order of the above “DirectoryIndex” directive determines the order of index file in web directory.</p>
<p>First of all, “index.html” file is looked inside directory and if that file is not found then “index.htm” file is looked and if that is also not found then again seek for “index.php” and so on. If any file defined above directive can’t be found in the directory, then web server just list the files inside that directory if the directory listing is enabled. You can also prevent the directory listing using .htaccess file.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 19, 2008 10:26 AM</p>
<p>Direct advertising on Bagesh singhbh.com.np</p>
<p>by Bagesh singh</p>
<p>This blog is getting a decent number of visitors and this might be a good opportunity for the advertisers who want to promote their service, product or website about web development. This blog might be a doorway for you.</p>
<p>View Pricing Detail »</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 18, 2008 10:53 PM</p>
<p>Ip address validation in PHP using regular expression</p>
<p>by Bagesh singh</p>
<p>If you don’t know how to validate the IP address format in PHP, then you are in the right place.I’ll show you here how to validate the IP address using regular expression in PHP.</p>
<p>As you guyz know, IP address consists four parts. Each parts separated by period “.” and these part consists the digits which ranges from 0 to 255.</p>
<p>Function to validate IP address in PHP using Regular Expression</p>
<p>//function to validate ip address format in php by Bagesh singh Bhattarai(http://Bagesh singhbh.com.np)</p>
<p>function validateIpAddress($ip_addr)</p>
<p>{</p>
<p>//first of all the format of the ip address is matched</p>
<p>if(preg_match(&#8220;/^(d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})$/&#8221;,$ip_addr))</p>
<p>{</p>
<p>//now all the intger values are separated</p>
<p>$parts=explode(&#8220;.&#8221;,$ip_addr);</p>
<p>//now we need to check each part can range from 0-255</p>
<p>foreach($parts as $ip_parts)</p>
<p>{</p>
<p>if(intval($ip_parts)&gt;255 || intval($ip_parts)&lt;0)</p>
<p>return false; //if number is not within range of 0-255</p>
<p>}</p>
<p>return true;</p>
<p>}</p>
<p>else</p>
<p>return false; //if format of ip address doesn&#8217;t matches</p>
<p>}</p>
<p>As you can see above, first of all the format of the “$ip_addr” is validated using regular expression. In the regular expression “d{1,3}” means that there should be digits which can be either 1 to 3 digits because a IP Adress can be “222.0.123.12″ or</p>
<p>“12.15.123.5″. So, each part can consists 1 to 3 digits.</p>
<p>After validating the format using regular expression, each part of the IP address is separated using period(”.”) using explode() function available in PHP. And finally, it is checked that each part of the IP address is between 0 to 225 or not.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 17, 2008 1:26 AM</p>
<p>Textbox to accept only numbers (digits) using jquery</p>
<p>by Bagesh singh</p>
<p>Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his I come up with this solution of textbox which only accepts digits, and if you try to enter any alpha bates in it then it displays the error message with animation.</p>
<p>View Demo</p>
<p>HTML Code</p>
<p>&lt;input id=&#8221;quantity&#8221; /&gt; &lt;span&gt;&lt;/span&gt;</p>
<p>As you can see above, I’ve given the name and id of textbox to “quantity” in this example.This is the textbox which only accepts numbers (digits only). You can see “span” after textbox which is used to display the error message with fading effect using jQuery.</p>
<p>Javascript Code</p>
<p>First of all, we need to use jQuery library as we’re using the jquery’s function to accept only digits.</p>
<p>&lt;script src=&#8221;jquery.js&#8221;&gt;&lt;/script&gt;</p>
<p>Now le’ts write the code in JavaScript using jQuery to accept only digits in textbox and displaying error with animation.</p>
<p>//when key is pressed in the textbox$(&#8220;#quantity&#8221;).keypress(function (e)</p>
<p>{</p>
<p>//if the letter is not digit then display error and don&#8217;t type anything</p>
<p>if( e.which!=8 &amp;&amp; e.which!=0 &amp;&amp; (e.which&lt;48 || e.which&gt;57))</p>
<p>{</p>
<p>//display error message</p>
<p>$(&#8220;#errmsg&#8221;).html(&#8220;Digits Only&#8221;).show().fadeOut(&#8220;slow&#8221;);</p>
<p>return false;</p>
<p>}</p>
<p>});</p>
<p>When the key is pressed, we’re using the key’s ASCII value to check which button is pressed. In first expression, delete, tab or backspace button is is checked and “8″ is the ASCII values of the Back-space. Digits are checked in the second expression. “48″ is the ASCII values of “0″ and “57″ is the ASCII values of “9″. The the ASCII values of the other digits lies between “48″ to “57″. And, if the key pressed values doesn’t lies withing these range, then we are displaying the error message with jQuery’s fading effect.</p>
<p>And, the “return false” statement means that this functions returns false values which means not to type anything on the text box.</p>
<p>Download Full Source Code</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 14, 2008 5:38 PM</p>
<p>Solving time difference between hosting server and local timezone in PHP</p>
<p>by Bagesh singh</p>
<p>I think this is one of the common problem you’ll face while you’re working for the website of a particular country and web server is located in another different country. If client have the dedicated server then you won’t face this problem. But if you just own a single account of that server then you’ll most probably face this problem of synchronizing the time difference of server time and local time.</p>
<p>Problem of time difference of remote server and local time</p>
<p>I was working for Australian auction project in the beginning of my career and the client’s server was located in USA. I was using date() function to get the current date and time in my code.But, it didn’t work at all. You know the reason, I was taking the current time of USA and auction was closing according to timezone of USA, not according to Australian Time Standard. After that, I realized that I should get the local time according to website no matter where the server is hosted.</p>
<p>How to get the local time from remote server in PHP?</p>
<p>Whenever you need to get the current local time and local date in your code then you must take the reference from gmdate() function available in PHP. This function returns the GMT date or time for you. You must know the time difference between GMT and your local time to be used in the project.And, adding that difference to GMT, will give you exact local time for you in PHP no matter where the web server is located.</p>
<p>Function to find the current local time in PHP</p>
<p>Well, I’ve just written a function in PHP which will get the current local time or local date for your project, no matter where the web server related to your project is hosted.</p>
<p>First of All, we must define the hour and second difference from GMT with your current local time in configuration file of your project.</p>
<p>define(&#8220;GMT_HR_DIFF&#8221;,5);</p>
<p>define(&#8220;GMT_MIN_DIFF&#8221;,45);</p>
<p>As, you can see above the the time difference from GMT is 5 hour and 45 second which is Nepali Standard time(NST).</p>
<p>Now, let’s look at the function to reture the current local NST in PHP no matter where the server is hosted.”2008-04-14″ is the example of the date format returned by the function and “2008-04-14 12:15:03 is the format of the time returned by the function and these are the standard time format to be stored in the database.</p>
<p>function getCurrentTime($flag=&#8217;time&#8217;)</p>
<p>{</p>
<p>if($flag==&#8217;time&#8217;)</p>
<p>return date(&#8220;Y-m-d H:i:s&#8221;,mktime (gmdate(&#8220;H&#8221;)+GMT_HR_DIFF,gmdate(&#8220;i&#8221;)+GMT_MIN_DIFF,gmdate(&#8220;s&#8221;),gmdate(&#8220;m&#8221;),gmdate(&#8220;d&#8221;),gmdate(&#8220;Y&#8221;)));</p>
<p>else</p>
<p>return date(&#8220;Y-m-d&#8221;,mktime(gmdate(&#8220;H&#8221;)+GMT_HR_DIFF,gmdate(&#8220;i&#8221;)+GMT_MIN_DIFF,gmdate(&#8220;s&#8221;),gmdate(&#8220;m&#8221;),gmdate(&#8220;d&#8221;),gmdate(&#8220;Y&#8221;)));</p>
<p>}</p>
<p>As you can see above, I’ve taken the help gmdate() and mktime() function, which returns the UNIX timestamp for date.The hour and minute difference is added to GMT time to get the current local time or date for you. If you call the function without any parameter, then this function returns the current time and whenever you call this function with the other parameter like “getCurrentTime(’date’)”, then this function returns the current date according to the timezone set in two parameter.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 11, 2008 10:28 PM</p>
<p>Blink and bounce effect on image or object using jquery</p>
<p>by Bagesh singh</p>
<p>Yesterday, Sushil asked me how can we bounce and blink an image or div using jQuery.In this post, I”ll show you how you can add bounce or blink effect to an image or div using jQuery.</p>
<p>Live Demo</p>
<p>First of all, let’s begin with the html code to add blink and bounce effect to your object using jQuery.</p>
<p>HTML Code:</p>
<p>&lt;div&gt; lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit &lt;/div&gt;</p>
<p>Here the object which is needed to be animated is defined with the class”message” and with id “object”. Remember that, you can also put image in that “div” to bounce or blink.</p>
<p>Css Code:</p>
<p>.message{</p>
<p>border:1px solid #CCCCCC;</p>
<p>padding: 5px;</p>
<p>width: 150px;</p>
<p>background-color:#F4F4F8;</p>
<p>text-align:justify;</p>
<p>position:absolute;</p>
<p>top:50px;</p>
<p>}</p>
<p>You can see the attributes of the “message” class in css. You can change the above attributes as your need but remember one thing that the position property should be “absolute”. If you put it “relative”, the other object around the animated “div” or “image” starts get moved.</p>
<p>Javascript Code:</p>
<p>For blinking out the Object</p>
<p>//hide the object with blink effect</p>
<p>$(&#8220;#blink_out&#8221;).click(function()</p>
<p>{</p>
<p>$(&#8220;#object&#8221;).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);</p>
<p>});</p>
<p>As you can see above code, it is straightforward. When an element with id “blink_out” gets clicked, the element with id “object” gets animated with “fade out” and “fade in” effect of jQuery in alternative manner.</p>
<p>For blinking in the Object</p>
<p>//show the object with blink effect</p>
<p>$(&#8220;#blink_in&#8221;).click(function()</p>
<p>{</p>
<p>$(&#8220;#object&#8221;).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);</p>
<p>});</p>
<p>As you can see this code is same as the above code but altered the way the “image” or “div” gets faded.</p>
<p>For bouncing the Object</p>
<p>//bounce an object</p>
<p>$(&#8220;#bounce&#8221;).click(function()</p>
<p>{</p>
<p>$(&#8220;#object&#8221;).fadeIn(100).animate({top:&#8221;-=20px&#8221;},100).animate({top:&#8221;+=20px&#8221;},100).animate({top:&#8221;-=20px&#8221;},100)</p>
<p>.animate({top:&#8221;+=20px&#8221;},100).animate({top:&#8221;-=20px&#8221;},100).animate({top:&#8221;+=20px&#8221;},100);</p>
<p>});</p>
<p>In the above code, we’ve used jquery’s animate() function to bounce an “image” or “div”. The “top” attribute of the object is toggled to show the bouncing effect on the object.</p>
<p>Download full source code</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 9, 2008 10:10 PM</p>
<p>Hide actual url in address-bar using iframe</p>
<p>by Bagesh singh</p>
<p>Do you want to hide the actual URL in the address-bar? Do you want to display the same url throughout the website? Then here is the tips for you do the same in your website. Just display the same URL i.e http://www.your-site.com throughout your website in address bar, no matter if you in the page http://www.your-site.com/aboutus.html.</p>
<p>Live Demo</p>
<p>As you can see demo, it displays the same url throughout the browser’s address bar.But you are navigating to different page like aboutus.html or services.html. Ok, too much explanation, now let’s know how to do it.</p>
<p>1) First of create, all the other relavant page like “services.html” or “contactus.html” as usual.</p>
<p>2) For home page, rename the actual index page like “index.html” or “index.php” as “home.html” or “home.php” or whatever name you’re comfortable with.</p>
<p>3)Now, in the index page like “index.html” or “index.php”, put the following code</p>
<p>&lt;iframe src=&#8221;home.html&#8221; width=&#8221;100%&#8221; height=&#8221;100%&#8221; frameborder=&#8221;0&#8243; scrolling=&#8221;no&#8221; /&gt;</p>
<p>As, you can see above, we’ve used iframe to display the “home.html” page in the home page by using “src” attribute. The width and height should be “100%” and border should be ” ” for hiding the actual URL from the browser and displaying it so normal.</p>
<p>When a new link is clicked in the page, it gets loaded within “iframe” and displays the same URL throughout the website.</p>
<p>Download Full Source Code</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 7, 2008 12:07 PM</p>
<p>How to check and enable mod_rewrite module in apache</p>
<p>by Bagesh singh</p>
<p>Well, I’ve got around 15 emails asking from readers, how to check the mod_rewrite module in apache and enable mod_rewrite module in apache after reading two most of the popular post of this blog 5 useful url rewriting examples and hide .php extension with url rewriting.</p>
<p>How to check weather mod_rewrite module is enabled or not?</p>
<p>Well there are lots of technique to check this but I’ll show you a very simple technique to check weather mod_rewrite module is enabled or not in you web server.</p>
<p>1) Type &lt;?php phpinfo(); ?&gt; in a php file and save it and run that file in the server.</p>
<p>2) And now you can the list of information, just search the word “mod_rewrite” from the browser’s search menu</p>
<p>3) If it is found under the “Loaded Modules” section then this module is already loaded as you see in the picture below, otherwise you need to go to the next step for enabling mod_rewrite module.</p>
<p>How to enable mod_rewrite module in apache in xampp, wamp?</p>
<p>Now, I’ll show you how to enable how to mod_rewrite module in apache installed under windows environment.</p>
<p>1) Find the “httpd.conf” file under the “conf” folder inside the Apache’s installation folder.</p>
<p>2) Find the following line “#LoadModule rewrite_module modules/mod_rewrite.so” in the “httpd.conf” file.You can do this easily by searching the keyword “mod_rewrite” from find menu.</p>
<p>3) Remove the “#” at the starting of the line, “#” represents that line is commented.</p>
<p>4) Now restart the apache server.</p>
<p>5) You can see now “mod_rewrite” in the Loaded Module section while doing “phpinfo()”.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 6, 2008 3:15 AM</p>
<p>check username availability in ajax and php using jquery’s fading effect</p>
<p>by Bagesh singh</p>
<p>In this post,I’ll show you how to make a fancy username availability checking in ajax and php using jquery.When, you check the the username avaiability a fancy message box will show you the message with a little bit of animation.</p>
<p>View Live Demo</p>
<p>Now let’s check it how to do check the username avaiability in ajax and php using jQuery.</p>
<p>Html Code :</p>
<p>&lt;div &gt;</p>
<p>User Name : &lt;input name=&#8221;username&#8221; value=&#8221;" maxlength=&#8221;15&#8243; /&gt;</p>
<p>&lt;span id=&#8221;msgbox&#8221; style=&#8221;display:none&#8221;&gt;&lt;/span&gt;</p>
<p>&lt;/div&gt;</p>
<p>As you can see the above the “span” with id “msgbox” will show you the username availability message from ajax.</p>
<p>Css code :</p>
<p>.messagebox{</p>
<p>position:absolute;</p>
<p>width:100px;</p>
<p>margin-left:30px;</p>
<p>border:1px solid #c93;</p>
<p>background:#ffc;</p>
<p>padding:3px;</p>
<p>}</p>
<p>.messageboxok{</p>
<p>position:absolute;</p>
<p>width:auto;</p>
<p>margin-left:30px;</p>
<p>border:1px solid #349534;</p>
<p>background:#C9FFCA;</p>
<p>padding:3px;</p>
<p>font-weight:bold;</p>
<p>color:#008000;</p>
<p>}</p>
<p>.messageboxerror{</p>
<p>position:absolute;</p>
<p>width:auto;</p>
<p>margin-left:30px;</p>
<p>border:1px solid #CC0000;</p>
<p>background:#F7CBCA;</p>
<p>padding:3px;</p>
<p>font-weight:bold;</p>
<p>color:#CC0000;</p>
<p>}</p>
<p>I’ve defined three different class for three type of different message class “messagebox” for “checking….” message, “messageboxok” and “messageboxerror” class for displaying username available and not available messages.</p>
<p>As you know you can change the attriubutes of the css of the above code but keep in mind that “position” property should be “absolute”.</p>
<p>Javascript code :</p>
<p>First of all, the jQuery library is used,</p>
<p>&lt;script src=&#8221;jquery.js&#8221; type=&#8221;text/javascript&#8221; language=&#8221;javascript&#8221;&gt;&lt;/script&gt;</p>
<p>And when the focus is moved from the textbox of username the following function is called which call “user_availability.php” through ajax and display the appropriate message with fading effect.</p>
<p>$(&#8220;#username&#8221;).blur(function()</p>
<p>{</p>
<p>//remove all the class add the messagebox classes and start fading</p>
<p>$(&#8220;#msgbox&#8221;).removeClass().addClass(&#8216;messagebox&#8217;).text(&#8216;Checking&#8230;&#8217;).fadeIn(&#8220;slow&#8221;);</p>
<p>//check the username exists or not from ajax</p>
<p>$.post(&#8220;user_availability.php&#8221;,{ user_name:$(this).val() } ,function(data)</p>
<p>{</p>
<p>if(data==&#8217;no&#8217;) //if username not avaiable</p>
<p>{</p>
<p>$(&#8220;#msgbox&#8221;).fadeTo(200,0.1,function() //start fading the messagebox</p>
<p>{</p>
<p>//add message and change the class of the box and start fading</p>
<p>$(this).html(&#8216;This User name Already exists&#8217;).addClass(&#8216;messageboxerror&#8217;).fadeTo(900,1);</p>
<p>});</p>
<p>}</p>
<p>else</p>
<p>{</p>
<p>$(&#8220;#msgbox&#8221;).fadeTo(200,0.1,function()  //start fading the messagebox</p>
<p>{</p>
<p>//add message and change the class of the box and start fading</p>
<p>$(this).html(&#8216;Username available to register&#8217;).addClass(&#8216;messageboxok&#8217;).fadeTo(900,1);</p>
<p>});</p>
<p>}</p>
<p>});</p>
<p>});</p>
<p>As you can see in the first line, “all” css class is removed from the div displaying the message and then “messagebox” class is added to that that element with adding the text “checking” within the element and displaying with fading effect.</p>
<p>After that, ajax is used to call the PHP file, and when response is received through Ajax then jQuery is used to show the respective message-box with fading effects.</p>
<p>Php Code:</p>
<p>//this varible contains the array of existing users</p>
<p>$existing_users=array(&#8216;Bagesh singh&#8217;,'mike&#8217;,'jason&#8217;);</p>
<p>//value got from the get metho</p>
<p>$user_name=$_POST['user_name'];</p>
<p>//checking weather user exists or not in $existing_users array</p>
<p>if (in_array($user_name, $existing_users))</p>
<p>{</p>
<p>//user name is not availble is available</p>
<p>echo “no”;</p>
<p>}</p>
<p>else</p>
<p>{</p>
<p>//user name doesn’t exists</p>
<p>echo “yes”;</p>
<p>}</p>
<p>In the above PHP code, I’ve added three usernames in a array and then check weather that user exists or not in that array and print “yes” or “no” accordingly. The response taken from ajax is used within JavaScript function to display the appropriate message.But, you can use database connection to check the the availability of username in your code.</p>
<p>Download full source</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 4, 2008 12:04 AM</p>
<p>Display random number in random way using JavaScript</p>
<p>by Bagesh singh</p>
<p>I think you guys already know about how to get the random number using JavaScript, if you don’t know then you can use Math.random() to display a random no ranging from 0 to 1. It would have been better if we display the random number in the random way using JavaScript. Ok, Let’s do it..</p>
<p>View the demo</p>
<p>Displaying random number in the random way</p>
<p>To display random number in the random way, what we need is get the random number and write the random in a certain interval.</p>
<p>HTML Code :</p>
<p>&lt;div id=&#8217;random&#8217;&gt;0.00&lt;/div&gt;</p>
<p>&lt;input value=&#8221;Click Me&#8221; /&gt;</p>
<p>As you can see above, the “div” with id “random” gets updated within specified interval and when button is clicked it call the JavaScript function “randValue()”. The first parameter is the maximum of the random number and second parameter specifies how many times the action should be repeated to show the final random number.</p>
<p>JavaScript Code :</p>
<p>&lt;script&gt;</p>
<p>var i=1; //counter</p>
<p>function randValue(maxVal,no_of_time)</p>
<p>{</p>
<p>i++; //counter increment</p>
<p>document.getElementById(&#8216;random&#8217;).innerHTML=&#8221;; //element made blank</p>
<p>//get a random no upto maxVal and round it to two decimal place</p>
<p>var theNumber = (Math.random()*parseInt(maxVal)).toFixed(2);</p>
<p>//put the number to that</p>
<p>document.getElementById(&#8216;random&#8217;).innerHTML=theNumber; //gett</p>
<p>if(i&lt;=no_of_time)</p>
<p>setTimeout(&#8220;randvalue(&#8220;+maxVal+&#8221;,&#8221;+no_of_time+&#8221;)&#8221;,300);</p>
<p>else</p>
<p>i=1;</p>
<p>}</p>
<p>&lt;/script&gt;</p>
<p>As you can see in the first line, counter is set to 1. In the first line of the function, counter is incremented. And then, the content of the “div” is made blank.</p>
<p>var theNumber = (Math.random()*parseInt(maxVal)).toFixed(2);</p>
<p>As you can in this line, the random no is multiplied with the supplied argument to get the random number between zero to maxVal since Math.random() only returns the random number between 0 to 1. And, “toFixed(2)” expression rounds the number to two decimal places. And that number is placed in the “div”.And then “setTimeout()” calls the same function in every 300 millisecond until the counter reaches to “no_of_time”. And, finally the counter is set to 1 to iterate through the same action.</p>
<p>Download Source code</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Apr 1, 2008 10:58 PM</p>
<p>How to make rounded corner textbox using css</p>
<p>by Bagesh singh</p>
<p>In this post, I’ll explain to you how to make the rounded corner textbox using a image and css. Text box is placed over a container element whose background image is the key of the rounded corner textbox.</p>
<p>This is the image which I’ve used in my example, don’t click and start typing it just a image for now.</p>
<p>Now let’s look at the html and css code to display rounded corner textbox.</p>
<p>HTML Code for rounded corner textbox</p>
<p>&lt;div&gt;</p>
<p>&lt;input class=&#8221;loginbox&#8221; /&gt;</p>
<p>&lt;/div&gt;</p>
<p>The container “div” contains the background image of rounded corners and inside of that the real textbox resides.</p>
<p>CSS Code for rounded corner textbox:</p>
<p>.loginboxdiv</p>
<p>{</p>
<p>margin:0;</p>
<p>height:21px;</p>
<p>width:146px;</p>
<p>background:url(login_bg.gif) no-repeat bottom;</p>
<p>}</p>
<p>.loginbox</p>
<p>{</p>
<p>background:none;</p>
<p>border:none;</p>
<p>width:134px;</p>
<p>height:15px;</p>
<p>margin:0;</p>
<p>padding: 2px 7px 0px 7px;</p>
<p>font-family:Verdana, Arial, Helvetica, sans-serif;</p>
<p>font-size:11px;</p>
<p>}</p>
<p>The above CSS code is straight forward, the height and width of the class “loginboxdiv” should be exactly same as the above image which is of “146X21″ pixels. The class “loginbox” is the class of the textbox. As you can see in the css, border is removed and height , width and padding are managed according to the size of the background image.</p>
<p>Working Example- You can type in the rounded corner textbox:</p>
<p>Download Code:</p>
<p>Click here to download full source code</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 30, 2008 6:46 PM</p>
<p>How to make collapsible accordion using jquery and css</p>
<p>by Bagesh singh</p>
<p>Last time I’ve written an article about how to make expand-collapse toggle panel using jQuery. Now, this time I’ll show you how to make collipsible accordion using jQuery.An accordion is a toggle pane where one pane slides down the other pane slides up.</p>
<p>View Demo</p>
<p>HTML Code :</p>
<p>&lt;div class=&#8221;msg_list&#8221;&gt;</p>
<p>&lt;p class=&#8221;msg_head&#8221;&gt;News-Head-1 &lt;/p&gt;</p>
<p>&lt;div class=&#8221;msg_body&#8221;&gt;</p>
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p>&lt;/div&gt;</p>
<p>&lt;p&gt;News-Head-2&lt;/p&gt;</p>
<p>&lt;div class=&#8221;msg_body&#8221;&gt;</p>
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p>&lt;/div&gt;</p>
<p>&lt;p&gt;News-Head-3&lt;/p&gt;</p>
<p>&lt;div class=&#8221;msg_body&#8221;&gt;</p>
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p>&lt;/div&gt;</p>
<p>&lt;/div&gt;</p>
<p>Since, I’ve shown two examples, I’ve distinguished two container with two different id “firstpane” and “secondpane”.The html code of above is of first pane, The second pane’s HTML code is same with different id of the container “div”.</p>
<p>CSS Code :</p>
<p>p {</p>
<p>padding: 0 0 1em;</p>
<p>}</p>
<p>.msg_list {</p>
<p>list-style: none;</p>
<p>margin: 0;</p>
<p>padding: 0;</p>
<p>width: 383px;</p>
<p>}</p>
<p>.msg_head {</p>
<p>padding: 5px 10px;</p>
<p>cursor: pointer;</p>
<p>position: relative;</p>
<p>background-color:#FFCCCC;</p>
<p>margin:1px;</p>
<p>}</p>
<p>.msg_body {</p>
<p>padding: 5px 10px 15px;</p>
<p>background-color:#F4F4F8;</p>
<p>}</p>
<p>the above CSS code is straightforward for making collapsible accordion and you can change the various attribute of the class as your need. But keep in mind that the “position” property of “msg_head” should be “relative”.</p>
<p>Javascript Code:</p>
<p>&lt;script src=&#8221;jquery.js&#8221;&gt;&lt;/script&gt;</p>
<p>First of all, jQuery library is added in our source code. And the following codes are used for displaying the effect of expanding and collapsing.</p>
<p>//hide the all of the element with class msg_body</p>
<p>$(&#8220;.msg_body&#8221;).hide();</p>
<p>//slides the element with class &#8220;msg_body&#8221; when paragraph with class &#8220;msg_head&#8221; is clicked</p>
<p>$(&#8220;#firstpane p.msg_head&#8221;).click(function()</p>
<p>{</p>
<p>$(this).next(&#8220;div.msg_body&#8221;).slideToggle(700).siblings(&#8220;div.msg_body&#8221;).slideUp(&#8220;slow&#8221;);</p>
<p>});</p>
<p>//slides the element with class &#8220;msg_body&#8221; when mouse is over the paragraph</p>
<p>$(&#8220;#secondpane p.msg_head&#8221;).mouseover(function()</p>
<p>{</p>
<p>$(this).next(&#8220;div.msg_body&#8221;).slideDown(&#8220;slow&#8221;).siblings(&#8220;div.msg_body&#8221;).slideUp(&#8220;slow&#8221;);</p>
<p>});</p>
<p>As you can in the firt line, all the element with the class “msg_body” is hidden in the document. And after that, when a paragraph with class “msg_head” within id “firstpane” is cliked , the next “div” element with class “msg_body” is slidded toggling. But for the “secondpane”, when mouse is moved over the element with class “msg_head”, the next element with class “msg_body” gets slided down and all the other siblings with class “msg_body” gets slided up creating the effect of collapsible accordion.</p>
<p>Click here to download the full source code</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 29, 2008 3:49 AM</p>
<p>This blog’s Code and content is stolen &#8211; Please help</p>
<p>by Bagesh singh</p>
<p>Hello everyone, I’m here to ask help from you. I’m here in Nepal and can’t do anything from here. But, I think in this matter you guyz can help me about content stolen over ajaxprojects.com.</p>
<p>First of look at my post about slider using ajax php and javascript.And, now look at this post from top to bottom, directly stolen tutorial in ajaxprojects.com . And, look at the source of tutorial, it’s from goodphptutorials.com. What a joke, goodphptutorials.com never publish tutorials. They just display the tutorials submitted by various users of that site.</p>
<p>I’ve informed them 3 times by posting comments in that post stating that I’m the owner of original post so please give my site’s link in the source. But, they never listed to me and deleted my comment all the three times.</p>
<p>From tomorrow, Everybody will start stealing content from other blog and what they’ll mention in the source’s name? I think you can guess it… digg.com , dzone.com or reddit.com.</p>
<p>Please help me on this matter, I really work hard a lot to gather ideas and work hard on them and creates some output and post them to this blog. But, how can someone copy the really worked hard content and give credit to the social bookmarking site. We should avoid reading the content of site like that.</p>
<p>Please write me in the comments that what can i do this for this kind of crime. Furthermore, please digg , stumble and submit to reddit this post so that everyone using internet should know that how crappy is ajaxprojects.com and take a right action against them.</p>
<p>Update: Thanks a lot everyone for your advise. I’ve sent a warning mail to ajaxporjects.com and they’ve mentioned my blog’s name as a original source. Well, Each and every code i post in this blog is free to use and can be republished in other blogs but you must provide the credibility to this blog with original source.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 27, 2008 11:29 PM</p>
<p>How to call php from ajax in every second using Jquery</p>
<p>by Bagesh singh</p>
<p>Few days ago, Mike emailed me and asked me how can i call a server script( php file) from jQuery in every second.Since, there was no built-in mechanism for this in jQuery, I came up with this solution of displaying time of server using Ajax, PHP and jQuery.</p>
<p>You can view the example by clicking here….</p>
<p>HTML Code:</p>
<p>&lt;div align=&#8221;center&#8221; id=&#8221;timeval&#8221;&gt;&#8211;:&#8211;:&#8211;&lt;/div&gt;</p>
<p>&lt;button&gt;Stop&lt;/button&gt;</p>
<p>There are mainly two elements one is “div” with id “timeval” which displays the the time and the other one is “button” with id “stop” to stop the calling the PHP file in the regular interval.</p>
<p>JavaScript Code:</p>
<p>&lt;script src=&#8221;jquery.js&#8221;&gt;&lt;/script&gt;</p>
<p>&lt;script&gt;</p>
<p>$(document).ready(function()</p>
<p>{</p>
<p>//ajaxTime.php is called every second to get time from server</p>
<p>var refreshId = setInterval(function()</p>
<p>{</p>
<p>$(&#8216;#timeval&#8217;).load(&#8216;ajaxTime.php?randval=&#8217;+ Math.random());</p>
<p>}, 1000);</p>
<p>//stop the clock when this button is clicked</p>
<p>$(&#8220;#stop&#8221;).click(function()</p>
<p>{</p>
<p>clearInterval(refreshId);</p>
<p>});</p>
<p>});</p>
<p>&lt;/script&gt;</p>
<p>As you can see above, setInterval() function is used to call the php file in every second, where 1000 means 1000 millisecond which equals to one second.And, the load() function of jQuery is used to call the Ajax. And, you might be wondering why I’ve passed “randval” to “ajaxTime.php”, you can read this post of mine about the problem of getting same value from ajax. And when the button with id “stop” is called the clearInterval() functions clears the interval ID generated by setInterval() and stop calling the PHP file at regular interval.</p>
<p>PHP code :</p>
<p>&lt;?php</p>
<p>echo date(&#8220;g:i:s A&#8221;);</p>
<p>?&gt;</p>
<p>As you can see the php code in the ajaxTime.php is fairly simple, it just displays the current server time.</p>
<p>You can download the demo by clicking here</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 25, 2008 5:15 PM</p>
<p>Expand-collapse toggle panel (div) using jquery</p>
<p>by Bagesh singh</p>
<p>In this post, I’ll show you how easy it is to show expandable and collapsible toggle panel using jQuery. When you click on the heading, the content gets displayed by sliding and when you again click on the heading again, it gets collapsed.</p>
<p>You can view the demo by clicking here.</p>
<p>Now let’s look at the html code,</p>
<p>&lt;div&gt;</p>
<p>&lt;p&gt;Header-1 &lt;/p&gt;</p>
<p>&lt;div&gt;</p>
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p>&lt;/div&gt;</p>
<p>&lt;p&gt;Header-2&lt;/p&gt;</p>
<p>&lt;div&gt;</p>
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p>&lt;/div&gt;</p>
<p>&lt;p&gt;Header-3&lt;/p&gt;</p>
<p>&lt;div&gt;</p>
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p>&lt;/div&gt;</p>
<p>&lt;/div&gt;</p>
<p>As you can see above, the whole message panes contained inside the div with class name “msg_list”. And, the header element where you click is defined with the class “msg_head” and after that there is element with class “msg_body” which contains the message or text which is expandable or collapsible.</p>
<p>Now let’s look at the CSS attributes of these three classes,</p>
<p>p {</p>
<p>padding: 0 0 1em;</p>
<p>}</p>
<p>.msg_list {</p>
<p>margin: 0px;</p>
<p>padding: 0px;</p>
<p>width: 383px;</p>
<p>}</p>
<p>.msg_head {</p>
<p>padding: 5px 10px;</p>
<p>cursor: pointer;</p>
<p>position: relative;</p>
<p>background-color:#FFCCCC;</p>
<p>margin:1px;</p>
<p>}</p>
<p>.msg_body {</p>
<p>padding: 5px 10px 15px;</p>
<p>background-color:#F4F4F8;</p>
<p>}</p>
<p>Now, let’s look at the JavaScript code to make the pane toggling i.e collapsible and expandable,</p>
<p>&lt;script src=&#8221;jquery.js&#8221;&gt;&lt;/script&gt;</p>
<p>&lt;script&gt;</p>
<p>$(document).ready(function()</p>
<p>{</p>
<p>//hide the all of the element with class msg_body</p>
<p>$(&#8220;.msg_body&#8221;).hide();</p>
<p>//toggle the componenet with class msg_body</p>
<p>$(&#8220;.msg_head&#8221;).click(function()</p>
<p>{</p>
<p>$(this).next(&#8220;.msg_body&#8221;).slideToggle(600);</p>
<p>});</p>
<p>});</p>
<p>&lt;/script&gt;</p>
<p>As you can see above, first of all jQuery framework is used. After that, all the element with the class name “msg_body” is collapsed when the page is loaded. And you can see, the “slideToggle()” function of jQuery is used to expand and collapse the “div” with class “msg_body”. When user clicks on the element with the class “.msg_head”, then div with class “msg_body” next to it, gets toggled with sliding effect, making toggle panel using jQuery.</p>
<p>You can download the source code by clicking here</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 24, 2008 9:03 PM</p>
<p>Canada’s postal code validation in PHP</p>
<p>by Bagesh singh</p>
<p>Few days back, My friend Narendra asked me how to validate the postal code of Canada which is entered through the text box.And, I came up with this Php function as solution for him.</p>
<p>These are the conditions for validation of the postal code of Canada.</p>
<p>There are six alphanumeric letters.</p>
<p>Alphabate and digits are alternate and first letter must be alphabate.</p>
<p>The alphabate shouldn’t contain letters “d”,”f”,”i”,”o”,”q” and “u”.</p>
<p>Postal code “A1B2c5” is a valid postal code whereas “A1f2cZ” or “1AC2E5” are invalid postal code of Canada.</p>
<p>//function to validate postal code of canada</p>
<p>function validateCanadaZip($zip_code)</p>
<p>{</p>
<p>//function by Bagesh singh Bhattara(http://Bagesh singhbh.com.np)</p>
<p>if(preg_match(&#8220;/^([a-ceghj-npr-tv-z]){1}[0-9]{1}[a-ceghj-npr-tv-z]{1}[0-9]{1}[a-ceghj-npr-tv-z]{1}[0-9]{1}$/i&#8221;,$zip_code))</p>
<p>return true;</p>
<p>else</p>
<p>return false;</p>
<p>}</p>
<p>Now, let’s look at the explanation of the regular expression inside the preg_match() to validate the postal code of Canada as specified by the above condition. As you might know that a Perl compatible regular expression enclosed within “/” sign. The “i” at the end of the expression refers that this comparison is case insensitive.As most of you know, “^”sign is the start of the regular expression and “$” represent the end of the regular expression. And there are three repeated expressions like “([a-ceghj-npr-tv-z]){1}[0-9]{1}”. Let me explain it, the expression “([a-ceghj-npr-tv-z]){1}” represents that there should be one alphabate which doesn’t contain “d”,”f”,”i”,”o”,”q” and “i”. Furthermore, the expression “[0-9]{1}” represents that there should be one digit.</p>
<p>ShareThis</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 23, 2008 4:09 PM</p>
<p>Show text “Password” instead of “********” in the password field</p>
<p>by Bagesh singh</p>
<p>As you know, the user login box of the website contains the following fields username and password. Furthermore, most of them put the “Username” inside user name field and “********” inside password field to save the space within designing.In this post I’ll show you how to show “Password” text in the password field. It [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 20, 2008 11:40 PM</p>
<p>USA’s Zip Code Validation in PHP</p>
<p>by Bagesh singh</p>
<p>My friend Sushil was trying to write the regular expression for validating the format of the zip code of USA. After spending few minutes, I came to this solution.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 18, 2008 11:18 PM</p>
<p>Finding difference of days between two dates in PHP</p>
<p>by Bagesh singh</p>
<p>Yesterday, my friend Bagesh singh was was struggling to find the days difference between to two dates in PHP. Well, after a while I came up with the solution for him. The date format he’s using was “YYYY-MM-DD”, which is the standard format of date value stored in the MySql database.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 17, 2008 11:54 PM</p>
<p>Display different color in alternate row using jquery</p>
<p>by Bagesh singh</p>
<p>Most of the tabular data are organized in such a manner that they are easy to read. And for this, most of the developers use different color to highlight the alternate row.There are various method of displaying different row in different color but here I’m going to use the most simple method using jQuery.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 15, 2008 10:24 PM</p>
<p>Image hover effect using jQuery</p>
<p>by Bagesh singh</p>
<p>In this post, I’ll show you how to make a image hover effect using “div” in jquery.Take a look at a telebid.com if you put the mouse over the bid button it will be changed to login and afterwards it become bid button.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 13, 2008 4:49 PM</p>
<p>Jquery : Benefits, Examples and Free Ebook</p>
<p>by Bagesh singh</p>
<p>What is jQuery? Directly taken from the website of jQuery -” jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages”.It is basically a JavaScript framework for writing huge task of JavaScript with few lines of code.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 11, 2008 9:41 AM</p>
<p>5 useful url rewriting examples using .htaccess</p>
<p>by Bagesh singh</p>
<p>If you are looking for the examples of URL rewriting then this post might be useful for you. In this post, I’ve given five useful examples of URL rewriting using .htacess. If you don’t know something about url rewriting then please check my older post about url rewriting using .htaccess.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 9, 2008 11:11 AM</p>
<p>Prevent Directory Listing using .htaccess</p>
<p>by Bagesh singh</p>
<p>What is directory listing ? As we know, most of the website contains “images” folder inside the root folder. If we type “www.somesite.com/images” in the browser and it shows the listing of the files in the browser like the picture below which means that directory listing is allowed on that web server.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 7, 2008 5:11 PM</p>
<p>Solving ‘Warning: Cannot add header information’ in PHP</p>
<p>by Bagesh singh</p>
<p>While using PHP, you might have faced the following warning while using the header functions like header(), setcookie(). Warning: Cannot add header information &#8211; headers already sent by (output started at file.php:[line_number])</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 7, 2008 12:28 AM</p>
<p>I’m Sorry !!! But Thank you for the achievement</p>
<p>by Bagesh singh</p>
<p>I’m really sorry that I’ve not been posting in this blog from last few days. Well, I’m moving the hosting of this blog and the electricity problem which I’ve mentioned before are the reason behind my irregular posting. I’m also disappointed with drop in PR of this blog.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Mar 1, 2008 8:41 PM</p>
<p>How to know the feedcount of the feedburner’s user?</p>
<p>by Bagesh singh</p>
<p>If you are a blogger then you must know about feedcount. Feedcount refers to the no of subscribes of the rss feed of that blog or website which is powered by Feedburner. You can look at the example below.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 29, 2008 3:56 PM</p>
<p>Google Updated the PR &#8211; I’m disappointed</p>
<p>by Bagesh singh</p>
<p>It seems that google has updated it’s PR yesterday and I got big fat zero this time. I don’t know what is the reason behind this. Previously I’d PR1 for this blog and in next update I was hoping of PR3 but got a huge “0″ this time.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 29, 2008 1:32 AM</p>
<p>7 Useful SEO tips for WordPress Blog</p>
<p>by Bagesh singh</p>
<p>Yesterday Luqmaan of computer-realm.net emailed me and asked about the secret of traffic of my blog. I’m very happy with the way traffic is growing in this blog. I’ve started this blog in this domain http://Bagesh singhbh.com.np from 4th of Jan 2008. All the other old posts are imported from my old blog http://php-ajax-guru.blogspot.com.Due to few [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 27, 2008 4:00 AM</p>
<p>Need help to sell your software or product</p>
<p>by Bagesh singh</p>
<p>Do you have your own IT company? You’ve produced some softwares and need the best way to promote your software in market and earn the best from it. Then why don’t you check http://www.leaddogs.com. They are best in sales lead management . They will provide the best outcome from your product with their expertise to [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 22, 2008 9:17 PM</p>
<p>Need loans for your IT Company??</p>
<p>by Bagesh singh</p>
<p>Do you want to open your own IT company? Is your IT company suffering from financial crisis? Then I would recommend to check EZUnsecured.com . They basically provide Business Loans. And why they’re better than the other?? There is an easy process to get loans from EZUnsecured.com . Furthermore, they provide the excellent service and [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 21, 2008 10:43 AM</p>
<p>Custom Error Page with .htaccess</p>
<p>by Bagesh singh</p>
<p>In my last post of Hiding .php file extension with .htaccess Michael has mentioned that you can create your own custom page for the the 404(not found) error in server. And alex wanted to know that tip as well.Alex here is the post for you rather than replying your comment.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 18, 2008 12:30 AM</p>
<p>Email Validation in PHP</p>
<p>by Bagesh singh</p>
<p>Well you’ve been asking why this person has posted the same stuff which you can find easily in google. Ya you are right you can get lots of scripts but many of them are not useful for me so far. They just validate the email like “info@yahoo.com” but they didn’t validate the email address [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 15, 2008 11:29 PM</p>
<p>Blogrush is Racist &#8211; It sucks</p>
<p>by Bagesh singh</p>
<p>I’ve seen that many of my blogger friend are using Blogrush widget in their blog so i wanted to give a try with this widget and i signed up for this website www.blogrush.com.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 15, 2008 11:29 PM</p>
<p>Get Bucks for your hobby</p>
<p>by Bagesh singh</p>
<p>Everybody has different type of hobby. My hobby includes traveling, listing to music and obviously the most is blogging. Writing about Php, Ajax, Javascript, web 2.0 and my personal interest has been my passion nowadays. And what do you need extra if you can earn money from blogging. Well, everybody wants to make money from [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 15, 2008 4:52 PM</p>
<p>Blogrush is Racist &#8211; It sucks</p>
<p>by Bagesh singh</p>
<p>I’ve seen that many of my blogger friend are using Blogrush widget in their blog so i wanted to give a try with this widget and i signed up for this website www.blogrush.com.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 13, 2008 5:43 PM</p>
<p>Hide .php extension with url rewriting using .htaccess</p>
<p>by Bagesh singh</p>
<p>Last time I’ve written an article about hiding php file extension where I’ve showed you how you can use .html or .asp extension of file instead of .php extension. But there was one flaw in that technique you have had to change the file extension explicitly but in this post I’m going to show you [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 10, 2008 3:54 PM</p>
<p>Php function to validate two decimal places of a number</p>
<p>by Bagesh singh</p>
<p>If you are looking for the validation of a number which contains only two decimal places. Means you want to accept the values like 0.21 or 1.34 or 12.55 or 445.66 as a input and throw an error when somebody enters the number like 0.2 or 4.678 from a text box. Here is a simple [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 8, 2008 3:37 PM</p>
<p>USA’s phone number validation using Regular expression in PHP</p>
<p>by Bagesh singh</p>
<p>Last day i saw that one of my friend looking for the validation script in PHP which post the phone no (number) of USA from the text box and wanted to validate it from PHP in the following format.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 7, 2008 10:15 PM</p>
<p>Register Globals ( register_globals ) “on” security problem in PHP</p>
<p>by Bagesh singh</p>
<p>Do you know what happend when register_globals is set to ON in php.ini?? When it is set to ON it registers Environment, GET, POST, COOKIE or Server variables as global variables i.e. you don’t need to write $_POST[’username’] to access the posted ‘username’ variable you can simply use ‘$username’ to access the $_POST[’username’].</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 4, 2008 11:03 PM</p>
<p>A programmer in extreme frustration- God help me !!</p>
<p>by Bagesh singh</p>
<p>Friends, today I’m not going to talk about PHP , Ajax or MySql either. I’m going to talk about the disaster and hurdle I’m facing here in Nepal as web developer in this stone-age country.I haven’t found any place to show my frustration so I’m sharing my grief out here in this blog.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Feb 1, 2008 12:05 AM</p>
<p>Absolute path and Relative path file inclusion in PHP</p>
<p>by Bagesh singh</p>
<p>First let me explain you about absolute path and relative path in the server with the example using include() function of PHP. include(”/home/example/public_html/config.php”); //absolute path include(”config.php”); //relative path</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 30, 2008 12:13 AM</p>
<p>How to return value from Ajax Function &#8211; Use synchronous request</p>
<p>by Bagesh singh</p>
<p>Have you ever tried to return values from the Ajax function ? Well it might be sometime the cases when you might have to return the value got from the server to another function rather than updating the component. Let’s try to return the values from the traditional Ajax function.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 28, 2008 4:55 PM</p>
<p>How to solve the problem of retrieving same value by Ajax &#8211; Browser Cache Problem</p>
<p>by Bagesh singh</p>
<p>You might have faced the problem of the getting same response on the consecutive request to a PHP file from Ajax. Well, what happens when making repeated GET requests to the same URL can often lead to the response coming not from the server but from the browser cache. This problem mainly occurs while [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 24, 2008 3:48 PM</p>
<p>Populate triple drop down list (change options value) from database using Ajax and PHP</p>
<p>by Bagesh singh</p>
<p>I’ve got many email from people asking for populating triple drop down list from the database without refreshing page using Ajax and PHP after posting the first article related to the ajax dropdown list using php Now let show you how to create it quickly.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 22, 2008 3:53 PM</p>
<p>Getting filename and extension in PHP using explode() ,basename() and pathinfo()</p>
<p>by Bagesh singh</p>
<p>Getting the extension from a file name or name of the file from the full path is not a big hassle for the experienced programmer but it might be a annoying task for the beginners of PHP. Now let me find the solution for them using two functions of PHP called explode() and pathinfo().</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 18, 2008 10:49 AM</p>
<p>How to run a php file(script) automatically in a certain interval &#8211; Using Cron job</p>
<p>by Bagesh singh</p>
<p>In your project you might have to run a function or script (.php) file automatically for a various reasons like automatic sending email on birthday or automatically close a auction when the end_time is reached. What to do in that situation? .To do these things automatically, you must have a php file which must contains [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 16, 2008 1:43 AM</p>
<p>Uploading large(big) files in PHP using .htaccess</p>
<p>by Bagesh singh</p>
<p>I’ve seen that many of my friends are struggling with the uploads of the bigger or larger files in PHP. After looking at their struggle, i’m here to solve the problem of uploading larger or bigger files in PHP. Most of the web servers are configured such a way that a user can only [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 13, 2008 10:58 PM</p>
<p>Password Encryption and Decryption Technique in PHP</p>
<p>by Bagesh singh</p>
<p>I’ve noticed that many of my friends are storing password in database without encrypting them. This is really a bad technique because if somebody who has access of the database can easily know the password of the particular person. The best functions available in PHP for encryption are md5() and sha1(). These both are one [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 12, 2008 10:35 PM</p>
<p>Visitor Overview of last 6 days -Thanks a lot for your Love !!!!</p>
<p>by Bagesh singh</p>
<p>I’ve moved this blog to my domain on 5th Jan 2008 before that i was operation blog http://php-ajax-guru.blogspot.com in the blogger.com. I find lots of Benefits of WordPress and I’ve decided to move my blog to this domain. And before moving my blog to this domain, I used to get around 10 to 25 [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 11, 2008 12:34 AM</p>
<p>Slider Using PHP, Ajax And Javascript</p>
<p>by Bagesh singh</p>
<p>Have you been searching for the slider script and implementing it in Ajax with PHP then you are in the right place buddy. Ok let’s Begin it by creating the following tables in the database, CREATE TABLE `tbl_slider` ( `id` smallint(6) NOT NULL auto_increment, `slider_val` smallint(6) NOT NULL default ‘0′, PRIMARY KEY [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 11:38 PM</p>
<p>Blogger Sucks, WordPress Wowww!!</p>
<p>by Bagesh singh</p>
<p>After spending 25 days in blogger.com, with the blog named http://php-ajax-guru.blogspot.com, i finally decided to move my blog to my own domain. Well, first of all i was quite happy with my blogger account. But i noticed that lots of big name of bloggers are not using the blogger.com. And, i was interested to know [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 10:47 PM</p>
<p>PHP &#8211; a bad programming language &#8211; Dark side of PHP</p>
<p>by Bagesh singhbh</p>
<p>I’m a web developer by profession and have been involved in PHP development for last three years. PHP is very easy to learn and program in. But what i think, PHP is a incomplete programming language as well as a bad programming language which gives bad practise for the programmers. I can point out why a [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 10:47 PM</p>
<p>Cross-site scripting ( xss ) attack by example and prevention in PHP</p>
<p>by Bagesh singhbh</p>
<p>What are cross-site scripting (XSS ) Attacks? Cross-site scripting attacks are attacks that target the end user instead of your actual site. Vulnerable web applications that don’t check or validate properly incoming data let arbitrary code to run on a client computer (such as Javascript). The end result can be anything from stealing cookie data or [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 10:47 PM</p>
<p>Why php is more popular in the web</p>
<p>by Bagesh singhbh</p>
<p>PHP is popular because it’s relatively easy to learn and relatively cheap to develop web projects.And in the other side, its a open source technology and development cost is lower than the other technologies like java and dot net. PHP’s three key advantages over competing technologies: 1. Designed for the Web &#8211; PHP has built-in features to [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 10:47 PM</p>
<p>Is google Invading privacy</p>
<p>by Bagesh singhbh</p>
<p>Google, the world’s largest Internet search engine, is on several fronts a danger that has to be stopped, a study released by Austria’s Graz University claims.A research team led by Prof Hermann Maurer, chairman of Graz University’s Institute for Information Systems and Computer Media, argues that Google is creating unacceptable monopolies in many areas of [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 10:47 PM</p>
<p>A ajax tutorial for beginners</p>
<p>by Bagesh singhbh</p>
<p>What is ajax ? AJAX is an acronym for Asynchronous JavaScript And XML. AJAX is not a programming language. but simply a development technique for creating interactive web applications. A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>Hiding PHP file extension</p>
<p>by Bagesh singh</p>
<p>Do you want to hide your web site’s server script identity ? If you don’t want to reveal the programming language ( server side script ) of your website to visitors of website so that any hacker or spammer will not be able to intrude or inject any code in your website. Here is a small [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>301 redirect in PHP and .htaccess</p>
<p>by Bagesh singh</p>
<p>What is 301 redirect ? You have a website and its all pages are ranked in the search engine. And now you’ve moved these files to a new domain. What will happen in this scenario!!. You are sending the visitor to “Error 404 &#8211; File not found” page when they follow your website in the search [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>Getting real IP address in PHP</p>
<p>by Bagesh singh</p>
<p>Are you using $_SERVER[’REMOTE_ADDR’] to find the the client’s IP address? Well dude, you might be amazed to know that it may not return the true IP address of the client at all time. If your client is connected to the Internet through Proxy Server then $_SERVER[’REMOTE_ADDR’] just returns the the IP address of the [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>Sending e-mail from localhost in PHP in Windows Environment</p>
<p>by Bagesh singh</p>
<p>Have you ever been frustrating, why e-mail is not going from the localhost while using XAMPP or WAMP or any other PHP servers in windows environment? well in that situation i think i can help you.In this article i am going to tell you how to send e-mail from localhost in PHP.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>Date or Time Comparision in PHP</p>
<p>by Bagesh singh</p>
<p>If you’ve to compare the difference between two dates or times values. How you’re going to accomplish it in PHP ? If you don’t know how to do it, then here is simple fuction for you to compare the date (as well as time) in PHP.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>SQL Injection Attack &#8211; Examples and Preventions in PHP</p>
<p>by Bagesh singh</p>
<p>What is SQL injection? It is a basically a trick to inject SQL command or query as a input mainly in the form of the POST or GET method in the web pages. Most of the websites takes parameter from the form and make SQL query to the database. For a example, in a product detail [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>A simple Class to export data to excel using PHP</p>
<p>by Bagesh singh</p>
<p>While generating a report in your project, you might have to download the data into excel file using PHP. In most scenario, you have to display the report in a page and create a link to download the report in the excel file. Well in that scenario, i think i can help you with [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>Password protect a page using HTTP Authentication in PHP</p>
<p>by Bagesh singh</p>
<p>Have ever been thorough cpanel ? when you open the link of cpanel, you can see a pop up which ask for entering user name and password for login. Well in my article I’m going to show you how you can build the same kind of page protecting mechanism using http authentication in php. Somebody might [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>Change dropdown list (options) values from database with ajax and php</p>
<p>by Bagesh singhbh</p>
<p>I’m going to show you a example in php and ajax to change the values of the dropdown’s options without refreshing the page. The values (options) of the dropdown are fetched from the database and the certain portion of the web pages is only refreshed without need to refresh the whole page. Lets’s start with creating [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 6, 2008 12:16 AM</p>
<p>Clean and efficient coding technique in PHP</p>
<p>by Bagesh singhbh</p>
<p>Well there are lots of discussion regarding what the actual “clean code” is. At the end of the day you can find there are mainly two criterion for clean code: 1. Efficiency: Does the code run as quickly and efficiently as possible? Does the code make the most of it’s objects and variables with maximum reuse [...]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 5, 2008 11:11 PM</p>
<p>This blog is moved to http://Bagesh singhbh.com.np</p>
<p>by Bagesh singh</p>
<p>Well, after spending one month in blogger.com. I finally decided to move my blog to my own domain http://Bagesh singhbh.com.np. There are various limitataion which i found in blogger.com&#8217;s blog.</p>
<p>So keep checking http://Bagesh singhbh.com.np for latest news, updates, tips and codes regarding php and ajax.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Jan 2, 2008 1:26 AM</p>
<p>Hiding PHP file extension</p>
<p>by Bagesh singh</p>
<p>Do you want to hide your web site&#8217;s server script identity ? If you don&#8217;t want to reveal the programming language ( server side script ) of your website to visitors of website so that any hacker or spammer will not be able to intrude or inject any code in your website.</p>
<p>Here is a small technique for you, you can use .html or .asp file to work as a php file i.e. use .asp or .html extension instead of .php. You just need to create a .htaccess file and put the following code in the .htaccess file. Remember that the .htaccess file should be placed in the root folder of your website.</p>
<p># Make PHP code look like asp or perl code</p>
<p>AddType application/x-httpd-php .asp .pl</p>
<p>if you place the the above code in the .htaccess file then you can use contact.asp as the name of the file. Now a visitor thought that it is a ASP file but this file contains the codes of PHP.</p>
<p>You can put the following code in .htaccess file to work .htm or .html file as PHP file.</p>
<p># Make all PHP code look like HTML</p>
<p>AddType application/x-httpd-php .htm .html</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 30, 2007 12:52 AM</p>
<p>301 redirect in PHP and .htaccess</p>
<p>by Bagesh singh</p>
<p>What is 301 redirect ?</p>
<p>You have a website and its all pages are ranked in the search engine. And now you&#8217;ve moved these files to a new domain. What will happen in this scenario!!. You are sending the visitor to &#8220;Error 404 &#8211; File not found&#8221; page when they follow your website in the search engine. Furthermore, if you place the custom error page, then also you will be keep loosing ranking in upcoming days in search engines as the original file could not be found in the old URL. So what is the solution for this?? The solution is 301 redirect which means moved permanently. It is is the most efficient and search engine as well as visitor friendly method for the webpage redirection.</p>
<p>Why do you need 301 redirect ?</p>
<p>Have you ever typed yahoo.com in your browser, what happens next is it will redirect you to www.yahoo.com, its all the result of the 301 redirect. so, why do you need to do so?. If you&#8217;re not doing so, then you&#8217;re splitting yourself to two different URL and search engine spiders can also crawls your site&#8217;s content by two different URL which may result to &#8220;duplicate content&#8221; penalty by search engines if search engines collect two copies of the same data from two different URLs.</p>
<p>How to do 301 redirect in PHP ?</p>
<p>If you want to redirect a single page to another location then put the following code in the old page which have been moved &lt;</p>
<p>&lt;?php</p>
<p>header(&#8216;HTTP/1.1 301 Moved Permanently&#8217;);</p>
<p>header(&#8216;Location: http://www.your-new-domain.com/new-file-name.php&#8217;);</p>
<p>?&gt;</p>
<p>If you want to redirect non-www to www domain name then put the following code into top of every page of the website</p>
<p>&lt;?php</p>
<p>if (substr(getenv(&#8216;HTTP_HOST&#8217;),0,3) != &#8216;www&#8217;)</p>
<p>{</p>
<p>header(&#8216;HTTP/1.1 301 Moved Permanently&#8217;);</p>
<p>header(&#8216;Location: http://www.&#8217;.$_SERVER['HTTP_HOST']</p>
<p>.$_SERVER['REQUEST_URI']);</p>
<p>}</p>
<p>?&gt;</p>
<p>How to do 301 redirect in .htaccess file?</p>
<p>Put the following code into the .htaccess file and upload it into the root folder of the website. Note that this file only works for the website which is running under Apache Web Server.</p>
<p>RewriteEngine On</p>
<p>RewriteCond %{HTTP_HOST} ^domain.com</p>
<p>RewriteRule (.*) http://www.domain.com/$1 [R=301,L]</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 28, 2007 12:23 AM</p>
<p>Getting real IP address in PHP</p>
<p>by Bagesh singh</p>
<p>Are you using $_SERVER['REMOTE_ADDR'] to find the the client&#8217;s IP address? Well dude, you might be amazed to know that it may not return the true IP address of the client at all time. If your client is connected to the Internet through Proxy Server then $_SERVER['REMOTE_ADDR'] just returns the the IP address of the proxy server not of the client&#8217;s machine. So here is a simple function in PHP to find the real IP address of the client&#8217;s machine. There are extra Server variable which might be available to determine the exact IP address of the client&#8217;s machine, they are HTTP_CLIENT_IP and HTTP_X_FORWARDED_FOR.</p>
<p>function getRealIpAddr()</p>
<p>{</p>
<p>if (!empty($_SERVER['HTTP_CLIENT_IP'])) //check ip from share internet</p>
<p>{</p>
<p>$ip=$_SERVER['HTTP_CLIENT_IP'];</p>
<p>}</p>
<p>elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))</p>
<p>//to check ip is pass from proxy</p>
<p>{</p>
<p>$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];</p>
<p>}</p>
<p>else</p>
<p>{</p>
<p>$ip=$_SERVER['REMOTE_ADDR'];</p>
<p>}</p>
<p>return $ip;</p>
<p>}</p>
<p>In this function, first attempt is to get the direct IP address of client&#8217;s machine, if not available then try for forwarded for IP address using HTTP_X_FORWARDED_FOR. And if this is also not available, then finally get the IP address using REMOTE_ADDR.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 27, 2007 1:28 AM</p>
<p>Sending e-mail from localhost in PHP in Windows Environment</p>
<p>by Bagesh singh</p>
<p>Have you ever been frustrating, why e-mail is not going from the localhost while using xampp or wamp or any other PHP servers in windows environment? well in that situation i think i can help you.In this article i am goin to tell you how to send e-mail from localhost in PHP.</p>
<p>1) Open the &#8220;php.ini&#8221;. You should know where it is located because it depends upon the particular server you&#8217;re running.</p>
<p>2) Search for the attribute called &#8220;SMTP&#8221; in the php.ini file.Generally you can find the line &#8220;SMTP=localhost&#8221;. change the localhost to the smtp server name of your ISP. And, there is another attribute called &#8220;smtp_port&#8221; which should be set to 25.I&#8217;ve set the following values in my php.ini file.</p>
<p>SMTP = smtp.wlink.com.np</p>
<p>smtp_port = 25</p>
<p>3) Restart the apache server so that PHP modules and attributes will be reloaded.</p>
<p>4) Now try to send the mail using the mail() function ,</p>
<p>mail(&#8220;you@yourdomain.com&#8221;,&#8221;test subject&#8221;,&#8221;test body&#8221;);</p>
<p>you might get the warning like this,</p>
<p>Warning: mail() [function.mail]: &#8220;sendmail_from&#8221; not set in php.ini or custom &#8220;From:&#8221; header missing in C:Program Filesxampphtdocstestmail.php on line 1</p>
<p>5) Now specify the following headers and try to send the mail again,</p>
<p>$headers = &#8216;MIME-Version: 1.0&#8242; . &#8220;rn&#8221;;</p>
<p>$headers .= &#8216;Content-type: text/html; charset=iso-8859-1&#8242; . &#8220;rn&#8221;;</p>
<p>$headers .= &#8216;From: sender@sender.com&#8217; . &#8220;rn&#8221;;</p>
<p>mail(&#8220;you@yourdomain.com&#8221;,&#8221;test subject&#8221;,&#8221;test body&#8221;,$headers);</p>
<p>Well that&#8217;s all, the mail is sent to &#8220;you@yourdomain.com&#8221; from the localhost.</p>
<p>Note : Some smtp server verifies the email address of the sender so the email address which is in the place of &#8220;sender@sender.com&#8221; should be a valid and existing email address otherwise mail might not be sent to the &#8220;you@yourdomain.com&#8221;.</p>
<p>If you have any question or feedback then feel free to send feedback.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 26, 2007 3:16 AM</p>
<p>Date or Time Comparision in PHP</p>
<p>by Bagesh singh</p>
<p>If you&#8217;ve to compare the difference between two dates or times values. How you&#8217;re going to accomplish it in PHP ? If you don&#8217;t know how to do it, then here is simple fuction for you to compare the date (as well as time) in PHP.</p>
<p>function greaterDate($start_date,$end_date)</p>
<p>{</p>
<p>$start = strtotime($start_date);</p>
<p>$end = strtotime($end_date);</p>
<p>if ($start-$end &gt; 0)</p>
<p>return 1;</p>
<p>else</p>
<p>return 0;</p>
<p>}</p>
<p>so if there two date or time values stored in $date1 and $data2 variables then you can call that function in the following way</p>
<p>$date1=&#8217;2007-10-10&#8242;;</p>
<p>$date1=&#8217;2007-10-11&#8242;;</p>
<p>if(greaterDate($date1,$date2))</p>
<p>echo &#8220;First parameter is greater&#8221;;</p>
<p>else</p>
<p>echo &#8220;Second parameter is greater&#8221;;</p>
<p>well you can guess the result, it prints out &#8220;Second parameter is greater&#8221;and if you call the same function with these different values</p>
<p>$date1=&#8217;2007-10-10 12:15:27&#8242;;</p>
<p>$date1=&#8217;2007-10-10 11:17:37&#8242;;</p>
<p>The result will be &#8220;First parameter is greater&#8221;</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 24, 2007 1:14 AM</p>
<p>Links for 2007-12-19 [Digg]</p>
<p>SQL Injection Attack &#8211; Examples and Preventions in PHP</p>
<p>a good article on sql injection attack . And the prevention mechanism provided by the author in is good as well.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 24, 2007 1:14 AM</p>
<p>Links for 2007-12-16 [Digg]</p>
<p>Export data to excel using PHP &#8211; A easiest way</p>
<p>This is very simple class and easy to use class for exporting data to excel using PHP. Recommended for all the PHP programmer.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 24, 2007 1:14 AM</p>
<p>Links for 2007-12-15 [Digg]</p>
<p>Protecting page using HTTP Authentication in PHP</p>
<p>This is one of the easiest mechanism to protect the page using HTTP Authentication in PHP. Really easy code and easy to implement. Recommended to every PHP programmer.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 24, 2007 1:14 AM</p>
<p>Links for 2007-12-13 [Digg]</p>
<p>Clean and efficient coding technique in PHP</p>
<p>This is the one of the best article i&#8217;ve ever seen on the efficient coding technique on php. Very useful</p>
<p>Ajax and Php : Change dropdown list values from database</p>
<p>This article contains a great example for dynamically changing the values of dropdown when a event is called. The dynamic values are fetched from database and shown to the dropdown.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 24, 2007 1:14 AM</p>
<p>Links for 2007-12-10 [Digg]</p>
<p>PHP SUCKS as a programming language</p>
<p>php is the most popular programming langauge used in the internet but what i feel personally that it sucks as a programming language.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 24, 2007 1:14 AM</p>
<p>Links for 2007-12-09 [Digg]</p>
<p>Jolie on TOP of &#8221;SEXiest movie STARS ever&#8221; list.</p>
<p>Read this article to know all the people that are listed in the hollyowood toplist for sexiest movie stars&#8230;&#8230;&#8230; And dont forget to digg this article please&#8230;. i ma big jolie fan..</p>
<p>Britney sells for just $3.99 on ebay.</p>
<p>The embattled pop star is still the hottest thing since sliced bread (featuring the Virgin Mary) on eBay, which has announced that Spears-related items, from copies of signed pictures to gloves she supposedly wore at a New York Jets game to a piece of chewed gum&#8230;&#8230;&#8230;&#8230;&#8230;..Check this article out&#8230;. and dont forget to digg it</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 24, 2007 1:14 AM</p>
<p>Links for 2007-12-07 [Digg]</p>
<p>Cross-site scripting ( xss ) attack by example and preventio</p>
<p>This is a example and description of cross side scripting (xss) and way to prevent it in php.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 21, 2007 4:51 PM</p>
<p>SQL Injection Attack &#8211; Examples and Preventions in PHP</p>
<p>by Bagesh singh</p>
<p>What is SQL injection?</p>
<p>It is a basically a trick to inject SQL command or query as a input mainly in the form of the POST or GET method in the web pages. Most of the websites takes parameter from the form and make SQL query to the database. For a example, in a product detail page of php, it basically takes a parameter product_id from a GET method and get the detail from database using SQL query. With SQL injection attack, a intruder can send a crafted SQL query from the URL of the product detail page and that could possibly do lots of damage to the database. And even in worse scenario, it could even drop the databasetable as well.</p>
<p>Examples:</p>
<p>Let&#8217;s look at the usual query for user login in PHP,</p>
<p>$sql=&#8221;SELECT * FROM tbl_user WHERE username= &#8216;&#8221;.$_POST['username'].&#8221;&#8216; AND password= &#8216;&#8221;.$_POST['password'].&#8221;&#8216;&#8221;;</p>
<p>$result=mysql_query($sql);</p>
<p>Well, lots of people thinks that only the valid user can log in inside the system but that&#8217;s not true.Well anybody can log in to that website with a simple trick.</p>
<p>Let&#8217;s suppose that a intruder called SAM injected x&#8217; OR &#8216;x&#8217;='x in the username field and x&#8217; OR &#8216;x&#8217;='x in the password field. Then the final query will become like this</p>
<p>SELECT * FROM tbl_user WHERE username=&#8217;x&#8217; OR &#8216;x&#8217;='x&#8217; AND password=&#8217;x&#8217; OR &#8216;x&#8217;='x&#8217;;</p>
<p>Well you can see that query is always true and returns the row from the database. As the result , the malicious guy could log in to the system.</p>
<p>Now even let&#8217;s look at the worst scenario of the SQL injection attack example. A intruder can even drop a table if the database user has drop privilege into that database.</p>
<p>Let&#8217;s suppose a query in a product detail page</p>
<p>$sql=&#8221;SELECT * FROM product WHERE product_id=&#8217;&#8221;.$_GET['product_id'].&#8221;&#8216;&#8221;;</p>
<p>Now its turn of intruder to inject SQL command in the URL of the page, the code might be like this 10&#8242;; DROP TABLE product; # and the URL looks like this</p>
<p>http://xyz.com/product.php?id=10&#8242;; DROP TABLE product; #</p>
<p>Now query becomes like this</p>
<p>SELECT * FROM product WHERE product_id=&#8217;10&#8242;; DROP TABLE product; #&#8217;;</p>
<p>You might be wondering what is the meaning of hash &#8220;#&#8221;, it tell MYSQL server to ignore the rest of the query.In this query, it simply ignore the last single quote (&#8216;) of the query.</p>
<p>Prevention in PHP</p>
<p>To avoid the sql injection attack, please follow the following simple mechanisms in PHP</p>
<p>1) Always restrict the length of the fields of form such as don&#8217;t allow more than 20 characters in the fields like username and password with the &#8220;maxlength&#8221; property available in the html form.</p>
<p>2) Always validate for the proper input like weather the value is valid email or not, is numeric or not , valid date or not etc.</p>
<p>3) Finally, Always use mysql_real_escape_string() function before sending the variable to the SQL query, it ad. For example</p>
<p>//note you must be connected to the database for using this function</p>
<p>$username=mysql_real_escape_string($_POST['username']);</p>
<p>$password=mysql_real_escape_string($_POST['password']);</p>
<p>if a intruder inject &#8216; OR 1 in the user name and password field then the value of the $username and $password will become &#8216; OR 1 which is not going to harm us anymore.</p>
<p>Recommended Reading on SQL Injection Attack:</p>
<p>http://unixwiz.net/techtips/sql-injection.html</p>
<p>http://www.securiteam.com/securityreviews/5DP0N1P76E.html</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 21, 2007 4:51 PM</p>
<p>A simple Class to export data to excel using PHP</p>
<p>by Bagesh singh</p>
<p>While generating a report in your project, you might have to download the data into excel file using PHP. In most scenario, you have to display the report in a page and create a link to download the report in the excel file. Well in that scenario, i think i can help you with a simplified class and code of PHP.</p>
<p>I&#8217;ve created three files in my example.</p>
<p>1) class.export_excel.php &#8211; This file contains the code to export data in excel.</p>
<p>2) export_excel.php &#8211; This file contains the code to assign values of the excel header and excel data. The header is one-dimentional array. And the other one is the values to be exported and this one is two-dimentional array. And this file also contain the &#8220;fn&#8221; named get method ($_GET) varible , which is the name of the file to be generated. If a file called &#8220;daily_report.xls&#8221; is to be generated then this file can be called as &#8220;export_excel.php?fn=daily_report&#8221;.</p>
<p>3) test.php &#8211; This file contains the data to be displayed in the web page and the same one will be exported in the the excel file. The heading and the values are stored in the session variables. The $_SESSION['report_header'] variable contain the headers of the excel file and $_SESSION['report_values'] contains the data of the excel.</p>
<p>Remember that $_SESSION['report_values'] is a two dimentional array and the column of the array should be same as the no of headers stored in the $_SESSION['report_header'] variable.</p>
<p>Now thats all, you can have a link to export_excel.php file with the the name of file to be generated as fn variable i.e. the call to the export_excel.php should export_excel.php?fn=report for generating the file name &#8220;report.xls&#8221;.</p>
<p>You can download the full source code by clicking here.</p>
<p>If you have any problem or comment, please send me feedback at http://www.Bagesh singhbh.com.np</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 21, 2007 4:51 PM</p>
<p>Password protect a page using HTTP Authentication in PHP</p>
<p>by Bagesh singh</p>
<p>Have ever been thorough cpanel ? when you open the link of cpanel, you can see a pop up which ask for entering user name and password for login. Well in my article I&#8217;m going to show you how you can build the same kind of page protecting mechanism using http authentication in php.</p>
<p>Somebody might say that I can also protect the page by making a login page to access the protected page. Well dude!! you are right, you can do that but the main benefits of this method is &#8220;you don&#8217;t have to create the login page at all&#8221;.</p>
<p>Let&#8217;s Start, First of all store the user name and password in the variables</p>
<p>$auth_user=&#8221;urusername&#8221;;</p>
<p>$auth_pwd=&#8221;urpassword&#8221;;</p>
<p>For better security, please store these values in database and authenticate from database.</p>
<p>Now let&#8217;s create the http authentication function called authenticate() using header() function available in PHP.</p>
<p>function authenticate()</p>
<p>{</p>
<p>header(&#8216;WWW-Authenticate: Basic realm=&#8221;Enter Your Login detail to add money&#8221;&#8216;);</p>
<p>header(&#8216;HTTP/1.0 401 Unauthorized&#8217;);</p>
<p>echo &#8220;You must enter a valid login ID and password to access this resourcen&#8221;;</p>
<p>exit;</p>
<p>}</p>
<p>The first line of the function tell browser to open the pop up box to enter user name and password the &#8220;realm&#8221; element contains the string to be displayed in the pop up box.</p>
<p>And the other two lines are called only when user hits the cancel button of the pop up.</p>
<p>Now let&#8217;s start the code of authentication.</p>
<p>if ($_SERVER['PHP_AUTH_USER']==$auth_user &amp;&amp; $_SERVER['PHP_AUTH_PW']==$auth_pwd &amp;&amp; $_SESSION['authorized']==1)</p>
<p>{</p>
<p>echo &#8220;Your are logged in&#8221;;</p>
<p>}</p>
<p>else</p>
<p>{</p>
<p>$_SESSION['authorized']=1;</p>
<p>authenticate();</p>
<p>}</p>
<p>As you can see in the if statement there are two variables $_SERVER['PHP_AUTH_USER'] and $_SERVER['PHP_AUTH_PW'], these are the two values which comes from the user name and password field of pop up and these two are the predefined variables of PHP.</p>
<p>I&#8217;ve also used the $_SESSION variable to ensure that the pop up box is displayed at least once in the page since the the else condition is executed first when the page is loaded.</p>
<p>Thats&#8217;a all dude, now your page is protected with user name and password but without need to built a login page.</p>
<p>Click here to download the full source code.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 21, 2007 4:51 PM</p>
<p>Change dropdown list (Options) values from database with ajax and php</p>
<p>by Bagesh singh</p>
<p>I&#8217;m going to show you a example in php and ajax to change the values of the dropdown&#8217;s options without refreshing the page. The values (options) of the dropdown are fetched from the database and the certain portion of the web pages is only refreshed without need to refresh the whole page.</p>
<p>Lets&#8217;s start with creating the two tables country and city and insert some data</p>
<p>CREATE TABLE country</p>
<p>(</p>
<p>id tinyint(4) NOT NULL auto_increment,</p>
<p>country varchar(20) NOT NULL default &#8221;,</p>
<p>PRIMARY KEY (id)</p>
<p>);</p>
<p>CREATE TABLE city</p>
<p>(</p>
<p>id tinyint(4) NOT NULL auto_increment,</p>
<p>city varchar(50) default NULL,</p>
<p>countryid tinyint(4) default NULL,</p>
<p>PRIMARY KEY (id)</p>
<p>);</p>
<p>Now let&#8217;s look at the html code, let&#8217;s look at the code of the form and its elements</p>
<p>&lt;form method=&#8221;post&#8221; action=&#8221;" name=&#8221;form1&#8243;&gt;</p>
<p>Country : &lt;select&gt;</p>
<p>&lt;option value=&#8221;"&gt;Select Country&lt;/option&gt;</p>
<p>&lt;option value=&#8221;1&#8243;&gt;USA&lt;/option&gt;</p>
<p>&lt;option value=&#8221;2&#8243;&gt;Canada&lt;/option&gt;</p>
<p>&lt;/select&gt;</p>
<p>&lt;br /&gt;</p>
<p>City : &lt;div&gt;</p>
<p>&lt;select&gt;</p>
<p>&lt;option&gt;Select City&lt;/option&gt;</p>
<p>&lt;/select&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;/form&gt;</p>
<p>As you can see that when the dropdown named &#8220;country&#8221; is changed the &#8220;getCity&#8221; function is called. Look at the other dropdown carefully, it is inside the division called &#8220;citydiv&#8221;.</p>
<p>Now let&#8217;s look at the javascript function called &#8220;getCity&#8221;</p>
<p>function getCity(strURL)</p>
<p>{</p>
<p>var req = getXMLHTTP(); // fuction to get xmlhttp object -core of ajax</p>
<p>if (req)</p>
<p>{</p>
<p>req.onreadystatechange = function()</p>
<p>{</p>
<p>if (req.readyState == 4) { //means the data is retrieved from server</p>
<p>if (req.status == 200) { // which reprents ok status</p>
<p>document.getElementById(&#8216;citydiv&#8217;).innerHTML=req.responseText;</p>
<p>} else {</p>
<p>alert(&#8220;There was a problem while using XMLHTTP:n&#8221; + req.statusText);</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>req.open(&#8220;GET&#8221;, strURL, true); //open the url using get request method</p>
<p>req.send(null);</p>
<p>}</p>
<p>}</p>
<p>now we&#8217;ve to create the file called findcity.php and put the following PHP code</p>
<p>&lt;? $country=$_GET['country'];</p>
<p>$link = mysql_connect(&#8216;localhost&#8217;, &#8216;root&#8217;, &#8221;); //change the configuration if required</p>
<p>if (!$link) {</p>
<p>die(&#8216;Could not connect: &#8216; . mysql_error());</p>
<p>}</p>
<p>mysql_select_db(&#8216;db_ajax&#8217;); //change this if required</p>
<p>$query=&#8221;select city from city where countryid=$country&#8221;;</p>
<p>$result=mysql_query($query);</p>
<p>?&gt;</p>
<p>&lt;select&gt;</p>
<p>&lt;option&gt;Select City&lt;/option&gt;</p>
<p>&lt;? while($row=mysql_fetch_array($result)) { ?&gt;</p>
<p>&lt;option value&gt;&lt;?=$row['city']?&gt;&lt;/option&gt;</p>
<p>&lt;? } ?&gt;</p>
<p>&lt;/select&gt;</p>
<p>Thats all, whenever you change the dropdown of country the values of the city dropdown is automaticalled changed without refreshing the page.</p>
<p>If you want to download full source code, Go to my website and download the full source code.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 21, 2007 4:51 PM</p>
<p>Clean and efficient coding technique in PHP</p>
<p>by Bagesh singh</p>
<p>Well there are lots of discussion regarding what the actual &#8220;clean code&#8221; is. At the end of the day you can find there are mainly two criterion for clean code:</p>
<p>1. Efficiency: Does the code run as quickly and efficiently as possible? Does the code make the most of it&#8217;s objects and variables with maximum reuse and minimal waste?</p>
<p>2. Maintainability: Is the code easy to understand for other developers? Is it well planned, logical, well documented, and easy to update?</p>
<p>Let&#8217;s discuss the various elements comprising these two broad points regarding clean code, and example in PHP.</p>
<p>One way or another, all pseudo code is eventually converted to machine code. This code will occupy some finite amount of memory. Some languages, such as Java and the .NET Framework first product IL (Intermediary Language) code before producing machine code. In PHP, there are a few key ways to minimize the amount of memory and machine code overhead generated by your application. The best place to start the discussion is with loops and conditional statements.</p>
<p>Case Statements &#8211; A case statement produces roughly 1/5th the amount of machine code as an if/else structure that completes the same task. Use case statements whenever possible. The difference in memory overhead between these two statements is fairly nominal, but the case statement is more efficient to some small degree.</p>
<p>Loops &#8211; Loops vary more drastically than conditionals due to the nature of the operations they perform. PHP offers a number of loops. When deciding what type of loop to use, consider the operations taking place. Let&#8217;s look at the following example, where we have a query that will return around 2000 results.</p>
<p>$r = mysql_query(&#8216;SELECT * FROM tablename LIMIT 1500&#8242;);</p>
<p>//First option</p>
<p>for ($i = 0; $i &amp;lt; mysql_num_rows($r); $i++) {</p>
<p>print mysql_result($r, $i, &#8216;Col1&#8242;).mysql_result($r, $i, &#8216;Col2&#8242;);</p>
<p>}</p>
<p>// Second option</p>
<p>while (($row = mysql_fetch_assoc($r)) !== false) {</p>
<p>print $row['Col1'].$row['Col2'];</p>
<p>}</p>
<p>The first option requires simply one scalar variable used as a counter for iteration, using a lightweight access method to read buffered data from a result handle. The second example uses an array constructor function to build an array and evaluate it&#8217;s contents on each iteration, and then references the array two times per iteration. The bottom line is &#8220;SECOND OPTION&#8221; runs significantly faster. It has lower memory and machine code overhead.</p>
<p>Best Practices</p>
<p>It is subject to much debate and a variety of standards. Let&#8217;s start the example with single quotes (&#8216;) vs using double quotes (&#8220;). The PHP parser treats these two token identifiers very different. PHP treats anything inside a matching pair of single quotes as a string literal and does not parse the contents of that string. However, PHP treats anything inside a matching pair of double quotes as string data and parse the contents of the string. This can result in major performance disparities in a page with extensive data output. Let&#8217;s test printing 1,000 lines of output in the following two methods:</p>
<p>// First Option</p>
<p>print &#8220;Name : $name. Address : $add. Email: $email.&#8221;;</p>
<p>// Second Option</p>
<p>print &#8216;Name :&#8217;.$name.&#8217;. Address : &#8216;.$add.&#8217;. Email &#8216;.$email.&#8217;.';</p>
<p>Can you imagine second option run 30% faster than the first one. The big difference between these two examples is that in first option PHP is required to full parse the contents of the string. Second option is the equivalent of concatenating seven string literal values together and printing them out, which requires no actual string parsing.</p>
<p>Other &#8220;best practices&#8221; that are more thoroughly documented include:</p>
<p>* Using a consistent and logical naming convention for objects, functions, classes, etc.</p>
<p>* Commenting code line by line (or as near to line by line as is needed to clearly explain what operations are being performed).</p>
<p>* Indenting code to reflect the beginning and ending of statements (particularly statements enclosed in curly braces).</p>
<p>* Organizing files in a logical directory structure with easy to understand directory and file names.</p>
<p>* Making code as modular and reusable as possible i.e use functions if the same code is going to be used in many places.</p>
<p>These things may seem obvious to seasoned programmers, but for a lot of beginners, these are things that are often overlooked in haste.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 11, 2007 1:50 PM</p>
<p>PHP &#8211; a bad programming language &#8211; Dark side of PHP</p>
<p>by Bagesh singh</p>
<p>I&#8217;m a web developer by profession and have been involved in PHP development for last three years. PHP is very easy to learn and program in. But what i think, PHP is a incomplete programming language as well as a bad programming language which gives bad practise for the programmers.</p>
<p>I can point out why a most popular programming language used in Internet sucks and have a lots of dark side&#8230;</p>
<p>1) No need to define and declare variable &#8211; In most of the programming language, you have to declare the the type of variable and define it before to be used in the code but in php you don&#8217;t have declare the type of variable before using.Although, it make easy for the programmer but ita bad practice at all for a genuine programming concept.</p>
<p>2) No Strict data conversion &#8211; Well as you see in java, if you try to con cat a integer variable with a string variable you&#8217;ve to convert it into string variable before con cating with string otherwise compiler throws exception. But, in php if you&#8217;ve to do so you don&#8217;t have to do any kind of data conversation, which you might say easy for programmers but what i say thnat bad practice for programmers.</p>
<p>3) Bad Recursion &#8211; Recursion is the mechanism in which a function calls itself. This is a powerful feature which can make something complex something simple. An example of a function using recursion is quick sort. Unfortunately, PHP is not good at recursion. Zeev, one or the developers of PHP, says this: &#8220;PHP 4.0 (Zend) uses the stack for intensive data, rather than using the heap. That means that its tolerance recursive functions is significantly lower than that of other languages.&#8221; . A good programming language should provide good recursion support.</p>
<p>4) No namespaces &#8211; Suppose someone creates a PHP-module that can read files. One of the functions in this module is called read. And someone Else&#8217;s module can read web pages and also contains a function read. Then it is impossible to use these modules together because PHP will not know which read function you want.</p>
<p>An easy solution to this is namespaces. It was a suggested feature for PHP 5, but unfortunately it didn&#8217;t make it. Now, without namespaces, every function has to be prefixed with the module name, to prevent name collisions. This leads to terrible long function names like xsl_xsltprocessor_transform_to_xml which makes code harder to write and read.</p>
<p>5) In consequent function naming convention &#8211; Some function names consist of more than one word. There are three conventions for combining these words:</p>
<p>a. Glued together: getbidsbyday</p>
<p>b. Separated with underscores: get_bids_by_day</p>
<p>c. Camel case: getBidsByDay</p>
<p>Most Languages choose one of these variants, like java uses Camel case but PHP uses all of them. For example, it you want to convert special characters to HTML entities, you use the function htmlentities (Words glued together). If you want to do the opposite, you use its little brother function html_entity_decode. For some reason the words are now separated by underscores. Why is this bad? You know there is a function named striptags. Or was it strip_tags or stripTags?</p>
<p>Every time you have to look up what the notation is or wait for an error to occur and then open the php manual and search the function&#8217;s name.</p>
<p>6) Seldom use of Framework &#8211; A website without a framework which grows will eventually become a maintenance nightmare. A framework can make a lot of work easier. The most popular model for a framework is the MVC-model, in which layout, business logic and interaction with the database are separated.</p>
<p>Many PHP web sites don&#8217;t use the MVC-model. They don&#8217;t even use a framework. Although some PHP frameworks do exist (like Zend php framework, cakephp, Symfony). You can also write your own articles or manuals about PHP don&#8217;t say a word about frameworks. On the other</p>
<p>hand, JSP-developers use frameworks like Struts and ASP-developers use .Net, it looks like the concept of a framework is largely unknown by PHP developers.</p>
<p>Note : MVC stands for Model View Controller.</p>
<p>7) Slow &#8211; People thinks that Java is slow but it will be hard to know you that PHP is much slower! Look at this Computer Language Shootout. So how can PHP be used on all these popular websites with lots of visitors? It all because of caching. These sites use MCache and APC to get performance. It doesn&#8217;t proof anything about PHP, only that it&#8217;s cachable.</p>
<p>Finally, Php is easy to learn and development cost is low compared to other technology but being a true fan of programming language what i feel is that it sucks as a programming language.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 11, 2007 1:50 PM</p>
<p>Cross-site scripting ( xss ) attack by example and prevention in PHP</p>
<p>by Bagesh singh</p>
<p>What are cross-site scripting (XSS ) Attacks?</p>
<p>Cross-site scripting attacks are attacks that target the end user instead of your actual site. Vulnerable web applications that don&#8217;t check or validate properly incoming data let arbitrary code to run on a client computer (such as Javascript). The end result can be anything from stealing cookie data or redirecting to a different site, to embedding a browser exploit on a page. Anything that can be done with Javascript (a lot!).</p>
<p>Example :</p>
<p>Let us suppose that there is a comment form in the Michael&#8217;s website of a section like photo gallary or article. He created a feature that let his viewers to comment on his photos or article by submitting a form. And he doesnot have much validation in this comment form.</p>
<p>Now Sam (inturder) visits the Michael&#8217;s website and he&#8217;s jealous of Michael&#8217;s website traffic and wants to steal some of his website&#8217;s traffic. Then he can insert the follow code to his comment form</p>
<p>Hi Michael, very gud job, keep it up! &lt;img src= &#8220;http://google.com/images/logo.gif&#8221; onload=&#8221;window.location=&#8217;http://sam.com/&#8217;&#8221; /&gt;</p>
<p>And every time a user visits Michael&#8217;s article or photos, they are rudely redirected to sam&#8217;s site.</p>
<p>Prevention (In php) :</p>
<p>To prevent from XSS attacks, you just have to check and validate properly all user inputted data that you plan on using and dont allow html or javascript code to be inserted from that form.</p>
<p>Or you can you Use htmlspecialchars() to convert HTML characters into HTML entities. So characters like &lt;&gt; that mark the beginning/end of a tag are turned into html entities and you can use strip_tags() to only allow some tags as the function does not strip out harmful attributes like the onclick or onload.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 11, 2007 1:50 PM</p>
<p>Why php is more popular in the web</p>
<p>by Bagesh singh</p>
<p>PHP is popular because it&#8217;s relatively easy to learn and relatively cheap to develop web projects.And in the other side, its a open source technology and development cost is lower than the other technologies like java and dot net.</p>
<p>PHP&#8217;s three key advantages over competing technologies:</p>
<p>1. Designed for the Web &#8211; PHP has built-in features to handle heavily trafficked sites and to simplify common Web programming tasks.</p>
<p>2. Ease of Use &#8211; Companies gain enhanced productivity of development teams and significantly reduced time-to-market of mission critical web applications.</p>
<p>3. Open Source &#8211; Collaborative development leads to rapid technology advancement, superior code quality, a massive library of prewritten code, and comprehensive developer support and documentation.</p>
<p>You can view the popularity of PHP from here &#8211; Popularity of PHP.</p>
<p>According to a Netcraft survey published in April 2002, PHP is now being used by over 24% of the sites on the Internet out of the 37.6 million web sites reported worldwide (http://www.netcraft.com/Survey/index-200204.html), PHP is running on over 9 million sites and continues to grow at an explosive rate. Over the past two years PHP has averaged a 6.5% monthly growth rate.</p>
<p>If you were a small software developer creating a web based software package for sale at a price point less than $350, which platform would you pick to maximize your potential market?</p>
<p>There is a network effect that drives end user demand for PHP. Each new killer app available on PHP makes the whole platform more attractive, which draws in new apps. The whole cycle will draw in more and more PHP programmers.</p>
<p>The Hotscripts.com Java ad management software category has 4 entries, one sponsored costing $699. Meanwhile, the PHP Ad management software category has 105 entries, three sponsored all less than $100. If you were a small site owner looking to choose a platform for your site, which do you think it would be short sighted to select?</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 11, 2007 1:50 PM</p>
<p>Is google Invading privacy</p>
<p>by Bagesh singh</p>
<p>Google, the world’s largest Internet search engine, is on several fronts a danger that has to be stopped, a study released by Austria’s Graz University claims.</p>
<p>A research team led by Prof Hermann Maurer, chairman of Graz University’s Institute for Information Systems and Computer Media, argues that Google is creating unacceptable monopolies in many areas of the worldwide web.</p>
<p>According to his research, around 61 billion Internet searches are conducted each month. In the US, on average 57 per cent of searches are conducted with Google, and up to 95 per cent of Internet users use Google at least sometimes.</p>
<p>“Google is massively invading privacy,” the study said with the company knowing more than any other organisation about individuals and companies, but not bound by national data protection laws.</p>
<p>The study argues that Google is influencing economies in the way advertisements and documents are ranked.</p>
<p>The other form of Google&#8217;s invasion is the Google Maps. There are lots of important areas in the countries where you are not allowed to take snaps due to security reasons.It is restricted. But Google don&#8217;t care about the privacy policy of that particular country, and all the private places of that country are listed in Google&#8217;s Map.</p>
<p>Source : http://www.thehimalayantimes.com</p>
<p>I beg apology that this blog is specially for php and ajax fan but this topic is so hot that i couldnot stop posting it to this blog!!!</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 11, 2007 1:50 PM</p>
<p>A ajax tutorial for beginners</p>
<p>by Bagesh singh</p>
<p>What is ajax ?</p>
<p>AJAX is an acronym for Asynchronous JavaScript And XML.</p>
<p>AJAX is not a programming language. but simply a development technique for creating interactive web applications.</p>
<p>A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user.</p>
<p>Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be less user friendly.</p>
<p>With AJAX, web applications can send and retrieve data, without reloading the whole web page. This is done by sending HTTP Request to the server, and by modifying only parts of the web page using JavaScript.</p>
<p>AJAX is based on the following open standards:</p>
<p>JavaScript</p>
<p>XML</p>
<p>HTML</p>
<p>CSS</p>
<p>Ajax Example :</p>
<p>Create a file called test.php and put the following codes.</p>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;</p>
<p>&lt;script src=&#8221;hint.js&#8221;&gt;&lt;/script&gt;</p>
<p>&lt;/head&gt;</p>
<p>&lt;body&gt;</p>
<p>&lt;form&gt;</p>
<p>First Name:&lt;input id=&#8221;txt1&#8243;&gt;</p>
<p>&lt;/form&gt;</p>
<p>&lt;p&gt;Suggestions: &lt;span id=&#8221;txtHint&#8221;&gt;&lt;/span&gt;&lt;/p&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;</p>
<p>the code of the hint.js look like this</p>
<p>var xmlHttp  //a variable to store xml http object</p>
<p>function showHint(str)</p>
<p>{</p>
<p>if (str.length==0)</p>
<p>{</p>
<p>document.getElementById(&#8220;txtHint&#8221;).innerHTML=&#8221;"</p>
<p>return</p>
<p>}</p>
<p>xmlHttp=GetXmlHttpObject()</p>
<p>if (xmlHttp==null)</p>
<p>{</p>
<p>alert (&#8220;Browser does not support HTTP Request&#8221;)</p>
<p>return</p>
<p>}</p>
<p>var url=&#8221;test.php&#8221;</p>
<p>xmlHttp.onreadystatechange=stateChanged  //stateChanged function called on changing the state</p>
<p>xmlHttp.open(&#8220;GET&#8221;,url,true)  //open the url with the GET method</p>
<p>xmlHttp.send(null)</p>
<p>}</p>
<p>function stateChanged()</p>
<p>{</p>
<p>if (xmlHttp.readyState==4) //state 4 means completed state</p>
<p>{</p>
<p>document.getElementById(&#8220;txtHint&#8221;).innerHTML=xmlHttp.responseText //put the response value inside div</p>
<p>}</p>
<p>}</p>
<p>function GetXmlHttpObject(){  //function to creat xmlhttp object</p>
<p>var objXMLHttp=null</p>
<p>if (window.XMLHttpRequest</p>
<p>{</p>
<p>objXMLHttp=new XMLHttpRequest() //for firefox, opera etc</p>
<p>}</p>
<p>else if (window.ActiveXObject)</p>
<p>{</p>
<p>objXMLHttp=new ActiveXObject(&#8220;Microsoft.XMLHTTP&#8221;) //for IE</p>
<p>}</p>
<p>return objXMLHttp</p>
<p>}</p>
<p>Now create the file called test.php put the following code:</p>
<p>echo “this is just a simple hint”;</p>
<p>When the user inputs data, a function called &#8220;showHint()&#8221; is executed. The execution of the function is triggered by the &#8220;onkeyup&#8221; event. In other words: Each time the user moves his finger away from a keyboard key inside the txt1 field, the function showHint is called and the output “this is just a simple hint” is displayed in that span.</p>
<p>Add starLikeShareShare with noteEmailAdd tags</p>
<p>Dec 11, 2007 1:50 PM</p>
<p>A php tutorial for beginners</p>
<p>by Bagesh singh</p>
<p>Taken directly from PHP&#8217;s home, PHP.net, &#8220;PHP is an HTML-embedded scripting language. Much of its syntax is borrowed from C, Java and Perl with a couple of unique PHP-specific features thrown in. The goal of the language is to allow web developers to write dynamically generated pages quickly.&#8221;</p>
<p>This is generally a good definition of PHP. However, it does contain a lot of terms you may not be used to. Another way to think of PHP is a powerful, behind the scenes scripting language that your visitors won&#8217;t see!</p>
<p>When someone visits your PHP webpage, your web server processes the PHP code. It then sees which parts it needs to show to visitors(content and pictures) and hides the other stuff(file operations, math calculations, etc.) then translates your PHP into HTML. After the translation into HTML, it sends the webpage to your visitor&#8217;s web browser.</p>
<p>Creating first php enabled page</p>
<p>Create a file named hello.php and put it in your web server&#8217;s root directory (usually www or htdocs) with the following code.</p>
<p>&lt;?php echo&#8217;Hello World!!&#8217;;?&gt;</p>
<p>now open the web browser and type http://localhost/hello.php or http://127.0.0.1/hello.php. This file will be parsed by PHP and the following output will be sent to your browser</p>
<p>Hello World!!</p>
<p>Forms and PHP</p>
<p>Credate a simple file called test.html which contains the code as follows :</p>
<p>&lt;form action=&#8221;first.php&#8221; method=&#8221;post&#8221;&gt;</p>
<p>&lt;p&gt;Your name: &lt;input name=&#8221;username&#8221; /&gt;&lt;/p&gt;</p>
<p>&lt;p&gt;Your age: &lt;input name=&#8221;age&#8221; /&gt;&lt;/p&gt;</p>
<p>&lt;p&gt;&lt;input /&gt;&lt;/p&gt;</p>
<p>&lt;/form&gt;</p>
<p>now the code of the action.php look like this and these both files shoule be in the same folder.</p>
<p>Hi echo &lt;?php echo $_POST['username']; ?&gt;.</p>
<p>You are echo &lt;?php echo $_POST['age'];?&gt;years old.</p>
<p>A sample output looks like this</p>
<p>Hi Michael. You are 28 years old.</p>
<div id="seo_alrp_related"><h2>Posts Related to all Post of ajax javascript php magento jquery and all web developement related tutorials</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/11/ajax-login-validation-php-jquery/" rel="bookmark">Ajax login validation system in PHP using jQuery</a></h3><p>Last time, I’ve showed you how to check user availability in Ajax using jQuery’s fading effect. But I’ve just shown the example without connecting the ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-create-captcha-protection-using-php-and-ajax/" rel="bookmark">How to Create CAPTCHA Protection using PHP and AJAX</a></h3><p>Download Source CAPTCHA is a simple test to determine if a user is a computer or a human. It is used to prevent spam abuse on ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/05/a-solution-for-e-mail-handling-in-cakephp/" rel="bookmark">A solution for e-mail handling in CakePHP</a></h3><p>The emailComponent (cake\libs\controller\components\email.php) is a way for you to using the same concepts of layouts and view ctp files to send formated messages as text, ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/11/top-floating-message-box-using-jquery-2/" rel="bookmark">Top Floating message box using jQuery</a></h3><p>I’ve shown you how to create a alert box using jQuery. This time, I’ve come up with another tutorial to show you how to display ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/03/jquery-interview-questions-%e2%80%93-second-part-of-jquery-interview-question/" rel="bookmark">JQuery Interview Questions – Second Part of Jquery Interview question</a></h3><p>How can we apply css in odd childs of parent node using JQuery library. $(”tr:odd”).css(”background-color”, “#bbbbff”); How can we apply css in even childs of ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2010/11/all-post-of-ajax-javascript-php-magento-jquery-and-all-web-developemen-related-tutorial/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to make rounded corner textbox using css</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2010/03/how-to-make-rounded-corner-textbox-using-css/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2010/03/how-to-make-rounded-corner-textbox-using-css/#comments</comments>
		<pubDate>Fri, 19 Mar 2010 12:01:42 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[tips and technique]]></category>
		<category><![CDATA[rounded corner]]></category>
		<category><![CDATA[textbox]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/2010/03/how-to-make-rounded-corner-textbox-using-css/</guid>
		<description><![CDATA[In this post, I Posts Related to How to make rounded corner textbox using cssRound off Decimal to 2 places in jQueryI was recently working on a requirement where a textbox value had to be rounded off to 2 decimal digits and ‘$’ appended in front ...Textbox to accept only numbers (digits) using jqueryFew days [...]]]></description>
			<content:encoded><![CDATA[<p>In this post, I</p>
<div id="seo_alrp_related"><h2>Posts Related to How to make rounded corner textbox using css</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/round-off-decimal-to-2-places-in-jquery/" rel="bookmark">Round off Decimal to 2 places in jQuery</a></h3><p>I was recently working on a requirement where a textbox value had to be rounded off to 2 decimal digits and ‘$’ appended in front ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/03/textbox-to-accept-only-numbers-digits-using-jquery/" rel="bookmark">Textbox to accept only numbers (digits) using jquery</a></h3><p>Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/02/using-jquery-to-set-focus-on-the-first-textbox-kept-inside-a-paneldiv/" rel="bookmark">Using jQuery to Set Focus on the first TextBox Kept inside a Panel/Div</a></h3><p>In this post, we will use a small example to demonstrate how easy it is to use jQuery to select page elements and work on ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/08/textbox-to-accept-only-numbers-digits-using-jquery-2/" rel="bookmark">Textbox to accept only numbers (digits) using jquery</a></h3><p>Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/02/changing-textbox-value-from-dropdown-list-using-ajax-and-php/" rel="bookmark">Changing textbox value from dropdown list using Ajax and PHP</a></h3><p>Yesterday Tarquin macey asked me how can we change the value of the textbox based using Ajax and PHP based on the changing value of ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2010/03/how-to-make-rounded-corner-textbox-using-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Animated content navigation effect using jquery</title>
		<link>http://www.bageshsingh.com/bagesh-blog/2010/03/animated-content-navigation-effect-using-jquery-2/</link>
		<comments>http://www.bageshsingh.com/bagesh-blog/2010/03/animated-content-navigation-effect-using-jquery-2/#comments</comments>
		<pubDate>Fri, 19 Mar 2010 12:00:33 +0000</pubDate>
		<dc:creator>Bagesh Singh</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.bageshsingh.com/bagesh-blog/2010/03/animated-content-navigation-effect-using-jquery-2/</guid>
		<description><![CDATA[I always get bored with the same stuffs. And, I see same kind of content navigation to the different websites. Click a link, let Posts Related to Animated content navigation effect using jqueryAnimated content navigation effect using jqueryI always get bored with the same stuffs. And, I see same kind of content navigation to the [...]]]></description>
			<content:encoded><![CDATA[<p>I always get bored with the same stuffs. And, I see  same kind of content navigation to the different websites. Click a link,  let</p>
<div id="seo_alrp_related"><h2>Posts Related to Animated content navigation effect using jquery</h2><ul><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/03/animated-content-navigation-effect-using-jquery/" rel="bookmark">Animated content navigation effect using jquery</a></h3><p>I always get bored with the same stuffs. And, I see same kind of content navigation to the different websites. Click a link, let</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/05/what-are-section-categories-and-content-items-in-joomla/" rel="bookmark">What are section, categories and content items in joomla ?</a></h3><p>Joomla! is a content management system. Sections and categories allow you to organize your content. The basic structure is: Sections include Categories. Categories include content ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2011/07/how-to-add-beautiful-slide-out-navigation-a-css-and-jquery-tutorial/" rel="bookmark">how to add Beautiful Slide Out Navigation: A CSS and jQuery Tutorial</a></h3><p>1. The HTML Structure The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/09/ten-tips-for-improving-the-page-rank-of-your-webpage/" rel="bookmark">Ten tips for improving the page rank of your webpage.</a></h3><p>Writing good content - The most important aspect of getting a higher PR is writing good content for your website, but unfortunately most webmasters ignore ...</p></div></li><li><div class="seo_alrp_rl_content"><h3><a href="http://www.bageshsingh.com/bagesh-blog/2010/07/cloaking/" rel="bookmark">Cloaking</a></h3><p>While we gave SEO service to the website we have to intellect many aspects. In Black SEO Cloaking deals a major part. Cloaking is to ...</p></div></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.bageshsingh.com/bagesh-blog/2010/03/animated-content-navigation-effect-using-jquery-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

