XEWeb

Thumbnail opacity hover with CSS and jQuery

Jason — Mon, 22 Mar 2010 16:32:38 +0000

A nice effect when hovering over thumbnails is to change the opacity, so that it has that fade in and out effect.

<ul class="thumbnails">

 <li><a href="#"><img src="thumb-1.jpg" alt="" /></a></li>

 <li><a href="#"><img src="thumb-2.jpg" alt="" /></a></li>

 <li><a href="#"><img src="thumb-3.jpg" alt="" /></a></li>

 <li><a href="#"><img src="thumb-4.jpg" alt="" /></a></li>

 <li><a href="#"><img src="thumb-5.jpg" alt="" /></a></li>

</ul>

Take the above example, a simple list of images. Let’s apply the basic styling for it…

ul.thumbnails { list-style: none; margin: 0; padding: 0; }

ul.thumbnails li { float: left; margin: 10px; width: 50px; height: 50px; }

ul.thumbnails li img { filter: alpha(opacity=60); /* IE only */ opacity: .60; /* All other browsers */ }

As you can see all of the thumbnails will have a default opacity of 60%. Now comes the jQuery script to add the fade effect…

$(document).ready(function(){

 $('ul.thumbnails li').hover(function(){

  $('img', this).stop().animate({opacity: 1});

 }, function() {

  $('img', this).stop().animate({opacity: 0.6});

 });

});

And that’s all there is to it!

Pure CSS coke can spin

Jason — Sat, 20 Feb 2010 10:40:51 +0000

This just goes to show what you can do with CSS these days as Román Cortés demonstrates with his awesome spinning coke can example.

I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image).

With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. I thought in sea waves reflections, underwater distortions, magnifying glass, a rotating Earth… but the final thing I did was just right in my desktop: a Coke can – my favourite drink.

Due the cilindrical shape of a can, the displacement map is very simple with the parallel projection I did, so the code is very little – below 5kb – and easy to understand I hope.

Even if this effect is mainly CSS1 and some bits of CSS2 – for the scrolling div, overflow: auto property -, it is not going to work in IE6, because it doesn’t support background-attachment: fixed. I’ve tested it and it works in IE8, Firefox 3.5, Chrome 3, Safari 4 and Opera 10. Also, the code validates.

Check it out at http://www.romancortes.com/blog/pure-css-coke-can/

3D carousel using jQuery

Jason — Tue, 02 Feb 2010 16:47:12 +0000

Inspired by Andrew Sellick’s Simple 3D Carousel using Mootools I needed a jQuery version of the script, source code of which is below (tested with jQuery 1.4).

Please refer to the original tutorial for instructions and a working demo.

var count =0;
var baseSpeed =0.05;
var radiusX =190;
var radiusY =40;
var centerX =300;
var centerY =190;
var speed =0.3;
var imageDivs ='';
var numberOfElements =0;
var carousel ='';
var speedTest ='';
$(document).ready(function(){

 carousel = $('#carousel');

 imageDivs = $('#carousel div');

 numberOfElements = imageDivs.length; 
 setInterval('startCarousel()', 40);

 carousel.mousemove(function(event) {

  tempX = event.clientX;

  speed = (tempX - centerX) / 2500;

 });

});
function startCarousel(){

 for(i=0; i < numberOfElements; i++){
  angle = i * ( Math.PI * 2 ) / numberOfElements;

  posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );

  posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );

  imageDivWidth = posY/3;

  imageDivZIndex = Math.round(imageDivWidth)+100;

  $('#carousel div').eq(i).css({'position': 'absolute', 'left': posX + 'px', 'top': posY + 'px', 'width': imageDivWidth + 'px', 'zIndex': imageDivZIndex});
  angle += speed;

 }

 count++;

}

Tweet the Tube – Live train updates on twitter

Jason — Fri, 22 Jan 2010 12:56:38 +0000

I find it frustrating getting into London these days as there are always problems on the tube that causes delays.

To take action we have launched a new service dubbed “Tweet the Tube” which provides live updates whenever a tube service changes status, pulled straight from the Transport for London website and checked every 5 minutes.

