Tag Archives: css

Very simple CSS/HTML/jQuery numeric spinner control

Here’s a simple numeric spinner control that you might find useful. This is a stripped down verson of a control we created for our soon to be released Doozy CMS. The appearance can easily be altered in the CSS – we’ve used this size & look in many of our other controls for consistency.

In the interests of simplicity, there’s no hover effects, input validation or min/max limits in place in this example but it’s trivial to implement these & I’ll leave it to you to do so.

It uses jQuery simply because we use it for many other features in our applications so you’ll need to include it in any pages that use this control (or change the code to use plain javascript). The jQuery ‘on’ method is used so we can add controls dynamically but isn’t necessary for manually coded controls.

Features

  • Easily customisable
  • Very lightweight
  • Numbers can be manually typed in or incremented / decremented by using the arrow keys on the keyboard or by clicking the up / down buttons

The Finished Control

spinner control

Here’s the code used in this particular example:

The CSS

.spinner {display:inline-block; position:relative; border:1px solid #dcdcdc; border-radius:4px; overflow:hidden;}
.spinner-input {width:46px; margin-right:23px; border:none; padding:0 3px; height:23px; line-height:23px; border-right:1px solid #dcdcdc;}
.spinner-button {text-decoration:none; position:absolute; right:0; background: #efefef; height:11px; line-height:11px; width:23px;}
.spinner-up {top:0;}
.spinner-down{bottom:0; border-top:1px solid #dcdcdc;}

The HTML

<div class="spinner">
  <input class="spinner-input" type="text" />
  <a class="spinner-button spinner-up" href="#">▴</a>
  <a class="spinner-button spinner-down" href="#">▾</a>
</div>

The jQuery

$(document).on('keydown', '.spinner-input', function(e){
  if (e.which == 38) { // up-arrow
    $(this).val((parseInt($(this).val()) + 1)); // parseInt used as we want to increment, not concatenate
  } else if (e.which == 40) { // down-arrow
    $(this).val((parseInt($(this).val()) - 1));
  }
});
		
$(document).on('click', '.spinner-button', function(){
  var target = $(this).siblings(':first');
  if ($(this).hasClass('spinner-up')){
    $(target).val((parseInt($(target).val()) + 1));
  }else{
    $(target).val((parseInt($(target).val()) - 1));
  }
  return false;
});

CSS Reset

Our current implementation, based on Eric Meyer’s reset at http://meyerweb.com/eric/tools/css/reset/

/* *** Reset *** */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML 5 Elements */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}

audio, canvas, video {
display: inline-block;
}

audio:not([controls]) {
display: none;
height: 0;
}