all Cursors

All available cursors 

Very useful resource

SVG Patterns Gallery

Here is a nice svg pattern gallery that gives the code.  A nice alternative to background images

svg pattern gallery

Handy Code Snippets

I have noticed a number of sites publishing handy code snippets.
Here are a couple

• 8 Code Snippets for New Website Projects
• Basic Ready-to-Use CSS Styles 
• A Collection of Handy CSS Snippets  
• Colorful CSS3 Animated Navigation Menu

responsive slide menu

Here is a nice way to do a responsive menu that kind of emulates the facebook iphone menu instead of the usual responsive stacking menu.

PageSlide Responsive Demo

Latitude and Longitude

Here is a very handy site when trying to find the Latitude and Longitude of a location. The page uses the Google Maps API to find out accurate geographical coordinates (latitude and longitude) for any place on Earth.

Find latitude and longitude with Google Maps

Javascript Subtraction without the extra decimals

I needed to do a simple javascript subtraction but forgot about the floating point. This puts a 1 "x" decimal places to the right of the decimal point. This is because computers work in binary rather than numbers.

To get around this I used the JavaScript round() Method and the code can be shown below:

<script language="Javascript" type="text/javascript">
<!--
var value1 = 25.00;
var value2 = 23.98;
var result = (value1 - value2) * 100;
var Myresult = Math.round(result) / 100;
document.write("My result is " + Myresult + " and no weird decimals");
//-->
</script>

Essential JS files

When starting with a new web site there are certain files that you will need to include to have a modern and well functioning site.  Obviously your site may be more minimal and therefore you could not add them but here are the ones that I try to include.

Jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

Most sites that I build use jquery and why not let the google content delivery network take the strain and host it for me  directly from Google’s network of datacenters.  Benefits include decreased latency, increased parallelism, and better caching.



HTML5 shim
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->


Also the same as shiv, this js file is to be added if you are building in html5.  This script tells IE what the html5 elements are.  Use in conditional statements



Modernizr
<script src=" /js/modernizr-1.6.min.js"></script>

Modernizr is is an open-source JavaScript library that allows you to use CSS3 and HTML5 as it adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet.  This means that you can take full advantage of all the HTML5 and CSS3 features that will be implemented in some browsers, without sacrificing control over the user experience in other browsers.

The end of IE6

At the beginning of the year Google announced that it would no longer be supporting IE6, as it is the browser identified as the weak link in a cyber attack on the search engine. As a result many of their applications and sites won't work properly in older browsers. Many developers jumped up and down with joy at the news although for some time there have been many campaigns to stop supporting this old browser such as Kill IE6 and lots of sites just showing a page telling the user to update their browser. Even Microsoft have a campaign to end the 10 year reign with the The Internet Explorer 6 Countdown which states that there are 11.6% still using it.

So the question that I have to ask myself, do I stop adding in the hacks and separate stylesheets for it? So many companies still have to use it and really how much hassle is it to get a site working in IE6, if not looking pixel perfect? I started in this industry at about the same time as IE6 was born and so many of the little hacks and allowances for this old boy have become second nature, yet should I not be staying in line with all the big boys and just say no? I guess at the end it is really up to the client and if they want to support it. They are not always right but they are the ones who pay the bills.

Canvas Tag

The new HTML5 canvas tag that is a container that allows for dynamic, scriptable drawing of 2D of graphics, allowing both simple and complex shapes to be drawn that you could previously only get by using images. With javascript we can manipulate what appears on the canvas so it can be used to make photo compositions, graphs games, animation etc


The <canvas> tag consists of a drawable region with a defined width and height, which are optional and can also be set using DOM properties. It is only supported by a number of browsers that are Firefox 1.5 and later, Opera 9 and later, and newer versions of Safari IE 9 will have support for it as well.

Some Examples are:
tetris like game
physics boxes
painter
clock

css3 block

Here is a quick starter to css3 effects of blocks. All are simple starters to what you can achieve with some basic css3 to then go on and create something much more spectacular.

Listed are
CSS3 rounded corners
CSS3 box shadow
CSS3 roated block
CSS3 speech bubble

The demo can be found here

transparency without changing the text

I did this a while ago but thought it would probably be useful.

When you make an area transparent the problem arises that the text also picks up the transparency. To get around this you need to put the text in a new div and use z-index's.

I have created an example here

Add class to first link or third link

The below add a class to the first link. Can also be used for any number using nth


<p id="list">

<a href="#" class="item">Item One</a> - <a href="#" class="item">Item Two</a> - <a href="#" class="item">Item Three</a>

</p>

<script>$("p#list a").first().addClass('highlight');</script>



So to add a class to every third item

<ul id="List">
<li>number 1</li>
    <li>number 2</li>
    <li>number 3</li>
    <li>number 4</li>
    <li>number 5</li>
    <li>number 6</li>
    <li>number 7</li>
    <li>number 8</li>
    <li>number 9</li>
    <li>number 10</li>
    <li>number 11</li>
    <li>number 12</li>
</ul>

<script type="text/javascript">
$(document).ready(function(){
$("ul#List li:nth-child(3n)").addClass("third")
});
</script>


Simple way to add class on hover with jQuery

If you need to add a class on hover the best way to do it is with jQuery


<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

       $('.myDiv').hover(function() {

  $(this).addClass('newClass');

}, function() {

  $(this).removeClass('newClass');

});

    });  

</script>



</head>



<body>

<div class="myDiv">This is my new Div</div>

</body>

</html>


Numbered List with Jquery

Obviously you can use an ordered list to create the number in front of a list, however this is often hard to style and cumbersome. Instead jQuery can create a simple numbered list:


<script type="text/javascript">

$(document).ready(function(){



$("#List li").each(function (i) {

i = i+1;

$(this).prepend('<span class="commentnumber"> '+i+'. </span>');

   });

});

</script>




with the html


<ul id="List">

    <li>first list item</li>

    <li>second list item</li>

    <li>third list item</li>

</ul>




Pop up window

greybox is a nice little javascript apllication that creates a neat pop-up window. Reminds me of the lightbox but obviously has a very different application