All you have to do is follow “tweetthetube” on twitter: http://twitter.com/tweetthetube

Feel free to leave comments/suggestions on this page.

Simple PHP caching

Jason — Fri, 15 Jan 2010 15:29:11 +0000

There are many tools around that will help cache your website to increase speed and performance, such as eAccelerator and APC. However these usually require installation on your web server, thus rendering them useless for people who use shared hosting and don’t have access to the server.

Using some simple PHP code we can quite effectively cache a webpage, useful for sites that are database driven and have a large amount of queries or high volumes of traffic.

First we need to setup the folder where the cached files are stored, making sure it has read/write permissions (CHMOD to 0777 – see your FTP client documentation on how to do this).

Next create a file called cache.php which contains the following code:

// Number of seconds a page should remain cached for
$cache_expires=3600;
// Path to the cache folder

$cache_folder = "/home/usr/www/cache/";
// Checks whether the page has been cached or not

function is_cached($file) {

 global $cache_folder, $cache_expires;

 $cachefile = $cache_folder . $file;

 $cachefile_created = (file_exists($cachefile)) ? @filemtime($cachefile) : 0;

 return ((time() - $cache_expires) < $cachefile_created);

}
// Reads from a cached file

function read_cache($file) {

 global $cache_folder;

 $cachefile = $cache_folder . $file;

 return file_get_contents($cachefile);

}
// Writes to a cached file

function write_cache($file, $out) {

 global $cache_folder;

 $cachefile = $cache_folder . $file;

 $fp = fopen($cachefile, 'w');

 fwrite($fp, $out);

 fclose($fp);

}
// Let's begin, first work out the cached filename

$cache_file = md5($_SERVER['REQUEST_URI']) . ".html";
// Check if it has already been cached and not expired

// If true then we output the cached file contents and finish

if (is_cached($cache_file)) {

 echo read_cache($cache_file);

 exit();

}
// Ok so the page needs to be cached

// Turn on output buffering

ob_start();

Now in your page you would include cache.php on the first line before you do anything else. This is because if the page is cached we don’t want it to do anything else other than output the cache to the page. If you are still including other files or connecting to databases before checking for the cache you are putting additional load on the server, making this exercise pointless.

Finally create a file called cache_footer.php which contains the following code:

// Grab the uncached page contents
$cache_contents=ob_get_contents();
// Save it to the cache for next time

write_cache($cache_file, $cache_contents);

?>

You would include this file on the last line of your page, which saves the page in the cache if required.

Putting it altogether a typical page would look like this:

// Load the cache process
include("cache.php");
// Connect to database

include("config.php");

mysql_connect($db_host, $db_username, $db_password) or die(mysql_error());

mysql_select_db($db_name) or die(mysql_error());

?>

<html>

<body>

<h1>Articlesh1>

<ul>

// Some query

$q = mysql_query("SELECT * FROM articles ORDER BY id");

while ($r = mysql_fetch_array($q)) {

  echo '
.$r['id'].'">'.$r['title'].'
';

}

?>

ul>

body>

html>

// Save the cache

include("cache_footer.php");

?>

GoLinks – PHP/MySQL Links Directory Script

Jason — Thu, 14 Jan 2010 13:07:47 +0000

Here at XEWeb we are cracking open a bottle of champagne as we announce the new version of GoLinks.

GoLinks is a simple yet powerful and efficient links directory script with many features including unlimited categories, link submission, search engine friendly URL’s, multiple themes and language support with completely customizable templates.

Take a look at http://www.golinks-script.com to download, order and view a demo online.

A simple and lightweight Javascript calendar

Jason — Thu, 07 Jan 2010 12:35:30 +0000

This Javascript code will display a calendar in a table, useful for date picking…

// these are labels for the days of the week

