Matthew Riches

Chrome Extension Tutorial: Highlighted Text Used to Send AJAX Request to Remote Server and Display Results

matthew — Mon, 01 Apr 2013 13:18:58 +0000

Creating a Google Chrome extension is actually pretty straight forward as you can utilise your existing knowledge of HTML and JavaScript (and even jQuery) when creating the extension.

This tutorial is based on the No Fuss Reviews extension I published and the full source can be downloaded here.

Whether you work from the source or from scratch the first thing you should do is create a folder to hold your extension (or unzip the download from above) and learn how load the unpacked extension into Chrome. To do this, open the extensions menu of Chrome and tick “Developer Mode” on at the top of the page.

This will show additional options, but the one you should focus on is the “Load Unpacked Extension…” button; clicking this will allow you to load an extension by selecting a folder on your computer, if you downloaded the source point it towards the freshly unzipped folder – now you can edit the files and click the reload button after each change to see your changes.

Manifest

The first thing an extension needs is an manifest file called “manifest.json”, the manifest file for this project looks like this…

{
   "background":{"page": "background.html"},
   "browser_action": {
      "default_icon": "t.png"
   },
   "content_scripts": [ {
      "js": [ "jquery.js", "my.js" ],
      "matches": [ "http://*/*", "https://*/*" ]
   } ],
   "description": "Get scores out of ten for any video game, highlight any text on any web site, hit 'n' and scores will be displayed.",
   "icons": {
      "128": "T128.png",
      "16": "T16.png",
      "48": "T48.png"
   },
   "name": "No Fuss Reviews",
   "permissions": [ "tabs", "http://www.nofussreviews.com/*" ],
   "version": "1.1",
   "manifest_version": 2
}

The format of this file is JSON so all the parts are encapsulated in parentheses and arrays with square brackets. First up is the background page declaration, this page is required for specific events, in this extension to launch a new tab from a button in the browser – its also useful for debugging as when in developer mode you can click the background page link to show the developer console which will list any errors.

Browser action adds specific functions to the Chrome browser, “default_icon” adds an icon to the tray at the top right of the browser. The location of the file is relative to the extension so “t.png” will be located in the root of the extension.

Content scripts includes the scripts you require for your extension to operate, in this example I’m loading in jQuery and “my.js” which contains all of my custom functionality, all of which are stored in the extension directory. The matches array contains values as to where the scripts can be run for example “http://*/*” allows the scripts to run on any domain on any webpage the user may be on.

The description parameter is the description of your plugin as shown in the extension list and used by Google in the store as the bold part of your description – it can only be 132 characters long, so keep it snappy.

After this icons are declared and again these are stored locally, these are used both in the store and in the extension for example on the extensions list page within the browser. The image sizes should match to their values (128, 48 and 16) and the images should be in PNG format ideally with transparency.

The name is the overall name of the extension as shown in the extension list and on the store.

The permissions part is used to set specific action permissions, in this extension the permission is set to allow the extension to open up a specific domain name in a new tab, specifically in this extension when you click the icon at the top right it will open the site.

Lastly the version is your own versioning of your plugin and must be higher each time you upload a new version to the developer console. The manifest version is the version of the actual “manifest.json” file and in this example must be version 2 due the layout used.

Background Page

The background page is required if you need to perform browser actions such as opening new tabs or showing information when you click the extension icon. It seems strange but the background page in this extension does nothing but load a script but without this page it will not work.

The page is stored as “background.html” as designated in the manifest file and all this page does is load a script called “background.js”. The background JavaScript file also includes not a lot:

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.create({'url': "http://www.nofussreviews.com"});
});

This Chrome script simply adds a listener to the extension’s icon and creates a new tab with the URL as specified.

My.js

The “My.js” file is called in the manifest file, you can call as many scripts as you like and call them whatever you like, it really doesn’t matter. In this extension the “My.js” file contains all of the workings of the extension and is detailed below.

