WunderSlider – responsive proportional slider

WunderSlider is a plugin that has something extra that the most of the responsive plugins out there. You can set it to resize your images by proportions: adapts proportionally to the screen size.

The plugin has a lot of properties: 41 effects, 8 themes, 12 overlays, flexible captions, links on image and many more.

How to use:

1. Adding the external sources

<link rel="stylesheet" type="text/css" href="css/default/wunderslidermin.css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="css/default/wunderslider-iemin.css" /><![endif]-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/wunderslider-min.js"></script>

2. The markup

<div id="wunderslider"></div>
#wunderslider {
  width: 80%;
  height: 500px;
  margin: 0 auto;
}

3. Fire the plugin

(function($) {
    $(window).load(function(){
      var parent = document.getElementById('wunderslider');
      var wunderSlider = new itthinx.WunderSlider(
      parent,
      [{
        url:'images-demo/image-0.jpg',
        title:'Title for the first image',
        description:'A nice image...',
        linkUrl:'http://www.wunderslider.com/'
      },
      {
        url:'images-demo/image-1.jpg',
        title:'Second image',
        description:'Another image.'
      },
      {
        url:'images-demo/image-2.jpg',
        title:'Here is another image',
        description:'One more image.'
      } ],
      { mode: 'proportional', mouseOverPause: true }
    );
  });
})(jQuery);

Demo & Documentation

Convert px to em

When you work with responsive designs, and not only then, you need to convert various pixel sizes to em. A very useful tool is PXtoEM.com that converts px to em, or em to px, based on a base pixel size.

The website has three sections:

1. Convert

Has tables with conversion based on 16px body size and your custom body size, and a calculator for custom conversions.

2. Grab CSS

Generates normalize.css customazied for you body size that you selected on previous section.

3. Learn

This section tells you what px, em, pt and % is, regarding typography.

Adding body class for IE

If you have style to add just for some IE versions, you can add a class to the body element (ie6, ie7, ie8). This can be done without any JS, only with conditional statements for IE in the markup.

<!--[if lt IE 7]>      <body>    <![endif]-->
<!--[if IE 7]>         <body>    <![endif]-->
<!--[if IE 8]>         <body class-"ie8 oldie">    <![endif]-->
<!--[if (gte IE 9) | !(IE)]><!-->      <body>  <!--<![endif]-->

Adding swipe to jCarousel

After using jCarousel in a project, and then testing it on mobile platforms, I’ve realized that you can’t swipe through the items and this should be the expected behavior for touch devices.

The solution is to add another nice plugin that allows you to use touch events, called jQuery Touchwipe. The code should look something like this:

$('#carousel').jcarousel({
  scroll: 1;
});

$('#carousel').touchwipe({
  wipeLeft: function() {
    $('#carousel').jcarousel('next');
  },
  wipeRight: function() {
    $('#carousel').jcarousel('prev');
  },
  min_move_x: 20,
  min_move_y: 20,
  preventDefaultEvents: false
});

The preventDefaultEvents option is set “true” on the plugin page example, but it prevents you to swipe up/down for usual scroll, so if you have to scroll down or up the page where the carousel is, you can set the option to “false”.

How To Position Form Field Labels

The position of the label in a form (contact forms, registration forms, e-commerce forms) is very important for usability reasons. The best place to position a label is above the form field.

In mobile designs it is more preferable to position the label above the form field, when in portrait mode,  so that the input have the maximum size. If the label is next to the input, the width will be reduced and the user will not be able to see his own typo. For landscape mode, when the height is small, you can use labels next to inputs. Another use for this exception is when the form is really big, and the user can scan better the labels.

Labels placed inline, like a placeholder, is the worst position from a usability perspective. While the appearance of the form is lighter, the users will have difficulties filling the form,  because each field loses its context the second the user starts typing. This isn’t an issue only for filling the form, but for correcting the validation errors as well since the labels are missing. For small forms, where the form fields are known by the user, this kind of approach can be useful from a appearance perspective.

So, when creating a form, based on what should the user fill, how many times the form is encountered, how big the form is, what is your overall design, you should follow some usability rules for positioning the labels.

Targeting retina display with media query

Working at a mobile project (that includes jQuery mobile), I’ve encountered the following problem: I wanted to rewrite the default image for the checkboxes, that jQuery mobile provides. Just adding the new background like bellow wasn’t enough.

.ui-icon-checkbox-off,
.ui-icon-checkbox-on {
  background: url(/images/mobile/checkbox-off.png) no-repeat;
  -webkit-background-size: 56px 58px;
  -moz-background-size: 56px 58px;
  background-size: 56px 58px;
  width: 56px;
  height: 58px;
}
.ui-icon-checkbox-on {
  background: url(/images/mobile/checkbox-on.png) no-repeat;
}

The code above works only on normal devices, but on retina displays the css from jQuery mobile wasn’t rewritten. For that, I’ve created an image twice as big as the previous one, and used the following code:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
         .ui-icon-checkbox-off {
           background: url(/images/mobile/checkbox-off2x.png) no-repeat;
         }
         .ui-icon-checkbox-on {
           background: url(/images/mobile/checkbox-on2x.png) no-repeat;
         }
}

jQuery PowerTip

PowerTip is a jQuery plugin created by Steven Benner, that creates hover tooltips that are easy to customize, has APIs for developers, supports adding complex data.

This plugin has some unique features: checks for hover intent (the tooltip doesn’t open the moment your mouse happens to cross an element with a tooltip), tooltip queuing (when the user moves their cursor to another element with a tooltip, the last tooltip will close gracefully before the next one opens).

Features

  • simple configuration;
  • supports static tooltips as well as tooltips that follow the mouse;
  • ability to let users mouse on to the tooltip and interact with their content;
  • easy customization;
  • works with keyboard navigation;
  • smooth fade-ins and fade-outs.

Usage

This plugin requires jQuery 1.7 or later.

To run the plugin you simply use the following code:

$('.tooltip').powerTip(options);
//where options is an object with the various settings you want to override

The content of the tooltip can be set from the HTML title attribute, a HTML5 data attribute, a jQuery object or an element from the DOM.

If you want to change the default options for all tooltips, you can do that using $.fn.powerTip.defaults before you call powerTip(). Here is an example:

$.fn.powerTip.defaults.placement = 'nw'
// change the default tooltip placement to north-west
$('.tooltip').powerTip();

Demo, Documentation & Download