Wait until all images have loaded then fade in - jQuery

I'll be showing you a very easy way of having all your images hidden, and then fading in nicely when they have loaded, which gives a nicer effect than seeing them trace down the page or depixelate into an image...

Place this in your head just before the closing tag.. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
 $('img').css('opacity',0); // hide all images
});
$(window).load(function() { // we use $(window).load because unlike $(document).ready, it isn't triggered until the client has finished loading completely.
 $('img').animate({'opacity':1},800); // everything is loaded, fade images in
});
</script>

How to use CSS3 Pseudo Classes on IE7 and IE8

It is a real shame when you have to drop using Pseudo classes and add another class into your CSS just to combat IE7 and IE8. Sure it's no big deal, but these classes, especially nth-* is a really nice addition to the CSS library, and makes coding a lot easier. Luckily, jQuery does understand these selectors. 

A lot of websites are using the jQuery library now, so we have developed this plugin to use in conjunction with jQuery.

How to use it:

Place this just before the closing </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://api.skyblueproject.com/pseudoie/pseudo-ie.0.1.min.js"></script>
<!--[if lt IE 9]>
<script>
 $(document).pseudoie({url:'style.css'});
</script>
<![endif]-->

Make sure you replace style.css with the path to your stylesheet for instance:

/styles/style.css
/css/style/mystylesheet.css

If you have multiple stylesheets to parse, then simply replicate as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://api.skyblueproject.com/pseudoie/pseudo-ie.0.1.min.js"></script>
<!--[if lt IE 9]>
<script>
 $(document).pseudoie({url:'style1.css'});
 $(document).pseudoie({url:'style2.css'});
 $(document).pseudoie({url:'style3.css'});
</script>
<![endif]-->

Hope this helps!

Any issues please leave a comment!

Custom select dropdown with CSS and JS

Dropdowns have been a major pain in the backside in the past when it comes to styling of them, the default look doesn't always suite your website theme.


Customization is very limited, but it's not very difficult to change the style of the dropdown with CSS and javascript.


Lets turn this:

Into this:

Step 1
The HTML - This is simple, basically we have a div which holds the select element, it also holds the span element:

<div class="selection">
    <select class="selectbox" onchange="changeValue(this.value);">
        <option>test select</option>
        <option>test select 2</option>
        <option>test select 3</option>
        <option>test select 4</option>
        <option>test select 5</option>
    </select>
    <span id="selector">test select</span>
</div>

Step 2
The CSS - this tells the select element to become invisible, and tells the span what to look like and to sit below the selectbox.

<style>
.selection { position:relative; }

.selectbox,#selector {
 position:absolute;
 top:0;
 left:0;
 font-family:Arial, Helvetica, sans-serif;
 font-size:15px;
}

.selectbox {
 width:220px;
 padding:5px;
 height:30px;
 opacity:0;
 z-index:5;
}

#selector {
 background-image:url(dropdown.jpg);
 background-repeat:no-repeat;
 padding:5px 43px 5px 10px;
 overflow:hidden;
 width:162px;
 height:20px;
 color:#fff;
}
</style>

Perfect, as you can see from the CSS, the span with the id of #selector uses a background image called dropdown.jpg - this gives the coloured background and the arrow, you can make your own one. - this image is 215x30px if you change the size of it make sure you adjust the CSS accordingly, basically fiddle around with the #selector width and padding. You may also need to change the .selectbox width and padding if you experience difficulty clicking the dropdown once you've changed the size.


Step 3
The Javascript - this is just to update the span with the selected dropdown option.


You can do this with the jQuery library (if you already use it on your website), or using built in javascript, both work fine:


jQuery

<script>
function changeValue(val)
{
 $('#selector').html(val);
}
</script>

Javascript

<script>
function changeValue(val)
{
 document.getElementById('selector').innerHTML = val;
}
</script>

So there you have it, the complete code is below:


Complete Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Select box</title>
<script>
function changeValue(val)
{
 document.getElementById('selector').innerHTML = val;
}
</script>
<style>
.selection { position:relative; }

.selectbox,#selector {
 position:absolute;
 top:0;
 left:0;
 font-family:Arial, Helvetica, sans-serif;
 font-size:15px;
}

.selectbox {
 width:220px;
 padding:5px;
 height:30px;
 opacity:0;
 z-index:5;
}

#selector {
 background-image:url(dropdown.jpg);
 background-repeat:no-repeat;
 padding:5px 43px 5px 10px;
 overflow:hidden;
 width:162px;
 height:20px;
 color:#fff;
}
</style>
</head>

<body>
<div class="selection">
    <select class="selectbox" onchange="changeValue(this.value);">
        <option>test select</option>
        <option>test select 2</option>
        <option>test select 3</option>
        <option>test select 4</option>
        <option>test select 5</option>
    </select>
    <span id="selector">test select</span>
</div>
</body>
</html>

How to secure HTML5 video

With videos being used everywhere, more and more websites are trying to accommodate videos on their website, if it's for visual tutorials, or marketing. Sometimes though you don't want your video being downloaded and shared with others.. A good case for this would be a subscription based website.

Easy, lets use a flash player.. well ok, we could do.. but with more and more websites jumping over to HTML5 compliant, it would be nice if we could protect our videos and still use the HTML5 player.

The key issues with using an HTML5 player is there is absolutely NO encryption or protection for the videos.

Here's an example of the HTML5 video tag

<video controls>
    <source src="/sample.mp4" type="video/mp4" />
    <source src="/sample.webm" type="video/webm" />