$(document).ready(function(){
    selection = new Object()
    make_popup()
});
function make_popup(){
    $('body').append('')
    $('#nfr-chrome-popup').css({
        'font-family': 'Verdana',
        'font-size': '12px',
        'color': 'black',
        'display': 'none',
        'z-index': '1000',  
        'position': 'absolute', 
        'top': '0px', 
        'left': '0px',
        'text-align':'left'
    })
};
$('body').mouseup(function(e){
    selection.x = e.pageX + 20
    selection.y = e.pageY + 10
    selection.text = window.getSelection().toString()
});
$('body').keypress(function(event){
    if (event.keyCode == 110){
		if((selection.x+360) > ($(window).width())) {
			var popupLeft = parseInt(selection.x-320);
		} else {
			var popupLeft = selection.x;
		}
        if (selection.text != ''){
            $('#nfr-chrome-popup').css({'top': selection.y, 'left':popupLeft, 'width': 350 +'px' })
            $('#nfr-chrome-popup').html('')
            $('#nfr-chrome-popup').show()
            chrome.extension.sendRequest({highlighted: selection.text }, function(response) {
				querySite(selection.text);
            });
        }
    } else{
        $('#nfr-chrome-popup').hide()
    }
});
$(document).on('click','#nfr-close-popup,#errorclose',function(){
    $('#nfr-chrome-popup').hide()
});	
function querySite(term) {
url = "http://www.nofussreviews.com/chrome.php?q="+term;
	$.get(url)
     .success(function(data) {$('#nfr-chrome-popup').html('');
      $('#nfr-chrome-popup').html(data);})
     .error(function(jqXHR, textStatus, errorThrown) {$('#nfr-chrome-popup').html('An error occured, please try again.
close');});	
}

For anyone familiar with JavaScript and jQuery this file should make for very light reading, but I’ll break down each section anyway.

First up a “document ready” bind is created.

$(document).ready(function(){
    selection = new Object()
    make_popup()
});

This bind creates a new object to hold the selection information (the information the user is going to select on the page, highlighting text or double clicking a word) and secondly a function is called to create a popup. This popup is appended to the bottom of the page so it can be manipulated as required, here’s the function:

function make_popup(){
    $('body').append('')
    $('#nfr-chrome-popup').css({
        'font-family': 'Verdana',
        'font-size': '12px',
        'color': 'black',
        'display': 'none',
        'z-index': '1000',  
        'position': 'absolute', 
        'top': '0px', 
        'left': '0px',
        'text-align':'left'
    })
};

As discussed first up the function appends a new “div” element to the body of the page, this element will always exist but the CSS added changes the display to “none” so it won’t show. Its important that if you used ID’s or classes you keep them very specific to prevent them from clashing with styles that might already be on the page the user is looking at, in this extension everything has the prefix of “nfr”. The rest of this function is used to set some initial styles of the popup ensuring it has a high “z-index” and that it’s positioned absolutely.

Next up we have a bind on “mouseup” so when the user finishes clicking (useful for when something has been selected).

$('body').mouseup(function(e){
    selection.x = e.pageX + 20
    selection.y = e.pageY + 10
    selection.text = window.getSelection().toString()
});

The bind is attached to the body and the function stores the position of the selection (it seems to be the end of the string, and we add an offset) and the actual selected text.

Now the big one:

$('body').keypress(function(event){
    if (event.keyCode == 110){
		if((selection.x+360) > ($(window).width())) {
			var popupLeft = parseInt(selection.x-320);
		} else {
			var popupLeft = selection.x;
		}
        if (selection.text != ''){
            $('#nfr-chrome-popup').css({'top': selection.y, 'left':popupLeft, 'width': 350 +'px' })
            $('#nfr-chrome-popup').html('')
            $('#nfr-chrome-popup').show()
            chrome.extension.sendRequest({highlighted: selection.text }, function(response) {
				querySite(selection.text);
            });
        }
    } else{
        $('#nfr-chrome-popup').hide()
    }
});

This bind itself listens for all key presses and firstly checks the character that was pressed. In this example its character “110″ which is a lowercase “n”.

    if (event.keyCode == 110){

Next is a simple condition to check that the popup won’t go off the edge of the page and set a variable called “popupLeft” either way. The width of the popup is fixed to 350 pixels so we add the selection x coordinate (which is the end of the string) to a fixed integer of 360 (just to allow a little room) and check to see if this resulting value is bigger than the overall screen width; if it is we detract a fixed value of 320 pixels and if not keep it as it is.

		if((selection.x+360) > ($(window).width())) {
			var popupLeft = parseInt(selection.x-320);
		} else {
			var popupLeft = selection.x;
		}

After this a simple condition to ensure the selection text is not empty is performed, so we can continue if it indeed holds something.

if (selection.text != ''){

So if there is selected text the next thing we do is move the popup div “nfr-chrome-popup” to the correct position (remember it was already created on document ready) also including the “popupLeft” variable to make sure it appears entirely within the viewport.

 $('#nfr-chrome-popup').css({'top': selection.y, 'left':popupLeft, 'width': 350 +'px' })

After this we load some default content into the div which will be overwritten later on, in this case I’ve simply added an animated loading GIF.

$('#nfr-chrome-popup').html('
')

After the default content has been added, we simply show the div so the user can see the loading animation.

$('#nfr-chrome-popup').show()

The last part of this function is the most important part and is the Chrome specific script that calls a new function to deal with the highlighted text.

chrome.extension.sendRequest({highlighted: selection.text }, function(response) {
				querySite(selection.text);
            });

This snippet will call the function named “querySite” and pass over the actual string for the selected text. This function uses basic jQuery to perform an AJAX call and is as follows:

function querySite(term) {
    url = "http://www.nofussreviews.com/chrome.php?q="+term;
    $.get(url)
            .success(function(data) {
                $('#nfr-chrome-popup').html('');
                $('#nfr-chrome-popup').html(data);
            })
            .error(function(jqXHR, textStatus, errorThrown) {
                $('#nfr-chrome-popup').html('An error occured, please try again.
close');
            });	
}

The first part of this function is to set an URL variable for the AJAX call to use, I’m using a get parameter with the remote server so the selected text is simply added to the end of the URL string.

url = "http://www.nofussreviews.com/chrome.php?q="+term;

This variable is then directly used in a jQuery get request.

$.get(url)

Its important that you include both a success and error part to the GET call, this way if something goes wrong (such as your server goes down) you can deal with it. The success part of this GET call firstly empties the contents of the “nfr-chrome-popup” div and then fills it with whatever the remote server returns.

.success(function(data) {
     $('#nfr-chrome-popup').html('');
     $('#nfr-chrome-popup').html(data);
})

The error part of this get call captures all the error data (but doesn’t use it, but could) and fills the “nfr-chrome-popup” div with some static HTML stating that an error has occurred.

.error(function(jqXHR, textStatus, errorThrown) {
    $('#nfr-chrome-popup').html('An error occured, please try again.
close');
});

One of the snippets I skipped over is the bind to close the popup window.

$(document).on('click','#nfr-close-popup,#errorclose',function(){
    $('#nfr-chrome-popup').hide()
});

This bind uses the new jQuery “on” syntax and importantly binds to the document, the reason for this is that because the elements are created dynamically as they are called in via AJAX it needs to see these new elements as they pop into the DOM. The elements “nfr-close-popup” and “errorclose” are both loaded in dynamically the “nfr-close-popup” is part of the content returned from a successful AJAX response and the “errorclose” element is added in as static HTML on error as described above.

The content returned by the server can be previewed here, as you may notice in the source the content includes all of the styles needed baked right into the response, this is so tweaks can be made without having to update the extension.

When your plugin is completed, all you need to do is ZIP the whole folder up, pay Google $5 and upload it to the developer console.

Well that’s it, a simple plugin that allows users to highlight text, sends the text to a remote server and creates a popup with a response, simple huh?

If you have any questions or comments please feel free to pop them in the comments box below.

Art Slideshow

matthew — Sat, 12 Jan 2013 14:44:13 +0000

I was going to showcase a video here me and my friends on Facebook have been putting together showcasing some of the best digital art and photography from around the web – unfortunately some of the artists have stated they don’t want to be featured…so here’s a video of 5 people playing “Someone I used to know” instead.

http://www.youtube.com/watch?v=d9NF2edxy-M

20,000 Video Game Scores in One PDF

matthew — Sat, 22 Dec 2012 18:21:41 +0000

One of the sites I help provide scores for is No Fuss Reviews, a site that simply gives you a mark out of ten for any game – in particular retro games.

The database has just hit the 20,000 mark, so I’ve taken the liberty to compile all 20,000 scores into one PDF that you can take around with you. Being a PDF means you can easily search within the document on your phone or tablet making it the perfect companion for when you’re browsing the video game stores and need a little help or are after some hidden gems (or you could just use the site www.nofussreviews.com which has a mobile version.)

The PDF can be downloaded here, so consider it an early Christmas present.

Within the document you’ll find scores from games as early as 1972 to the Wii U - that’s a whopping 40 years worth of games in one document. I just hope you find this document as useful as I do and some of your favourites are listed.

Feel good videos

matthew — Tue, 20 Nov 2012 09:24:16 +0000

We all have our own collection, but here’s my selection off videos that no matter how many times I watch, always make me smile. They are funny, clever or just epic and all well produced.

If you are ever in a bad mood and need cheering up, these are sure to help.

Epic Rap Battle of Manliness

Just hearing the first few lines of this video makes me grin, “I was bornnnnn with hair on my chest…” take a listen and you’ll see what I mean.

http://www.youtube.com/watch?v=_EzDRpkfaO4

Its very well produced, the lyrics are eloquent and tails of nicely towards the end, all-in-all one of my favourite videos.

Ultimate Dog Tease

There is something about putting human voices to animals that just makes me smile, this video is done perfectly and the emotions of the dog seem almost scripted – its both clever and humorous and certainly brings out the child in me.

http://www.youtube.com/watch?v=nGeKSiCQkPw

People Are Awesome

If there is something that can really motivate you, its seeing what people can actually achieve. The montage below blows my mind at what some people have the courage, skill and time to practice doing – it really is people being awesome and I love it.

http://www.youtube.com/watch?v=Vo0Cazxj_yc

Epic no?

If thereis a video you think I should check out, let me know below.

What if Wipeout was taken up by…

matthew — Sun, 18 Nov 2012 18:44:18 +0000

The closure of Studio Liverpool by Sony was an event close to my heart. Not only do I know people that worked at the studio and its former incarnation Psygnosis, but I have grown up with the Wipeout games, even going out of my way to purchase devices that feature an entry in the series.

I would love to see the games continued, the games that demanded precision piloting while gorgeous graphics from the futuristic landscapes rushed pass your eyes while Techno notes and beats filled your senses…so what would happen if a different studio bought the Wipeout license – and what would the game be like?

Evolution Studios

Famed for the Motorstorm series of games, a Wipeout game from ES would certainly be a different affair. The landscapes would be varied, racing over sandy desert scenes, molten rock erupting from a nearby volcano, tropical forna, snow and maybe even water events. The ships would be fully destructible to the point of seemingly being made from LEGO and the pilots would fly through their cockpit windows after every small knock.

A key point to the game, would be that smaller nibbler ships could carry far less fire power while the juggernauts of this future World could carry an armada of weaponry, so you would need to race accordingly.

Criterion Games

Sticking with the destructible theme, Criterion Games famed most favourable for Burnout Paradise and more recently Need for Speed Most: Wanted; the game would be a open world affair with a mix of race styles. The cost of ships would go through the roof as destruction would be at a premium, new ships could be obtained through winning events and the insurance on floating futuristic billboards would be at a all time high.

The mix of Wipeout in an open World city style could be very enjoyable, a mix up the series enough to gain new fans and completely new directions of play style. Lets just hope the anti-grav biker fuzz wouldn’t catch up to us…

ThatGameCompany

Flower, Journey and Flow are all titles by ThatGameCompany. Driven by emotion, a Wipeout game would work on the same principal as the Planet Express ship, you wouldn’t control the ship but instead move the World around it.

Your ship would develop upgrades and materialise additional parts as you overtake other racers, the game would look stunning and focus around overcoming natural events such as storms or earthquakes in bid to evolve into the perfect ship.

Bethesda

A game from Bethesda would entail a lot less racing a more procuring parts, new ships and kitting them out. You would mingle with the locals, explore the futuristic cities and hang out in racer bars.

When racing did start every time you fired a weapon the game would pause and you could target separate parts of enemy ships; providing you had driven over enough blue pads for action points of course.

The game would play pretty much the same, but every different ship would need to be purchased as DLC.

From Software

The Wipeout games are not known for being easy, however if From Software took over the reigns they would be almost impossible.

The first race your ship would spontaneously explode and you’d have to spend the rest of the race walking until you can find a key to unlock a garage to speak to a man who could give you the information on where to find someone that might help if you find a new ship if you supply him with fifty mystic plasma coils.

Polyphony Digital

More of a traditional choice, Polyphony Digital (PD) most well known for the Gran Turismo series would take almost a decade to make a new Wipeout game, but when released would look amazing. The game would feature over 1,000 different ships and almost as integral as the racing component of the game, the modifying and improving of your ship could be a game all onto itself. Second hand ships could be purchased and you could even teach an AI driver all your skills to have him or her race in their own events to earn your team money.

Damage would feature on a selection of random ships with the same going for internal cockpit views, you would end up spending most of your winnings on repairing your ships and buying ammo.

Media Molecule

Mm would have to get a mention here, as a Wipeout game where you could build the courses, your own ships and power-ups would be pretty amazing. The only downside would be that the gravity would be rather floaty and ships would tend to bounce of walls and the track rather than slam into walls in a fiery and spark fuelled inferno.

An interesting mode could consist of a top down approach when the player would need to build the track from raw materials as the ships raced, ensuring to place down blue speed pads and weapon pads in strategic parts to aid your driver and not the others in a slowed down pace. All of this could be watched back in real-time after the race has finished.

At any point you would be able to pause and rewind just in case you cut a hole in a piece of cardboard by mistake.

So, what studio am I missing, let me know in the comments section below.

The Laminated List

matthew — Thu, 15 Nov 2012 10:48:13 +0000

We all kinda-of have one, a top list of celebrities we really like above all others. Mine has been extremely difficult to create and just like Ross only consists of five entries. Still I found it hard to pick five and for a long while only had two as I have to like both their manner and personality. I believe beauty is the combination of both the outward and inward appearance of someone.

People have fallen straight off my list just by the way they act, and others have flown upward by simply being funny and kind-hearted.

I also think my list encompasses the 5 distinct categories ~~people~~ women tend to get pigeon holed into, if only they could all me merged together huh?

1) The Classy One: Amanda Righetti

The star of The Mentalist in my eyes is Amanda. She is both stunningly beautiful but always carries this off with an unprecedented level of class. Not only this, but Amanda dedicates a lot of her time to charity work including but not limited too Animal Rescue organisations.

In interviews she shows a clear head that’s confident yet humble, her experience in acting always shows and her quick wit is unmatched. She is beautiful inside and out and it shows.

2) The Sexy One: Olivia Munn

There is no doubt Olivia is sexy and she know’s it. Only a quick search on Google images will reveal numerous raunchy images. Being both an actor and comedian means she also seems to be a great laugh, somewhat apparent from her frequent cosplaying.

She also features heavily in the techie side of the Internet appearing on “Attack of the show” amongst other features and site videos, but recently has appeared acting again in the show The Newsroom where both her skills at acting and comedy are put through their paces with success.

3) The One That Can Move: Beyonce

If you were to pick any celebrity that could really move, Beyonce would most likely pop into your mind. Being flexible and able to dance is an understatement, she can pull shapes most of us couldn’t draw – she may be a little on the crazy side but her voluptuous nature makes her an easy choice for this list. Her signing is excellent, and depending on which one of her personalities you are talking to she can be rather humble and respectful also able to carry a decent conversation.

She also is known for helping others break into the industry together with her partner.

4) The Funny One: Taylor Swift

Taylor Swift is a new entry to my list, I have always thought she was pretty (and rather innocent) but it was only recently when I saw interviews on TV that discovered she is really funny, something that clearly comes over in her music videos.

She was able to provide related jokes, witty come-backs and dry-wit; something me as a Brit could really appreciate, so much so she had be laughing out loud at some points (which is rare). So being very pretty, very funny and witty places her at number four on my list.

5) The Girl Next Door: Hayden Panettiere

To be honest (I suspect like most people) I hadn’t heard of Hayden before the excellent but disappointing towards the end of the series Heroes.

Hayden for me embodies the girl next door, sweet and innocent enough to fit the bill, but not so much that you wouldn’t have fun hanging-out with her. She has only appeared in a handful of films and TV shows but still dedicates a lot of her time to great foundations and charities like “The Whaleman Foundation” and the Ronald McDonald House Charities.

Her kind nature, natural beauty and friendly manner earns her the fifth place on my list.

So that’s it, my laminated top 5, what do you think? How right am I?

Super Humans, Terry Crews and Fareast Movement

matthew — Wed, 14 Nov 2012 09:16:46 +0000

One of the things I actually like about TV are the adverts, I think advertisements are an excellent convergence of creativeness and objective. Over the last few months there have been some stand out advertisements for me, one viral, one featured during the Olympics and the other and interactive affair – all are excellent however.

Channel 4 Paralympics - Meet the Superhumans

As the Olympics drew to close the Paralympics began. I’m more of a fan of the latter, seeing what people can achieve haven gone through such hardship shows extreme dedication and true courage and commitment, the Channel 4 advert embodies this perfectly.

http://www.youtube.com/watch?v=vavJK1McHUo

The advert is expertly crafted and delivers a powerful and emotional message that really makes something inside of you stir. The cinematography is perfect and the song chosen a perfect fit. There is not a single thing wrong with this advert and the message of meeting the super-humans is spot on.

The Dirty Bass Boombox Sessions

If you wanted to promote the L.A. Dance Institute in a creative and fun way, this is the way to do it, get the Fareast movement involved.

The video is fun, creative and highlights the exceptional dance being taught. Humour is punctuated throughout the video and really makes for a great viral piece.

Old Spice Muscle Music

The old spice adverts never seem to let you down. Their newest viral advert starring Terry Crews is no exception. The video is pure unadulterated fun, it makes no sense and doesn’t have to; it just makes you smile with its craziness.

The thing that tips this viral video from awesome to epic is the fact you can interact with the player and make you’re own music “Sausages! don’t worry, you’ll answer the reference once you’ve hit a few buttons.

When Do Games Become Art

matthew — Tue, 13 Nov 2012 19:34:11 +0000

A while ago Roger Ebert commented that video games would never be art and even expanded on his reasoning an article despite never having explored the medium.

But the point still remains, when do video games become art and with a World filled with chopped up cows and hanging light bulbs – are video games already art?

First of all what is art defined as, the common definition is as follows:

The expression or application of human creative skill and imagination is quite encompassing, by this logic a bridge, a signature and even medical surgery could all be classed as art.

However an important point that I feel should receive further highlighting is that in definition art needs to be appreciated primarily for its beauty or emotional power (who’d thought that Amanda Righetti could technically be classed as art). This is where the line becomes hazy, often games look beautiful but few games are able to emotionally affect you.

Art is the appreciation of human creativity in a way that interests others. With modern art this can often include making overly detailed creations, pieces that make you stop and think about its meaning often which question society or humanity and forms that are abstractly expressive.

Under Rated

Often because of their nature, video games are classed as nothing more than just that, games. Within the last decade we have seen a shift in perspective, where games are often accepted as entertainment in much the same way a book or film is. Games made now often have budgets, staff even screenplay almost directly comparably to big budget films but yet are not treated as so.

Games are more often than not designed and constructed to form pieces of rounded entertainment with the objective to keep the player engaged and in some cases addicted to its realm.

Often accomplished by targets, objectives and levels to reach, games take advantage of the common human trait of competitiveness, something that is cast into our genome. Therefore it is difficult to class any such game as art when its main aim is to entertain us and not to display creative skill.

This doesn’t mean that games aren’t beautiful in their own right, it simply means that art is not their purpose.

Along the same lines games will often use emotion to create a bond with the player and characters within a game. This normally isn’t done to extend beyond the screen but instead engage and engulf the player into the World of the game and connect with its characters, again this is an extension to game-play to ensure the game leaves a lasting mark and that players feel they must complete the story as they feel a connection to their digital persona.

When emotion is key

Shadow of Colossus is often heralded as a game closely resembling art. Despite still encasing similar mechanics the reason it is chosen it because of the emotion involved.

The core of the game is to create a strong tie to your character. There are no towns, or enemies (other than Colossi) no other characters or dungeons to roam or chat to. It follows a story of a young man trying to restore life to a beautiful girl.

http://www.youtube.com/watch?v=DazoTQaqJrs

The game has a distinctive art style, puzzle like challenges and emotional sound track.

Players will often tell you the game moved them in some way, referring to the emotional rollercoaster supplied; a direct outcome of the creativity the developers crafted to convey such as message.

To the Moon is another exceptional example of how the video game medium extends just entertainment. In To the Moon you travel through the memories as a doctor of a dying man to try and furfil his last wish. Not only is the game beautiful constructed it is moving and a story that is worth hearing, if written down in some form it would surely heralded as art.

http://www.youtube.com/watch?v=Xi2UZrnGXQo

My Final example is a title called The Unfinished Swan, resembling a traditional game players explore the unknown and literally paint their path onward. The game is a surreal adventure of a boy chasing a swan who has wandered. Only through the throwing of paint are the surroundings and the environment revealed.

http://www.youtube.com/watch?v=xFfteZaAXq4

When speaking to art lovers they will often tell you that a book was able to show things about themselves from flaws to positives. People that watch artistic films will convey how the medium dragged them into the feelings of the director and thoughts and desires they never knew they had.

From this respect games seem very similar, often what artists forget is that game players of today treat a control pad as an extension to themselves often completely ignoring the connection is there. When this is the case, could games actually be a transcendent of art?

A film is something you watch, a book you read and painting you admire. A game can be all of these things but also involve the viewer in a way traditional art cannot; it can react to the user and the user can react to the game.

Consider that a film is a story to be told, the viewer becomes engaged with the film investing in its plot and believing the emotions and feelings displayed in front of them. Now consider that like any good pieces of art that a film is open to interpretation, giving different messages to different people at different levels.

A game can perform all of this but moreover the user can interact in a way that emotion can be heighten as your decisions affect the outcome and your actions change the story. A game places the player into the movie screen where the story is told around you, where as a movie is told in front of you.

Demoscenes

With the recent reinvention of Demoscenes from yesteryear, items such as Linger in Shadows are quite possibly the closest to art in its traditional sense a video game can be.

Linger in Shadows is barely a game, it could be better described as an interactive art piece, and just like any important piece of art, it polarised its audience dramatically. But according to definition does it tick all the boxes?

Expression and application of human creative skill and imagination
Primarily appreciated for its beauty or emotion

Well, it’s certainly expressive. Telling an interpreted story of the dangers that lurk within us all and how time is often wasted with procrastination. But the very fact that every one who has experienced the ‘game’ has a different view on its meaning further extends its case of being art, abstract and modern.

It also shows the application of human creative skill, thanks to the beautifully drawn and rendered objects and scenes in the game. Imagination is also not lacking here using fuzzy and direct symbolism to push your mind from rational to existential.

Finally is it widely appreciated for its beauty or emotion, well no. The only reason it is not, is because we are asking ourselves if it is art. Our own question is our own answer, video games will never be art if we keep wondering if they are. This is where the problem lies, our own insecurities about what is classed as art is the very thing that is preventing us from expanding this area.

A personal view

From a personal view I sincerely believe that video games are often overlooked and under-rated as an art form. When I think of games like Flower and Heavy Rain I remember how the emotion fuelled the game or the beauty and creativity made the game more a spectacle than a challenge.

With games such as “journey”, I feel as the generations become older, we will see more types of art emerge with emphasis on digital creation and maybe only then will the hidden gems of today be realised.

64 Useful jQuery Snippets

matthew — Tue, 13 Nov 2012 16:50:45 +0000

This list is a useful combination of frequently used functions, useful to know snippets and ways to use jQuery (with some JavaScript thrown in) effectively.

The syntax highlighter can be a bit temperamental at times, so if the code doesn’t work, check there are no extra html entities – and of course leave comments below.

1. An AJAX Call On Click
This snippet will bind a click to the element with id “button”. The click function then fires an AJAX call. The request is sent to the URL string “/ajax/test.html”, the response is placed in the object called “data”, since the response type hasn’t been specified it will default to text. The resulting data is then added inside the element “result” using the html function to ensure it is added and rendered as HTML, using the text option “text(data)” would add the result as plain text.

$("#button").on("click", function(e){
    $.ajax({
        url: '/ajax/test.html',
        success: function(data) {
            $('#result').html(data);
        }
    });
});

2. Prevent a form submitting on errors
This snippet will bind the submit of the form with the id of “myform”, if you only have one form on the page you could simply use just “form”.

The submit function will first create a local variable called errors. Next for each matching input, textarea and select box it finds, it will check if the length of the value is equal to zero. If it is, it will add the class of “error” and increment the error variable.

Finally it will check if the error variable is still set to zero, if it is it returns true allowing the form to submit, if not it will prevent the default action of the form and return false, preventing the form from submitting providing JavaScript is enabled of course

You would remove the error class based on validation for the input separately.

$("#myform").submit(function(e) {
    e.preventDefault();
    var errors = 0;
    $("#myform input, #myform textarea, #myform select").each(function(index, element) {
        if($(this).val().length == 0) {
            $(this).addClass("error");
            errors++;
        }
    });
    if(errors == 0) {
        return true;
        $("#myform").submit();
    } else {
        return false;
    }
});

3. Toggle a set of Checkboxes on or off
For each checkbox with the class of “checkbox”, (you could also use “input[type=check]” to match it), it will set the checkbox to the opposite to what it is currently set to by using the exclamation modifier.

$(".checkbox").each(function(index, element) {
    $(this).attr('checked', !$(this).attr('checked'));
});

4. Perform an action when a specific keyboard key is hit
This one is quite a simply one. The bind is place on the “keydown” event of the element, we capture the whole event into an object in this example called “e” so we can interogate it.

Inside the function, we check the “keycode” of the event, in this case we check for the key code of the down arrow and perform a specific action. You can change the key code to whatever you want (just Google the key code for the key you are after) or add more. Be aware that some operating systems may pass different codes for special keys.

$('input').keydown(function(e){
    if (e.keyCode == 40) {
        console.log("you sunk my battleship");
    }
});

5. Move multiple background images with the mouse to create depth
This snippet binds to the mouse moving and captures the coordinates. In then makes these values into a percentage before multiplying them by minus 1 to ensure the backgrounds flow in the correct direction for prospective (you don’t have to do this if you want to inverse the effect.)

Separate values are created using different divisions to create different speeds of movement. The values are then applied to separate elements changing the position of their background images, this creates the effect.

$(document).mousemove(function(e) {
    var x = ((e.pageX/$(window).width())*100)*-1;
    var y = ((e.pageY/$(window).height())*100)*-1;
    var pos = (x/80*-1)+"% "+(y/80*-1)+"%";
    var pos2 = (x/3+60)+"% "+(y/3+60)+"%";
    var pos3 = (x/5+30)+"% "+(y/5+30)+"%";
    var pos4 = (x/2+60)+"% "+(y/2+60)+"%";
    $("#background").css("background-position",pos);
    $("#midground").css("background-position",pos2);
    $("#foreground").css("background-position",pos3);
    $("#flare").css("background-position",pos4);
});

6. Go old skool and make text alternate colours
First setup your on and off styles.

.off {color:blue;}
.on {color:red;}

Then, just toggle the classes at a set interval. The element must start with one of the classes for this to work. You can change the timeout depending on how trippy you want the effect to pie and how quick you want your browser to crash.

setInterval(function() {
    $(".on").toggleClass('on off');
}, 1000);

7. Stop the screen scrolling when a popup is open
This one is more CSS than jQuery, but here you go. Create a class that hides all overflow. When your popup appears ensure it is fixed or absolutely positioned and fits within the window (best to use percentages).

.fix {
overflow:hidden;
}

Then just call this snippet any way you like to toggle this class on the body to stop the window being scrolled and call it again to allow it to be scrolled.

$(body).toggleClass("fix");

8. Fade between images
First up, you’ll need some HTML for the images

#wallpaper img {
position:fixed;
top:0px;
left:0px;
}

This function will first count how many images there are to derive a total. Text it will determine the current image which is visible and pinch its position from the rel attribute (you could pragmatically do this however this way means they don’t have to be in the order they are written).

Next the function determines the next image to show by adding one and checks there is a next image to show, if not resets to 1. Finally it fades between the current image and the next image. For this to work the images will need to be position on top of each other as shown in the CSS.

function animateWallpaper() {
    var total = $("#wallpaper img").length;
    var liveWallpaper = $("#wallpaper img:visible").attr("rel");
    var next = parseInt(liveWallpaper)+1;
    if (next > total) {
        var next = next-total;
    }
    $("#w"+liveWallpaper+", #w"+next).fadeToggle(5000);
}
var timer = setInterval("animateWallpaper()", 15000);

9. Action when user stops moving over a target (hints)
Sometimes you want to be able to fire an action or show a hint if a user stops moving over a target for a set period of time, here’s the snippet.

This function will monitor the movement of the mouse over the element with the id box. It uses a timer for this, so when the user stops moving their mouse over the element upon which they have been moving it, the function “thread” is fired. This function clears all existing timeouts with the same name and counts for two seconds before firing the event; in this case it makes the box black.

$('#box')[0].onmousemove = (function() {
    var onmousestop = function() {
    $('#box').css('background-color', 'red');
}, thread;
    return function() {
        $('#box').css('background-color', 'black');
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 2000);
    };
})();

10. Make links look active based on the current page URL
Sometime you may not want to add in active classes by hand, but instead have these dynamically set based on the pages URL. This could also be used to deactivate links that lead back to the page you are on.

var url = document.URL;
$('a[href="'+url+'"]').addClass('active');

11. Make links offsite automatically open in a new window
This snippet will add in a target of “_blank” if your site isn’t found in the href. Of course this only works if you use full links, although could be modified to do both full and relative.

var site = location.protocol + '//' + location.host;
$('a').not(':contains(site)').click(function(){
    this.target = "_blank";
});

12. Test if an image is loadable and load it
Checking if an image can be loaded is quite simple using jQuery, just attempt a load via the standard methods. This snippet will check if the image can be loaded then add it to a specific element. In this case a new tag has been created, however this can be changed to existing images.

var imgsrc = 'http://placekitten.com/200/300';
$('').load(function () {
    console.log("image loaded!");
}).error(function () {
    console.log("couldn't load image");
}).attr('src', imgsrc);

13. Alphabetically order a list of values
It far nicer to have a list ordered alphabetically.


	cloud
	sun
	rain



	cloud
	rain
        sun

The jQuery to sort the list. Currently it just looks at a single ul, but changing the “ul” selector in both places will allow you to target the list you require.

var items = $('ul li').get();
items.sort(function(a,b){
    var keyA = $(a).text();
    var keyB = $(b).text();
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
});
var ul = $('ul');
$.each(items, function(i, li){
    ul.append(li);
});

14. Write a custom selector to save time
Creating your own selector is very easy, and useful to do if there is something you are regularly looking for. This snippet will create a selector that filters what you select to only those that contain integers over ten, the example colours it red.

$.extend($.expr[':'], {
    //name of your special selector
    gtTen : function (a){
        //Matching element
        return parseInt($(a).html()) > 10;
    }
});

$(document).ready(function() {
    $('td:gtTen').css('background-color', '#ff0000');
});

15. Quick way to check if an element exists
Doesn’t get quicker than this.

if ($("#elementid").length) {
    // exists
}

16. Open the print dialogue
This will work for the majority of people including those without printers.

$('.print').click(function(e){
    window.print();
    preventDefault(e);
    return false;
});

17. Animate an object from left to right
Animation in jQuery is a powerful feature, as a primer this is a short snippet on how easy it is to move an object from the left to the right of the screen. This snippet will animate a sprite one hundred percent from the left. If this object is position relatively it will be 100% of what ever its held within, if absolutely 100% of the screen.

$("#sprite").animate({
    left: "+=100%"
}, 2000);

18. A digital clock
This snippet creates a 12 hour time based on the client machines local time. It will then add this string to the element with the id of “clock”.

function clock() {
    var currentTime = new Date;
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();
    currentMinutes = (currentMinutes && lt; 10 ? "0" : "") + currentMinutes;
    currentSeconds = (currentSeconds && lt; 10 ? "0" : "") + currentSeconds;
    var timeOfDay = currentHours && lt;
    12 ? "AM" : "PM";
    currentHours = currentHours && gt; 12 ? currentHours - 12 : currentHours;
currentHours = currentHours == 0 ? 12 : currentHours;
    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
$("#clock").text(currentTimeString);
}

myCounter = setInterval(function () {
    clock();
}, 1000);

19. Slide content in and out
Sometimes is nice to be able to slide additional content in and out if a user clicks a more info button, slide toggle is perfect for this.

In this snippet given that you bind an event to the read more button, slide toggle will allow you to slide in and out the extended content based on the faux id placed in the href value. Slide toggle is useful as it will show or hide content based on its current state.

This is some content, read more

var target = $(this).attr('href');
$(target).slideToggle("slow");

20. Clone an element
In this snippet, clicking an image within an element with the id of “clonebox”, the image will be cloned and added to the end after all other images. Cloning can be useful for such things as form elements, where users can add additional information.

$("#clonebox img").on("click", function(e) {
    $("#clonebox img:first").clone().appendTo("#clonebox");
});

21. Loop through an array
In this snippet, an array is created of cat names, then using jQuery’s each function, the names are appended to the element with the id of “litterbox” preceded with the number of its position in the array (plus one, as for users having a position of zero would be confusing). A comma is appended if there are more array elements to add and a fullstop if not.

var cats = ["Mr Moggles", "Mindy", "Patch", "Socks", "The Destroyer", "Lily", "Alfie", "Bob"];
$.each(cats, function (index, value) {
    $("#litterbox").append(index + 1 + ". " + value);
    if (!(index == len - 1)) {
        $("#litterbox").append(", ");
    } else {
        $("#litterbox").append(".");
    }
});

22. Automatically link Twitter mentions
Although barely jQuery this little snippet will match whole words that start with an @ sign and convert them to links to twitter using the username in question. Using the replace feature of JavaScript the Regular Expression used could be changed to match all sorts of things.

var text = $("#content").html();
text.replace(/\B@([\w-]+)/gm, '@$1');

23. Bad at CSS? Use jQuery to make all column heights match
This simple snippet will loop through all of the elements with the class of “col”. It will set the “max” variable to the highest height it finds. One the each loop has finished it then sets all of the columns to this height.

var max = 0;
$(".col").each(function(){
    if ($(this).height() > max) {
        max = $(this).height();
    }
});
$(".col").height(max);

24. Get named access to all of the URL parameters
This snippet again doesn’t use a great deal of jQuery, but does give you quick access to variables in the URL. In this example the snippet logs the contents of the “id” value in the URL.

$.params = function(name){
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (!results) { return 0; }
        return results[1] || 0;
    }
console.log($.params ('id'));

25. Disable the enter key
Similar to binding specific keys, you can also prevent certain keys from performing their normal action. In this case you can prevent the enter key (key code 13) from doing anything within a form. Of course “form” can be switches to anything you like, just for laughs try assigning it to “body”.

$("form").keypress(function(e) {
    if (e.which == 13) {
        preventDefault(e);
        return false;
    }
});

26. Validate someones age
Often you will want to age gate certain content. You would need to also perform this check server side, but in a user friendly manner you can also check their age while they complete a form. This snippet will fire when the element with the id of “checkage” is clicked, and will look for values in elements with the id’s of “day”, “month” and “year”. In this example if the age is found to be less that 18 and alert is triggered.

$("#checkage").on("click", function(){
    var day = $("#day").val();
    var month = $("#month").val();
    var year = $("#year").val();
    var age = 18;
    var mydate = new Date();
    mydate.setFullYear(year, month-1, day);
    var today = new Date();
    today.setFullYear(today.getFullYear() - age);
    if ((today - mydate) < 0){
        alert("Sorry, only persons over the age of " + age + " may enter this site");
    } else {
        alert("Welcome in!");
    }
});

27. Highlight text nodes on a page that contain a specific string
Sometimes it would be useful to the user to highlight full text nodes that contain a specific term. In this example the function is run for the term “jquery” and the results stored in a variable called matches, then each of these matches is given a yellow highlight.

$.fn.egrep = function(pat) {
    var out = [];
    var textNodes = function(n) {
    if (n.nodeType == Node.TEXT_NODE) {
        var t = typeof pat == 'string' ?
        n.nodeValue.indexOf(pat) != -1 :
        pat.test(n.nodeValue);
        if (t) {
            out.push(n.parentNode);
        }
    } else {
        $.each(n.childNodes, function(a, b) {
            textNodes(b);
        });
    }
};
this.each(function() {
    textNodes(this);
});
    return out;
};

var matches = $('body').egrep(/jquery/i);
for (var i = 0; i < matches .length; ++i) {
    void($(matches [i]).css('background', 'yellow'));
}

28. Detect browsers
Although no browser detection can be fail-safe, using jQuery makes it super easy to find the browser and its version, then you can do as you please with the information.

if( $.browser.safari ) {
    console.log("any version of safari");
}

if ($.browser.msie && $.browser.version > 6 ) {
console.log("IE7 and above");
}

if ($.browser.msie && $.browser.version < = 6 ) {
console.log("What the hell, IE6 or below");
}

if ($.browser.mozilla && $.browser.version >= "3.5" ) {
console.log("Firefox 3.5 or higher");
}

29. Parse XML
Parsing XML in jQuery is so easy you’ll wonder how you lived without it. In this example “xml” is a variable that contains all of the XML data. The powerful each function then finds each instance of book and logs its attribute named “author”.

$(xml).find("book").each(function() {
    console.log($(this).attr("author"));
});

30. Reload all Iframes
Using the jQuery each function, this snippet will refresh each iframe on the page.

$('iframe').each(function() {
    this.contentWindow.location.reload(true);
});

31. Delay Fading
The delay function can be used to create delays between fading, in this example the element will start of hidden while the delay is running for 3 seconds, fade in over 1 second, again delay while visible for 5 seconds before fading out over 1 second. This sort of action could be useful for informative messages. Of course a mix of effects can be used with delay.

$("#element").delay(3000).fadeIn(1000).delay(5000).fadeOut(1000);

32. Dynamically Change the stylesheet
Assuming your style sheet is the second one one on the page (after your reset style sheet of course) targeting the screen as its media type, this small snippet will change it.

$('link[media='screen']:nth-child(1)').attr('href', 'ie.css');

33. Animate Anchor Movement
Sure anchors are cool, they jump straight to the relevant matching id of anchor name on the page, but how about animating them?

This code will target all anchors, that is, links that start with a hash, and then animates to that point on the page over 1 second. If you fancy the anchor to be more middle of the page you could always divide the height of the window by two and add this to the top offset…

$('a[href^="#"]').on('click', function () {
    var anchor = $(this).attr('href');
    $('html,body').animate({scrollTop: $(anchor).offset().top}, 1000);
});

34. Disable the right click context menu
Sometimes if designing a web app, the context menu can really break the flow, other times you may want to replace the context menu. Although this won’t work in every browser, this snippet will try to prevent the context menu from showing.

$(document).bind('contextmenu', function(e) {
    e.preventDefault();
    return false;
});

35. Remove the Default Text from Input Boxes
Often you will want to blank the default text currently in the box so the user can type their input, and if they leave the input with a blank value put it back in. This snippet does that for every element with the class of “swap” and which has a value to begin with.

swap_val = [];
$(".swap").each(function(i){
    swap_val[i] = $(this).val();
    $(this).focusin(function(){
        if ($(this).val() == swap_val[i]) {
            $(this).val("");
        }
    }).focusout(function(){
        if ($.trim($(this).val()) == "") {
            $(this).val(swap_val[i]);
        }
    });
});

36. Find the Closest
Sometimes you will simply want to find the closest item to a given selector, maybe to manipulate it, highlight it or even remove it. In this snippet when a strong element is clicked (that’s bold to you old skoolers) it will add the class “highlight” to the closest strong element it finds.

$("strong").click(function(){
    $(this).closest("strong").addClass(".highlight");
});

37. Get Siblings
Sometimes you just want to select all of the siblings of a specific element, well there is already a function for that.

$("#mydiv").siblings().css('background-color', 'red');

38. Remove an Option from a Select List
If you need to remove a specific option from a select list this is easy achieved in jQuery. Its worth noting that its better to remove than hide them, as not all browsers will actually hide an option within a select list.

In this snippet the option with a value of “cat” will be removed.

$("#mylist option[value='cat']").remove();

39. Zebra Tables Rows
Often to make tables more readable you will want to alternate the row colours. Using jQuery selectors its easy to target odd or even rows. In this snippet odd rows are added a class of “odd”, the “odd” class can be any style you want, a subtle green “DAD” is always nice.

$("tr:odd").addClass("odd");

40. Count Direct Children
Often its advantageous to now how many direct children there are of a given element; often because of logic or calculation. This snippet shows how quickly you can accomplish this, the variable “rugrats” will contain the integer of direct children.

var rugrats = $("#foo > div").length

41. Check if Cookies Are Enabled
Did you know JavaScript can read and write cookies? No? Shame on you. This snippet checks if cookies are enabled by created one and then checking to see if it was created, of course this all goes to pot if JavaScript is disabled.

A date is first created, then 60 seconds of lead time added. A cookie is created with the formatted date string as the expire date. Next a check is performed to see if “cookietest” exists, if it wasn’t created the condition matches and you can perform you logic.

$(document).ready(function() {
    var dt = new Date();
    dt.setSeconds(dt.getSeconds() + 60);
    document.cookie = "cookietest=1; expires=" + dt.toGMTString();
    var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
    if(!cookiesEnabled){
        //cookies are not enabled
    }
});

42. Move Options Between Two Select Lists
Often you will want lists to dynamically change given certain criteria. In the snippet below buttons with the ids of both “add” and “remove” will add the selected option from list one to list 2 and the remove option will remove the selected option from list 2 and add it to list 1.

$(document).ready(function() {
    $('#add').click(function() {
        !$('#select1 option:selected').appendTo('#select2');
    });
    $('#remove').click(function() {
        !$('#select2 option:selected').appendTo('#select1');
    });
});

43. Get the Current URL
Often valuable information, getting the current URL is a JavaScript affair but still very useful.

$(document).ready(function() {
    var fullurl = window.location.pathname;
});

44. Get a Users IP Address
There are lots of APIs out there that can determine a users IP address based on the material passed in simply requested a page. This function uses the jSON IP app found at appspot to provide an IP address of your user. Remember IP addresses are not very accurate and a better suited for determining a broad location such as state or if you speak English – county.

This snippet posts a call to the address expecting JSON as the response and then alerts the IP address value from the response.

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
    alert( "Your ip: " + data.ip);
});

