A random particle generator built with pure javascript & CSS. Gives you the ability to change the size, velocity and frame rate of the particles. 

Demo

HTML

<div id="particle-frame" style="width: 580px; height: 250px;"></div>

CSS

#particle-frame {
  position: relative;
  display: block;
  background: #040625;
  overflow: hidden;
  border-radius: 5px;
}

particle-1, particle-2 {
  display: block; position: absolute;
}

/*  Color  Variations */
particle-1 { background-color: #ff5434; }
particle-2 { background-color: #cc1e2c; }

Javascript

window.onload = function(){
  
  // init vars
  var particles = new Array();
  var frame = document.getElementById('particle-frame');
  var canvas_width = parseInt(frame.style.width);
  var canvas_height = parseInt(frame.style.height);

  // settings
  var frame_rate = 31; // per second
  var max_particle_size = 50; // pixels
  var max_velocity = 2; // pixels per frame
  createParticles(30);
  var runtime = 0; // seconds, 0 for infinite
  var time_elapsed = 0;

  // timer
  var timer = setInterval(function() {
    animateParticles();

    if (runtime != 0) { 
      time_elapsed += 1 / frame_rate;
      if (time_elapsed >= runtime) clearInterval(timer);
    }

  }, 1000 / frame_rate);

  // functions
  function createParticles(amount) {
    for (var i = 1; i <= amount; i++) {
      particles[i] = {'dom': document.createElement("particle-" + getRandomInt(1,2)),
                      'opacity' : getRandomInt(50,100)/100,
                      'size' : getRandomInt(1, max_particle_size),
                      'left' : canvas_width * Math.floor(Math.random() * 101) / 100,
                       'top' : canvas_height * Math.floor(Math.random() * 101) / 100, 
                      'x-velocity' : getRandomInt(-max_velocity*100, max_velocity*100) / 100, 
                      'y-velocity' : getRandomInt(-max_velocity*100, max_velocity*100) / 100 }

      particles[i]['dom'].style.cssText = "opacity: " + particles[i]['opacity'] + "; border-radius: " + particles[i]['size']/2 + "px; height:" + particles[i]['size'] + "px; width: " +particles[i]['size'] + "px; left:" + particles[i]['left'] + "px; top:" + particles[i]['top'] + "px;";
      particles[i]['dom'].setAttribute("x-velocity",particles[i]['x-velocity']);
      particles[i]['dom'].setAttribute("y-velocity",particles[i]['y-velocity']);
      document.body.appendChild(particles[i]['dom']);
      frame.appendChild(particles[i]['dom']);
    }
  }

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function animateParticles() {
    for (var i = 1; i < particles.length; i++) {
      // particle hits left side
      if ((particles[i]['left'] + particles[i]['size']) < 0 && particles[i]['x-velocity'] < 0) {
        particles[i]['dom'].style.left = (canvas_width + particles[i]['x-velocity']) + 'px';
        particles[i]['dom'].style.top = particles[i]['top'] + particles[i]['y-velocity'] + 'px';

      // particle hits top side
      } else if ((particles[i]['top'] + particles[i]['size']) < 0 && particles[i]['y-velocity'] < 0) {
        particles[i]['dom'].style.top = (canvas_height - particles[i]['size']) + particles[i]['y-velocity'] + 'px';
        particles[i]['dom'].style.left = particles[i]['left'] + particles[i]['x-velocity'] + 'px';

      // particle hits right side
      } else if (particles[i]['left'] > canvas_width && particles[i]['x-velocity'] > 0) {
        particles[i]['dom'].style.left = particles[i]['x-velocity'] + 'px';
        particles[i]['dom'].style.top = particles[i]['top'] + particles[i]['y-velocity'] + 'px';

      // particle hits bottom side
      } else if (particles[i]['top'] > canvas_height && particles[i]['y-velocity'] > 0) {
        particles[i]['dom'].style.top = particles[i]['y-velocity'] + 'px';
        particles[i]['dom'].style.left = particles[i]['left'] + particles[i]['x-velocity'] + 'px';

       // particle floating in middle
       } else {
        particles[i]['dom'].style.left = (particles[i]['left']+(particles[i]['x-velocity'])) + 'px';
        particles[i]['dom'].style.top = (particles[i]['top']+(particles[i]['y-velocity'])) + 'px';
      }

      // update particle array values
      particles[i]['left'] = parseFloat(particles[i]['dom'].style.left);
      particles[i]['top'] = parseFloat(particles[i]['dom'].style.top);

    }
  }

}

This is a simple jQuery carousel slider that I use quite often in my projects, it's the most basic version and a great starting point if you want to learn how to use animation with jQuery.

With this slider you'll be able to easily change the dimensions, animation times, and choose custom classes/id's for the container and slides (handy for applying to existing html).

Demo

Play with the Code

• jsFiddle Editable Demo

Download

• Download the jQuery Slider demo files
• or view them on Github

HTML

<ul class="slider">
 <li>
   <img src="http://paulmason.name/image-1.jpg" />
 </li>
 <li>
   <img src="http://paulmason.name/image-2.jpg" />
 </li>
 <li>
   <img src="http://paulmason.name/image-3.jpg" />
 </li>
 <li>
   <img src="http://paulmason.name/image-4.jpg" />
 </li>
</ul>

CSS

.slider {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}

jQuery Javascript

jQuery(function($) { 

  // settings
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds

  function slides(){
    return $slider.find($slide);
  }

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );

});

More to Come

This is the first to come of a series of tutorials on jQuery sliders. I'll be adding more features soon.

When using the native built in version of Apache in Lion OS X you won't have write permissions unless you change the User and Group settings in apache's httpd.conf file. Here are some quick instructions on how to achieve that.

Open Terminal and Enter

sudo nano /private/etc/apache2/httpd.conf

Find and change http.conf code from

User _www
Group _www

To

User your_mac_username
Group staff
# With earlier versions such as Leopard, capitalise staff to Staff

Restart apache by going to System Preferences > Sharing and un-tick then tick Web Sharing.

PHP to check write permissions are enabled

echo (is_writable('.')) ? "writable" : "not writable";

I've recently designed a template system, and wanted to make it as easy as possible for the designers to enter values into PHP functions. So I wrote a little function to allow a CSS style string to be converted into an array.

Regular PHP Method

//The line of code the designer has to edit
echo createPosition('header', '100px', '200px');

function createPosition($name, $height, $width)
{
  return  '<div id="' . $name . '" style="height:' . $height . ';width:' . $width . ';">' . $name . '</div>';
}

CSS Style PHP

//The line of code the designer has to edit
echo createPosition('name:header; width:100px; height:200px');

function attrStringToArray($attr_string)
{
  $attr = array();
  foreach(explode(';', $attr_string) AS $attr_temp) {
    if (strlen(trim($attr_temp)) > 0) {
      list($name, $value) = explode(':', $attr_temp);
      $attr[trim($name)] = trim($value);
    }
  }
  return $attr;
}

function createPosition($attr_string)
{
  $attributes = attrStringToArray($attr_string);
  return  '<div id="' . $attributes['name'] . '" style="height:' . $attributes['height'] . ';width:' . $attributes['width'] . ';">' . $attributes['name'] .'</div>';
}

So you can see that the line of code the designer has to edit is a lot easier to understand with the CSS style PHP. The attributes can also be in any order. This is just one scenario and can be used in many.

I've found the easiest most reliable way to add a MySQL user with all priviledges is with a simple query.

MySQL

CREATE USER 'db_username'@'localhost';
GRANT ALL PRIVILEGES ON db_name.* TO 'db_username'@'localhost';
SET PASSWORD FOR 'db_username'@'localhost' = PASSWORD('password');
FLUSH PRIVILEGES;

All you need to do is replace 'db_username', 'db_name', and 'password' with your relevant database details, execute the MySQL and presto!

I've come up with a very simple FREE solution to give your VirtueMart Joomla! 1.5 sites SEF URLs. This is the an example of the format you will achieve:

http://yoursite.com/store-alias/category-name/product-name/unique-id

Install Instructions

1. Download the router.php file
2. Place the router.php file into your components/com_virtuemart folder in your joomla installation.
   
   
3. Enable Joomla SEF URLs in your Joomla admin under Global Configuration-> Site -> SEO Settings as shown in the image below:
   
   

Features

• SEF URLS for all important landing pages (products, categories and manufactures)
• Handles categories and products with the same name
• Converts / characters to - in URL
• Handles multiple categories for one product by choosing the category with the highest list order
• No duplicate URLs

Example

http://pactstore.com.au 

Linking directly to categories, products & manufacturers

If you are linking to a product or category directly. You need to supply the same link that Virtuemart uses throughout its component. The easiest way to do this is to create a new menu item as an external link like the following:

Category: index.php?option=com_virtuemart&page=shop.browse&Itemid=32&category_id=4

Product: index.php?option=com_virtuemart&page=shop.product_details&Itemid=32&product_id=79

Manufacturer: index.php?option=com_virtuemart&page=shop.browse&Itemid=32&manufacturer_id=4

So you will need to change the numbers marked in bold, i.e the Itemid, category_id & product_id to the relevant id's. The Itemid is the menu item id of the Virtuemart component. This can be found by viewing the last column in the menu manager for the relevant menu.

This might seem a bit technical but it's quite easy, and will make a vast difference to your SEO. Also I'll do my best to help if you have any problems.

Known Issues

The sort by Product Name, Price, Latest Products list box doesn't preserve SEF URLs. This is because Virtuemart has not taken SEF into consideration and used javascript to redirect which doesn't allow the router to rewrite the URL. You can hide the listbox in the Virtuemart configuration if need be.

Other 3rd Party Virtuemart SEF Plugins

There are quite a few third party plugins you can use for Virtuemart SEF URLs. I had a look through the methods on this site and found the closest I could get to neat SEF URLs was by using the sh404sef component. It is a very complex component, and takes a lot of tweaking, not the most elegant solution in my opinion.

References

• Related VirtueMart Forum Thread
• How to code SEF URLs for your Joomla component
• Reviews on third party VirtueMart SEF components

Download

The PHP microtime() function returns the current Unix timestamp in microseconds.

microtime() returns a string and alternatively microtime(true) returns a float.

Usage

// microtime()
echo "microtime() = " . microtime() . " " 
  . ((is_string(microtime())) ? "string" : " not string") . "<br />"; 

// microtime(false)
echo "microtime(false) = " . microtime(false) . " " 
  . ((is_string(microtime(false))) ? "string" : " not string")  . "<br />"; 

// microtime(true)
echo "microtime(true) = " . microtime(true) . " " 
  . ((is_float(microtime(true))) ? "float" : " not float") . "<br />"; 

/* Sample Output
 
  microtime() = 0.49883700 1339648679 string
  microtime(false) = 0.49885600 1339648679 string
  microtime(true) = 1339648679.4989 float

 */

Helpful Examples

// Test your servers PHP execution time

// Start timer
$time_start = microtime(true);


// Code to test (the counter is an example)
$counter = 1;

while ($counter <= 1000000) {
  $counter++;
}


// End timer
$time_end = microtime(true);
$time = $time_end - $time_start;

echo "php execution time in microseconds: " . $time;

/* Sample Output
 
  php execution time in microseconds: 0.19492197036743

 */ 

Take it Further

You could extend this and set a maximum execution time variable. Then in the 'end timer' block check to see if it is exceeded and log or email the warning. This would be handy in determining server side performance issues.

Reference

microtime()

This is a short  and relatively simple tutorial with some useful php functions to generate unique random alphanumeric codes. These can be useful for generating url codes, like the ones featured in bit.ly, tinyurl, youtube etc.

These php functions allow you to create as many codes as you like with the characters you chose. It also lets you add in your existing codes so that you don't get duplicates.

I've used the character set '23456789ABCDEFGHJKLMNPQRSTUVWXYZ' you'll notice I removed 01OI as some fonts make this hard to distinguish the difference.

PHP

function createRandomString($string_length, $character_set) {
  $random_string = array();
  for ($i = 1; $i <= $string_length; $i++) {
    $rand_character = $character_set[rand(0, strlen($character_set) - 1)];
    $random_string[] = $rand_character;
  }
  shuffle($random_string);
  return implode('', $random_string);
}

function validUniqueString($string_collection, $new_string, $existing_strings='') {
  if (!strlen($string_collection) && !strlen($existing_strings))
    return true;
  $combined_strings = $string_collection . ", " . $existing_strings;
  return (strlen(strpos($combined_strings, $new_string))) ? false : true;
}

function createRandomStringCollection($string_length, $number_of_strings, $character_set, $existing_strings = '') {
  $string_collection = '';
  for ($i = 1; $i <= $number_of_strings; $i++) {
    $random_string = createRandomString($string_length, $character_set);
    while (!validUniqueString($string_collection, $random_string, $existing_strings)) {
      $random_string = createRandomString($string_length, $character_set);
    }
    $string_collection .= ( !strlen($string_collection)) ? $random_string : ", " . $random_string;
  }
  return $string_collection;
}

$character_set = '23456789ABCDEFGHJKLMNPQRSTUVWXYZ';
$existing_strings = "NXC, BRL, CVN";
$string_length = 3;
$number_of_strings = 10;
echo createRandomStringCollection($string_length, $number_of_strings, $character_set, $existing_strings);

Sample Output

QPP, 9EK, 67J, TAA, 23X, BWV, YWP, G8W, 3LJ, A8G

PHP References

• strlen
• strpos
• implode
• shuffle
• rand

Examples of Usage

• tinyurl
• bit.ly
• youtube urls
• Voucher/Coupon codes
• Raffle Tickets

If you're looking to write some custom code with yootheme's zoo then you'll probably be wondering how to access all the data in those dynamic fields you created through their lovely admin user interface. If you look in the jos_zoo_item table in your database you'll see a column called elements. If you look at the contents you'll see that majority of your zoo items data is stored in there as XML.

If you are coding within a zoo page you can use their tutorial. However if you want a simple global function that will work anywhere in Joomla you can use the function that I've written below:

PHP Function

function getZooElementData($item_id, $element_identifier, $element_child) {
  $db =& JFactory::getDBO();
  $query = "SELECT elements FROM #__zoo_item WHERE id = " . $item_id;
  $db->setQuery($query);
  $element_xml = $db->loadResult();
  $elements = simplexml_load_string($element_xml);
  foreach ($elements->children() as $element) {
    if((string)$element->attributes() == $element_identifier) {
      return (string)$element->$element_child;
    }
  }
}

PHP Usage

echo getZooElementData(2, '43aa1b15-986e-4303-afcf-628b835f10e5', 'value');

<textarea identifier="43aa1b15-986e-4303-afcf-628b835f10e5">  
  <value><![CDATA[<p>This is some sample yootheme zoo element data.</p>]]></value>
</textarea>

References

• simplexml_load_string()
• Joomla Database Tutorial
• Joomla Extension for Writing Custom Code

Hope this was helpful! 

Pretty simple but pretty handy too! Here's a short tutorial to generate the current year in your footer's copyright declaration. It also detects if the the site has been running for less than a year to avoid the date printing out like this © 2011-2011 rather than just this © 2011.

Example: Your Company Name © 2010-2011 All Rights Reserved.

Both of these methods work the same way.

Pure PHP

echo "<p>Your Company Name &copy "; 
$start_year = 2010; //change to the year you launched your website
echo (date('Y') == $start_year) ? $start_year : $start_year . "-" . date('Y');
echo " All Rights Reserved.</p>";

Mixed HTML & PHP

<p>Your Company Name &copy; 
<?php
  $start_year = 2010; //change to the year you launched your website
  echo (date('Y') == $start_year) ? $start_year : $start_year . "-" . date('Y');
?>
All Rights Reserved.</p>

If you're looking to add the trademark symbol (™) or any others check out CopyPasteCharacter.com