Creating an animated, filterable grid of items using Shuffle.js (a free alternative to Isotope, Masonry and Quicksand)

30 July 2013, Danny Connell

For a recent project, I had to create an animated, filterable grid of staff member's photo profiles (in the style of Isotope, Masonry and Quicksand).

I wanted a free solution. Masonry and Quicksand are free, and I spent a lot of time with these but had trouble setting them up. After some Googling and experimenting I found a very simple solution using the amazing jQuery plugin shuffle.js.

Check out the demo page below then I'll explain how I built it.

View demo page | Download demo page

HTML

The only dependencies we need to include are jQuery and shuffle.js:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.shuffle.min.js"></script>

Next we need some markup for the filters (that the user clicks to rearrange the grid) and the grid of items:

<ul id="filter">
    <li><a class="active" href="#" data-group="all">All</a></li>
    <li><a href="#" data-group="red">Red</a></li>
    <li><a href="#" data-group="green">Green</a></li>
    <li><a href="#" data-group="blue">Blue</a></li>
    <li><a href="#" data-group="numbers">Numbers</a></li>
    <li><a href="#" data-group="letters">Letters</a></li>
    <li><a href="#" data-group="square">Squares</a></li>
    <li><a href="#" data-group="circle">Circles</a></li>
</ul>

<div id="grid">
    <div class="item blue"  data-groups='["all", "numbers", "blue", "square"]'>3</div>
    <div class="item green" data-groups='["all", "numbers", "green", "square"]'>5</div>
    <div class="item blue"  data-groups='["all", "letters", "blue", "square"]'>D</div>
    <div class="item red"   data-groups='["all", "numbers", "red", "square"]'>1</div>
    <div class="item red circle"   data-groups='["all", "numbers", "red", "circle"]'>4</div>
    <div class="item red"   data-groups='["all", "numbers", "red", "square"]'>7</div>
    <div class="item green circle" data-groups='["all", "numbers", "green", "circle"]'>8</div>
    <div class="item red"   data-groups='["all", "letters", "red", "square"]'>B</div>
    <div class="item green" data-groups='["all", "numbers", "green", "square"]'>2</div>
    <div class="item green circle" data-groups='["all", "letters", "green", "circle"]'>C</div>
    <div class="item blue"  data-groups='["all", "numbers", "blue", "square"]'>9</div>
    <div class="item red"   data-groups='["all", "letters", "red", "square"]'>E</div>
    <div class="item blue circle"  data-groups='["all", "letters", "blue", "circle"]'>G</div>
    <div class="item blue"  data-groups='["all", "letters", "blue", "square"]'>A</div>
    <div class="item blue"  data-groups='["all", "numbers", "blue", "square"]'>6</div>
    <div class="item green" data-groups='["all", "letters", "green", "square"]'>F</div>
</div>

Note the data-group attribute on each filter link. This states which group of items should be shown when the user clicks that filter (e.g. red, green, square, circle).

The data-groups attribute on each grid item tells us which groups each item belongs to.

CSS

Next I add some CSS to style up the filters and grid items:

#container {width: 960px; margin: 0 auto;}

#filter {list-style-type: none; margin: 0; padding: 0}
#filter li, #filter a {display: block; float: left; margin: 0}
#filter a { background: #ddd; border: 1px solid #666; text-decoration: none; padding: 5px 10px;}
#filter a.active {background: yellow;}