45. Make a Number Pretty and Separate it with Commas
Although this should be done server side, if you are really stuck you can do this in JavaScript. The snippet below will the delimiter as set in the “delimiter value”, and add it in every third place. Changing some like 103459 to 103,459.

var delimiter = ',';
$('#result').html()
.toString()
.replace(new RegExp("(^\\d{"+($this.html().toString().length%3||-1)+"})(?=\\d{3})"),"$1" + delimiter).replace(/(\d{3})(?=\d)/g,"$1" + delimiter);

46. Count Lines in a Textarea
Useful for formatting or checking if a user is angry, counting the number of new lines in a textarea can be useful information. The following snippet splits the value of the textarea text into a array by both new lines and carriage returns and then sets the variable “total” to the number if items in this array.

var text = $("#textareaId").val();
var lines = text.split(/\r|\r\n|\n/);
var total = lines.length;

47. Validate a Credit Card Number
Credit card numbers must conform to a specific algorithm known as the Luhn-10. This function will validate against the number passed to it “ccnum” reversing this process until it errors. The function will return true or false depending on whether the number is valid or not. Of course this function only checks the number, all other checks will have to be handled separately, and of course this should be done for user indication not validation.

function isCreditCard(ccnum){
    if (ccnum.length > 19)
        return (false);
        sum = 0; mul = 1; l = ccnum.length;
        for (i = 0; i < l; i++){
            digit = ccnum.substring(l-i-1,l-i);
            tproduct = parseInt(digit ,10)*mul;
            if (tproduct >= 10) {
                sum += (tproduct % 10) + 1;
            } else {
                sum += tproduct;
            }
            if (mul == 1) {
                mul++;
            } else {
                mul–;
            }
    }
    if ((sum % 10) == 0) {
        return (true);
    } else {
        return (false);
    }
}

