Website At 100: Jquery

HOW TO CREATE FIXED MENU WHEN SCROLLING PAGE WITH CSS AND JQUERY

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
In this Tutorial I will explain <strong style="line-height: inherit;">how to create fixed menu when scrolling page with CSS and jQuery</strong>, you already know jQuery right? A short description about jQuery, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
The aim is to have the navigation fixed when user scrolling the page and back to its original position when scrolling back to top.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
Demo</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
Click <a href="http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" target="_blank" title="Visit demo page">here</a>to view demo page.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
There are lots of tutorial out there in the net but it contains lots of JS code so I decided to create my own way and with only a few lines of JS code, in this tutorial I only use 2 JS functions to make the fixed menu working, yes only two functions.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
Ok, let’s start.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
jQuery Library</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
All we need is only jQuery library; you can download it in jQuery site or use other library from <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Google CDN">Google CDN</a>, <a href="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Microsoft CDN">Miscrosoft CDN</a> and <a href="http://code.jquery.com/jquery-1.7.min.js" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="jQuery CDN">jQuery CDN</a>.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
HTML</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
This contains our menu HTML element, this is just a simple HTML UL tag to make our menus but if you already have one then use that instead.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div>
NOTE:</div>
<div>
If you’re going to use your old menus make sure to replace the class in JS code.<br />
<br /></div>
</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a94eeff3560091964238" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
</div>
<div title="Toggle Plain Code">
</div>
<div title="Toggle Line Wrap">
</div>
<div title="Expand Code">
</div>
<div title="Open Code In New Window">
</div>
<div style="line-height: inherit; margin-bottom: 18px;">
XHTML</div>
</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a94eeff3560091964238-1">
1</div>
<div data-line="crayon-52a94eeff3560091964238-2">
2</div>
<div data-line="crayon-52a94eeff3560091964238-3">
3</div>
<div data-line="crayon-52a94eeff3560091964238-4">
4</div>
<div data-line="crayon-52a94eeff3560091964238-5">
5</div>
<div data-line="crayon-52a94eeff3560091964238-6">
6</div>
<div data-line="crayon-52a94eeff3560091964238-7">
7</div>
<div data-line="crayon-52a94eeff3560091964238-8">
8</div>
<div data-line="crayon-52a94eeff3560091964238-9">
9</div>
<div data-line="crayon-52a94eeff3560091964238-10">
10</div>
<div data-line="crayon-52a94eeff3560091964238-11">
11</div>
<div data-line="crayon-52a94eeff3560091964238-12">
12</div>
<div data-line="crayon-52a94eeff3560091964238-13">
13</div>
<div data-line="crayon-52a94eeff3560091964238-14">
14</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a94eeff3560091964238-1">
<div class=”nav-container”></div>
<div id="crayon-52a94eeff3560091964238-2">
<div class=”nav”></div>
<div id="crayon-52a94eeff3560091964238-3">
    <ul></div>
<div id="crayon-52a94eeff3560091964238-4">
        <li><a href=”">Home</a></li></div>
<div id="crayon-52a94eeff3560091964238-5">
        <li><a href=”">CSS</a></li></div>
<div id="crayon-52a94eeff3560091964238-6">
        <li><a href=”">PHP</a></li></div>
<div id="crayon-52a94eeff3560091964238-7">
        <li><a href=”">SEO</a></li></div>
<div id="crayon-52a94eeff3560091964238-8">
        <li><a href=”">jQuery</a></li></div>
<div id="crayon-52a94eeff3560091964238-9">
        <li><a href=”">Wordpress</a></li></div>
<div id="crayon-52a94eeff3560091964238-10">
        <li><a href=”">Services</a></li></div>
<div id="crayon-52a94eeff3560091964238-11">
    </ul></div>
<div id="crayon-52a94eeff3560091964238-12">
    <div class=”clear”></div> /*clear floating div*/</div>
<div id="crayon-52a94eeff3560091964238-13">
</div></div>
<div id="crayon-52a94eeff3560091964238-14">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
CSS</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
To make our menu list horizontally we need to add CSS code.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a94eeff356a781048623" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
</div>
<div title="Toggle Plain Code">
</div>
<div title="Toggle Line Wrap">
</div>
<div title="Expand Code">
</div>
<div title="Expand Code">
</div>
<div title="Open Code In New Window">
</div>
<div style="line-height: inherit; margin-bottom: 18px;">
CSS</div>
</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a94eeff356a781048623-1">
1</div>
<div data-line="crayon-52a94eeff356a781048623-2">
2</div>
<div data-line="crayon-52a94eeff356a781048623-3">
3</div>
<div data-line="crayon-52a94eeff356a781048623-4">
4</div>
<div data-line="crayon-52a94eeff356a781048623-5">
5</div>
<div data-line="crayon-52a94eeff356a781048623-6">
6</div>
<div data-line="crayon-52a94eeff356a781048623-7">
7</div>
<div data-line="crayon-52a94eeff356a781048623-8">
8</div>
<div data-line="crayon-52a94eeff356a781048623-9">
9</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a94eeff356a781048623-1">
.nav-container{ background: url(‘images/nav_bg.jpg’) repeat-x 0 0;}</div>
<div id="crayon-52a94eeff356a781048623-2">
    .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */</div>
<div id="crayon-52a94eeff356a781048623-3">
</div>
<div id="crayon-52a94eeff356a781048623-4">
.nav { height: 42px;}</div>
<div id="crayon-52a94eeff356a781048623-5">
    .nav ul { list-style: none; }</div>
<div id="crayon-52a94eeff356a781048623-6">
    .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}</div>
<div id="crayon-52a94eeff356a781048623-7">
    .nav ul li:first-child{ padding-left: 0;}</div>
<div id="crayon-52a94eeff356a781048623-8">
    .nav ul li a { }</div>
<div id="crayon-52a94eeff356a781048623-9">
    .nav ul li a:hover{ text-decoration: underline;}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
We set the z-index very high since we don’t want any other absolute element to be on top of our navigation and add with in percent to center menu while scrolling.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
Javascript</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
This small JS code contains the main functions of our fixed scroll menu.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a94eeff356f323057027" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
</div>
<div title="Toggle Plain Code">
</div>
<div title="Toggle Line Wrap">
</div>
<div title="Expand Code">
</div>
<div title="Open Code In New Window">
</div>
<div style="line-height: inherit; margin-bottom: 18px;">
JavaScript</div>
</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a94eeff356f323057027-1">
1</div>
<div data-line="crayon-52a94eeff356f323057027-2">
2</div>
<div data-line="crayon-52a94eeff356f323057027-3">
3</div>
<div data-line="crayon-52a94eeff356f323057027-4">
4</div>
<div data-line="crayon-52a94eeff356f323057027-5">
5</div>
<div data-line="crayon-52a94eeff356f323057027-6">
6</div>
<div data-line="crayon-52a94eeff356f323057027-7">
7</div>
<div data-line="crayon-52a94eeff356f323057027-8">
8</div>
<div data-line="crayon-52a94eeff356f323057027-9">
9</div>
<div data-line="crayon-52a94eeff356f323057027-10">
10</div>
<div data-line="crayon-52a94eeff356f323057027-11">
11</div>
<div data-line="crayon-52a94eeff356f323057027-12">
12</div>
<div data-line="crayon-52a94eeff356f323057027-13">
13</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a94eeff356f323057027-1">
jQuery(“document”).ready(function($){</div>
<div id="crayon-52a94eeff356f323057027-2">
</div>
<div id="crayon-52a94eeff356f323057027-3">
    var nav = $(‘.nav-container’);</div>
<div id="crayon-52a94eeff356f323057027-4">
</div>
<div id="crayon-52a94eeff356f323057027-5">
    $(window).scroll(function () {</div>
<div id="crayon-52a94eeff356f323057027-6">
        if ($(this).scrollTop() > 136) {</div>
<div id="crayon-52a94eeff356f323057027-7">
            nav.addClass(“f-nav”);</div>
<div id="crayon-52a94eeff356f323057027-8">
        } else {</div>
<div id="crayon-52a94eeff356f323057027-9">
            nav.removeClass(“f-nav”);</div>
<div id="crayon-52a94eeff356f323057027-10">
        }</div>
<div id="crayon-52a94eeff356f323057027-11">
    });</div>
<div id="crayon-52a94eeff356f323057027-12">
</div>
<div id="crayon-52a94eeff356f323057027-13">
});</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
So, if we are on the top less than 136 height in pixel the menu is in the original position and add f-nav CSS class when greater than 136px height or add f-nav CSS class on scroll, where the top page greater than 136px height.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
That’s it, its easy right? Enjoy!</div>
</div>

HOW TO CREATE FIXED MENU WHEN SCROLLING PAGE WITH CSS AND JQUERY

In this Tutorial I will explain how to create fixed menu when scrolling page with CSS and jQuery , you already know jQuery right? A short...

