This project has moved. For the latest updates, please go here.

Slow Browser Mode

CrissCross uses jQuery widgets to render the multi-pick and single-pick controls. This works well in most cases. However in browsers that have slow javascript performance, picklists with many hundreds of items in them may render slowly. Hence when CrissCross detects that it is running a browser with slow javascript, it enters 'Slow Browser Mode'.

The 'Standard' Picklists

In most cases, CrissCross will render picklists using Eric Hynd's jQuery UI MultiSelect Widget. So the standard picklists look like this:


Triggering 'Slow Browser Mode'

If CrissCross detects it is running in a browser with slow javascript - so basically, IE6, IE7 or IE8, it will switch to 'Slow Browser Mode'.

Slow Browser Mode turns off all jQuery animations (slide-downs when new components appear on the page, etc) and also uses Lighweight picklists for picklists with more than 200 items.

Note that picklists with less than 200 items will still render using the standard picklists (shown above) even in Slow Browser Mode

The 'Lightweight' Picklists

The Lightweight picklists are designed to use fewer javascript cycles to render. The lightweight Multi-pick is a type-and-choose 'tokeniser'. The lightweight Single-pick is simply a standard HTML Select element. They look like this:


How the 'tokeniser' works

The tokeniser - the lightweight multi-pick widget - is a type-and-select widget, similar to the kinds of widgets used to select tags in many web apps. Here are a few screenshots:



If you click where it says 'click here to see the full list' you will get a dialog with a 'two lists' multiselect:


Adjusting Slow Browser Mode behaviour

You can change how Slow Browser Mode is triggered by changing some of the default values in the CrissCross\Scripts\CrissCrossClient.js file:

function CrissCrossClient() {

    ...
  
    // 0 = adapt, 1 = always assume slow, 2 = always assume fast
    this.browserAdaptMode = 0;
    // in slow browser mode, these control the item limit that trips over to lightwight controls
    this.singlePickItemLimit = 300;
    this.multiPickItemLimit = 200;
  


You can change this.browserAdaptMode to:
0 - Slow Browser Mode is turned on or off depending on the browser
1 - Slow Browser Mode is always on
2 - Slow Browser Mode is never used

You can also set the item-limit that (when in Slow Browser Mode) causes the Lightweight widgets to be used instead of the Standard ones, by setting this.singlePickItemLimit and this.multiPickItemLimit.

Last edited Mar 31, 2012 at 12:02 AM by codeulike, version 4

Comments

No comments yet.