jCountdown 1.5.2 is out

Mexican wave everybody, jCountdown 1.5.2 is out!

Only one little change this version, adding in singular functionality for locale. This allows you to provide a singular version of the following:

  • Year
  • Month
  • Week
  • Day
  • Minute
  • Second

And the great news is it won’t break for locale files without these settings, it will just fallback to plural.

Check the docs on Github for more information.

Bower

From version 1.5.2 I will be tagging releases. And I’ve also registered jCountdown with Bower.

To install using bower do the following

bower install jcountdown --save

Simple!

Grunt

I’ve now updated Grunt to the latest version and all the tasks with it. Before I had to run Qunit tests manually in the broswer (I didn’t have PhantomJS installed and there wasn’t a Grunt task for it at the time).

This means I can test quicker.

Until next time,

Much love and hugs

Tom.

jCountdown 1.5.1 is out

Hi All,

Its been a while since I released a new version of jCountdown. About 5 months I think. Well version 1.5.1 is out with a few tweaks and polishing.

Whats New

Templating

In 1.5 a better was of templating was introduced, meaning you could drop in new locales easily. This deprecated template/htmlTemplate. Well template is back for a simpler way of defining your countdown.

Just pass a string containing the following tokens:

  1. %y = years
  2. %m = months
  3. %w = weeks
  4. %d = days
  5. %h = hours
  6. %i = minutes
  7. %s = seconds

New Option

A new option was added: spaceCharacter meaning you can now define what character separates each time period. Thanks to @cmeyermd for the suggestion.

Fixes and New Locales

Thanks to @elmariofredo for some fixes and a new locale.

You can download from GitHub here.

Enjoy!

That -webkit- prefix talk

Over the last week I’ve been following a few peoples views (PPK, Remy Sharp and Stef. Sullivan Rewis mainly) on Microsoft, Mozilla and Opera supporting -webkit- prefixes in their browers, here, here and here. Oh and on Twitter too. (This post is a little delayed due to the fact I’ve been doing some testing in CSS before writing this.)

The Issue

Microsoft, Mozilla, and Opera are now going to support the -webkit- prefix, all because the development of mobile websites focuses on Webkit based Browsers( iOS basically ). The reason this is happening is because Web Developers are lazy. Instead of supporting browsers properly, they are only supporting Webkit based browsers. There are some CSS3 features that are supported by all browsers, like Gradients, Animation, Transitions, border radius for example, so it’s not like you can’t support these.

I admit this is a lot harder than for desktop browsers. Its easy to install a desktop browser than it is to get different Mobile phones with different browsers. I’ve found though, that even if you can’t get the phone, there are Mobile browser simulators for Opera, Fennec (Firefox), an Android emulator and you can also get an iPhone emulator for Mac with XCode. I know this is not the same as testing on the real thing, but its better than nothing.

Now the main concern surrounding the -webkit- prefix is that people think Webkit is becoming dominant over the web (much like IE6 back in the day) and that its “turning one experimental implementation into a standard.” There is also a concern that it will break websites, say if Firefox does a feature one way and Safari does it another. The reason Webkit is becoming more dominant is because we are letting it, but not everyone has a iPhone/iPad, plenty of people use Android ( like me, although I do want an iPhone :) ) so the war is not lost. On my phone I have the Native browser (some Webkit based one), Firefox and Opera Mobile to test on. I can also test on my iPod touch which has iOS 5 on it.

The Current Prefix System

The current system is flawed, I’m probably not the only one to think so. No one wants to have to type a lot of browser specific prefixes for some CSS:

-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px

but we do because we have to if we want to use those features in all browers. Its not too bad for CSS manipulation in say, jQuery, as some cssHooks exist to normalise this for you.

The Current Work Around

I don’t think it will break the web, we have got over different implementations in the past. If you think about what you had to do in the first place, taking CSS3 gradients as an example, you would do:

background-image: linear-gradient(red,blue);
background-image: -moz-linear-gradient(red,blue);
background-image: -webkit-linear-gradient(red,blue);
background-image: -webkit-gradient(linear, red, blue)

So the browser would choose which one to use. This is the same for background-color when rgb(a) and hsl(a) were added:

background-color: #000000;
background-color: rgba(20,20,20,0.6);

Putting them in this specific order (stating the obvious I know) means that the background colour will start off being #000000, but will change to rgba(…) if that browser supports it. If we now think about how it will work when browsers change to all using the -webkit- prefix, its not that bad.