cal_days_labels =['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
// these are human-readable month name labels, in order

cal_months_labels = ['January', 'February', 'March', 'April',

                     'May', 'June', 'July', 'August', 'September',

                     'October', 'November', 'December'];
// these are the days of the week for each month, in order

cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// this is the current date

var cal_current_date = new Date();
function Calendar(month, year) {

  this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;

  this.year  = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;

}
Calendar.prototype.generateHTML = function(){
  // get first day of month

  var firstDay = new Date(this.year, this.month, 1);

  var startingDay = firstDay.getDay();

  // find number of days in month

  var monthLength = cal_days_in_month[this.month];

  // compensate for leap year

  if (this.month == 1) { // February only!

    if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0){

      monthLength = 29;

    }

  }
  // get todays date

  var cal_today_date = new Date();

  checkDay = (cal_today_date.getMonth() == this.month && cal_today_date.getFullYear() == this.year) ? true : false;

  // do the header

  var monthName = cal_months_labels[this.month]

  var html = '
';

  html +='';

  html +='';
for(var i =0; i <=6; i++){

    html +='';
}

  html +='';
  // fill in the days

  var day = 1;

  // this loop is for is weeks (rows)

  for (var i = 0; i < 9; i++) {

    // this loop is for weekdays (cells)

    for (var j = 0; j <= 6; j++) { 

      html += '
';
}
// stop making rows if we've run out of days
if(day > monthLength){
break;
}else{

      html +='';
}
}

  html +=' «';

  html +=  monthName + " " + this.year;

  html += '»
    ';

    html += cal_days_labels[i];

    html += ' 

';

      if (day <= monthLength && (i > 0 || j >= startingDay)) {

        ts = this.generateTimestamp(day);

        if (checkDay == true && day == cal_today_date.getDate())

          html += '' + day + '';

        else

          html += '' + day + '';

        day++;

      }

      html += '     
 
';

  document.getElementById('calendar-holder').innerHTML= html;
}
Calendar.prototype.generateTimestamp = function(day) {

  month = this.month + 1;

  return "'" + day + "','" + month + "','" + this.year + "'";

}
Calendar.prototype.prevMonth = function() {

  if (this.month == 0) {

    this.month = 12;

    this.year = (this.year - 1);

  }

  this.month = (this.month - 1);

  this.generateHTML();

}
Calendar.prototype.nextMonth = function() {

  if (this.month == 11) {

    this.month = -1;

    this.year = (this.year + 1);

  }

  this.month = (this.month + 1);

  this.generateHTML();

}

«	'; html += monthName + " " + this.year; html += '	»
'; html += cal_days_labels[i]; html += '
'; if (day <= monthLength && (i > 0 \|\| j >= startingDay)) { ts = this.generateTimestamp(day); if (checkDay == true && day == cal_today_date.getDate()) html += '' + day + ''; else html += '' + day + ''; day++; } html += '

To display the calendar for example…

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>

    <title>Select date</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="css/calendar.css" />

    <script type="text/javascript" src="scripts/calendar.js"></script>

</head>

<body>

<div id="calendar-holder">

<script type="text/javascript">

// [CDATA[

  var cal = new Calendar();

  cal.generateHTML();

// ]]>

</script>

</div>

</body>

</html>

Convert plain text to clickable links in PHP

Jason — Tue, 05 Jan 2010 10:53:15 +0000

A useful function if you want to convert a link in plain text into a clickable link…

function clickable_links($text) {

  $text = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_+.~#?&//=]+)', '\1', $text);

  $text = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_+.~#?&//=]+)', '\1\2', $text);

  return $text;

}

How to setup one time download of your files securely

Jason — Sun, 03 Jan 2010 13:11:00 +0000

If you are selling a digital product and want to offer it for download but are concerned that people will share the URL to the file, you could use a solution like ClickBank. However the advantage of setting up one time downloads from your server instead is that you have more control over what you are selling and you don’t have to pay any fee’s.

Let us assume that you have setup and integrated a payment solution (such as PayPal using the IPN, post coming soon on this) and you have a database setup that holds the payment information.