48. Add wmode Cross-Browser to Embed Code
Although embedding Flash is rather superseded now with HTML5 video, having Flash embedded without a wmode value set can cause it to float above all objects. This cross-browser script will add the wmode attribute and tag to all the embed tags it finds. It will also wrap embed code that doesn’t have an outer tag (such as object) inside a div to try and prevent the tag from breaking other elements and the ability to style is easier.

("embed").attr("wmode", "opaque");
var embedTag;
$("embed").each(function(i) {
    embedTag = $(this).attr("outerHTML");
    if ((embedTag != null) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; (embedTag.length > 0)) {
        embedTag = embedTag.replace(/embed /gi, "embed wmode="opaque" ");
        $(this).attr("outerHTML", embedTag);
    } else {
        $(this).wrap("");
    }
});

49. Check if Action was Native
Sometime it can be useful to tell whether a specific event was native event (such as a user clicking an anchor) or triggered (such as a bind to an anchor that override the default action).

In this snippet whenever an anchor is clicked, it will check to see if additional client variables were passed, if they were is sets the “jstrigger” values to false and if not sets it to true. Its up to you how you use this information, an example could be to react differently depending on if a click was performed by the user it triggered from a function.

$('a').click(function(event, triggered) {
    if (triggered) {
        var jstrigger = false;
    } else {
        var jstrigger = true;
    }
});