If a new property was added called “awesomebox”, and Firefox supported it will percentages, Chrome with decimal etc, it would work, you would just have to list each incarnation, much like with the background-color example above:

-webkit-awesomebox: 90%;
-webkit-awesomebox: 1.0;

You would only run into problems if Firefox supported (hypothetically) a set of strings or percentage, and Chrome supported a different set of strings or decimal. If you were to both use strings then I think none of the styles would be taken into account.

I think some people forget that these properties are still in development and are experimental, so they will have bugs and are likely to change. Remember what happened with the Gradient Spec and Webkit. They did it one way, Firefox did it like the W3C specification, then Webkit changed to the W3C specification way.

I do admit it doesn’t make sense to put -webkit- into the spec, mainly because you wouldn’t associate the -webkit- prefix with Firefox, IE and Opera for obvious reasons. That was the point in their own prefixes, as they supported some features differently. What does make more sense is to have -beta- instead and avoid this kind of confusion. I like PPK’s idea of -beta- and-alpha- prefixes, as the prefix can change when the implementation changes. Remy sharp suggests that experimental CSS properties should be production ready browsers only. This is an interesting thought 50/50 on it really as I can see the benefits for and against it.

What does worry me if it starts with browsers changing to the -webkit- prefix, will browser vendors then only support Webkits implementations instead. Only time will tell.

A Permanent Fix

The only way to stop this happening would be to get rid of the old prefix system, and add a -beta- prefix to be made a standard. This means for browsers that do support CSS implentations in the same way, less CSS is needed. If we take the border radius example and apply the “new” system to it:

-beta-border-radius: 8px;
border-radius: 8px

we would only have to use 2, which is easier to implement if you were doing more that one feature.

Summary

I don’t think Webkit will become more dominant as long as, we, the developers, don’t let them. This is not IE6 all over again!

I’m all for change but I don’t agree with browsers all using the -webkit- prefix. I would rather it be a -beta- prefix instead and the current system be removed.

jCountdown UI – jQuery UI Widget

Description

jCountdown UI is the jQuery UI Widget version of my jCountdown Countdown plugin. It uses some of the jQuery UI CSS Classes so it is compatible with ThemeRoller, meaning you can design a different colour scheme for it if you wish, or use any of the ones already on jQuery UI’s download section.

Information

Reporting Bugs

If you find any bugs please don’t comment on this page. Report any bugs through Github.

Versions

Current Version – 1.0.1

Links:

Download via Github Page

Version 1.0

Usage

Options

date - Default: null
       (Must be a valid date string or Date object)

updateTime - Default: 1000
       (Interval in milliseconds when the Countdown should update the time)

minus - Default: false
        (Boolean. Whether the Countdown should have to go into minus figures, especially when counting down to a date)

onChange - Default: null
           (Callback function for when the Countdown time updates)
           onChange(event, settings)
onComplete - Default: null
             (Callback function for when the Countdown time updates)
             onComplete(event)

onPause - Default: null
          (Callback function for when the Countdown Plugin is paused )
          onPause(event)

onResume - Default: null
           (Callback function for when the Countdown Plugin is resumed from pause)
           onResume(event)

leadingZero - Default: false
              (Boolean. Whether time values should have a leading zero for values < 10. e.g 09)

