Selectable Images Demo Part 2 (Mobile Friendly)

In part 1 of this post, I demonstrated a very simply way to make objects selectable using the jQuery UI Selectable module. Unfortunately, jQuery UI has limited support for touch events so this could make your application unusable on a mobile device.

All is not lost however, as we can make use of a fantastic, tiny plugin called “jQuery UI Touch Punch” that is maintained by David Furfero at the following URL http://touchpunch.furf.com/.

To implement touch events you simply download the minified (production) version of the plugin and reference it in your html document.

Demo

See the Pen jQuery UI Selectable Demo with Images and Touch Support by Mark Taylor (@codesnips) on CodePen.0

Code

HTML

<h1>Jquery UI Selectable Demo with Images</h1>
<p>Draw a box with your cursor to select items. Hold down the Ctrl key or drag your finger across the images to make multiple, non-adjacent selections. </p>

<div id="selectable">
  <img src="http://dummyimage.com/190x190/2c488f/ffffff&text=Image+1" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/522F93/ffffff&text=Image+2" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/882F93/ffffff&text=Image+3" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/932F64/ffffff&text=Image+4" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/6D932F/ffffff&text=Image+5" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/2F9379/ffffff&text=Image+6" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/2F7993/ffffff&text=Image+7" class="ui-widget-content" />
</div>

<p class="selected-items">You have selected the following images: <span id="selected-item-list"></span></p>

CSS

#selectable .ui-selecting {
  border: 2px dashed #ff0000;
}

#selectable .ui-selected {
  border: 2px solid #ff0000;
  -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
  -moz-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
  box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
}

#selectable img {
  margin: 5px;
  padding: 5px;
  border: 2px solid #ffffff;
}
.selected-items {
  border: 2px solid #ff0000;
  line-height: 32px;
}

JavaScript
Include the following scripts in your document.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Now include your version of the script to initiate the selectable plugin and handle the selections, I have included a simple example below.

$(function() {
  $("#selectable").selectable({
    selected: function() {
      var selectedItemList = $("#selected-item-list").empty();
      $(".ui-selected", this).each(function() {
        var index = $("#selectable img").index(this);
        selectedItemList.append((index + 1) + ", ");
      });
    }
  });
});

Selectable Images Demo Part 1

Introduction

Here is a quick example of how to create a selectable set of images. Please note this demo is only suitable for desktop browsers and is not a good solution for mobile devices. I will follow up this post with a better example that will work on both desktop and mobile browsers.

Demo

See the Pen jQuery UI Selectable Demo with Images by Mark Taylor (@codesnips) on CodePen.0

Code

HTML

<h1>Jquery UI Selectable Demo with Images</h1>
<p>Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>

<div id="selectable">
  <img src="http://dummyimage.com/190x190/2c488f/ffffff&text=Image+1" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/522F93/ffffff&text=Image+2" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/882F93/ffffff&text=Image+3" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/932F64/ffffff&text=Image+4" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/6D932F/ffffff&text=Image+5" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/2F9379/ffffff&text=Image+6" class="ui-widget-content" />
  <img src="http://dummyimage.com/190x190/2F7993/ffffff&text=Image+7" class="ui-widget-content" />
</div>

<p class="selected-items">You have selected the following images: <span id="selected-item-list"></span></p>

CSS

#selectable .ui-selecting {
  border: 2px dashed #ff0000;
}

#selectable .ui-selected {
  border: 2px solid #ff0000;
  -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
  -moz-box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
  box-shadow: 0px 0px 8px 0px rgba(255, 0, 0, 1);
}

#selectable img {
  margin: 5px;
  padding: 5px;
  border: 2px solid #ffffff;
}
.selected-items {
  border: 2px solid #ff0000;
  line-height: 32px;
}

JavaScript

$(function() {
  $("#selectable").selectable({
    selected: function() {
      var selectedItemList = $("#selected-item-list").empty();
      $(".ui-selected", this).each(function() {
        var index = $("#selectable img").index(this);
        selectedItemList.append((index + 1) + ", ");
      });
    }
  });
});

Presenting designs, concepts and projects to clients with Prezi