50. Display the First Feedburner Entry
jQuery is very good at searching strings. This example performs an AJAX “get” of a specified Feedburner feed, in this case the PS3 Attitude feed. Next it will find the relevant information from the first instance of tags matching the string “pubDate”, link tag, and description tag and set the corresponding elements with the ids “date”, “title” and “description” to be populated.

A quick way to display fresh information from a syndication source.

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "http://feeds.feedburner.com/ps3attitude",
        success: function(data){
            $("#date").text($(data).find("item:first>pubDate:first").text());
            $("#title").html(""+$(data).find("item:first>title:first").text()+"");
            $("#description").html($(data).find("item:first>description:first").text());
        }
    });
});

51. Exclude the Current Element
Sometimes you want to select everything apart from the current element that has been clicked, changes or any other event you have bound. The snippet below first puts all anchors in a jQuery variable, then the click function explicitly states not to target “this” referring to the relevant source of the event – useful for example if you want to highlight all other links.

var $allAnchors = $("a");
$allAnchors.click(function() {
    $allAnchors.not(this).css("color", "red");
});

52. Provide Fallback if CDN fails
Its great to be able to use a CDN to serve up your jQuery; it ensures speed and reliability, but often it would be nice to have a fallback, you know, just in-case.

Good’ol JavaScript to the rescue! The below snippet includes the jQuery via CDN and then uses JavaScript to check if jQuery exists, if it doesn’t it includes a local copy of jQuery instead.