UNCAUGHT REFERENCE ERROR: JQUERY IS NOT DEFINED

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
On fast few days, I was working on site of my employer and I’m using different kind of <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>plugin and custom jQuery code for different site part functionality and unfortunately I’m getting <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>error “<strong style="line-height: inherit;">Uncaught Reference Error: jQuery is not defined</strong>” okay so the error seems easy right? All we need to do is just include the main <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>library which we can find anywhere in the web in Google CDN, Microsoft CDN, jQuery CDN or hosted in your own server.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay now the error is gone but I found another errors in other <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>file in custom jQuery and jQuery plugin, that says “<strong style="line-height: inherit;">Uncaught Reference Error: $ is not defined</strong>” and “<strong style="line-height: inherit;">Uncaught TypeError: Property ‘$’ of Object[object DOMWindow] is not a function</strong>“, so I begun debugging it myself and the safest way to solve and rid this problem is to use <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery</a>conflict, in your custom code or plugin jQuery file just copy the format in the code below.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a6c544edf29903802616" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
JavaScript</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a6c544edf29903802616-1">
1</div>
<div data-line="crayon-52a6c544edf29903802616-2">
2</div>
<div data-line="crayon-52a6c544edf29903802616-3">
3</div>
<div data-line="crayon-52a6c544edf29903802616-4">
4</div>
<div data-line="crayon-52a6c544edf29903802616-5">
5</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a6c544edf29903802616-1">
var rys = jQuery.noConflict(); //create different alias</div>
<div id="crayon-52a6c544edf29903802616-2">
rys(“document”).ready(function(){</div>
<div id="crayon-52a6c544edf29903802616-3">
   // Do something with jQuery</div>
<div id="crayon-52a6c544edf29903802616-4">
   rys(“div p”).hide();</div>
<div id="crayon-52a6c544edf29903802616-5">
});</div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Note:</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
You need to replace all default “$” variable to your new variable in our case “rys”.</div>
</div>

UNCAUGHT REFERENCE ERROR: JQUERY IS NOT DEFINED

On fast few days, I was working on site of my employer and I’m using different kind of jQuery plugin and custom jQuery code for differen...

HOW TO LOAD AND REFRESH DIV EVERY X SECONDS WITH JQUERY AND AJAX

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
As of these days most social networking sites are using this event to load most recent posts every second without refreshing page, stream and tweets like Facebook, Google+ and Twitter, it loads in the top part of the page and I’d try developed one with <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>and Ajax to mimic this functionality, it’s really simple and easy to use.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay let’s start.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Index.html</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">html </a>and <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">javascript </a>code. <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">load('load_post.php');</code></div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a6c54637f2e428247366" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a6c54637f2e428247366-1">
1</div>
<div data-line="crayon-52a6c54637f2e428247366-2">
2</div>
<div data-line="crayon-52a6c54637f2e428247366-3">
3</div>
<div data-line="crayon-52a6c54637f2e428247366-4">
4</div>
<div data-line="crayon-52a6c54637f2e428247366-5">
5</div>
<div data-line="crayon-52a6c54637f2e428247366-6">
6</div>
<div data-line="crayon-52a6c54637f2e428247366-7">
7</div>
<div data-line="crayon-52a6c54637f2e428247366-8">
8</div>
<div data-line="crayon-52a6c54637f2e428247366-9">
9</div>
<div data-line="crayon-52a6c54637f2e428247366-10">
10</div>
<div data-line="crayon-52a6c54637f2e428247366-11">
11</div>
<div data-line="crayon-52a6c54637f2e428247366-12">
12</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a6c54637f2e428247366-1">
<script type=”text/javascript”></div>
<div id="crayon-52a6c54637f2e428247366-2">
   var autoLoad = setInterval(</div>
<div id="crayon-52a6c54637f2e428247366-3">
   function ()</div>
<div id="crayon-52a6c54637f2e428247366-4">
   {</div>
<div id="crayon-52a6c54637f2e428247366-5">
      $(‘#load_post’).load(‘load_post.php’).fadeIn(“slow”);</div>
<div id="crayon-52a6c54637f2e428247366-6">
   }, 10000); // refresh page every 10 seconds</div>
<div id="crayon-52a6c54637f2e428247366-7">
</script></div>
<div id="crayon-52a6c54637f2e428247366-8">
</div>
<div id="crayon-52a6c54637f2e428247366-9">
<body></div>
<div id="crayon-52a6c54637f2e428247366-10">
    <!–append load-post.php echo value here–></div>
<div id="crayon-52a6c54637f2e428247366-11">
    <div id=”load_post”></div></div>
<div id="crayon-52a6c54637f2e428247366-12">
</body></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Load_post.php</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">php </a>script to get data from the database.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a6c54637f38329895438" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a6c54637f38329895438-1">
1</div>
<div data-line="crayon-52a6c54637f38329895438-2">
2</div>
<div data-line="crayon-52a6c54637f38329895438-3">
3</div>
<div data-line="crayon-52a6c54637f38329895438-4">
4</div>
<div data-line="crayon-52a6c54637f38329895438-5">
5</div>
<div data-line="crayon-52a6c54637f38329895438-6">
6</div>
<div data-line="crayon-52a6c54637f38329895438-7">
7</div>
<div data-line="crayon-52a6c54637f38329895438-8">
8</div>
<div data-line="crayon-52a6c54637f38329895438-9">
9</div>
<div data-line="crayon-52a6c54637f38329895438-10">
10</div>
<div data-line="crayon-52a6c54637f38329895438-11">
11</div>
<div data-line="crayon-52a6c54637f38329895438-12">
12</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a6c54637f38329895438-1">
// include db configuration file</div>
<div id="crayon-52a6c54637f38329895438-2">
include_once(‘config.php’);</div>
<div id="crayon-52a6c54637f38329895438-3">
</div>
<div id="crayon-52a6c54637f38329895438-4">
$sql = mysql_query( “SELECT * FROM tblpost LIMIT 0, 5″ ) or die(mysql_error().’ Error loading data.’);</div>
<div id="crayon-52a6c54637f38329895438-5">
$num_post = mysql_num_rows($sql); // count the number of rows</div>
<div id="crayon-52a6c54637f38329895438-6">
</div>
<div id="crayon-52a6c54637f38329895438-7">
// check if there is data</div>
<div id="crayon-52a6c54637f38329895438-8">
if( $num_post ) {</div>
<div id="crayon-52a6c54637f38329895438-9">
   //this contains data to load into a page.</div>
<div id="crayon-52a6c54637f38329895438-10">
} else {</div>
<div id="crayon-52a6c54637f38329895438-11">
   echo ‘<p>There are no added post yet, please try to add to start sharing.</p>’;</div>
<div id="crayon-52a6c54637f38329895438-12">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This is very helpful if you want to get and load data from database in every x seconds without refreshing your page.</div>
</div>

HOW TO LOAD AND REFRESH DIV EVERY X SECONDS WITH JQUERY AND AJAX

As of these days most social networking sites are using this event to load most recent posts every second without refreshing page, stream ...

HOW TO ADD “EMAIL THIS ARTICLE TO A FRIEND” INTO YOUR WORDPRESS SITE WITHOUT USING A PLUGIN

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
As we created interesting posts in our site and which are worth of sharing into our friends, we open use other functionality so that user can share, send posts to their friends, other sites owner are adding social sites to share and send post to their friends and followers but this time I will try to explain <strong style="line-height: inherit;">how to create Email This Article to Friend without using a plugin</strong> and or social sites.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div>
Note</div>
<div>
In this tutorial we need to edit <strong style="line-height: inherit;">single.php</strong> file in our current theme as the Send button only display in single post.</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay, let’s start.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
PHP</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains small information use to send email, like Post title, Post content and post URL. This snippet should put before the <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>form.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f2636e4273865052" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f2636e4273865052-1">
1</div>
<div data-line="crayon-52a811f2636e4273865052-2">
2</div>
<div data-line="crayon-52a811f2636e4273865052-3">
3</div>
<div data-line="crayon-52a811f2636e4273865052-4">
4</div>
<div data-line="crayon-52a811f2636e4273865052-5">
5</div>
<div data-line="crayon-52a811f2636e4273865052-6">
6</div>
<div data-line="crayon-52a811f2636e4273865052-7">
7</div>
<div data-line="crayon-52a811f2636e4273865052-8">
8</div>
<div data-line="crayon-52a811f2636e4273865052-9">
9</div>
<div data-line="crayon-52a811f2636e4273865052-10">
10</div>
<div data-line="crayon-52a811f2636e4273865052-11">
11</div>
<div data-line="crayon-52a811f2636e4273865052-12">
12</div>
<div data-line="crayon-52a811f2636e4273865052-13">
13</div>
<div data-line="crayon-52a811f2636e4273865052-14">
14</div>
<div data-line="crayon-52a811f2636e4273865052-15">
15</div>
<div data-line="crayon-52a811f2636e4273865052-16">
16</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f2636e4273865052-1">
<?php</div>
<div id="crayon-52a811f2636e4273865052-2">
    session_start();</div>
<div id="crayon-52a811f2636e4273865052-3">
</div>
<div id="crayon-52a811f2636e4273865052-4">
    $message = get_the_content(‘readmore &raquo;’, false);</div>
<div id="crayon-52a811f2636e4273865052-5">
</div>
<div id="crayon-52a811f2636e4273865052-6">
    //filter the content to display HTML tag like <p></div>
<div id="crayon-52a811f2636e4273865052-7">
    $message = apply_filters(‘the_content’, $message);</div>
<div id="crayon-52a811f2636e4273865052-8">
    $message = str_replace(‘]]>’, ‘]]&gt;’, $message);</div>
<div id="crayon-52a811f2636e4273865052-9">
</div>
<div id="crayon-52a811f2636e4273865052-10">
    $title = get_the_title(); //get post title and assign into $title variable</div>
