The JS Code

There are three functions in total. The first one ‘format_number’ which works the same as number_format(); in PHP adding the decimal places. the ‘magic_number’ function then takes the current number and the new number and animates between them.

Finally we have the ‘update’ function which retrieves the new data set of numbers (randomly generated in PHP for the demo) via a JSONP feed. At the bottom of the script we’re refreshing the data every 4 seconds. Oh and dont forget to include the jQuery library.

  counts = {};

        function format_number(text){
            return text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
        };

        function magic_number(element_name, value) {
            var elem = $(element_name);
            var current = counts[element_name] || 0;
            $({count: current}).animate({count: value}, {
                                        duration: 500,
                                        step: function() {
                                            elem.text(format_number(String(parseInt(this.count))));
                                        }});
            							counts[element_name] = value;
        };

        function update() {
            var jqxhr = $.getJSON("number.php?jsonp=?", function(data) {

                                magic_number("#number1", data[0]['n1']);
								magic_number("#number2", data[0]['n2']);
                       });
        };

        setInterval(update, 4000);
        update();

The PHP

For the example number.php generates random numbers and returns them as a JSON object. You could easily add as many numbers to the feed as you like, even retrieving data from a database, simply add extra values to the array below as shown commented out.

	$total_data = array(
		array(
			'total' => rand(0,99999999),
			'twitter' => rand(0,99999999)
                   // , 'dummy-entry' => $var
		 ),
	);
	echo $_GET['jsonp'].'('. json_encode($total_data) . ')';

1. Building an animated 3D poll

Demo Download

2. jQuery Face Detection

Demo Download

3. HTML5 Geo location using the Google API

Demo Download

4. Automatic jQuery site subscription lightbox

Demo Download

5. jQuery UI Slider

Demo Download

6. jQuery Fancy Switch

Demo Download

7. jQuery Show / Hide Plugin

Demo Download

8. Using Google’s Weather API

Demo Download

9. Build a jQuery content feature like MailChimp

Demo Download

10. Build a jQuery Plugin

Demo Download

Getting Started

You’ll need to include the jQuery library as well as the Colorbox lightbox JS and CSS which are included in the download below.

<!-- Color Box CSS -->
<link media="screen" rel="stylesheet" target="_blank" href="css/colorbox.css" />
<!-- Style For the Subscription Box -->
<link media="screen" rel="stylesheet" target="_blank" href="css/popup.css" />
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/colorbox.js"></script>

The JS Code

Once the page loads we check to see if the cookie exists and hasn’t expired. If it’s expired or doesn’t exist we set the cookie to expire in 15 days, and we show the lightbox.

$("document").ready(function (){ 

       // load the overlay

        if (document.cookie.indexOf('visited=true') == -1) {
			var fifteenDays = 1000*60*60*24*15;
			var expires = new Date((new Date()).valueOf() + fifteenDays);
			document.cookie = "visited=true;expires=" + expires.toUTCString();
			$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
		}

		$(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});

 });

The HTML

Here’s the HTML for the lightbox. This can go anywhere on your page, although i’d recommend putting it just above the last body tag. There shouldn’t be any surprises here!

<a href="#" class="open_popup">Click here to open the popup</a>

<!-- This contains the hidden content for inline calls for the subscribe box -->
<div style='display:none'>
  <div id='subscribe_popup' style='padding:10px;'>
    <h2 class="box-title">Never miss an update from Papermashup</h2>
    <h3 class="box-tagline">Get notified about the latest tutorials and downloads.</h3>
    <!-- BEGIN #subs-container -->
    <div id="subs-container" class="clearfix">
      <!-- BEGIN .box-side -->
      <div class="box-side left">
        <div class="box-icon"><a class="email" target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=AshleyFord-Papermashupcom&loc=en_US"><img src="images/email.png"/></a></div>
        <h4><a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=AshleyFord-Papermashupcom&loc=en_US">Subscribe by Email</a></h4>
        <h5>Get alerts directly into your inbox after each post and stay updated.</h5>
        <a class="sub" target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=AshleyFord-Papermashupcom&loc=en_US" title="Subscribe Now!">Subscribe</a>
        <!-- END .box-side -->
      </div>
      <div id="box-or">OR</div>
      <!-- BEGIN .box-right -->
      <div class="box-side right">
        <div class="box-icon"><a class="rss" target="_blank" href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom"><img src="images/rss.png"/></a></div>
        <h4><a target="_blank" href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe by RSS</a></h4>
        <h5>Add our RSS to your feedreader to get regular updates from us.</h5>
        <a class="sub" target="_blank" href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom" title="Subscribe Now!">Subscribe</a>
        <!-- END .box-side -->
      </div>
      <!-- BEGIN #subs-container -->
    </div>
  </div>