53. Konami Code
If you don’t know what the Konami code is, shame on you and move to 54.

var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
$(document).keydown(function(e) {
kkeys.push( e.keyCode );
if (kkeys.toString().indexOf(konami) >= 0 ) {
$(document).unbind('keydown',arguments.callee);
// do something awesome
$("body").addClass("konami");
}
});

54. Password Strength
As a more complicated snippet, the code below binds to the element with the id of “pass”. It will perform a number of regular expressions and length checks. Based on the length and complexity (uppercase, lowercase and non alphanumeric characters) it will populate the element with ID “passstrength” a word describing the passwords strength, this being “strong”, “medium” or “weak”. If the password has less than 6 characters it will add the message “more characters”.

$('#pass').keyup(function(e) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
    $('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
    $('#passstrength').className = 'ok';
    $('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
    $('#passstrength').className = 'alert';
    $('#passstrength').html('Medium!');
} else {
    $('#passstrength').className = 'error';
    $('#passstrength').html('Weak!');
}
return true;
});

55. Persistent Headers on Tables
Often when scrolling you would like for the table header to say static while the user is scrolling down the table or even pieces of content to remain static. The below function will target elements that have the class “persist-area” and ensure the element inside with class “floatingHeader” remains static at the top of the area until the user has scrolled pass.