<div id="crayon-52a811f2636e4273865052-11">
    $site_url = get_permalink(); //get post permalink and assign into $site_url variable</div>
<div id="crayon-52a811f2636e4273865052-12">
</div>
<div id="crayon-52a811f2636e4273865052-13">
    $_SESSION['message'] = $message;</div>
<div id="crayon-52a811f2636e4273865052-14">
    $_SESSION['title'] = $title;</div>
<div id="crayon-52a811f2636e4273865052-15">
    $_SESSION['site_url'] = $site_url;</div>
<div id="crayon-52a811f2636e4273865052-16">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
HTML</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains our <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>form for sending data.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f2636f0206438932" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f2636f0206438932-1">
1</div>
<div data-line="crayon-52a811f2636f0206438932-2">
2</div>
<div data-line="crayon-52a811f2636f0206438932-3">
3</div>
<div data-line="crayon-52a811f2636f0206438932-4">
4</div>
<div data-line="crayon-52a811f2636f0206438932-5">
5</div>
<div data-line="crayon-52a811f2636f0206438932-6">
6</div>
<div data-line="crayon-52a811f2636f0206438932-7">
7</div>
<div data-line="crayon-52a811f2636f0206438932-8">
8</div>
<div data-line="crayon-52a811f2636f0206438932-9">
9</div>
<div data-line="crayon-52a811f2636f0206438932-10">
10</div>
<div data-line="crayon-52a811f2636f0206438932-11">
11</div>
<div data-line="crayon-52a811f2636f0206438932-12">
12</div>
<div data-line="crayon-52a811f2636f0206438932-13">
13</div>
<div data-line="crayon-52a811f2636f0206438932-14">
14</div>
<div data-line="crayon-52a811f2636f0206438932-15">
15</div>
<div data-line="crayon-52a811f2636f0206438932-16">
16</div>
<div data-line="crayon-52a811f2636f0206438932-17">
17</div>
<div data-line="crayon-52a811f2636f0206438932-18">
18</div>
<div data-line="crayon-52a811f2636f0206438932-19">
19</div>
<div data-line="crayon-52a811f2636f0206438932-20">
20</div>
<div data-line="crayon-52a811f2636f0206438932-21">
21</div>
<div data-line="crayon-52a811f2636f0206438932-22">
22</div>
<div data-line="crayon-52a811f2636f0206438932-23">
23</div>
<div data-line="crayon-52a811f2636f0206438932-24">
24</div>
<div data-line="crayon-52a811f2636f0206438932-25">
25</div>
<div data-line="crayon-52a811f2636f0206438932-26">
26</div>
<div data-line="crayon-52a811f2636f0206438932-27">
27</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f2636f0206438932-1">
<div class=”email-to-friend”></div>
<div id="crayon-52a811f2636f0206438932-2">
    <div class=”top-arrow”></div></div>
<div id="crayon-52a811f2636f0206438932-3">
</div>
<div id="crayon-52a811f2636f0206438932-4">
    <h4>E-mail this interesting post to a friend.</h4></div>
<div id="crayon-52a811f2636f0206438932-5">
    <div class=”message”></div></div>
<div id="crayon-52a811f2636f0206438932-6">
</div>
<div id="crayon-52a811f2636f0206438932-7">
    <form id=”emailform” method=”post”></div>
<div id="crayon-52a811f2636f0206438932-8">
        <p></div>
<div id="crayon-52a811f2636f0206438932-9">
            <label for=”to”>E-mail to:</label></div>
<div id="crayon-52a811f2636f0206438932-10">
            <input type=”text” id=”to” name=”to” class=”text” value=”" /></div>
<div id="crayon-52a811f2636f0206438932-11">
        </p></div>
<div id="crayon-52a811f2636f0206438932-12">
        <p></div>
<div id="crayon-52a811f2636f0206438932-13">
            <label for=”sender”>Sender Name:</label></div>
<div id="crayon-52a811f2636f0206438932-14">
            <input type=”text” id=”sender” name=”sender” class=”text” value=”" /></div>
<div id="crayon-52a811f2636f0206438932-15">
        </p></div>
<div id="crayon-52a811f2636f0206438932-16">
        <p></div>
<div id="crayon-52a811f2636f0206438932-17">
            <label for=”your_email”>Your Email:</label></div>
<div id="crayon-52a811f2636f0206438932-18">
            <input type=”text” id=”your_email” class=”text” name=”your_email” value=”" /></div>
<div id="crayon-52a811f2636f0206438932-19">
        </p></div>
<div id="crayon-52a811f2636f0206438932-20">
        <p></div>
<div id="crayon-52a811f2636f0206438932-21">
            <label for=”subject”>Subject:</label></div>
<div id="crayon-52a811f2636f0206438932-22">
            <input type=”text” id=”subject” name=”subject” class=”text” value=”" /></div>
<div id="crayon-52a811f2636f0206438932-23">
        </p></div>
<div id="crayon-52a811f2636f0206438932-24">
        <p><input type=”submit” value=”Send” name=”send_btn” class=”send-btn” /> or <a href=”javascript: void(0);” id=”hide-form”>Cancel</a></p></div>
<div id="crayon-52a811f2636f0206438932-25">
        <input type=”hidden” name=”action” value=”email-to-friend” /></div>
<div id="crayon-52a811f2636f0206438932-26">
    </form></div>
<div id="crayon-52a811f2636f0206438932-27">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Javascript</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contain <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">JS </a>script for popup <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>or simply a dialog box form and send data to the server.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f2636f7389476722" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
JavaScript</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f2636f7389476722-1">
1</div>
<div data-line="crayon-52a811f2636f7389476722-2">
2</div>
<div data-line="crayon-52a811f2636f7389476722-3">
3</div>
<div data-line="crayon-52a811f2636f7389476722-4">
4</div>
<div data-line="crayon-52a811f2636f7389476722-5">
5</div>
<div data-line="crayon-52a811f2636f7389476722-6">
6</div>
<div data-line="crayon-52a811f2636f7389476722-7">
7</div>
<div data-line="crayon-52a811f2636f7389476722-8">
8</div>
<div data-line="crayon-52a811f2636f7389476722-9">
9</div>
<div data-line="crayon-52a811f2636f7389476722-10">
10</div>
<div data-line="crayon-52a811f2636f7389476722-11">
11</div>
<div data-line="crayon-52a811f2636f7389476722-12">
12</div>
<div data-line="crayon-52a811f2636f7389476722-13">
13</div>
<div data-line="crayon-52a811f2636f7389476722-14">
14</div>
<div data-line="crayon-52a811f2636f7389476722-15">
15</div>
<div data-line="crayon-52a811f2636f7389476722-16">
16</div>
<div data-line="crayon-52a811f2636f7389476722-17">
17</div>
<div data-line="crayon-52a811f2636f7389476722-18">
18</div>
<div data-line="crayon-52a811f2636f7389476722-19">
19</div>
<div data-line="crayon-52a811f2636f7389476722-20">
20</div>
<div data-line="crayon-52a811f2636f7389476722-21">
21</div>
<div data-line="crayon-52a811f2636f7389476722-22">
22</div>
<div data-line="crayon-52a811f2636f7389476722-23">
23</div>
<div data-line="crayon-52a811f2636f7389476722-24">
24</div>
<div data-line="crayon-52a811f2636f7389476722-25">
25</div>
<div data-line="crayon-52a811f2636f7389476722-26">
26</div>
<div data-line="crayon-52a811f2636f7389476722-27">
27</div>
<div data-line="crayon-52a811f2636f7389476722-28">
28</div>
<div data-line="crayon-52a811f2636f7389476722-29">
29</div>
<div data-line="crayon-52a811f2636f7389476722-30">
30</div>
<div data-line="crayon-52a811f2636f7389476722-31">
31</div>
<div data-line="crayon-52a811f2636f7389476722-32">
32</div>
<div data-line="crayon-52a811f2636f7389476722-33">
33</div>
<div data-line="crayon-52a811f2636f7389476722-34">
34</div>
<div data-line="crayon-52a811f2636f7389476722-35">
35</div>
<div data-line="crayon-52a811f2636f7389476722-36">
36</div>
<div data-line="crayon-52a811f2636f7389476722-37">
37</div>
<div data-line="crayon-52a811f2636f7389476722-38">
38</div>
<div data-line="crayon-52a811f2636f7389476722-39">
39</div>
<div data-line="crayon-52a811f2636f7389476722-40">
40</div>
<div data-line="crayon-52a811f2636f7389476722-41">
41</div>
<div data-line="crayon-52a811f2636f7389476722-42">
42</div>
<div data-line="crayon-52a811f2636f7389476722-43">
43</div>
<div data-line="crayon-52a811f2636f7389476722-44">
44</div>
<div data-line="crayon-52a811f2636f7389476722-45">
45</div>
<div data-line="crayon-52a811f2636f7389476722-46">
46</div>
<div data-line="crayon-52a811f2636f7389476722-47">
47</div>
<div data-line="crayon-52a811f2636f7389476722-48">
48</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f2636f7389476722-1">
<script type=”text/javascript”></div>
<div id="crayon-52a811f2636f7389476722-2">
    var ryans = jQuery.noConflict();</div>