</div>
<!-- END subscribe popup-->

What do we do?

Established in 2011, Harkable is a creative social technology company based in London, UK.

Harkable’s creative approach to social technology combines a passion for building innovative and exciting solutions to reach consumers, alongside a strategic and analytical method in everything we do.

The Harkable team has a unique knowledge of social media marketing and their expert, award-winning consultants have a broad range of experience working with a number of brands including Trinity Mirror, Myspace, Veuve Clicquot, Volkswagen, DDB, OMD & Virgin. You can find out more about us here.

When do we need you?

When can you start.. We’d ideally be looking for someone to start immediately.

Get in touch here if you’re interested. We look forward to hearing from you.

Adjust server time

If you have a server in a different timezone to you then you might be seeing funny things happen when you add the time to a MySQL database for example. You can fix this by adding or subtracting hours as in the example below.

$now = date('Y-m-d-G');
$now = strftime("%Y-%m-%d-%H", strtotime("$now -8 hours"));

Create a slug URL from string of text

Here we’re passing in a simple string of text converting it to lowercase and replacing all the spaces with a dash.

function create_slug(strtolower($string)){
   $slug=preg_replace('/[^a-z0-9-]+/', '-', $string);
   return $slug;
}

echo create_slug('Create a slug URL from string of text');

Convert HEX value to RBG

If you’ve ever need to get an RGB colour format converted from a Hexadecimal this is the function for the job.

function hextorgb($hexvalue){
        if($hexvalue[0] == '#') {
                $hexvalue = substr( $hexvalue, 1);
        }
        if(strlen( $hexvalue ) == 6){
                list($r, $g, $b) = array($hexvalue[0] . $hexvalue[1], $hexvalue[2] . $hexvalue[3], $hexvalue[4] . $hexvalue[5]);
        }elseif (strlen($hexvalue) == 3) {
                list($r,$g,$b) = array($hexvalue[0] . $hexvalue[0], $hexvalue[1] . $hexvalue[1], $hexvalue[2] . $hexvalue[2]);
        }else{
                return false;
        }
        $r = hexdec($r);
        $g = hexdec($g);
        $b = hexdec($b);
        return array('R' => $r, 'G' => $g, 'B' => $b);
}

$rgb = hextorgb('#fff000');

print_r($rgb);

Display a users Gravatar image

Getting users images from Gravatar is simple. If you have the users email address you just need to MD5 hash it and append it to the gravatar URL.

   $gravatar = 'http://www.gravatar.com/avatar/' . md5($email_address) . '?s=32';
   echo '<img src="' . $gravatar . '" width="32" height="32"/>';

Convert links in a string of text to hyperlinks

Very useful function which will convert a string of text and ad hyperlinks to all the URLs. We loop through each URL and add a hyperlink

function url_to_link($text){

            $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
            // Check if there is a url in the string
            if (preg_match_all($reg_exUrl, $text, $url)) {

                foreach($url[0] as $v){

                    $position = strpos($text,' '.$v)+1;
                    $text = substr_replace($text,'', $position, strlen($v));
                    $text = substr_replace($text,''.$v.'', $position ,0);
                }
                return $text;
            }
            else {
                // if no urls in the text just return the text
                return $text;
            }
        }

$string = 'This is a string of text and we have a link: http://papermashup.com we also have another link http://google.com';
echo url_to_link($string);

Parse JSON in PHP

Parsing a string of JSON is easier than you may think as we can use the json_decode() function in PHP which will convert the JSON into an array in PHP which we can then manipulate as needed.

  $json ='{"id":0,"name":"Ashley","surname":"Ford","Website":"http://papermashup.com"} ';

   $array=json_decode($json);

   // print  the array
   print_r($array);
   echo $array->name; 

The Code

You’ll need to update your .htaccess file so when an error is detected the server knows how to handle the request. In our case we’re going to forward all the listed errors to our generic errors.php file.

ErrorDocument 400 /errors.php
ErrorDocument 403 /errors.php
ErrorDocument 404 /errors.php
ErrorDocument 405 /errors.php
ErrorDocument 408 /errors.php
ErrorDocument 500 /errors.php
ErrorDocument 502 /errors.php
ErrorDocument 504 /errors.php