It achieves this by cloning the header after the user has scrolled passed it and adds the class of “floatingHeader”. This class fixes to the top of the section using “position:fixed” and remains there until the table has been scrolled completely through at which point its hidden. All of this is achieving by performing caluclations on the offset of the sections, to determine how far down the section is from the top of the page, how tall it is and when the height and offset of the section is scrolled pass hides the header.

.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
}

function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".floatingHeader", this)

if ((scrollTop > offset.top) &amp;amp;amp;&amp;amp;amp; (scrollTop < offset.top + el.height())) {
floatingHeader.css({
"visibility": "visible"
});
} else {
floatingHeader.css({
"visibility": "hidden"
});
};
});
}

$(function() {
var clonedHeaderRow;
$(".persist-area").each(function() {
clonedHeaderRow = $(".persist-header", this);
clonedHeaderRow
.before(clonedHeaderRow.clone())
.css("width", clonedHeaderRow.width())
.addClass("floatingHeader");
});

$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});

56. Make the whole item clickable
Often you will create menus in a list. If a user clicks the list instead of the anchor inside (especially if you have lots of padding) it would be nice to still execute the link (you could also use CSS to do this).

In this snippet “find” is used to located the anchor inside the element clicked and the link is opened using “window.location”.

$("ul li").click(function(){
//get the url from href attribute and launch the url
window.location=$(this).find("a").attr("href"); return false;
});

