Category Archives: Javascript

jQuery UI slider for dynamic content

On one of the projects I’ve worked on, we used jQuery UI slider for dynamic content. The slider’s handle needed to resize according to that dynamically loaded content.

The main issue was that with the usual suggested ways to do it, there was a jump for first mouse initiated movement on the slider. That rather ugly behavior is related to the slider’s requirement that the slider bar and handle parent must be of same width[1]. That, in combination with the requirement to give the handle a half margin offset[2] due to handle sizing, causes that ugly jump to occur.

This is how the default setup looks like:

jquery-ui-slider-dynamic-content-before

You can see that the bar and the handle parent are of the same size. Slider is initialized on bar element.

The fix is rather simple. Instead of initializing the slider on bar element, do it on ui-handle-helper-parent. Then you can size that element as needed, and the slider does not exhibit the ugly jump. The ui-handle-helper-parent element needs to be centered in bar and a bit of custom styling is needed, but in the end it works nicely. This is how the setup looks like after the fix:

jquery-ui-slider-dynamic-content-after

Due to peculiar sizing of the ui-handle-helper-parent element, another fix was needed as well. When clicking on the area of bar element that the ui-handle-helper-parent element doesn’t cover, the slider value needs to be recalculated and set accordingly. All of these changes and fixes are packaged in the DynamicSlider[4] component and there is a working example[3].

Resources:

  1. Jquery UI Scroll Bar not fitting the contents
  2. jQuery UI slider jumps
  3. A working example @ CodePen
  4. The gist of the example
Advertisements
Tagged , , ,

Karma & Browserify

Recently I had the pleasure of setting up Angular tests within a project. For testing, we decided on Karma test runner by Angular team. You can find details about the reasoning at the end of the post, but basically the idea was that we’d like to stick with the runner built and used by the Angular team itself.

The project is currently a Rails gem and there are a bunch of nice tutorials on how integrate the two (see resources), but this project has aspirations to become a full-blown Angular app without any direct Rails dependencies. So, solutions like rails_karma gem or rails assets was not an option. 

The good news is that the project in question used Browserify and sprockets-browserify gem to integrate it into Rails. After a bit of investigation, we came upon karma-browserify node module. This way, the resources under test were still served by browserify in the same manner as they would be served with the live application, but Rails was actually not needed to run the tests. The module in question essentially adds Karma preprocessors that make Karma aware of browserify served resources. In the end, this made our tests run fast, without involving Rails, which is a nice bonus.

The coffeescript configuration that ended up running the test suite:


module.exports = (config) ->
 config.set
 basePath: '..'

frameworks: [
 'jasmine'
 'browserify'
 ]

preprocessors:
 'app/assets/javascripts/index.coffee': ['browserify'] # index contains all requires
 'spec/**/*.coffee': ['coffee']

browserify:
 extensions: ['.coffee']
 transform: ['coffeeify']
 watch: true
 debug: true

 files: [
 'spec/support/karma_init.coffee'
 'app/assets/javascripts/index.coffee' # load the application, have browserify serve it
 {
 # watch application files, but do not serve them from Karma since they are served by browserify
 pattern: 'app/assets/javascripts/*.+(coffee|js)'
 watched: true
 included: false
 served: false
 }
 'spec/support/**/*.+(coffee|js)' # load specs dependencies
 'spec/javascripts/**/*_spec.+(coffee|js)' # load the specs
 ]

exclude: []
 reporters: ['progress']
 port: 9876
 colors: true
 logLevel: config.LOG_INFO
 autoWatch: true
 browsers: ['PhantomJS']
 captureTimeout: 60000
 singleRun: false

Just run karma with karma start spec/karma.config.coffee and that’s it.

Resources:

Tagged , , , , ,