<div id="crayon-52a811f2636f7389476722-3">
</div>
<div id="crayon-52a811f2636f7389476722-4">
    ryans(document).ready(function(){</div>
<div id="crayon-52a811f2636f7389476722-5">
</div>
<div id="crayon-52a811f2636f7389476722-6">
        // Display our form</div>
<div id="crayon-52a811f2636f7389476722-7">
        ryans(“#show-form”).click(function(e){</div>
<div id="crayon-52a811f2636f7389476722-8">
            ryans(“.email-to-friend”).fadeIn(“slow”)</div>
<div id="crayon-52a811f2636f7389476722-9">
            .css(‘top’, e.pageY + 16)</div>
<div id="crayon-52a811f2636f7389476722-10">
            .css(‘left’, e.pageX)</div>
<div id="crayon-52a811f2636f7389476722-11">
            .appendTo(‘body’);</div>
<div id="crayon-52a811f2636f7389476722-12">
        });</div>
<div id="crayon-52a811f2636f7389476722-13">
</div>
<div id="crayon-52a811f2636f7389476722-14">
        // Hide our form</div>
<div id="crayon-52a811f2636f7389476722-15">
        ryans(“#hide-form”).click(function(){</div>
<div id="crayon-52a811f2636f7389476722-16">
            ryans(“.email-to-friend”).fadeOut(“slow”);</div>
<div id="crayon-52a811f2636f7389476722-17">
        });</div>
<div id="crayon-52a811f2636f7389476722-18">
</div>
<div id="crayon-52a811f2636f7389476722-19">
    });</div>
<div id="crayon-52a811f2636f7389476722-20">
</div>
<div id="crayon-52a811f2636f7389476722-21">
    // Add submit event to the form.</div>
<div id="crayon-52a811f2636f7389476722-22">
    ryans(“#emailform”).submit(function(){</div>
<div id="crayon-52a811f2636f7389476722-23">
</div>
<div id="crayon-52a811f2636f7389476722-24">
        eaction = this.action.value;</div>
<div id="crayon-52a811f2636f7389476722-25">
        eto = this.to.value;</div>
<div id="crayon-52a811f2636f7389476722-26">
        esender = this.sender.value;</div>
<div id="crayon-52a811f2636f7389476722-27">
        eyour_email = this.your_email.value;</div>
<div id="crayon-52a811f2636f7389476722-28">
        esubject = this.subject.value;</div>
<div id="crayon-52a811f2636f7389476722-29">
        send_btn = this.send_btn;</div>
<div id="crayon-52a811f2636f7389476722-30">
</div>
<div id="crayon-52a811f2636f7389476722-31">
        // send data using jQuery.post</div>
<div id="crayon-52a811f2636f7389476722-32">
        ryans.post(“<?php bloginfo(‘template_directory’) ?>/includes/email-ajax.php”, {action: eaction, to: eto, sender: esender, your_email: eyour_email, subject: esubject}, function(data){</div>
<div id="crayon-52a811f2636f7389476722-33">
            if(data==’0′) {</div>
<div id="crayon-52a811f2636f7389476722-34">
                ryans(“.message”).html(‘<p>All fields are required.</p>’);</div>
<div id="crayon-52a811f2636f7389476722-35">
            } else if(data==’1′) {</div>
<div id="crayon-52a811f2636f7389476722-36">
                ryans(“.message”).html(‘<p>Invalid Email Address, Please try again.</p>’);</div>
<div id="crayon-52a811f2636f7389476722-37">
            } else {</div>
<div id="crayon-52a811f2636f7389476722-38">
                send_btn.value=”Sent”;</div>
<div id="crayon-52a811f2636f7389476722-39">
                send_btn.disabled=true;</div>
<div id="crayon-52a811f2636f7389476722-40">
                ryans(“.message”).html(‘<p>Post successfully emailed to your friend <img alt=";)" class="wp-smiley" src="http://websiteat100.com/blog/wp-includes/images/smilies/icon_wink.gif" style="border: 0px; height: auto; margin: 0px !important; max-height: 1em; max-width: 100%; vertical-align: middle;" /> </p>’);</div>
<div id="crayon-52a811f2636f7389476722-41">
            }</div>
<div id="crayon-52a811f2636f7389476722-42">
</div>
<div id="crayon-52a811f2636f7389476722-43">
        });</div>
<div id="crayon-52a811f2636f7389476722-44">
</div>
<div id="crayon-52a811f2636f7389476722-45">
        return false;</div>
<div id="crayon-52a811f2636f7389476722-46">
    });</div>
<div id="crayon-52a811f2636f7389476722-47">
</div>
<div id="crayon-52a811f2636f7389476722-48">
</script></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Confused?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay I will explain how the above <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">javascripts </a>works.</div>
<ul style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; list-style: square outside; margin: 20px 0px 20px 40px; padding: 0px; text-align: justify;">
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">ryans("#show-form"):</code> We simply add an event and display the form if #show-form is triggered.</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">ryans("#hide-form"):</code> This will use to hide the form.</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">ryans.post():</code> We’re using jQuery.post to send data(s) to the server, visit <a href="http://api.jquery.com/jQuery.post/" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" target="_blank" title="jQuery">jQuery</a> site for more information.</li>
</ul>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
ajax-email.php</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>script that accepts data that are being sent from <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">javascript </a>above.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f2636fd362887334" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f2636fd362887334-1">
1</div>
<div data-line="crayon-52a811f2636fd362887334-2">
2</div>
<div data-line="crayon-52a811f2636fd362887334-3">
3</div>
<div data-line="crayon-52a811f2636fd362887334-4">
4</div>
<div data-line="crayon-52a811f2636fd362887334-5">
5</div>
<div data-line="crayon-52a811f2636fd362887334-6">
6</div>
<div data-line="crayon-52a811f2636fd362887334-7">
7</div>
<div data-line="crayon-52a811f2636fd362887334-8">
8</div>
<div data-line="crayon-52a811f2636fd362887334-9">
9</div>
<div data-line="crayon-52a811f2636fd362887334-10">
10</div>
<div data-line="crayon-52a811f2636fd362887334-11">
11</div>
<div data-line="crayon-52a811f2636fd362887334-12">
12</div>
<div data-line="crayon-52a811f2636fd362887334-13">
13</div>
<div data-line="crayon-52a811f2636fd362887334-14">
14</div>
<div data-line="crayon-52a811f2636fd362887334-15">
15</div>
<div data-line="crayon-52a811f2636fd362887334-16">
16</div>
<div data-line="crayon-52a811f2636fd362887334-17">
17</div>
<div data-line="crayon-52a811f2636fd362887334-18">
18</div>
<div data-line="crayon-52a811f2636fd362887334-19">
19</div>
<div data-line="crayon-52a811f2636fd362887334-20">
20</div>
<div data-line="crayon-52a811f2636fd362887334-21">
21</div>
<div data-line="crayon-52a811f2636fd362887334-22">
22</div>
<div data-line="crayon-52a811f2636fd362887334-23">
23</div>
<div data-line="crayon-52a811f2636fd362887334-24">
24</div>
<div data-line="crayon-52a811f2636fd362887334-25">
25</div>
<div data-line="crayon-52a811f2636fd362887334-26">
26</div>
<div data-line="crayon-52a811f2636fd362887334-27">
27</div>
<div data-line="crayon-52a811f2636fd362887334-28">
28</div>
<div data-line="crayon-52a811f2636fd362887334-29">
29</div>
<div data-line="crayon-52a811f2636fd362887334-30">
30</div>
<div data-line="crayon-52a811f2636fd362887334-31">
31</div>
<div data-line="crayon-52a811f2636fd362887334-32">
32</div>
<div data-line="crayon-52a811f2636fd362887334-33">
33</div>
<div data-line="crayon-52a811f2636fd362887334-34">
34</div>
<div data-line="crayon-52a811f2636fd362887334-35">
35</div>
<div data-line="crayon-52a811f2636fd362887334-36">
36</div>
<div data-line="crayon-52a811f2636fd362887334-37">
37</div>
<div data-line="crayon-52a811f2636fd362887334-38">
38</div>
<div data-line="crayon-52a811f2636fd362887334-39">
39</div>
<div data-line="crayon-52a811f2636fd362887334-40">
40</div>
<div data-line="crayon-52a811f2636fd362887334-41">
41</div>
<div data-line="crayon-52a811f2636fd362887334-42">
42</div>
<div data-line="crayon-52a811f2636fd362887334-43">
43</div>
<div data-line="crayon-52a811f2636fd362887334-44">
44</div>
<div data-line="crayon-52a811f2636fd362887334-45">
45</div>
<div data-line="crayon-52a811f2636fd362887334-46">
46</div>
<div data-line="crayon-52a811f2636fd362887334-47">
47</div>
<div data-line="crayon-52a811f2636fd362887334-48">
48</div>
<div data-line="crayon-52a811f2636fd362887334-49">
49</div>
<div data-line="crayon-52a811f2636fd362887334-50">
50</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f2636fd362887334-1">
<?php</div>
<div id="crayon-52a811f2636fd362887334-2">
</div>
<div id="crayon-52a811f2636fd362887334-3">
    session_start();</div>
<div id="crayon-52a811f2636fd362887334-4">
</div>
<div id="crayon-52a811f2636fd362887334-5">
    $err = ”;</div>
<div id="crayon-52a811f2636fd362887334-6">
    $success = ”;</div>