CREATE TABLE `transactions` (

`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,

`transaction_id` VARCHAR( 50 ) NOT NULL ,

`file_downloaded` TINYINT( 1 ) NOT NULL

) ;

Now we will create download.php which will be the link sent to the user after they have paid to download your files.

To keep it secure you would include the transaction ID (which would be unique to each payment) as part of the query string, so the link would be:

http://www.site.com/download.php?transaction_id=XX

Now you do need the files to be uploaded somewhere on your web server, however the location will never be revealed. The best way is to put them in a folder outside of the web root so that they cant be accessed via HTTP. However if this is not possible then put them in a folder name that cannot be guessed (use a random password generator if you don’t have any ideas).

// Path to the files to be downloaded
$file='/home/usr/files/blah.zip';
// Transaction ID

$transaction_id = $_GET['transaction_id'];
// Connect to database

mysql_connect('localhost', 'user', 'pass');

mysql_select_db('dbname');
// Lookup the transaction ID in the database

$query = sprintf("SELECT * FROM transactions WHERE transaction_id='%s'",

mysql_real_escape_string($transaction_id));

$query = mysql_query($query);

$row = mysql_fetch_array($query);
// Valid transaction ID?

if (!$row) {

  die('Invalid transaction ID!');

}
// File already been downloaded?

elseif ($row['file_downloaded'] == 1) {

  die('File has already been downloaded, please contact us if you have any problems');

}
else {
  // It's a valid transaction, update the database so that we know the file has been downloaded for next time

  $query = sprintf("UPDATE transactions SET file_downloaded = 1 WHERE transaction_id='%s'",

  mysql_real_escape_string($transaction_id));

  $query = mysql_query($query);
  // Now force the file to be downloaded

  header('Content-Description: File Transfer');

  header('Content-Type: application/octet-stream');

  header('Content-Disposition: attachment; filename='.basename($file));

  header('Content-Transfer-Encoding: binary');

  header('Expires: 0');

  header('Cache-Control: must-revalidate, post-check=0, pre-check=0');

  header('Pragma: public');

  header('Content-Length: ' . filesize($file));

  ob_clean();

  flush();

  readfile($file);

  exit();
}

?>

Using reCAPTCHA to stop spam in PHP

Jason — Fri, 01 Jan 2010 13:11:57 +0000

reCAPTCHA helps prevent automated abuse of your site (such as comment spam or bogus registrations) by using a CAPTCHA to ensure that only humans perform certain actions.

You may have seen reCAPTCHA in use on many websites (including our forum) as it’s completely free and comes with an excellent web service which we are going to implement in this article.

The first thing to do is sign up to reCAPTCHA to receive your public and private key. These keys are used to authorize your account.

Next you need to download the reCAPTCHA library in PHP which can be found on this page. Once you have this you are ready to go.

First we are going to store the public and private key in variables, this would usually go in something like config.php.

include('recaptchalib.php');
$publickey="…";
$privatekey="…";
// Rest of your config goes here…

?>

Now on the page you want to display the CAPTCHA (e.g. register.php) you would include this at the top:

// Include the config file
include('config.php');
// If the form has been submitted

if (!empty($_POST)) {
  // Send the CAPTCHA results to reCAPTCHA

  $resp = recaptcha_check_answer ($privatekey, $_SERVER['REMOTE_ADDR'], $_POST['recaptcha_challenge_field'], $_POST['recaptcha_response_field']);
  // Incorrect CAPTCHA?

  if (!$resp->is_valid) {

    $error = 'The reCAPTCHA was not entered correctly!';

  }
  else {

    // Otherwise continue with further validation etc

  }

}

?>

Now on the same page we display the actual CAPTCHA which is generated by the library so we don’t have to worry about any HTML or Javascript.

<form action="" method="post">

<p>($publickey); ?></p>

<p><input type="submit" name="submit" value="Complete Sign Up" /></p>

</form>

«	'; html += monthName + " " + this.year; html += '					»
'; html += cal_days_labels[i]; html += '
'; if (day <= monthLength && (i > 0 \|\| j >= startingDay)) { ts = this.generateTimestamp(day); if (checkDay == true && day == cal_today_date.getDate()) html += '' + day + ''; else html += '' + day + ''; day++; } html += '