The PHP

This is the contents of the ‘errors.php’ file. You need to save this in the root directory of your web server, unless you modify the path in the .htaccess file above.

$status = $_SERVER['REDIRECT_STATUS'];
$codes = array(
       400 => array('400 Bad Request', 'The request cannot be fulfilled due to bad syntax.'),
       403 => array('403 Forbidden', 'The server has refused to fulfil your request.'),
       404 => array('404 Not Found', 'The page you requested was not found on this server.'),
       405 => array('405 Method Not Allowed', 'The method specified in the request is not allowed for the specified resource.'),
       408 => array('408 Request Timeout', 'Your browser failed to send a request in the time allowed by the server.'),
       500 => array('500 Internal Server Error', 'The request was unsuccessful due to an unexpected condition encountered by the server.'),
       502 => array('502 Bad Gateway', 'The server received an invalid response while trying to carry out the request.'),
       504 => array('504 Gateway Timeout', 'The upstream server failed to send a request in the time allowed by the server.'),
);

$title = $codes[$status][0];
$message = $codes[$status][1];
if ($title == false || strlen($status) != 3) {
       $message = 'Please supply a valid HTTP status code.';
}

echo '<h1>Hold up! '.$title.' detected</h1>
<p>'.$message.'</p>';

The Code

       function isSiteAvailable($url)
       {
               //check, if a valid url is provided
               if(!filter_var($url, FILTER_VALIDATE_URL))
               {
                       return 'URL provided wasn\'t valid';
               }

               //make the connection with curl
               $cl = curl_init($url);
               curl_setopt($cl,CURLOPT_CONNECTTIMEOUT,10);
               curl_setopt($cl,CURLOPT_HEADER,true);
               curl_setopt($cl,CURLOPT_NOBODY,true);
               curl_setopt($cl,CURLOPT_RETURNTRANSFER,true);

               //get response
               $response = curl_exec($cl);

               curl_close($cl);

               if ($response) return 'Site seems to be up and running!';

               return 'Oops nothing found, the site is either offline or the domain doesn\'t exist';
       }

	// check if site exists / is up
	if($_GET['url']){

	   $response = isSiteAvailable($_GET['url']);
	   $message = '<div class="response">'.$response.'</div>';
	}

Display the response

<?php echo $message;?>

<form action="" method="get">

Enter a URL below or click an example below:<br/>

<ul>
<li><a href="?url=http://harkable.com">harkable.com</a></li>
<li><a href="?url=http://google.com">google.com</a></li>
<li><a href="?url=http://sfdhjsdkhfskjfhskjfh.om">sfdhjsdkhfskjfhskjfh.om</a></li>
</ul>

<input name="url" type="text" value="<?php echo $_GET['url'];?>" />

</form>

The Code

Firstly we setup three variables that are used in the function, notice that we’re chaining the variables instead of declaring ‘var’ each time which is the optimal way of declaring multiple vars in jQuery. You can adjust the delay and animate values to suit your needs. We then loop through each list item using the eq(); method which allows us to select which list item to animate, you can see we’re passing the variable ‘i’ to this method which is increased towards the bottom of the script. Within the loop we finally call the function again to start the process again.

$(document).ready(function() {

         var i = 0,
         delay = 2000,
         animate = 400;
         function animateList(){
                 var imax = $("ul#list li").length -1;
                 $("ul#list li:eq(" + i + ")")
                         .animate({"fontSize" : "80px"}, animate)
                         .animate({"fontSize" : "80px"}, delay)
                         .animate({"fontSize" : "30px"}, animate, function(){

                                 (i == imax) ? i=0 : i++;
                                 animateList();
                         });

                 };

	   animateList();
});

The HTML

<ul id="list">
<li>Advertising</li>
<li>Art</li>
<li>Automotive</li>
<li>Business</li>
<li>Celebrity</li>
</ul> 

The Code

Lets run through line by line the JavaScript. The first three lines after the DOM ready function are setup incase the user has JavaScript disabled. So if enabled we display the switch background image and hide the radio buttons as well as indent the text on the labels.

We’ve then setup a ‘change()’ function which means the function is executed each time the user selects either checkbox, we then check the value of the radio button thats been selected and adjust the background position of the sprite image.

Lastly for demo purposes im just displaying the status of the radio buttons in the div with the class ‘result’