<div id="crayon-52a811f2636fd362887334-7">
</div>
<div id="crayon-52a811f2636fd362887334-8">
    if( isset($_POST['action']) && $_POST['action']==’email-to-friend’ ) {</div>
<div id="crayon-52a811f2636fd362887334-9">
</div>
<div id="crayon-52a811f2636fd362887334-10">
        $to = $_POST['to'];</div>
<div id="crayon-52a811f2636fd362887334-11">
        $sender = $_POST['sender'];</div>
<div id="crayon-52a811f2636fd362887334-12">
        $your_email = $_POST['your_email'];</div>
<div id="crayon-52a811f2636fd362887334-13">
        $subject = $_POST['subject'];</div>
<div id="crayon-52a811f2636fd362887334-14">
</div>
<div id="crayon-52a811f2636fd362887334-15">
</div>
<div id="crayon-52a811f2636fd362887334-16">
        if( $to == “” || $sender == “” || $your_email == “” || $subject == “” ) {</div>
<div id="crayon-52a811f2636fd362887334-17">
            echo ’0′;</div>
<div id="crayon-52a811f2636fd362887334-18">
        } else if(!filter_var($to, FILTER_VALIDATE_EMAIL)) {</div>
<div id="crayon-52a811f2636fd362887334-19">
            echo ’1′;</div>
<div id="crayon-52a811f2636fd362887334-20">
        } else if(!filter_var($your_email, FILTER_VALIDATE_EMAIL)) {</div>
<div id="crayon-52a811f2636fd362887334-21">
            echo ’1′;</div>
<div id="crayon-52a811f2636fd362887334-22">
        } else {</div>
<div id="crayon-52a811f2636fd362887334-23">
</div>
<div id="crayon-52a811f2636fd362887334-24">
            $body = $_SESSION['message'];</div>
<div id="crayon-52a811f2636fd362887334-25">
            $title = $_SESSION['title'];</div>
<div id="crayon-52a811f2636fd362887334-26">
            $site_url = $_SESSION['site_url'];</div>
<div id="crayon-52a811f2636fd362887334-27">
</div>
<div id="crayon-52a811f2636fd362887334-28">
            $message = ‘</div>
<div id="crayon-52a811f2636fd362887334-29">
            <html></div>
<div id="crayon-52a811f2636fd362887334-30">
            <head></div>
<div id="crayon-52a811f2636fd362887334-31">
                <title>’. $title .’</title></div>
<div id="crayon-52a811f2636fd362887334-32">
            </head></div>
<div id="crayon-52a811f2636fd362887334-33">
            <body></div>
<div id="crayon-52a811f2636fd362887334-34">
                <h2>’. $title .’</h2.</div>
<div id="crayon-52a811f2636fd362887334-35">
                ’. $body .’</div>
<div id="crayon-52a811f2636fd362887334-36">
                <p>Having trouble viewing this email? <a href=”‘. $site_url. ‘”>Click here</a>.</p></div>
<div id="crayon-52a811f2636fd362887334-37">
            </body></div>
<div id="crayon-52a811f2636fd362887334-38">
            </html></div>
<div id="crayon-52a811f2636fd362887334-39">
            ’;</div>
<div id="crayon-52a811f2636fd362887334-40">
            $headers = ‘From: ‘. $sender .’ <’. $your_email .’>’ . “\r\n”;</div>
<div id="crayon-52a811f2636fd362887334-41">
</div>
<div id="crayon-52a811f2636fd362887334-42">
            $email = mail( $to, $subject, $message, $headers );</div>
<div id="crayon-52a811f2636fd362887334-43">
            if( $email ) {</div>
<div id="crayon-52a811f2636fd362887334-44">
                echo ’2′;</div>
<div id="crayon-52a811f2636fd362887334-45">
            }</div>
<div id="crayon-52a811f2636fd362887334-46">
</div>
<div id="crayon-52a811f2636fd362887334-47">
        }</div>
<div id="crayon-52a811f2636fd362887334-48">
    }</div>
<div id="crayon-52a811f2636fd362887334-49">
</div>
<div id="crayon-52a811f2636fd362887334-50">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
CSS</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
To beautify our send button and form we need to add <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css blog by websiteat100.com">CSS </a>code, copy and paste below code to apply.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f263704814338570" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
CSS</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f263704814338570-1">
1</div>
<div data-line="crayon-52a811f263704814338570-2">
2</div>
<div data-line="crayon-52a811f263704814338570-3">
3</div>
<div data-line="crayon-52a811f263704814338570-4">
4</div>
<div data-line="crayon-52a811f263704814338570-5">
5</div>
<div data-line="crayon-52a811f263704814338570-6">
6</div>
<div data-line="crayon-52a811f263704814338570-7">
7</div>
<div data-line="crayon-52a811f263704814338570-8">
8</div>
<div data-line="crayon-52a811f263704814338570-9">
9</div>
<div data-line="crayon-52a811f263704814338570-10">
10</div>
<div data-line="crayon-52a811f263704814338570-11">
11</div>
<div data-line="crayon-52a811f263704814338570-12">
12</div>
<div data-line="crayon-52a811f263704814338570-13">
13</div>
<div data-line="crayon-52a811f263704814338570-14">
14</div>
<div data-line="crayon-52a811f263704814338570-15">
15</div>
<div data-line="crayon-52a811f263704814338570-16">
16</div>
<div data-line="crayon-52a811f263704814338570-17">
17</div>
<div data-line="crayon-52a811f263704814338570-18">
18</div>
<div data-line="crayon-52a811f263704814338570-19">
19</div>
<div data-line="crayon-52a811f263704814338570-20">
20</div>
<div data-line="crayon-52a811f263704814338570-21">
21</div>
<div data-line="crayon-52a811f263704814338570-22">
22</div>
<div data-line="crayon-52a811f263704814338570-23">
23</div>
<div data-line="crayon-52a811f263704814338570-24">
24</div>
<div data-line="crayon-52a811f263704814338570-25">
25</div>
<div data-line="crayon-52a811f263704814338570-26">
26</div>
<div data-line="crayon-52a811f263704814338570-27">
27</div>
<div data-line="crayon-52a811f263704814338570-28">
28</div>
<div data-line="crayon-52a811f263704814338570-29">
29</div>
<div data-line="crayon-52a811f263704814338570-30">
30</div>
<div data-line="crayon-52a811f263704814338570-31">
31</div>
<div data-line="crayon-52a811f263704814338570-32">
32</div>
<div data-line="crayon-52a811f263704814338570-33">
33</div>
<div data-line="crayon-52a811f263704814338570-34">
34</div>
<div data-line="crayon-52a811f263704814338570-35">
35</div>
<div data-line="crayon-52a811f263704814338570-36">
36</div>
<div data-line="crayon-52a811f263704814338570-37">
37</div>
<div data-line="crayon-52a811f263704814338570-38">
38</div>
<div data-line="crayon-52a811f263704814338570-39">
39</div>
<div data-line="crayon-52a811f263704814338570-40">
40</div>
<div data-line="crayon-52a811f263704814338570-41">
41</div>
<div data-line="crayon-52a811f263704814338570-42">
42</div>
<div data-line="crayon-52a811f263704814338570-43">
43</div>
<div data-line="crayon-52a811f263704814338570-44">
44</div>
<div data-line="crayon-52a811f263704814338570-45">
45</div>
<div data-line="crayon-52a811f263704814338570-46">
46</div>
<div data-line="crayon-52a811f263704814338570-47">
47</div>
<div data-line="crayon-52a811f263704814338570-48">
48</div>
<div data-line="crayon-52a811f263704814338570-49">
49</div>
<div data-line="crayon-52a811f263704814338570-50">
50</div>
<div data-line="crayon-52a811f263704814338570-51">
51</div>
<div data-line="crayon-52a811f263704814338570-52">
52</div>
<div data-line="crayon-52a811f263704814338570-53">
53</div>
<div data-line="crayon-52a811f263704814338570-54">
54</div>
<div data-line="crayon-52a811f263704814338570-55">
55</div>
<div data-line="crayon-52a811f263704814338570-56">
56</div>
<div data-line="crayon-52a811f263704814338570-57">
57</div>
<div data-line="crayon-52a811f263704814338570-58">
58</div>
<div data-line="crayon-52a811f263704814338570-59">
59</div>
<div data-line="crayon-52a811f263704814338570-60">
60</div>
<div data-line="crayon-52a811f263704814338570-61">
61</div>
<div data-line="crayon-52a811f263704814338570-62">
62</div>
<div data-line="crayon-52a811f263704814338570-63">
63</div>
<div data-line="crayon-52a811f263704814338570-64">
64</div>
<div data-line="crayon-52a811f263704814338570-65">
65</div>
<div data-line="crayon-52a811f263704814338570-66">
66</div>
<div data-line="crayon-52a811f263704814338570-67">
67</div>
<div data-line="crayon-52a811f263704814338570-68">
68</div>
<div data-line="crayon-52a811f263704814338570-69">
69</div>
<div data-line="crayon-52a811f263704814338570-70">
70</div>
<div data-line="crayon-52a811f263704814338570-71">
71</div>
<div data-line="crayon-52a811f263704814338570-72">
72</div>
<div data-line="crayon-52a811f263704814338570-73">
73</div>
<div data-line="crayon-52a811f263704814338570-74">
74</div>
<div data-line="crayon-52a811f263704814338570-75">
75</div>
<div data-line="crayon-52a811f263704814338570-76">
76</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f263704814338570-1">
.show-form{</div>
<div id="crayon-52a811f263704814338570-2">
    padding: 4px 6px 4px 26px;</div>
<div id="crayon-52a811f263704814338570-3">
    background: #ECEEF5 url(‘images/email.png’) no-repeat 6px center;</div>
<div id="crayon-52a811f263704814338570-4">
    border: 1px solid #CAD4E7;</div>
<div id="crayon-52a811f263704814338570-5">
    font-size: 12px;</div>
<div id="crayon-52a811f263704814338570-6">
    color: #3B5998;</div>
<div id="crayon-52a811f263704814338570-7">
    text-decoration: none;</div>
<div id="crayon-52a811f263704814338570-8">
    border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-9">
    -moz-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-10">
    -webkit-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-11">
}</div>
<div id="crayon-52a811f263704814338570-12">
    .show-form:hover{</div>
<div id="crayon-52a811f263704814338570-13">
        background: #E2E6EF url(‘images/email.png’) no-repeat 6px center;</div>
<div id="crayon-52a811f263704814338570-14">
        text-decoration: none !important;</div>
<div id="crayon-52a811f263704814338570-15">
    }</div>
