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) + ", ");
      });
    }
  });
});

Creating budget RWD sites with CSS frameworks

Recently I was asked to create a responsive site for a friend’s Sleaford Plumber company. For those not in the know, responsive web design (RWD) can be defined as follows:

RWD is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries, an extension of the @media rule.

Wikipedia

RWD development takes significantly longer than a traditional desktop site, so I took this side-project as an opportunity to see how much development time can be saved using some of open source frameworks available.

Requirements

This project was relatively straightforward and fortunately, my client had a very clear idea of what he wanted on the site:

  1. Introduction section
  2. Gallery
  3. Breakdown of the services he offers
  4. Contact details
  5. Contact form

My client did not have enough content to create a page for each section; therefore, I proposed a single page site. This approach would also make the development process simpler and the site would feel pretty snappy on a mobile device as all the content has been loaded in the initial page download.

Methodology

Next, I wanted to select an HTML/CSS/JavaScript framework to provide a head start on the project and keep the development time to a minimum. After a bit of research I narrowed the choice down to the following:

  1. Twitter Bootstrap version 3
  2. Zurb Foundation version 5
  3. Skeleton
  4. HTML KickStart

On the face of it they all appear to have very similar facets:

Twitter Bootstrap

Bootstrap is very popular (some might say too popular) and it’s easy to see why, the documentation is very clear, the code is well written and it contains tonnes of features. All the User Interface (UI) elements are consistently styled and follow a standardised coding pattern. The support for Bootstrap is impressive, a large number of community projects have sprung up to extend the framework and provide tooling. The community support is why Bootstrap becomes my number 1 choice for building my client’s one-page, responsive website.

Zurb Foundation

Foundation appears to be a pretty awesome project, it’s been around for a while now but version 5  has just been released this week (21st November 2013). Unlike Bootstrap (that uses the LESS CSS pre-processor), Foundation uses Libsass, a new, super fast Sass pre-processor. If you prefer the Sass syntax then foundation is well worth looking at.

Foundation touts itself as “The most advanced responsive front-end framework in the world” this is a pretty bold claim; however, as it’s the most recent release of any of the Frameworks then I guess it’s plausible. One of the biggest improvements in the latest version is the inclusion of Interchange, a JavaScript image handler. Interchange uses CSS3 media queries to dynamically load responsive content (images, video) at an appropriate size for the users’ device. This is a fantastic development and something I can’t wait to try out.

Skeleton

Skeleton is a more lightweight solution. As the name suggests, it’s a stripped down CSS framework that only provides some base styles to get your project started. If I was working from a Photoshop design where the design wasn’t based on a consistent grid layout, I would definitely consider starting with Skeleton. With complex designs, the bare-bones approach may be simpler to code rather than try and force a design into a more fully featured framework.

HTML Kickstart

HTML kick-start appears to be a lot like Bootstrap, superficially it’s difficult to see what makes it different. However, I actually prefer KickStart’s website. The site is a lot more user friendly and it’s very tempting to download and get stuck in. HTML Kickstart offers the most bang for your buck, it comes with an impressive amount of elements but is also a pretty lean solution (no bloat here). Definitely one to try out.

Conclusion

With the advent of RWD, building sites from scratch offers the developer the most control; however, this comes with a significant cost in terms of dev time. CSS frameworks have come a long way in the last couple of years, they offer the developer a substantial head start allowing them to concentrate their efforts on the other aspects of the project. Alternatively, using a framework means you can offer clients a fully responsive site in a similar price range to a traditional fixed layout site.

When it comes to selecting a framework, it’s really down to personal preference. I would personally recommend any of the frameworks above as they are all well designed, easy to implement and flexible. For my friends Sleaford plumber website, I selected Bootstrap as it has the largest community support. Zurb Foundation would have been my first choice but at the time of selection it was on version 4. Now that version 5 has been released I’m really looking forward to trying this out on my next side-project.

Cannot access namespace or class inside App_Code folder

Occasionally you may come across an issue in Visual Studio 2010 where you place a class inside the App_Code folder but you cannot seem to get a reference to it or the namespace from the rest of your application.

Apparently this is down to a project setting in Visual Studio. To resolve the issue, right click your project icon in solution explorer and select Convert to Web application.

Web Application Administration Tool – An error was encountered MySQL

Today I received this error when setting up new user using MySQLMembershipProvider for the ASP.NET membership framework:

  • Web Application Administration Tool – An error was encountered

Unfortunately the Web Application Administration Tool does not provide a great deal of assistance when the provider fails. I find the simplest way to resolve these issues is to set up a basic web page containing an asp:CreateUserWizard control and run the application to see if the .NET runtime returns a better error message.

In my case, the problem was with the password format in my Web.config. Switching the format from encrypted to hashed solved the issue.