offset - Default: null
         int or float (Offset in hours, can be used for setting countdown time to match server

servertime - Default: null
           int or function (servertime in milliseconds, e.g (time() * 1000) in PHP. Or a callback function that sets the time, via an ajax request for example. Used to match countdown across devices where local time can be different.

direction - Default: "down"
            Countdown Direction, "down" for down to a date, and up for "up" from a date

hoursOnly - Default: false
            (Boolean. If set to true, jCountdown ignores days left and add converts to hours and adds this to the hours left)

minsOnly - Default: false
           (Boolean. If set to true, jCountdown ignores days/hours and add converts to minutes and adds this to the minutes left)

secsOnly - Default: false
            (Boolean. If set to true, jCountdown ignores days/hours/minutes left and converts to seconds and adds this to seconds left)

yearsAndMonths - Default: false
            (Boolean. If set to true, jCountdown counts down the years/months as well)

yearsText -  Default: 'years'
	    (String)

monthsText - Default: 'months'
             (String)

daysText - Default: 'days'
             (String)

hoursText - Default 'hours'
             (String)

minutesText - Default 'minutes'
             (String)

secondsText - Default 'seconds'
             (String)
fx - Default: 'turnDown'
              (String) Choice of 'turnDown', 'fade' and 'basic'

Methods

changeSettings - Accepts an object map, the same as when first initialising the plugin
    Example: $("#time").countdownui("changeSettings", options);

getSettings - Returns setting/settings from countdown plugin, as well as the timer
    Example: var currentSettings = $("#time").countdownui("getSettings");
    Example: var dateSetting = $("#time").countdownui("getSettings", "date");

resume - Resumes the countdown, if previously pauses, otherwise this method does nothing
    Example: $("#time").countdownui("resume");

pause - Pauses the countdown, simple as
    Example: $("#time").countdownui("pause");

complete - Triggers the complete event and ends the countdown early. Also removes timer and unbinds any events.
    Example: $("#time").countdownui("complete");

destroy - Removes timer and unbinds any events, puts the DOM Element back to its original HTML state
    Example: $("#time").countdownui("destroy");

Settings you can access in onChange event through settings object

originalHTML (string)
date (date string)
hoursOnly (boolean)
minsOnly (boolean)
secsOnly (boolean)
yearsAndMonths (boolean)
leadingZero (boolean)
offset (int)
servertime (function or date object)
updateTime (int)
direction (string)
minus (boolean)
onChange (function or null)
onComplete (function or null)
onResume (function or null)
onPause (function or null)
timer (id for Interval)
prevYears (undefined or int)
prevMonths (undefined or int)
prevDays (undefined or int)
prevHrs (undefined or int)
prevMins (undefined or int)
prevSec (undefined or int)
yearsText (string)
monthsText (string)
daysText (string)
hoursText (string)
minutesText (string)
secondsText (string)
speed (int)
fx (string)
hasCompleted (boolean)

Custom Transitions

You can also write your own transitions for animating the countdown.

Basic Example

$(document.ready(function(){
    $("#time").countdownui({
        "date" : "july 30, 2011"
    });
});

Advanced Examples

$(document.ready(function(){
    //Count DOWN to a date
    $("#time").countdown({
        "date" : "july 30, 2011",
        "offset" : 2,
        "leadingZero" : true,
        "onChange" : function(event, settings){
           if( countdownShouldEnd() ) {
               //countdownShouldEnd is not a real function
               //just shows an example of usage
               $(this).countdownui("complete");
           }
        },
        "onComplete" : function(event) {
            $(this).html("Completed");
        }
    });

    //Count UP from a date
    $("#time").countdown({
        "date" : "january 1, 2009",
        "offset" : 2,
        "direction" "up",
        "leadingZero" : true,
        "onChange" : function(event, settings){
           if( countdownShouldEnd() ) {
               //countdownShouldEnd is not a real function
               //just shows an example of usage
               $(this).countdownui("complete");
           }
        },
        "onComplete" : function(event) {
            $(this).html("Completed");
        }
    });

    //Different FX and Server Time
    $("#time2").countdownui({
        "date": "february 20, 2012 14:00:00", //Counting up FROM a date
        "servertime": function() {
            var time = null;
            $.ajax({url: 'get_time.php',
                async: false,
                dataType: 'text',
                success: function( data, status, xhr ) {
                    time = data;
                },
                error: function(xhr, status, err) {
                    time = new Date();
                    time = time.getTime();
                }
            });
            return time;
        },
        "fx": 'basic'
    });

});

Features and enhancements wanted for jcountdown 1.5

As I am writing this post, I’m working on version 1.4.1 of my jCountdown jQuery plugin. I’m now looking for ideas for 1.5. This can be enhancements to existing functionality or new new features.

I am already working on a jQuery UI widget version. This will be styleable with themeroller, so will work with any of the themes that come with jQuery UI.

I’ll allow comments for people to add suggestions and will close them in about 2 weeks time.

Thanks!

CSS Level 4 Selectors in depth

On the 29th September, CSSWG published its first draft of CSS Selectors Level 4. This means CSS4 is being worked on already!

Whats new?

Below is a quick overview of all the new features in CSS Selectors Level 4 (Including 3UI), which of course may change.

Pattern Meaning
E:not(s1, s2) an E element that does not match either compound selector s1 or compound selector s2
E:matches(s1, s2) an E element that matches compound selector s1 and/or compound selector s2
E[foo="bar" i] an E element whose foo attribute value is exactly equal to any (ASCII-range) case-permutation of bar
E:local-link an E element being the source anchor of a hyperlink of which the target is the current document
E:local-link(0) an E element being the source anchor of a hyperlink of which the target is within the current domain
E:current an E element that is currently presented in a time-dimensional canvas
E:current(s an E element that is the deepest :current element that matches selector s
E:past an E element that is in the past in a time-dimensional canvas
E:future an E element that is in the future in a time-dimensional canvas
E:indeterminate a user interface element E that is in an indeterminate state (neither checked nor unchecked)
E:default a user interface element E that
E:in-range
E:out-of-range
a user interface element E that
E:required
E:optional
a user interface element E that
E:read-only
E:read-write
a user interface element E that
E:nth-match(n of selector) an E element, the n-th sibling matching selector
E:nth-match(n of selector) an E element, the n-th sibling matching selector
E:column(selector) an E element that represents a cell in a grid/table belonging to a column represented by an element that matches selector
E:nth-column(n) an E element that represents a cell belonging to the nth column in a grid/table
E:nth-last-column(n) an E element that represents a cell belonging to the nth column in a grid/table, counting from the last one
E /foo/ F an F element ID-referenced by an E element’s foo attribute
$E > F an E element parent of an E element
Pattern Meaning

E:not( s1, s2 )

This works the same as :not(s1) from the CSS3 spec, but now you can add a second selector:

input:not(input[type="submit"], input[type="reset"]){...}

E:matches( s1, s2 )

Matches a selector based on the element matching 1 and/or 2 selectors, simple:

a:matches(a.productLink, a.catLink) {...}

E[foo="bar" i]

This selects an element with an attribute “foo” with a values “bar”. The ending “i” meaning to ignore case of the attribute value, like how you would find in regex statements:

input[name="ProductID" i ] {...}

Would match something like:

<input name="ProductID" />
<input name="productid" />
<input name="PRODUCTID" />

E:local-link and E:local-link( 0 ) ( or E:local-link( n ) )

E:local-link selects an element that links to the same page it is on:

a:local-link{...}

E:local-link(0) matches all links that link to a page within the same domain:

a:local-link(0){...}

Any number greater than 0 refers to how many path segments there are, so you add as many as you need.

An important think to note is that the protocol (HTTP and HTTPS) can be different to match the same domain.

The domain name needs to be strictly the same, http://www.webmuse.co.uk would be considered different to http://webmuse.co.uk.

If the current page was http://www.webmuse.co.uk, and you have the following HTML:

...
<nav>
    <ul>
        <li><a href="http://www.webmuse.co.uk">Home</a></li>
        <li><a href="http://www.webmuse.co.uk/blog/">Blog</a></li>
        <li><a href="http://www.webmuse.co.uk/blog/test/">Test</a></li>
        <li><a href="http://www.github.com/tomgrohl/">Github</a></li>
    </ul>
</nav>
...

And the following CSS:

a:local-link{ background-color: #FFFFFF}

a:local-link(0){ border-radius: 8px;color: #000000}

a:local-link(1){ color: #000000; background-color: #FFFFFF}

a:local-link(2){ color: #C40000; background-color: #FFFFFF}

The Home link would get styles 1 and 2 because it is the current page and it links within the same domain.

The Blog link would get styles 2 and 3 as it links within the same domain and has 1 path segment.

The Test link would receive styles 2, 3 and 4 because it links within the same domain and has both 1 and 2 path segments.

The Github link would receive no styling as it is an external link.

This is one of the best features coming to CSS4. It means we don’t need to add classes to the body and the nav links like this:

<body class="home>

<ul>
    <li><a class="homelink">Home</a></li>
    ...
</ul>

E:current, E:current( s ), E:past, E:future

These selectors refer to elements relative to a time dimensional canvas, such as speech rendering of a HTML document.

E:intermediate

This selector refers to an element that doesn’t have a state. For example a checkbox or radio button that isn’t checked or unchecked.

E:default

This refers to a element that is the default out of a set of similar elements. For example, a submit button in a group of buttons.

E:in-range and E:out-of-range

This applies to an element that has a range set against it. If you remember the new element types and Validation API that’s part of HTML5 / ECMA5, you can have an input element of range and set a min and a max value:

<input type="range" min="5" max="10" />

You would then use these selectors for when you are in range of those values, or when you go out of range.

E:required and E:optional

As mentioned previously, this is part of the new element types in HTML5, and applies to elements like the following:

<input type="text" required="required" />
<input type="text" optional="optional" />

E:read-only and E:read-write

E:read-only refers to elements that can’t have there contents altered, unless they have the contenteditable attribute of the HTML5 element is set to true.

Input elements, by default have a :read-write state, although you cane make them read only:

<input type="text" readonly="readonly" />

E:nth-match( n of selector )

This works like the :nth-child selector, but you can pass a selector list to it:

div:nth-match:( odd, .list, .list2 ){..}

Which is better than doing the following, and is easier to read:

div.list:nth-child(odd), div.list2:nth-child(odd) {...}

E:column( s [,s] )

This selectors matches elements that match the selector list passed to it. Something like:

table col:column( col.active, col.selected ) {...}

E:nth-column( n )

Matches columns that has n columns before it, for example:

table col:nth-column(odd){...}

table col.nth-column(2n+1){...}

E:nth-last-column( n )

Matches columns that has n columns after it, for example:

table col:nth-last-column(odd){...}

table col.nth-last-column(2n+1){...}

E /for/ F

This selects a element F that is ID-referenced by element E’s for attribute:

label /for/ input {...}

 

<label for="myname">Name: </label>

<input id="myname" type="text" />

$E > F

This selector is one of the best one that will be in CSS4 Selectors. Using the $ sign you can change the target of the element the CSS should apply to, effectively selecting the parent based on the child. So in the following example section would be styled and not div.active:

$section > div.active {...}

Some people probably won’t think this is that amazing, but there’s probably a lot of developers that have wanted to do this for a long time, myself included. The only easy way to do this would be to use jQuery.

Conclusion.

Some of the new Selectors for CSS4 are good, some could be better, buts as its a first draft there’s room for needed improvement.

I’m not sure how I feel about the :local-link selector. I think it would be best to have :local-link(*) for all links, but I can see where they were coming from with :local-link(0), as it refers to a link with a minimum of 0 path segments. I’m just so used to seeing a * when selecting all elements.

Apart from that I can’t wait to start using CCS4 Selectors.

Latest browsers you should support

A lot of people are unsure which browsers they should support. So I thought I’d come up with a list of browsers along with any betas/alphas/PP’s people might want to support.

The Betas and Alphas are optional but are good if they will introduce something new you can check out before it becomes the latest version.

Firefox (from here)

Lastest Old: Firefox 3.6.x

Latest: Firefox 8.0.1

Beta: Firefox 9.0b2

Alpha: Firefox 10..0a2

Chrome

Latest: Chrome 15.x

Beta: Chrome 16

Safari

Safari 5.x

Opera

Opera 11.x

Internet Explorer

IE 7 (Optional)

IE8

IE9

IE10PPX (Plaform Preview Beta Shit)

The Yepnope conditional loader

Introduction

I’ve been quite interested in this for a while, so now I thought I’d write about Yepnope.

For anyone that doesn’t know what Yepnope is:

“yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need.”

You basically use it to load certain scripts, only if they are needed. It works even better when you combine it with Modernizr, if you don’t know what that is, you should check it out.

An better explanation of using Yepnope would be this: When you have a script that works with a new HTML5 technology, such as JSON, but you may also have another “polyfill” script for older browsers to support/mimic this feature. This polyfill will only get loaded if you browser needs it. The term polyfill, in programming terms, means to fill the gap of the missing technology with code that will give you that functionality.

Below is a simple example of this:

yepnope({
    test: window.JSON,
    nope: 'json2.js',
    complete: function () {
        var data = window.JSON.parse('{ "json" : "string" }');
    }
});

Even from this example, you should get an idea of how you would use it.

Using Yepnope

I love the API, its really simple as easy to understand. You can tell from the fact that the Yepnope website is only one page! Another good thing about it is that Yepnope can be called in different ways. You can pass a String, an Array, an Object, or even Array of Objects! Crazy I know. See below for some examples:


yepnope('load.js'); //String

yepnope(['load1.js','load2.js']); //Array

//Object
yepnope({
    test : Modernizr.geolocation,
    yep  : ['load.js'],
    nope : ['polyfill.js']
});

//Array of Objects
yepnope([{
    test : Modernizr.geolocation,
    yep  : ['1.js'],
    nope : ['polyfill.js']
  },
  {
    test : Modernizr.json,
    yep  : ['script.js'],
    nope : ['json2.js']
}]);

Anything that is within an object is also known as a ‘test’ object. Below is an example of what can be in a test object:

yepnope({
    test :  /* truthy test */
    yep  : /* Scripts to load if test passes, Can be String, Array, Object, Array of Objects */
    nope : /* Scripts to load if test fails, Can be String, Array, Object, Array of Objects */
    both : /* Scripts to load everytime, Can be String, Array, Object, Array of Objects */
    load :  /* Scripts to load everytime, Can be String, Array, Object, Array of Objects */
    callback : /* Callback function for when each script is loaded */
    complete : /* Callback function for when all the scripts are loaded */
});

An important thing to note is, that any scripts passed in yep, nope, load and both, can be in any of the following formats:

yep: 'json2.js' //string

yep: ['json2.js', 'othercode.js'] //array

//object
yep: {
    'json-js' : 'json.js'
}

The great thing about passing an object of resources is that you can give them a name, making it easier to refer to them in the callback function as shown below;

    callback : function( url, result, key ) {
        if( key === 'json-js' ) {
            runApp();
        }
    }

Now the best way of explaining all of the above is to show you, so here you go. Below you will see that I’m passing an array of test objects to Yepnope, each showing how advanced a test can get:

yepnope([{
    test : window.JSON,
    nope : 'json2.js',
    complete : function() {
        var str = window.JSON.parse('{"name":"tom"}');
    }
},
{
    test : Modernizr.cssgradients,
    nope : ['gradients-polyfill.js', 'support.js']

},
{
    test : Modernizr.canvas
    nope : {
        'canvas-css' : 'canvas-polyfill.css',
        'canvas-js'  : 'canvas-polyfill.js'
    },
    callback : function( url, result, key ) {
        if( key === 'canvas-js' ) {
            runApp();
        }
    }
},{
    test : Modernizr.fontface
    nope : {
        'fontface-css' : 'fontface-polyfill.css',
        'fontface-js'  : 'fontface-polyfill.js',
        'fontface-code-js'  : 'fontface-code.js'},
    callback : {
        'fontcase-js'  : function () {
            //fontface-polyfill.js has loaded
        },
        'fontface-code-js'  : function () {
            //fontface-code.js has loaded
        }

}]);

Plugins – Prefixes and Filters

Yepnope comes with some nice Plugins, and they come in the form of Prefixes and Filters. You use prefixes in front of your script/css links. Below is an example of two Prefix plugins that come with Yepnope.

One is the Css Prefix plugin, which forces the type of the file to be “text/css”:

yepnope('css!mystyles.php?version=1532'); // loads as a style!

There is also the IE Prefix Plugin, the files provided only get load for IE6 or 7:

yepnope({ load: ['normal.js', 'ie6!ie7!ie-patch.js'] // ie6 or ie7 only (on patch) });

You can also create your own Prefix / Filter plugins if you so wish. To create your own Prefix or Filter plugins, you would do something like:

yepnope.addPrefix('bypass', function (resourceObj) {
    resourceObj.bypass = true;
    return resourceObj;
});

yepnope.addFilter(function (resourceObj) {
    resourceObj.bypass = true;
    return resourceObj;
});

As you can see they basically look the same. The noticeable difference is that with Prefix plugins you need to use a Prefix on the files, whereas the Filter when its included a page will be used on all files included using Yepnope.

I’ve create my own Prefix plugins, to give a better example of this.

The following Prefix plugin for Yepnope is to check if the browser is a Mobile Device (its not perfect but you get the idea):

/*! Copyright (c) 2011 Tom Ellis (http://www.webmuse.co.uk)
* Mobile Prefix for Yepnope JS
* Licensed under the MIT License (http://www.webmuse.co.uk/license).
*/
(function(yepnope){

    var isMobile = nav.match(/ipad/i) ? true :
        (nav.match(/ipod/i) ? true :
        (nav.match(/iphone/i) ? true :
        (nav.match(/Opera Mini/i) ? true :
        (nav.match(/Opera Mobi/i) ? true :
        (nav.match(/Fennec/i) ? true :
        (nav.match(/android/i) ? true : false ))))));

    yepnope.addPrefix('mobile', function(resourceObj) {

        if( !isMobile ) {
            resourceObj.bypass = true;
        }

        return resourceObj;
    });

})(this.yepnope);

And you would use it like:

yepnope({
    load: 'mobile!script.js'
});

The second is a Prefix Plugin for adding your website address to the scripts, meaning you don’t have to type them out each time (for websites that need an absolute path):

/*! Copyright (c) 2011 Tom Ellis (http://www.webmuse.co.uk)
* Website Prefix for Yepnope JS
* Licensed under the MIT License (http://www.webmuse.co.uk/license).
*/
(function(yepnope){

    yepnope.addPrefix('mysite', function(resourceObj) {

        resourceObj.url = 'http://www.mysite.com/' + resourceObj.url;

        return resourceObj;
    });

})(this.yepnope);

And then you would use it something like:

yepnope([
    'mysite!script.js',
    'mysite!script2.js'
]);

I also created a Filter plugin for HTTPS, essentially replacing the protocol if needed:

/*! Copyright (c) 2011 Tom Ellis (http://www.webmuse.co.uk)
* Website HTTPS Filter for Yepnope JS
* Licensed under the MIT License (http://www.webmuse.co.uk/license).
*/
(function(yepnope){

yepnope.addFilter(function(resourceObj) {

    if( !resourceObj.url.indexOf('https://') && window.location.protocol == 'https:' ) {
        resourceObj.url = resourceObj.url.replace('http://', 'https://');
    }

    return resourceObj;
});

})(this.yepnope);

Summary

Yepnope is very powerful. I love how flexible it is when it comes to loading different scripts. If you haven’t used it I recommend it, you might be surprised at what it can do.

jQuery Gradient Animations Plugin

Description

The jQuery Gradient Animations Plugin is a simple plugin for allowing you to animate Css3 linear and radial gradients.

Information

Reporting Bugs

If you find any bugs please don’t comment on this page. Report any bugs through Github.

Requirements

The jQuery Gradient Animations Plugin uses two other plugins:

  • jQuery gradient cssHook. This allows you to use the W3C way of setting gradients for browsers that support it( e.g. Moz, Webkit, Opera).
  • jQuery Color v2 beta. This allows the plugin to work with colours if different formats (name, rgb, rgba, hsl, hsla).

Both these files come with the download anyway.

Versions

Current Version – 1.0

Links:

Download jQuery Gradient Animations v1.0

Github Page

Usage

Options

.animateGradient(css)
.animateGradient(css, speed)
.animateGradient(css, speed, complete)

css - Gradient you want to animate too. Must be a W3C gradient.
speed - How fast you want the animation to happen, in milliseconds.
        Defaults to 1000.
complete - A function to call once the animation has completed.

Basic Example

$(document.ready(function(){
    $('#elem').animateGradient('linear-gradient(red, blue)');
});

Advanced Example

$(document.ready(function() {
    $('#elem').animateGradient('linear-gradient(red, blue)', 400, function(){
        //Completed
    });
});

Simple as that!

jCookie – jQuery Plugin

Description

jCookie is a basic jQuery Cookie plugin. It is an easier front end for creating, modifying and deleting cookies.

Information

Reporting Bugs

If you find any bugs please don’t comment on this page. Report any bugs through Github.

Versions

Current Version – 1.1.1

Links:

Download via Github Page

Usage

Options

expires - Default: ''
          (Must be a valid date string or a number, e.g 1 for 1 day,
           If empty default to browser session, e.g gets destroyed when browser closes)
domain - Default: ''
         e.g jquery.com
path - Default: ''
       (Path of website cookie is valid on, e.g /products/ for example.com/products/
        Can be '' to default to page cookie was created on)
secure - Default: false
         (Whether you cookie is on a secure)

Basic Example


    $.cookie("cookie_name", "cookie_value",{
        path : "/", //Whole website
        domain : "example.com",
        expires : 2 //2 Days time
    });

Advanced Example


    //Set global settings for all cookies
    $.cookie.settings = {
        path : "/",
        domain : "example.com",
        expires : 2
    };

    $.cookie("cookie_name", "cookie_value");
    $.cookie("cookie_name2", "cookie_value2");

Deleting a Cookie

//Passing null to the cookie plugin will delete it
$.cookie('cookie_name', null);

Checking if Cookies are enabled

if( $.support.cookies ) {
    //Supported
}