Tag Archives: Bootstrap

Open Legend RPG: Redesigning the Data

Recently I stumbled upon a Kickstarter project called Open Legend RPG, an open source roleplaying game. The system is a labor of love that has been built over the last 4 years and was now ready to bring to a larger audience. The creators were raising money for printed additions, additional rulesets , and pre-made adventures, but the beauty of the system was that all the rules were online already; anyone could play it without spending a dime.

Continue reading

Free eBay Template Built with Bootstrap

Special Thanks to Phil Cryer for the initial idea and code.

There are two types of listings on eBay you see the most: Casual sellers using the simple text editor for their description, and power sellers using outdated non-responsive templates that are distracting and dated. Here comes Bootstrap to save the day for either one of those customers.

Continue reading

Selectize.js ComboBox: Cloning and Destroying

Selectize.js is a javascript library that allows you to offer more complex HTML select boxes, such as combining a select and an input box, commonly known as an autocomplete combobox. Most importantly, they have a built-in stylesheet for Bootstrap 3. However, I discovered a problem when you are trying to add another form field dynamically, specifically using jQuery’s .clone() function.

However, selectize() does not clone well… it breaks horribly. The key you must .destroy() the selectize() prior to cloning. Of course, another problem occurs then: The select element, upon selectize.destroy(), will reset the value to the last option. Solution? Store the value, destroy(), then set the value.

// When add button is clicked
$('#add').on('click',function(){
   $('.combobox').each(function(){ // do this for every select with the 'combobox' class
      if ($(this)[0].selectize) { // requires [0] to select the proper object
         var value = $(this).val(); // store the current value of the select/input
         $(this)[0].selectize.destroy(); // destroys selectize()
         $(this).val(value);  // set back the value of the select/input
      }
   });
   $('#monsters .form-group:first')
      .clone() // copy
      .insertAfter('#monsters .form-group:last'); // where
      selectizeme(); // reinitialize selectize on all .combobox
});

Here’s a working demo of the functionality.