Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

BalfPickA responsive and smart looking dropdown select replacement

BalfPick
BalfPick
Setup difficulty: easy

BalfPick is a simple new select box wrapper powered by jQuery.

Getting started

It's so easy to get started with BalfPick. You need a copy of the CSS file provided linked to the page, a copy of the JavaScript file linked to the page and you need a link to jQuery:

HTML
<head>
	...
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <link href="balfpick.css" rel="stylesheet" type="text/css">
  <script src="balfpick.js"></script>
  ...
</head>
<body>
  <select class="balfpick">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>

  <script
  $(document).ready(function(){
    $(".balfpick").BalfPick();
  });
  </script>
</body>
  

Whilst it is currently the case that there are no jQuery options for BalfPick, it is possible that these will come in the future.

BalfPick has been tested on the latest versions of the following setups as of April 2018:

  • macOS Firefox
  • macOS Chrome
  • macOS Safari
  • Windows 10 touch and non-touch input
  • Ubuntu Firefox
  • Ubuntu Chrome
  • Android Firefox
  • Android Chrome
  • iOS Firefox
  • iOS Chrome
  • iOS Safari

Version 2+

BalfPick v2 was released on the 27th of November 2020. It brings about some major changes, firstly with the removal of a huge chunk of JavaScript.

Version 2 is higher performance than before and relies less on JavaScript and CSS than before, making it very lightweight.

Comments