57. Makes Images Grey Scale
Want to make your pictures gray scale without having to open up PhotoShop, jQuery and some HTML5 can do that.

function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}

//Make all images on page Greyscale!
$('img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function()
{
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});

58. Shorten Links With Bit.ly
Often its useful to be able to shorten links, here’s a function that will do just that.

function get_short_link($url)
{
$bitly_login="yourloginname";
$bitly_apikey="yourapikey";
$api_call = file_get_contents("http://api.bit.ly/shorten?version=2.0.1&amp;longUrl=".$url."&amp;login=".$bitly_login."&amp;apiKey=".$bitly_apikey);
$bitlyinfo=json_decode(utf8_encode($api_call),true);
if ($bitlyinfo['errorCode']==0)
{
return $bitlyinfo['results'][urldecode($url)]['shortUrl'];
}
else
{
return false;
}
}

59. Refresh an image

Sometimes its useful to update an image with client-side technology to ensure its the latest version, by appending a random number to the end you can easily achieve this. The snippet below will add a random number to the end of every single image source on the page.

$("img").attr('src', $("img").attr('src') + '?' + Math.random());

60. Remove selected text with a double click

In some circumstances you may want a user to be able to delete selected text by double clicking the selection, this can easily be made to happen.

function clearSelection()  {
    if(document.selection && document.selection.empty) {
           document.selection.empty();
  } else if(window.getSelection) {
    var sel = window.getSelection();
          sel.removeAllRanges();
}
}

$(element).bind('dblclick',function(event){
    //do something
    clearSelection();
});

61. Easy sequential fade
Using jQuery’s each command you can sequential fade in images (well increase their fade time) with jut a simple piece of math.

The below snippet works by using the curren index of the each loop. It will times the index number (starting at one) by a thousand. So the first image will wait 1 second to fade in, the second image 2 seconds and so on…this creates a faux delayed fade effect.

$("img").each(function(i) {
$(this).delay(i*1000).fadeIn();
});

62. Cancel an AJAX request
Did you know much like timers, you can also cancel AJAX events, the below snippet will abort the request assigned to the object called “reg”,this can be used in any way you see fit – its useful to combine it with a page on unload event.

var req = $.ajax({
type:     "POST",
url:     "someurl",
data:     "id=1",
success: function(){
//something
}
});
//Cancel the Ajax Request
req.abort()

63. Detect iPad orientation
Using the built in orientation change in the Safari browser for iPad, you can detect the change from landscape to portrait and vice-versa and make changes appropriately.

window.onorientationchange = detectIPadOrientation;
function detectIPadOrientation () {
    if ( orientation == 0 ) {>
alert ('Portrait Mode, Home Button bottom');
} else if ( orientation == 90 ) {
alert ('Landscape Mode, Home Button right');
} else if ( orientation == -90 ) {
alert ('Landscape Mode, Home Button left');
} else if ( orientation == 180 ) {
alert ('Portrait Mode, Home Button top');
}

64. Specifically detect Apple devices
Using the built-in navigator user agent you can detect the presence of iPhone, iPod or iPad. This isn’t 100% reliable but in nearly all cases will work fine.

jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
// mobile code here
}});

Well that’s it from me.

Finally…a change

matthew — Mon, 12 Nov 2012 15:27:44 +0000

I finally got around to updating my site, but it hasn’t been easy. You know how changing one thing creates two problems and then trying to fix those two problems creates four problems and so on, well changing my site was a bit like that.

By the way I hope you like the new feel, I’ve essentially trimmed it down and made the content the focus, placing all the content in a single column so its easy to consume – and don’t worry, a mobile version will be arriving for the site as well, bespoke of course as I don’t want to make things too easy.

Anyway, I went to update WordPress to the latest version, and problem one occurred the version of PHP I was running wasn’t compatible with the latest version of WordPress. Fine, so I ran yum update PHP – that was a bad idea. Don’t get me wrong it worked, PHP was running the latest flavour but other stuff started falling over. In for a penny in for a pound I decided to run a global yum update, boy almost 300 packages (which reminded me of this video).

So anywho a lot of things got updated and some of the updating actually solved most of the problems I had, but two pieces of software refused to work, these being the important Plesk software and ‘AtMail’ the email software I used on one of my domains.

It turns out that updating everything also updated OpenSSL, and Plesk didn’t like this, downloading an RPM fix from Parallax and installing this cured that problem quiet quickly. The AtMail problem was more serious however, as it was dependant on legacy PHP functions, so the best solution I came up with was to dump AtMail and switch over the Horde instead, it was only one site using this software anyway – and I didn’t lose any email, awesome.

So lesson to be learnt, backup everything (as I always do, honest) and don’t expect simple tasks to have simple solutions.