<div id="crayon-52a811f263704814338570-16">
</div>
<div id="crayon-52a811f263704814338570-17">
.email-to-friend{</div>
<div id="crayon-52a811f263704814338570-18">
    z-index: 99999;</div>
<div id="crayon-52a811f263704814338570-19">
    background: #fff;</div>
<div id="crayon-52a811f263704814338570-20">
    border: 1px solid #323232;</div>
<div id="crayon-52a811f263704814338570-21">
    padding: 10px;</div>
<div id="crayon-52a811f263704814338570-22">
    position: absolute;</div>
<div id="crayon-52a811f263704814338570-23">
    display: none;</div>
<div id="crayon-52a811f263704814338570-24">
}</div>
<div id="crayon-52a811f263704814338570-25">
.email-to-friend  a:hover{</div>
<div id="crayon-52a811f263704814338570-26">
    text-decoration: underline;</div>
<div id="crayon-52a811f263704814338570-27">
}</div>
<div id="crayon-52a811f263704814338570-28">
.email-to-friend .top-arrow{</div>
<div id="crayon-52a811f263704814338570-29">
    margin-top: -15px;</div>
<div id="crayon-52a811f263704814338570-30">
    background: url(‘images/top-arrow.png’) no-repeat 2% top;</div>
<div id="crayon-52a811f263704814338570-31">
    width: 9px;</div>
<div id="crayon-52a811f263704814338570-32">
    height: 5px;</div>
<div id="crayon-52a811f263704814338570-33">
    display: block;</div>
<div id="crayon-52a811f263704814338570-34">
}</div>
<div id="crayon-52a811f263704814338570-35">
.email-to-friend label{</div>
<div id="crayon-52a811f263704814338570-36">
    width: 88px;</div>
<div id="crayon-52a811f263704814338570-37">
    position: absolute;</div>
<div id="crayon-52a811f263704814338570-38">
    cursor: pointer;</div>
<div id="crayon-52a811f263704814338570-39">
}</div>
<div id="crayon-52a811f263704814338570-40">
.email-to-friend .text{</div>
<div id="crayon-52a811f263704814338570-41">
    padding: 4px;</div>
<div id="crayon-52a811f263704814338570-42">
    width: 200px;</div>
<div id="crayon-52a811f263704814338570-43">
    margin-left: 90px;</div>
<div id="crayon-52a811f263704814338570-44">
    border: 1px solid #BDC7D8;</div>
<div id="crayon-52a811f263704814338570-45">
}</div>
<div id="crayon-52a811f263704814338570-46">
.email-to-friend .send-btn{</div>
<div id="crayon-52a811f263704814338570-47">
    width: 60px;</div>
<div id="crayon-52a811f263704814338570-48">
    padding: 4px 6px;</div>
<div id="crayon-52a811f263704814338570-49">
    background: #ECEEF5;</div>
<div id="crayon-52a811f263704814338570-50">
    border: 1px solid #CAD4E7;</div>
<div id="crayon-52a811f263704814338570-51">
    font-size: 12px;</div>
<div id="crayon-52a811f263704814338570-52">
    cursor: pointer;</div>
<div id="crayon-52a811f263704814338570-53">
    color: #3B5998;</div>
<div id="crayon-52a811f263704814338570-54">
    border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-55">
    -moz-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-56">
    -webkit-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-57">
}</div>
<div id="crayon-52a811f263704814338570-58">
</div>
<div id="crayon-52a811f263704814338570-59">
.email-to-friend .message {</div>
<div id="crayon-52a811f263704814338570-60">
    margin: 6px 0;</div>
<div id="crayon-52a811f263704814338570-61">
}</div>
<div id="crayon-52a811f263704814338570-62">
.email-to-friend .message p{</div>
<div id="crayon-52a811f263704814338570-63">
    border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-64">
    -moz-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-65">
    -webkit-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-66">
}</div>
<div id="crayon-52a811f263704814338570-67">
.email-to-friend .success {</div>
<div id="crayon-52a811f263704814338570-68">
    padding: 4px 8px;</div>
<div id="crayon-52a811f263704814338570-69">
    background: lightYellow;</div>
<div id="crayon-52a811f263704814338570-70">
    border: 1px solid #E6DB55;</div>
<div id="crayon-52a811f263704814338570-71">
}</div>
<div id="crayon-52a811f263704814338570-72">
.email-to-friend .error {</div>
<div id="crayon-52a811f263704814338570-73">
    padding: 4px 8px;</div>
<div id="crayon-52a811f263704814338570-74">
    background: #FFEBE8;</div>
<div id="crayon-52a811f263704814338570-75">
    border: 1px solid #C00;</div>
<div id="crayon-52a811f263704814338570-76">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

HOW TO ADD “EMAIL THIS ARTICLE TO A FRIEND” INTO YOUR WORDPRESS SITE WITHOUT USING A PLUGIN

As we created interesting posts in our site and which are worth of sharing into our friends, we open use other functionality so that user ...

PHP AND MYSQL UPLOAD WITH RESIZE IMAGE

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
If you’re searching on a short, direct and simple <strong style="line-height: inherit;"><a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP</a> and MySQL upload and re-size</strong>script, well you’re in the right place folks, today I’ll share you how easily this scripts is and I’m using this script too in my web projects and it works fine, one of the CMS that uses this method is <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>of course there’s a lot more <img alt=";)" src="http://www.sutanaryan.com/wp-includes/images/smilies/icon_wink.gif" style="border: 0px; height: auto; margin: 0px; max-width: 100%; vertical-align: middle;" title="" /></div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Why we have to re-size image?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
The answer is pretty simple, although there are lots that are need to consider but the most common are, first server load and space second web speed (remember Google love faster website) and more, hey it’s an optional so if you have SSD and lighting speed server then you don’t need to re-size images <img alt=":)" src="http://www.sutanaryan.com/wp-includes/images/smilies/icon_smile.gif" style="border: 0px; height: auto; margin: 0px; max-width: 100%; vertical-align: middle;" title="" /></div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay lets go, are you ready?</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
HTML Code</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>form code for upload.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a8111e307c2636637010" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a8111e307c2636637010-1">
1</div>
<div data-line="crayon-52a8111e307c2636637010-2">
2</div>
<div data-line="crayon-52a8111e307c2636637010-3">
3</div>
<div data-line="crayon-52a8111e307c2636637010-4">
4</div>
<div data-line="crayon-52a8111e307c2636637010-5">
5</div>
<div data-line="crayon-52a8111e307c2636637010-6">
6</div>
<div data-line="crayon-52a8111e307c2636637010-7">
7</div>
<div data-line="crayon-52a8111e307c2636637010-8">
8</div>
<div data-line="crayon-52a8111e307c2636637010-9">
9</div>
<div data-line="crayon-52a8111e307c2636637010-10">
10</div>
<div data-line="crayon-52a8111e307c2636637010-11">
11</div>
<div data-line="crayon-52a8111e307c2636637010-12">
12</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a8111e307c2636637010-1">
<!–please do not tear or rip enctype, this is the most important form parameters in uploading files–></div>
<div id="crayon-52a8111e307c2636637010-2">
<form enctype=”multipart/form-data” method=”post”></div>
<div id="crayon-52a8111e307c2636637010-3">
    <fieldset></div>
<div id="crayon-52a8111e307c2636637010-4">
        <p><label for=”file”>Filename:</label><br/></div>
<div id="crayon-52a8111e307c2636637010-5">
            <input type=”file” name=”file” /></div>
<div id="crayon-52a8111e307c2636637010-6">
        </p></div>
<div id="crayon-52a8111e307c2636637010-7">
        <p></div>
<div id="crayon-52a8111e307c2636637010-8">
            <input type=”hidden” name=”task” value=”upload” /></div>
<div id="crayon-52a8111e307c2636637010-9">
            <input type=”submit” value=”Upload File” /></div>
<div id="crayon-52a8111e307c2636637010-10">
        </p></div>
<div id="crayon-52a8111e307c2636637010-11">
    </fieldset></div>
<div id="crayon-52a8111e307c2636637010-12">
</form></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
PHP Code</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
These script simply re-size image into two, 50px and 100px and before saving into database it added time stamp into the image(s) name, this to avoid conflict in other previous uploaded images.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
I’ll add comment as long as I can so no need to tear the code apart and explain line by line, hope this work for you guys.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a8111e307cc336252270" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a8111e307cc336252270-1">
1</div>
<div data-line="crayon-52a8111e307cc336252270-2">
2</div>
<div data-line="crayon-52a8111e307cc336252270-3">
3</div>
<div data-line="crayon-52a8111e307cc336252270-4">
4</div>
<div data-line="crayon-52a8111e307cc336252270-5">
5</div>
<div data-line="crayon-52a8111e307cc336252270-6">
6</div>
<div data-line="crayon-52a8111e307cc336252270-7">
7</div>
<div data-line="crayon-52a8111e307cc336252270-8">
8</div>
<div data-line="crayon-52a8111e307cc336252270-9">
9</div>
<div data-line="crayon-52a8111e307cc336252270-10">
10</div>
<div data-line="crayon-52a8111e307cc336252270-11">
11</div>
<div data-line="crayon-52a8111e307cc336252270-12">
12</div>
<div data-line="crayon-52a8111e307cc336252270-13">
13</div>
<div data-line="crayon-52a8111e307cc336252270-14">
14</div>
<div data-line="crayon-52a8111e307cc336252270-15">
15</div>
<div data-line="crayon-52a8111e307cc336252270-16">
16</div>
<div data-line="crayon-52a8111e307cc336252270-17">
17</div>
<div data-line="crayon-52a8111e307cc336252270-18">
18</div>
<div data-line="crayon-52a8111e307cc336252270-19">
19</div>
<div data-line="crayon-52a8111e307cc336252270-20">
20</div>
<div data-line="crayon-52a8111e307cc336252270-21">
21</div>
<div data-line="crayon-52a8111e307cc336252270-22">
22</div>
<div data-line="crayon-52a8111e307cc336252270-23">
23</div>
<div data-line="crayon-52a8111e307cc336252270-24">
24</div>
<div data-line="crayon-52a8111e307cc336252270-25">
25</div>
<div data-line="crayon-52a8111e307cc336252270-26">
26</div>
<div data-line="crayon-52a8111e307cc336252270-27">
27</div>
<div data-line="crayon-52a8111e307cc336252270-28">
28</div>
<div data-line="crayon-52a8111e307cc336252270-29">
29</div>
<div data-line="crayon-52a8111e307cc336252270-30">
30</div>
<div data-line="crayon-52a8111e307cc336252270-31">
31</div>
<div data-line="crayon-52a8111e307cc336252270-32">
32</div>
<div data-line="crayon-52a8111e307cc336252270-33">
33</div>
<div data-line="crayon-52a8111e307cc336252270-34">
34</div>
<div data-line="crayon-52a8111e307cc336252270-35">
35</div>
<div data-line="crayon-52a8111e307cc336252270-36">
36</div>
<div data-line="crayon-52a8111e307cc336252270-37">
37</div>
<div data-line="crayon-52a8111e307cc336252270-38">
38</div>
<div data-line="crayon-52a8111e307cc336252270-39">
39</div>
<div data-line="crayon-52a8111e307cc336252270-40">
40</div>
<div data-line="crayon-52a8111e307cc336252270-41">
41</div>
<div data-line="crayon-52a8111e307cc336252270-42">
42</div>
<div data-line="crayon-52a8111e307cc336252270-43">
43</div>
<div data-line="crayon-52a8111e307cc336252270-44">
44</div>
<div data-line="crayon-52a8111e307cc336252270-45">
45</div>
<div data-line="crayon-52a8111e307cc336252270-46">
46</div>
<div data-line="crayon-52a8111e307cc336252270-47">
47</div>
<div data-line="crayon-52a8111e307cc336252270-48">
48</div>
<div data-line="crayon-52a8111e307cc336252270-49">
49</div>
<div data-line="crayon-52a8111e307cc336252270-50">
50</div>
<div data-line="crayon-52a8111e307cc336252270-51">
51</div>
<div data-line="crayon-52a8111e307cc336252270-52">
52</div>
<div data-line="crayon-52a8111e307cc336252270-53">
53</div>
<div data-line="crayon-52a8111e307cc336252270-54">
54</div>
<div data-line="crayon-52a8111e307cc336252270-55">
55</div>
<div data-line="crayon-52a8111e307cc336252270-56">
56</div>
<div data-line="crayon-52a8111e307cc336252270-57">
57</div>
<div data-line="crayon-52a8111e307cc336252270-58">
58</div>
<div data-line="crayon-52a8111e307cc336252270-59">
59</div>
<div data-line="crayon-52a8111e307cc336252270-60">
60</div>
<div data-line="crayon-52a8111e307cc336252270-61">
61</div>
<div data-line="crayon-52a8111e307cc336252270-62">
62</div>
<div data-line="crayon-52a8111e307cc336252270-63">
63</div>
<div data-line="crayon-52a8111e307cc336252270-64">
64</div>
<div data-line="crayon-52a8111e307cc336252270-65">
65</div>
<div data-line="crayon-52a8111e307cc336252270-66">
66</div>
<div data-line="crayon-52a8111e307cc336252270-67">
67</div>
<div data-line="crayon-52a8111e307cc336252270-68">
68</div>
<div data-line="crayon-52a8111e307cc336252270-69">
69</div>
<div data-line="crayon-52a8111e307cc336252270-70">
70</div>
<div data-line="crayon-52a8111e307cc336252270-71">
71</div>
<div data-line="crayon-52a8111e307cc336252270-72">
72</div>
<div data-line="crayon-52a8111e307cc336252270-73">
73</div>
<div data-line="crayon-52a8111e307cc336252270-74">
74</div>
<div data-line="crayon-52a8111e307cc336252270-75">
75</div>
<div data-line="crayon-52a8111e307cc336252270-76">
76</div>
<div data-line="crayon-52a8111e307cc336252270-77">
77</div>
<div data-line="crayon-52a8111e307cc336252270-78">
78</div>
<div data-line="crayon-52a8111e307cc336252270-79">
79</div>
<div data-line="crayon-52a8111e307cc336252270-80">
80</div>
<div data-line="crayon-52a8111e307cc336252270-81">
81</div>
<div data-line="crayon-52a8111e307cc336252270-82">
82</div>
<div data-line="crayon-52a8111e307cc336252270-83">
83</div>
<div data-line="crayon-52a8111e307cc336252270-84">
84</div>
<div data-line="crayon-52a8111e307cc336252270-85">
85</div>
<div data-line="crayon-52a8111e307cc336252270-86">
86</div>
<div data-line="crayon-52a8111e307cc336252270-87">
87</div>
<div data-line="crayon-52a8111e307cc336252270-88">
88</div>
<div data-line="crayon-52a8111e307cc336252270-89">
89</div>
<div data-line="crayon-52a8111e307cc336252270-90">
90</div>
<div data-line="crayon-52a8111e307cc336252270-91">
91</div>
<div data-line="crayon-52a8111e307cc336252270-92">
92</div>
<div data-line="crayon-52a8111e307cc336252270-93">
93</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a8111e307cc336252270-1">
<?php</div>
<div id="crayon-52a8111e307cc336252270-2">
//include our config db</div>
<div id="crayon-52a8111e307cc336252270-3">
include (‘config.php’);</div>
<div id="crayon-52a8111e307cc336252270-4">
</div>
<div id="crayon-52a8111e307cc336252270-5">
$error = ”;</div>
<div id="crayon-52a8111e307cc336252270-6">
$success = ”;</div>
<div id="crayon-52a8111e307cc336252270-7">
</div>
<div id="crayon-52a8111e307cc336252270-8">
if( isset( $_POST['task']) && ‘upload’ == $_POST['task'] )</div>
<div id="crayon-52a8111e307cc336252270-9">
{</div>
<div id="crayon-52a8111e307cc336252270-10">
    // get uploaded file name</div>
<div id="crayon-52a8111e307cc336252270-11">
    $image = $_FILES["file"]["name"];</div>
<div id="crayon-52a8111e307cc336252270-12">
</div>
<div id="crayon-52a8111e307cc336252270-13">
    if( empty( $image ) ) {</div>
<div id="crayon-52a8111e307cc336252270-14">
        $error = ‘File is empty, please select image to upload.’;</div>
<div id="crayon-52a8111e307cc336252270-15">
    } else if($_FILES["file"]["type"] == “application/msword”) {</div>
<div id="crayon-52a8111e307cc336252270-16">
        $error = ‘Invalid image type, use (e.g. png, jpg, gif).’;</div>
<div id="crayon-52a8111e307cc336252270-17">
    } else if( $_FILES["file"]["error"] > 0 ) {</div>
<div id="crayon-52a8111e307cc336252270-18">
        $error = ‘Oops sorry, seems there is an error uploading your image, please try again later.’;</div>
<div id="crayon-52a8111e307cc336252270-19">
    } else {</div>
<div id="crayon-52a8111e307cc336252270-20">
</div>
<div id="crayon-52a8111e307cc336252270-21">
        // strip file slashes in uploaded file, although it will not happen but just in case <img alt=";)" class="wp-smiley" src="http://websiteat100.com/blog/wp-includes/images/smilies/icon_wink.gif" style="border: 0px; height: auto; margin: 0px !important; max-height: 1em; max-width: 100%; vertical-align: middle;" /></div>
<div id="crayon-52a8111e307cc336252270-22">
        $filename = stripslashes( $_FILES['file']['name'] );</div>
<div id="crayon-52a8111e307cc336252270-23">
        $ext = get_file_extension( $filename );</div>
<div id="crayon-52a8111e307cc336252270-24">
        $ext = strtolower( $ext );</div>
<div id="crayon-52a8111e307cc336252270-25">
</div>
<div id="crayon-52a8111e307cc336252270-26">
        if(( $ext != “jpg” ) && ( $ext != “jpeg” ) && ( $ext != “png” ) && ( $ext != “gif” ) ) {</div>
<div id="crayon-52a8111e307cc336252270-27">
            $error = ‘Unknown Image extension.’;</div>
<div id="crayon-52a8111e307cc336252270-28">
            return false;</div>
<div id="crayon-52a8111e307cc336252270-29">
        } else {</div>
<div id="crayon-52a8111e307cc336252270-30">
            // get uploaded file size</div>
<div id="crayon-52a8111e307cc336252270-31">
            $size = filesize( $_FILES['file']['tmp_name'] );</div>
<div id="crayon-52a8111e307cc336252270-32">
</div>
<div id="crayon-52a8111e307cc336252270-33">
            // get php ini settings for max uploaded file size</div>
<div id="crayon-52a8111e307cc336252270-34">
            $max_upload = ini_get( ‘upload_max_filesize’ );</div>
<div id="crayon-52a8111e307cc336252270-35">
</div>
<div id="crayon-52a8111e307cc336252270-36">
            // check if we’re able to upload lessthan the max size</div>
<div id="crayon-52a8111e307cc336252270-37">
            if( $size > $max_upload )</div>
<div id="crayon-52a8111e307cc336252270-38">
                $error = ‘You have exceeded the upload file size.’;</div>
<div id="crayon-52a8111e307cc336252270-39">
</div>
<div id="crayon-52a8111e307cc336252270-40">
            // check uploaded file extension if it is jpg or jpeg, otherwise png and if not then it goes to gif image conversion</div>
<div id="crayon-52a8111e307cc336252270-41">
            $uploaded_file = $_FILES['file']['tmp_name'];</div>
<div id="crayon-52a8111e307cc336252270-42">
            if( $ext == “jpg” || $ext == “jpeg” )</div>
<div id="crayon-52a8111e307cc336252270-43">
                $source = imagecreatefromjpeg( $uploaded_file );</div>
<div id="crayon-52a8111e307cc336252270-44">
            else if( $ext == “png” )</div>
<div id="crayon-52a8111e307cc336252270-45">
                $source = imagecreatefrompng( $uploaded_file );</div>
<div id="crayon-52a8111e307cc336252270-46">
            else</div>
<div id="crayon-52a8111e307cc336252270-47">
                $source = imagecreatefromgif( $uploaded_file );</div>
<div id="crayon-52a8111e307cc336252270-48">
</div>
<div id="crayon-52a8111e307cc336252270-49">
            // getimagesize() function simply get the size of an image</div>
<div id="crayon-52a8111e307cc336252270-50">
            list( $width, $height) = get_image_size( $uploaded_file );</div>
<div id="crayon-52a8111e307cc336252270-51">
            $ratio = $height / $width;</div>
<div id="crayon-52a8111e307cc336252270-52">
</div>
<div id="crayon-52a8111e307cc336252270-53">
            // new width 50(this is in pixel format)</div>
<div id="crayon-52a8111e307cc336252270-54">
            $nw = 50;</div>
<div id="crayon-52a8111e307cc336252270-55">
            $nh = ceil( $ratio * $nw );</div>
<div id="crayon-52a8111e307cc336252270-56">
            $dst = imagecreatetruecolor( $nw, $nh );</div>
<div id="crayon-52a8111e307cc336252270-57">
</div>
<div id="crayon-52a8111e307cc336252270-58">
            // new width 100 in pixel format too</div>
<div id="crayon-52a8111e307cc336252270-59">
            $nw1 = 100;</div>
<div id="crayon-52a8111e307cc336252270-60">
            $nh1 = ceil( $ratio * $nw1 );</div>
<div id="crayon-52a8111e307cc336252270-61">
            $dst1 = imagecreatetruecolor( $nw1, $nh1 );</div>
<div id="crayon-52a8111e307cc336252270-62">
</div>
<div id="crayon-52a8111e307cc336252270-63">
            imagecopyresampled( $dst, $source, 0, 0, 0,0, $nw, $nh, $width, $height );</div>
<div id="crayon-52a8111e307cc336252270-64">
            imagecopyresampled( $dst1, $source, 0, 0, 0, 0, $nw1, $nh1, $width, $height );</div>
<div id="crayon-52a8111e307cc336252270-65">
</div>
<div id="crayon-52a8111e307cc336252270-66">
            // rename our upload image file name, this to avoid conflict in previous upload images</div>
<div id="crayon-52a8111e307cc336252270-67">
            // to easily get our uploaded images name we added image size to the suffix</div>
<div id="crayon-52a8111e307cc336252270-68">
            $rnd_name = ‘photos_’.uniqid(mt_rand(10, 15)).’_’.time().’_50x50.’.$ext;</div>
<div id="crayon-52a8111e307cc336252270-69">
            $rnd_name1 = ‘photos_’.uniqid(mt_rand(10, 15)).’_’.time().’_100x100.’.$ext;</div>
<div id="crayon-52a8111e307cc336252270-70">
</div>
<div id="crayon-52a8111e307cc336252270-71">
            // move it to uploads dir with full quality</div>
<div id="crayon-52a8111e307cc336252270-72">
            imagejpeg( $dst, ‘/uploads/’.$rnd_name, 100 );</div>
<div id="crayon-52a8111e307cc336252270-73">
            imagejpeg( $dst1, ‘/uploads/’.$rnd_name1, 100 );</div>
<div id="crayon-52a8111e307cc336252270-74">
</div>
<div id="crayon-52a8111e307cc336252270-75">
            // I think that’s it we’re good to clear our created images</div>
<div id="crayon-52a8111e307cc336252270-76">
            imagedestroy( $source );</div>
<div id="crayon-52a8111e307cc336252270-77">
            imagedestroy( $dst );</div>
<div id="crayon-52a8111e307cc336252270-78">
            imagedestroy( $dst1 );</div>
<div id="crayon-52a8111e307cc336252270-79">
</div>
<div id="crayon-52a8111e307cc336252270-80">
            // so all clear, lets save our image to database</div>
<div id="crayon-52a8111e307cc336252270-81">
            $is_uploaded = mysql_query( “INSERT INTO attachment(photosmall, photobig) VALUES(‘$rnd_name’, ‘$rnd_name1′)” ) or die(‘erroror inserting data ‘. mysql_erroror());</div>
<div id="crayon-52a8111e307cc336252270-82">
</div>
<div id="crayon-52a8111e307cc336252270-83">
            // check if it uploaded successfully, if so then display success message otherwise the erroror message in the else statement</div>
<div id="crayon-52a8111e307cc336252270-84">
            if( $is_uploaded )</div>
<div id="crayon-52a8111e307cc336252270-85">
                $success = ‘Post shared successfully.’;</div>
<div id="crayon-52a8111e307cc336252270-86">
            else</div>
<div id="crayon-52a8111e307cc336252270-87">
                $error = ‘erroror uploading file.’;</div>
<div id="crayon-52a8111e307cc336252270-88">
</div>
<div id="crayon-52a8111e307cc336252270-89">
        }</div>
<div id="crayon-52a8111e307cc336252270-90">
</div>
<div id="crayon-52a8111e307cc336252270-91">
    }</div>
<div id="crayon-52a8111e307cc336252270-92">
}</div>
<div id="crayon-52a8111e307cc336252270-93">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
PHP Function</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
A very simple <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>function to get and return the file extension.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a8111e307d6971153636" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a8111e307d6971153636-1">
1</div>
<div data-line="crayon-52a8111e307d6971153636-2">
2</div>
<div data-line="crayon-52a8111e307d6971153636-3">
3</div>
<div data-line="crayon-52a8111e307d6971153636-4">
4</div>
<div data-line="crayon-52a8111e307d6971153636-5">
5</div>
<div data-line="crayon-52a8111e307d6971153636-6">
6</div>
<div data-line="crayon-52a8111e307d6971153636-7">
7</div>
<div data-line="crayon-52a8111e307d6971153636-8">
8</div>
<div data-line="crayon-52a8111e307d6971153636-9">
9</div>
<div data-line="crayon-52a8111e307d6971153636-10">
10</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a8111e307d6971153636-1">
function get_file_extension( $file )  {</div>
<div id="crayon-52a8111e307d6971153636-2">
    if( empty( $file ) )</div>
<div id="crayon-52a8111e307d6971153636-3">
        return;</div>
<div id="crayon-52a8111e307d6971153636-4">
</div>
<div id="crayon-52a8111e307d6971153636-5">
    // if goes here then good so all clear and good to go</div>
<div id="crayon-52a8111e307d6971153636-6">
    $ext = end(explode( “.”, $file ));</div>
<div id="crayon-52a8111e307d6971153636-7">
</div>
<div id="crayon-52a8111e307d6971153636-8">
    // return file extension</div>
<div id="crayon-52a8111e307d6971153636-9">
    return $ext;</div>
<div id="crayon-52a8111e307d6971153636-10">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
<strong style="line-height: inherit;">Final Words:</strong> How and when this snippet is useful? this code is very useful to less your server load, and to lighten your site display by using re-sized images, Google love faster website so of course SEO </div>
</div>

PHP AND MYSQL UPLOAD WITH RESIZE IMAGE

If you’re searching on a short, direct and simple PHP and MySQL upload and re-size script, well you’re in the right place folks, today I...