#grid {clear: both; position: relative}
.item {width: 230px; height: 230px; background: grey; float: left; margin-right: 10px; margin-bottom: 10px; color: #fff; font-size: 60px; text-align: center; line-height: 230px; cursor: default;}
.red {background: red;}
.green {background: green;}
.blue {background: blue;}
.circle {border-radius: 230px;}

JavaScript

The JavaScript begins by initializing the shuffle plugin:

$(document).ready(function() {

    /* initialize shuffle plugin */
    var $grid = $('#grid');

    $grid.shuffle({
        itemSelector: '.item' // the selector for the items in the grid
    });

});

The itemSelector option tells the plugin which elements are the grid items.

Now to make the grid rearrange when the user clicks on a filter item:

$('#filter a').click(function (e) {
    e.preventDefault();

    // set active class
    $('#filter a').removeClass('active');
    $(this).addClass('active');

    // get group name from clicked item
    var groupName = $(this).attr('data-group');

    // reshuffle grid
    $grid.shuffle('shuffle', groupName );
});

When the filter item is clicked, first we set the active class so the user can see which filter is currenly active (lines 5 and 6).

Next we grab the group name from the aforementioned data-group attribute.

Finally we reshuffle the grid by passing the plugin the group name (line 12).

Simples!

View demo page | Download demo page

Read more

Create a "Give me directions" button using jQuery and HTML5 Geolocation

17 May 2013, Danny Connell

An upcoming mobile website required the inclusion of a "Give me directions" button. I.E. a button that the mobile user can click to see directions from their current location to a given destination.

Here is my simple custom solution.

View demo page | Download demo page

HTML

Firstly, I added a button to the page for the user to click:

<a href="#" class="get-directions">Give me directions to Reading Room Manchester</a>

JavaScript

I included jQuery, and began by creating variables for the starting location and destination:

$(document).ready(function() {

    var startingLocation;
    var destination = "reading+room+manchester"; // replace this with any destination

});

Next I attach a click event to my button:

$('a.get-directions').click(function (e) {

});

Within this click function, I use HTML5 geolocation to calculate the user's latitude and longitude, combine these two values into a string, and send the starting location and destination to a function:

// check if browser supports geolocation
if (navigator.geolocation) { 

    // get user's current position
    navigator.geolocation.getCurrentPosition(function (position) {   

        // get latitude and longitude
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        startingLocation = latitude + "," + longitude;

        // send starting location and destination to goToGoogleMaps function
        goToGoogleMaps(startingLocation, destination);

    });

}

Finally, within the goToGoogleMaps function, I send the user to Google Maps, along with the query needed to get the directions:

// go to Google Maps function - takes a starting location and destination and sends the query to Google Maps
function goToGoogleMaps(startingLocation, destination) {
    window.location = "https://maps.google.co.uk/maps?saddr=" + startingLocation + "&daddr=" + destination;
}

Fallback for browsers without Geolocation

What if the user's browser doesn't support Geolocation? Or they selected 'no' to the prompt asking to use their location? I wanted it to still work. Upon clicking the button, the user would be presented with a warning, along with a text input. The user could then manually enter their postcode, click the button and still get directions.

Here is the HTML for the warning and input (this is hidden by default in the CSS):

<div class="no-geolocation">
    <p class="warning">Your browser does not support Geolocation. Please enter your postcode and click the button again.</p>
    <input type="text" placeholder="Enter postcode or address" class="manual-location">
</div>

And here is the JavaScript for the fallback:

// get manually entered postcode
startingLocation = $('.manual-location').val();

// if user has entered a starting location, send starting location and destination to goToGoogleMaps function
if (startingLocation != '') {
    goToGoogleMaps(startingLocation, destination);
}
// else fade in the manual postcode field
else {
    $('.no-geolocation').fadeIn();
}

View demo page | Download demo page

Read more

Notepad++ Color Scheme for Sublime Text 2

2 August 2012, Danny Connell

After several years of editing my HTML, PHP, JS, CSS (and every other type of) files with the fantastic Notepad++, I recently switched to (the even more fantastic) Sublime Text 2. I will be writing a detailed article on my reasons for the switch soon. In the meantime, this color scheme might help you take the jump too.

Although there are many things I love about Sublime Text 2, one thing I couldn't get cosy with was the built-in (syntax highlighting) color schemes. I missed the color scheme from Notepad++, so decided to rebuild the theme for Sublime Text 2.

The following images show the same file open in Notepad++ and Sublime Text 2 (with the Notepad++ theme). There are a few subtle differences as you can see, but I'd say it's pretty darn close and you'll barely notice the difference (at least for HTML, JS, CSS editing anyway).

Notepad++

Notepad++

Sublime Text 2 - with Notepad++ Color Sheme

Sublime Text 2 - with Notepad++ Color Sheme

The color scheme is based on this color scheme from jQuery 4u.

This was a good start (thanks Sam!), but had many color differences from the default Notepad++ scheme, which I've (hopefully) fixed!

Installation (for Windows Vista/7):

  • Save the Notepad++ Color Scheme for Sublime Text 2 (.tmTheme file) to the following folder:
    C:\Users\[your username]\AppData\Roaming\Sublime Text 2\Packages\Color Scheme - Default
  • In Sublime, choose from the menu Preferences > Color Scheme > Notepad++
  • To seal the deal, go to Preferences > Settings - User.
  • Add the following lines before the last bracket in the file and save:
    "font_face": "Courier New",
    "highlight_line": true,
    "line_padding_bottom": 1,
    "line_padding_top": 1

Shout up if you find any glaring problems with the color scheme that you want me to fix.

Enjoy!

Read more

Right click > "Add new website template" in Windows 7

1 August 2012, Danny Connell

      Like many developers, I have a website template that I use as a starting point for every web project I do, whether it's a client project, or just a quick demo page.

This is made up of an index.html file, along with a folder named assets which contains folders for css, fonts, images and js and some respective files therein.

I find myself using this template more and more frequently, and every time I must: open Explorer, navigate to my template folder, then copy and paste it to the location I'm currently working in.

Bit of a ballache!

Wouldn't it be great if I could just right click anywhere and have an option to create a new website folder right there?

Here's how!

  • Press Win Key, type regedit and hit Enter to launch the registry editor
  • Navigate to HKEY_CLASSES_ROOT > Directory > Background > shell
  • Right click on shell and choose New > Key
  • Enter the name NewWebsiteTemplate and hit Enter
  • On the right hand pane, double click (Default)
  • In the text field, enter New website template (or whatever you want it to say on the right-click menu).
  • Right click on NewWebsiteTemplate and choose New > Key
  • Enter the name Command and hit Enter
  • In the right-hand pane, double click (Default)
  • Enter the following text, replacing the first path with the path where you keep your template (I keep mine in a dropbox subfolder so that I always have an up-to-date copy wherever I am):
    xcopy "C:\Dropbox\website template" "%V\New website template\" /E
  • Hit Enter

Registy editor - Right click > Add new website template in Windows 7

And that's it! Alternatively, you can save the following file, open it, change the first path to the path of your template, save it and double click it to apply the registry changes.

Download registry file

If anyone can make this better and add the option to the right click > New menu, please shout up!

Read more

Notify - simple, lightweight notifications using jQuery

29 June 2012, Danny Connell

I'm currently working on a project with tonnes of advanced jQuery functionality where performance is of utmost importance. Therefore I'm avoiding the use of plugins and keeping my code minimal and optimized.

I needed a simple way to display four types of notification (information, success, errors and warnings).

There are several plugins available that are fit for this purpose, but I needed something ultra-lightweight and ultra-fast.

So I knocked up Notify. To use it on your page, you just need to add 12 CSS rules, a single JavaScript function and no images.

To make a notification appear, just use a single line of JavaScript like this one:

notify('Your information was saved successfully!', 'success');

Check out the Notify page

Read more

Scroll to any element using jQuery

12 March 2012, Danny Connell

In today's front-end landscape of responsive, mobile-friendly sites, I'm finding a frequent need to scroll the user (either up or down) to various different elements on the page. This article will show you a simple, lightweight way to do this...

'Back to top' buttons, 'Jump to menu' buttons, 'Jump to widget' links... there are now all sorts of situations where you would want to smoothly scroll the user to a certain element on the page.

There has been a jQuery plugin around for quite a while that can accomplish this, Arial Flesler's ScrollTo.

This is a wonderful plugin that allows you to scroll in all sorts of different ways.

However, if all you want to do is scroll up or down to an element, by using a selector, then you may prefer this lightweight function:

function scrollToElement(selector, time, verticalOffset) {
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('html, body').animate({
        scrollTop: offsetTop
    }, time);
}

Here's how you might use it to scroll to an element with an ID of 'content' when the user clicks a 'Jump to content' button:

$('a.jump-to-content').click(function () {
    scrollToElement('#content');
});

You can also specify the duration of the scroll animation (in miliseconds):

scrollToElement('#content', 500); // scroll the element #content, and take 500ms to get there

And you may also want to specify a vertical offset. The following will scroll the user to 150px above the #content element:

scrollToElement('#content', 500, -150); // scroll to 150px before the element #content, and take 500ms to get there

Show me the god damn demo page already.

Read more

Developing an iPhone App using HTML, CSS, JavaScript and PhoneGap - From Concept to App Store

1 August 2011, Danny Connell

Speed Distance Time CalculatorHi. I'm a front-end web designer/developer by trade. When I first heard that I could develop iPhone apps using my existing skills (HTML, CSS, JavaScript), I couldn't wait to get stuck in. Having just got my first app, Speed Distance Time Calculator into the App Store, I thought I'd share an overview of my journey, right from coming up with a concept, through to going live in the App Store.

I feel this sort of overview would've been very helpful to me before I started.

I'll discuss the technologies and resources I used to build a web-app, how I converted the web-app into a native app, submission to iTunes and many of the stumbling blocks and realisations I had along the way.

Read more