Tag Archives: html

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;
});

Need to reduce your HTML file size?

If you need to reduce the file size of HTML documents there are a number of element tags that can be removed under certain conditions.

While each tag doesn’t add much to the file size, the total size of all un-necessary tags could add up to a significant amount so omitting them could be worth considering if you’re trying to reduce file sizes to their absolute minimums.

The elements that can have tags omitted are in the following table and detailed info is available at https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission.

Element Tag Can be omitted if
html start the first thing inside the html element is not a comment
html end the html element is not immediately followed by a comment
head start the element is empty or if the first thing inside the head element is an element
head end the head element is not immediately followed by a space character or a comment
body start the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element
body end the body element is not immediately followed by a comment
li end the li element is immediately followed by another li element or if there is no more content in the parent element
dt end the dt element is immediately followed by another dt element or a dd element
dd end the dd element is immediately followed by another dd element or a dt element, or if there is no more content in the parent element
p end the p element is immediately followed by an address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element
rt end the rt element is immediately followed by an rt or rp element, or if there is no more content in the parent element
rp end the rp element is immediately followed by an rt or rp element, or if there is no more content in the parent element
optgroup end the optgroup element is immediately followed by another optgroup element, or if there is no more content in the parent element
option end the option element is immediately followed by another option element, or if it is immediately followed by an optgroup element, or if there is no more content in the parent element
colgroup start The colgroup element is not empty, and if the first thing inside the colgroup element is a col element, and if the element is not immediately preceded by another colgroup element whose end tag has been omitted.
colgroup end the colgroup element is not immediately followed by a space character or a comment
caption end the caption element is not immediately followed by a space character or a comment
thead end the thead element is immediately followed by a tbody or tfoot element
tbody start The tbody element is not empty, and if the first thing inside the tbody element is a tr element, and if the element is not immediately preceded by a tbody, thead, or tfoot element whose end tag has been omitted.
tbody end the tbody element is immediately followed by a tbody or tfoot element, or if there is no more content in the parent element
tfoot end the tfoot element is immediately followed by a tbody element, or if there is no more content in the parent element
tr end the tr element is immediately followed by another tr element, or if there is no more content in the parent element
td end the td element is immediately followed by a td or th element, or if there is no more content in the parent element
th end the th element is immediately followed by a td or th element, or if there is no more content in the parent element