</video>

All a viewer has to do is right click on the playing video and hit a button called 'Save Video As' and they'll have it on their computer. If not they can see exactly where the video is stored and download it anyway.

Protecting the video is a very complex method using multiple checks on multiple technologies, i won't go into the details..

We have spent hours, ounces (of coffee), an unmeasurable amount of stress developing this HTML5 protection.

After a lot of agressive testing we have secured our videos and have developed a very smart detection system which adapts to different download attempts.

And so from the creators of The Skyblue Transporter and The Custom Google +1 button we are proud to announce that we will be releasing Version 1 of our SkyblueVideoProtection (SkyBVP) on a cloud based subscription where you can securely store and stream your videos embedded directly to your website.. For more information please enquire!

PHP: Getting disk usage (class)

I thought I might as well post this class I wrote a while ago. It basically gathers the following for the specific drive you've selected;

• Raw Total Size
• Raw Free Size
• Readable Total Size
• Readable Free Size
• Percentage Free
• Percentage Used

The Class

<?php
class diskSpace
{
 function __construct( $disk = '.' )
 {
  $this->the_drive = $disk;
  $this->raw_diskspace = $this->disk_spaces( "total" );
  $this->raw_freespace = $this->disk_spaces( "free" );
  $this->readable_diskspace = $this->readableSizes( $this->raw_diskspace );
  $this->readable_freespace = $this->readableSizes( $this->raw_freespace );
  $this->percentage_free = $this->percentages( "free" );
  $this->percentage_used = $this->percentages( "used" );
 }
 
 public function disk_spaces( $type )
 {
  switch($type)
  {
   case "total":
    return disk_total_space( $this->the_drive );
   break;
   case "free":
    return disk_free_space( $this->the_drive );
   break;
  }
 }
 
 public function readableSizes( $size )
 {
  $types = array( ' B', ' KB', ' MB', ' GB', ' TB', ' TB', ' EB', ' ZB', ' YB' );
  $i=0;
  while($size>=1024)
  {
   $size/=1024;
   $i++;
  }
  return("".round($size,2).$types[$i]);
 }
 
 public function percentages( $type )
 {
  switch($type)
  {
   case "free":
    return (round($this->raw_freespace / $this->raw_diskspace, 2) * 100) . "%";
   break;
   case "used":
    return round(100 - $this->percentage_free) . "%";
   break;
  }
 }
}
?>

The Usage

<?php
// load class with default drive
$dUsage = new diskSpace;

// or load class with specific drive
$dUsage = new diskSpace( "." );
// how to call each option
print("The Disk: " . $dUsage->the_drive);
// will output: .

print("Raw Size: " . $dUsage->raw_diskspace);
// will output: Raw Size: 489616760832

print("Raw Free: " . $dUsage->raw_freespace);
// will output: Raw Free: 454473097216

print("Readable Size: " . $dUsage->readable_diskspace);
// will output: Readable Size: 455.99 GB

print("Readable Free: " . $dUsage->readable_freespace);
// will output: Readable Free: 423.26 GB

print("Percentage Free: " . $dUsage->percentage_free);
// will output: Percentage Free: 93%

print("Percentage Used: " . $dUsage->percentage_used);
// will output: Percentage Used: 7%
?>

Make script not directly accessible

So if you're a PHP developer and want to make some include files protected. Basically so no one can look directly at them for whatever reason, simply;

<?php
if(preg_match("/".basename(__FILE__)."/i",$_SERVER['REQUEST_URI']))
{
 die("Direct access is not allowed");
}
?>

Simples!

Tutorial: How to apply a custom google plus +1 share button

So I needed a custom google+1 button for a website I am developing.. But there wasn't any around! Sure there were custom buttons, icons etc, but no way to implement them. I searched on the interwebz for a tutorial on how to make a custom google +1 share button.


But then I decided I might as well just make it myself.


It was surprisingly easy to be honest, and because of the lack of tutorials out there, I thought I'd write a quicky!


So, How did I turn this:

Into this: 

Well when you see below you'll kick yourself if you haven't already, because it's so simple.


Step 1
Pour yourself a brew, Now this can be either Tea or Coffee dependent on your preference.

Step 2 
The HTML 

<div class="googleplus">
    <div class="googlehider">
        <g:plusone annotation="none"></g:plusone>
        
        <!-- Place this render call where appropriate -->
        <script type="text/javascript">
          window.___gcfg = {lang: 'en-GB'};
        
          (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
          })();
        </script>
    </div>
    <img src="images/googleplus.png" class="mygoogle" />
</div>

Step 3 
Next, you'll have to get your custom icon, this is the one we are going to replace the original google +1 icon with. (Here's some good ones: http://www.iconfinder.com/search/search/?q=google%20plus ) 
Make sure you name it googleplus.png and place it in your images folder.. - You may need to change the HTML above if your image is named or located elsewhere.


Step 4
The CSS
 

.googleplus {
 position:relative;
    /* - use this to position your share icon on your page -  */
}
.googlehider {
 opacity:0;
 height:30px;
 width:30px;
 position:absolute;
 top:0;
 left:0;
 z-index:3;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter:alpha(opacity=0);
}
.mygoogle {
 position:absolute;
 top:0;
 left:0;
 z-index:2;
 margin-left:6px;
}

Step 5 
Put it all together..

Step 6
Enjoy your freshly made brew.. it should still be warm ;-)

Walla! I hope this helps :-)