A couple of years ago I came across Prezi an interesting web application that allowed you to create online presentations to collaborate and share them with others. Recently I have revisited Prezi to see what’s new and I’m pretty impressed. The app is now a whole lot easier to use and has a lot of great innovative features.

About Prezi

Extract from the Prezi website:

“Prezi is a cloud-based presentation software that opens up a new world between whiteboards and slides. The zoomable canvas makes it fun to explore ideas and the connections between them. The result: visually captivating presentations that lead your audience down a path of discovery.”

The developers at Prezi are constantly designing new features to make the experience better and introduce new features. I think this is a fantastic application to use for presenting web designs, technical concepts and project updates to your clients. If you don’t mind your presentations being public then app is free to use. If you would prefer to keep your presentations private then Prezi offer 2 packages, Enjoy at $59 per year for 500mb or Pro at $159 per year for 2gb and an a desktop app to create your presentations. Students and teachers can have the Enjoy package for free and the Pro package for $59 per year.

Example Presentation

Recently I was tasked with educating a client on the current state of mobile web technology and what options were available for publishing her app. Prezi came in very handy, it allowed me to formulate my research and present my findings in a simple and easy to use web interface. Prezi has an awesome feature called Prezi Meeting that allows you to invite a user to view your presentation and have remote control of the what the user sees on their screen. This feature is great for presenting a software idea, web site design compositions and concepts over the phone.

Here is a link to my presentation on mobile technologies for 2012
(You are free to create a copy and modify this for your own use)

Handy HTML5 & CSS3 Resources

Recent projects have seen more and more HTML5 and CSS3 elements being asked for by our clients. This has led me to creating this post that lists some really handy resources for implementing these new technologies. I’ll keep adding to this post as I find new resources, so bookmark this page for future use.

HTML5

  1. HTML5 Boiler Plate Now on version 2 (released Aug 10 2011) the HTML5 Boilerplate is the professional HTML/CSS/JS template that features cross-browser normalization, performance optimizations and includes optional features like cross-domain Ajax and Flash.
  2. The Ultimate HTML5 Tutorial Collection A vast collection of tutorials and useful techniques from around the web.
  3. W3 Schools HTML5 Tutorial a simple tutorial that teaches you about the basics of the new features in HTML5
  4. HTML5 and CSS3 Tutorial by NetTuts A practical example of how to implement HTML5 and CSS3.
  5. HTML 5 Updates for .NET 4 Find out about the updates contained in Visual Studio 2010 SP1 for supporting HTML5 and CSS3.

CSS3

  1. Learning CSS3: A Reference Guide an overview that features a hand-picked and organized selection of the most useful Smashing Magazine’s articles related to CSS3.
  2. W3 Schools CSS3 Tutorial a simple tutorial that teaches you about the basics of the new features in CSS3.
  3. CSS3 Generator a useful tool by Randy Jensen that generates the following; rounded corners, box shadows, text shadows, RGBA transparencies, transitions, gradients and a whole lot more.
  4. Ultimate CSS3 Gradient Generator A powerful Photoshop-like CSS gradient editor from ColorZilla.
  5. CSS3 Button Maker A powerful tool that allows you to create fantastic looking buttons with no images.
  6. CSS3 Click Chart A visual demonstration of CSS3 in action.
  7. The Most Important CSS3 Properties Explained A good summary of the most important features in CSS3.
  8. Using CSS3: Older Browsers And Common Considerations A Smashing Magazine article that covers graceful degradation for older browsers that do not support CSS3.
  9. Create an adaptable website layout with CSS3 media queries A tutorial that will teach you how you can create an adaptable website layout using CSS3.
  10. Making HTML5 and CSS3 work with polyfills and shims A tutorial that shows you how to use the Modernizr framework to make your HTML5 and CSS3 work on older browsers.
  11. 12 Fun CSS Text Shadows Some really nice text shadow effects that you can just copy and paste into your code.
  12. 21 top tools for responsive web design Denise Jacobs rounds up 21 great tools to aid the process of making your sites responsive.
  13. Cross-Browser CSS in Seconds with Prefixr.com video tutorial by nettuts on how to use the Prefixr tool to auto-fix your CSS3 vendor prefixes.