$(document).ready(function(){

	$('.switch').css('background', 'url("switch.png")');
	$('.on_off').css('display','none');
	$('.on, .off').css('text-indent','-10000px');

    $("input[name=on_off]").change(function() {
      var button = $(this).val();

		if(button == 'off'){ $('.switch').css('background-position', 'right'); }
		if(button == 'on'){ $('.switch').css('background-position', 'left'); }	 

		 $('.result span').html(button);
		 $('.result').fadeIn();

   });

});

The HTML

Here we have a simple form with the two radio buttons in a fieldset.

<form action="" method="get">

<fieldset class="switch">
    <label class="off">Off<input type="radio" class="on_off" name="on_off" value="off"/></label>
    <label class="on">On<input type="radio" class="on_off" name="on_off" value="on"/></label>
</fieldset>

<input type="submit" value="Submit"/>

</form>

<div class="result">The button is: <span>on</span></div>

The CSS

#container{background:#ebebeb;}

.switch{
	border:none;
	background:left no-repeat;
	width:105px;
	height:46px;
	padding:0;
	margin:0;
}

.on, .off{
	width:50px;
	height:40px;
	display:inline-block;
	cursor:pointer;
}

.result{display:none;}

The Logic Code

Lets have a quick run through at what the project consists of. Firstly we use the simplexml_load_file() PHP function to get the xml data for the given location. We then check to see if the current weather condition is in the XML file. If it doesn’t exist then we can make the assumption that the API feed couldn’t determine the location, bear in mind this is very basic error checking and if the feed fails it will still return this error.

We now do some basic data checking to to see what extra data we can give the user. Firstly we check on line 14 to see if the current weather and forecast are different, if they are different we’ll display the forecast if not we show just the current weather.

Next on lines 21 and 28 we do a simple check to see if the temperature is higher or lower than 20 degrees and echo whether it’s likely to be hot or cold.

Finally on lines 35 we check to see if the current or future forecast contains any rain or storms so we can recommend the user takes an umbrella. This is done using some basic PHP regular expression.

	// load the XML feeds for the Google Weather API
	$xml = simplexml_load_file('http://www.google.com/ig/api?weather='.urlencode($_GET['location']));
	$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
	$forecast = $xml->xpath("/xml_api_reply/weather/forecast_conditions");

	// do a basic error check to see if we can get the current weather condition for the given location
	// if no return an error.
	if(!$current[0]->condition['data']){

		$error = 'Couldn\'t determine this location';

		}

	// is the current weather the same as the forecast? if not display the forecast
	if(strtolower($current[0]->condition['data'])!=strtolower($forecast[0]->condition['data'])){

	$outlook = 'but the forecast says '.strtolower($forecast[0]->condition['data']);	

		}

	// if the temp in degrees c is below 20 i.e. cold
	if($current[0]->temp_c['data']<=20){

	$coat = 'If you\'re going outside i\'d wrap up warm.';	

		}	

	// if the temp in degrees c is over 21 i.e. Warm / Hot
	if($current[0]->temp_c['data']>=21){

	$coat = 'You should be ok without warm clothes today.';	

		}		

	// check to see if there is rain or storms forecast
	if (preg_match("/\brain\b/i", $current[0]->condition['data']) ||
		preg_match("/\brain\b/i", $forecast[0]->condition['data']) ||
		preg_match("/\bstorm\b/i", $current[0]->condition['data']) ||
		preg_match("/\bstorm\b/i", $forecast[0]->condition['data'])
		){

		$umbrella = ' But <u>don\'t forget to take an umbrella</u>!';
		}

Displaying the data

<form action="" method="get">
<label for="location">Location</label>
<input type="text" class="location" name="location" value="<?php echo $_GET['location'];?>"/>
</form> 

<?php if(!empty($_GET['location'])){

	if($error){ echo '<div class="errors">'.$error.'</div>'; }else{

?>

<div class="weather_app">

<h1>Weather Summary for <?php echo $_GET['location'];?></h1>

<ul>
<li><?php echo '<img src="http://google.com'.$current[0]->icon['data'].'"/>'; ?> The weather in <?php echo $_GET['location'];?> is <strong><?php echo strtolower($current[0]->condition['data']).' '. $outlook;?></strong>. The temperature is currently <strong><?php echo $current[0]->temp_c['data']; ?>&deg;c (<?php echo $current[0]->temp_f['data']; ?>&deg;f)</strong>. <?php echo $coat;?> <?php echo $umbrella;?></li>
</ul>

</div>

<?php } } ?>