3D carousel using jQuery

3D carousel using jQueryInspired 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

Tweet the Tube
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

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:

<?php
// 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:

<?php
// 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:

<?php
// 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>Articles</h1>
<ul>
<?php
// Some query
$q = mysql_query("SELECT * FROM articles ORDER BY id");
while ($r = mysql_fetch_array($q)) {
  echo '<li><a href="view_article.php?id='.$r['id'].'">'.$r['title'].'</a></li>';
}
?>
</ul>
</body>
</html>
<?php
// Save the cache
include("cache_footer.php");
?>

GoLinks – PHP/MySQL Links Directory Script

GoLinksHere 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

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 = '<table class="calendar-table" cellpadding="4" cellspacing="0">';
  html += '<tr><th><a href="javascript:cal.prevMonth()">&#171;</a></th><th colspan="5">';
  html +=  monthName + "&nbsp;" + this.year;
  html += '</th><th><a href="javascript:cal.nextMonth()">&#187;</a></th></tr>';
  html += '<tr class="calendar-header">';
  for(var i = 0; i <= 6; i++ ){
    html += '<td class="calendar-header-day">';
    html += cal_days_labels[i];
    html += '</td>';
  }
  html += '</tr><tr>';

  // 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 += '<td class="calendar-day">';
      if (day <= monthLength && (i > 0 || j >= startingDay)) {
        ts = this.generateTimestamp(day);
        if (checkDay == true && day == cal_today_date.getDate())
          html += '<a class="today" href="javascript:void(0)">' + day + '</a>';
        else
          html += '<a href="javascript:void(0)">' + day + '</a>';
        day++;
      }
      html += '</td>';
    }
    // stop making rows if we've run out of days
    if (day > monthLength) {
      break;
    } else {
      html += '</tr><tr>';
    }
  }
  html += '</tr></table>';
  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();
}

To display the calendar for example…

<!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" 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>