The JavaScript blog.


jquery truncation sponsored-content slideshow printing

jQuery Roundup: SliderShock, printThis, readMore

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery SliderShock

SliderShock example

jQuery SliderShock is a responsive slider plugin that can be dropped into WordPress sites. There's full documentation for regular websites and WordPress sites. The WordPress version has some additional features, like built-in support for sliders from external data sources like RSS. The plugin supports various options, including up to 31 transition effects, control over delay time and positioning, and easy styling.

Clicking Build Your Own on the SliderShock homepage displays all of the available options:

SliderShock options

SliderShock can display text captions within slides, and comes bundled with lots of CSS3-based effects. The free version, licensed for use in personal projects, has 10 effects, and the premium version has 31 effects and 39 skins. A license for a single site costs $19, while multiple sites costs $29. There's also a developer license for $99 that allows resale. "Combo" licenses are available if you wish to buy both the WordPress and jQuery versions at once, otherwise you'll have to license them separately.


jquery.printThis (License: MIT/GPL) by Jason Day is a fork of permanenttourist / jquery.jqprint, and based on Ben Nadel's Ask Ben: Print Part Of A Web Page With jQuery post -- a combination of several things to solve the problem of printing a given element on a page. Jason's changes can optionally include page styles, import additional stylesheets, and avoids using document.write.

It's interesting to see how this works internally -- the plugin is concise but it takes a bit of iframe manipulation to get the desired results.


Dealing with dynamically truncating content is tricky, and there are many solutions out there. Stephan Ahlf sent in his solution, jQuery.readMore (GitHub: s-a / jQuery.readMore, License: MIT/GPL) which uses a method called $.isOverflowed to add text until there isn't room for any more.

Previously covered related plugins include jQuery.smarttruncation, and jQuery.textFit.


jquery plugins themes truncation jquery-ui

jQuery Roundup: jQuery UI 1.9.0, Delta Theme, jQuery.textFit

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery UI 1.9.0

jQuery UI 1.9.0 site

jQuery UI 1.9.0 is out, which adds new widgets, API refinements, improved accessibility, and hundreds of bug fixes. The new widgets are as follows:

  • Menu: A navigation menu with support for hierarchical pop-up submenus
  • Spinner: A "number stepper" for input fields (rather than a rotating progress indicator)
  • Tooltip: A pop-up message

There's a detailed jQuery UI 1.9 Upgrade Guide which lists deprecations. Oh, and the jQuery UI site has been refreshed as well!

Delta: jQuery UI Theme

jQuery UI Delta Theme

Delta (GitHub: kiandra / Delta-jQuery-UI-Theme, License: MIT/GPL) is a jQuery UI theme by Tait Brown, who created the hugely popular Aristo port.

This theme has a metallic finish that reminds me if iOS 6, and includes light and dark variations. It's also dubbed as Retina ready -- CSS3 gradients and high-resolution images have been used.


jQuery.textFit (GitHub: STRML / jquery.textFit, License: MIT) by Samuel Reed can scale text to fit its container. It also correctly detects multiline strings with break tags.

To find the best font size, a binary search is performed. The demo on jQuery.textFit's site is slowed down so you can actually see how the algorithm works, in reality it seems to run very quickly.

Vertical alignment and centred text are both supported, as are custom fonts.


jquery testing plugins galleries truncation

jQuery Roundup: trunk8, tcsst, MaxImage

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.


trunk8 (GitHub: rviscomi / trunk8) by Rick Viscomi is a text truncation plugin. Truncating text in browsers is actually quite awkward to do well, and I haven't yet found a plugin that does it particularly well when a certain number of vertical lines is required. However, this one appears to do that through the lines option, and it also does a lot more: tooltips can be created, character count is supported, and the internal calculations are cached so it should perform very well.

The author has attempted to address performance using several familiar client-side hacks, so if speed is an issue this might be a good choice. The author hasn't included unit tests or benchmarks, so it might take a bit of jsPerf to really see how efficient it is.


tcsst by Paul Battley is a CSS testing script for jQuery. The author wrote it because "life's too short to click around". It's basically a simple test runner with a CSS-specific flavour: tests are defined in terms of CSS selectors:

  tc.test('top of paragraph should be at a multiple of line-height', 'p',
    function(test, element){
      var lineHeight = parseInt($('body').css('line-height'), 10);
      var diff = $(element).offset().top % lineHeight;
      test.assert((0 == diff), 'Off by ' + diff + 'px');

It's an interesting concept, and I think there's a lot of room for time-saving assertions that are tailored for CSS.

MaxImage 2.0

MaxImage 2.0 (GitHub: akv2 / MaxImage, License: MIT/GPL) by Aaron Vanderzwan is a fullscreen background slideshow plugin. There's a demo of MaxImage that shows it being used with the jQuery Cycle and Easing plugins.

This plugin actually checks if the browser supports background-size, so it should look good in modern browsers. It also pre-loads images.


jquery canvas plugins truncation

jQuery Roundup: Notificon, stickySectionHeaders, jQuery.suggest, smartTruncation

Posted on .

Note: You can send your plugins and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/dailyjs).


Notificon (GitHub: makeable / Notificon, License: BSD) by
Matt Williams dynamically changes a site's favicon to include a
notification value. This works by generating link elements
with data URIs using a canvas:

var changeFavicon = function changeFavicon(canvas) {
  var link = document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'icon notificon';
  link.href = canvas.toDataURL("image/png");

It's a cool hack, and it made me wonder about Internet Explorer support.
IE8 apparently supports link elements with base64 encoded
data, so perhaps something like
ExplorerCanvas could be used to get broader browser support?


stickySectionHeaders (GitHub: polarblau / stickySectionHeaders,
License: GPL and MIT) by Polarblau is a jQuery plugin that can help
create iOS-style sticky headers in a list. All that's needed is a simple

  stickyClass     : 'sticky',
  headlineSelector: 'strong'

The author has provided some iOS-style CSS as well.


jQuery.suggest (GitHub: polarblau / suggest, License: GPL and MIT) also by Polarblau is an autocomplete plugin that works a little bit like native elements, with greyed out text.

While it's true there's a lot of autocomplete plugins out there, how
many of them are written this cleanly and come with tests?


Finally, smartTruncation
(GitHub: polarblau / smarttruncation, License:
GPL and MIT) is another plugin by Polarblau. This one truncates text within its parent element. It can also truncate from the centre: "Hello
World" becomes "Hel...rld".

Text truncation in client-side code is a source of fascination for me
because I've attempted it a few times without a huge amount of success.
Polarblau's algorithm creates a cache of font size values and then adds
characters to an element until it has filled the desired size. It also
takes file name extensions into account.

It's pretty easy to use:

$('.files li').smartTruncation({
  'protectExtensions' : true // "myimagefile.jpg" -> "myimagef...jpg"

It's worth noting that each of these plugins by Polarblau is clearly
licensed, includes tests, and has its own project web site (hosted by
GitHub). This is how you distribute plugins!