Sliding panels presentation (compact content widget)

The compact content widget can be initialised using a sliding panels (slider) presentation. Visit the compact content widget page for links to a working demonstration and to download the required files.

How to use

There are two basic ways you can use the slider presentation.

Both methods require that you include the relevant compact widget scripts and styles first.

  1. Add the class slider to the compact container of the basic markup. For example:

    <div class="compact slider" id="example-slider">
    	...

    If using this approach, the widget will be initialised automatically when the DOM is ready.

  2. Alternatively, you can initialise the widget manually by selecting the container element using a jQuery selector then applying the compact() plugin and specifying the type option as ‘slider’.

    This initialisation can occur at any time after the HTML for the widget has been parsed.

    $('.compact').compact(options={
    	type : 'slider'
    });

    Other options for this instance can be passed during initialisation to overide the default values.

That’s it, all done!

Further options and configuration variables are detailed below, but the defaults are pretty good, so if you are looking for a quick installation, then read no further.

If you would like to tweak elements of the presentation, read on…

Initialisation options (unique per instance)

The options detailed below can be passed during the manual initialisation. For example:

$('.compact').compact(options={
	type              : 'slider',
	animationDuration : 250,
	collapseDuration  : 300
});
Slider compact content initialisation options
option values description
type
  • ‘slider’
This option is only required if you haven’t added the slider class to the compact container element.
controlsMatchHeight
  • true (default)
  • false
If set to true, the controls (next and previous) postioned on either end of the widget will be given height equal to the tallest content panel. If set to false, the height of these controls will be left as the default value.
animationDuration
  •  integer (default 500)
The duration in ms of animated transitions when scrolling to next and previous panels.
collapseDuration
  •  integer (default 250)
The duration in ms of animated transitions when window or text size change forcing the widget to shrink or expand to fit the width of the parent element of the widget container.
cookieExpiryDays
  •  integer (default 30)
The number of days the cookie will persist before expiring.
nextControlText
  • string (default ‘>’)
The text visible for the "next" control. To work with image replacement, this should ideally be a short ascii string illustrating the action "next section".
nextControlTitleText
  • string (default ‘Next section’)
The full expansion of the "next section" action.
prevControlText
  • string (default ‘<‘)
The text visible for the "previous" control. To work with image replacement, this should ideally be a short ascii string illustrating the action "previous section".
prevControlTitleText
  • string (default ‘Previous section’)
The full expansion of the "previous section" action.
supportCSSImgReplace
  • true
  • false (default)

If you would like to replace the ascii control characters with images, set this to true and ensure the clearPixelImg is also set to point to a completely transparent gif or png file.

You should then style the clearPixel image to displace the text, so when images are disabled, the ascii characters become visible.

clearPixelImg
  • string (default ‘displacement.png’)
The relative path from the page containing the widget to a transparent gif or png file.

Global configuration (applies to all instances)

The configuration variables detailed below can be overridden by updating properties of the $.compact.slider object before initialising any tabbed widgets. For example:

$.compact.slider.contentsClass = 'contents';
$.compact.slider.windowClass = 'window';

These variables allow some flexibility in terms of the markup generated when the widget is initialised.

Note: Remember when overriding these variables, some of the default CSS will need to be updated to reflect the changed markup that is generated as a result.

Slider compact content global configuration variables
variable default description
containerSelector '.compact.slider' jQuery selector that can target the container element (usually by following the DOM upwards from within the widget to the first matching parent element).
activeClass 'active' class applied to container element after widget is initialised (allows independant styling of appearance when script is available and when its not).
controlElClass 'slider-control' Class applied to both “Next section” and “Previous section” controls (buttons).
cookieRefPrefix 'c.slider#' A prefix string that is used to identify cookies for compact content widgets with slider presentation.
prevControlClass 'prev-panel' Class applied to the “Previous section” control (button).
nextControlClass 'next-panel' Class applied to the “Next section” control (button).
viewportElClass 'viewport' Class for the outer wrapper element. Wraps all content sections. This element provides the clipping window, under which the panels slide into and out of view.
sliderElClass 'sliding-tray' Class for the inner wrapper element. Wraps all content sections. This element slides left or right when previous/next controls are used.
contentsElClass 'slider-contents' Class for a wrapper element that goes around the viewport (containing all sections) and the controls.
measureElClass 'measure' Class applied to an element that sits as a sibling to the widget container. This element will expand to fill the parent element, and can accurately measure how far the widget can expand.
panelClass 'section' The class that identifies which elements are panels of content.
loadingClass 'loading' A class applied to the widget container while the contents of all panels are loading. This allows CSS to be used to hide a messy loading sequence.
clearPixelClass 'for-css-replacement' Class added to the image element that embeds the transparent image in each control for use with image replacement. (only used if the supportCSSImgReplace option was set to true).
holdControlInterval 300 When a control is held down (mousedown) how often should it jump to next panel? (in ms)
errorMargin 1 FF2 & FF3 seem to be 1px out (rounding error??). This value compensates for the error.

Default generated markup

Below is an example of the before and after markup transition that occurs for each slideshow widget when it is initialised.

Note: If you have customised the configuration variables the generated markup will differ. Also some initialisation options can affect the markup.

Before initialisation:

<div class="compact slider" id="example-slider">
    <div class="section" id="lorem-ipsum">
        <h2>Lorem ipsum dolor</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="section" id="in-a-orca">
        <h2>In a orci</h2>
        <p>In a orci. Aenean et mi quis dui semper nonummy.</p>
    </div>
    <div class="section" id="maecenas">
        <h2>Maecenas mattis</h2>
        <p>Maecenas mattis. In interdum pede in ipsum.</p>
    </div>
</div>

After initialisation (note ARIA roles, states and properties are embedded):

<div class="compact slider active" id="example-slider" style="opacity: 1;">
    <div class="slider-contents"
    	style="visibility: visible; height: 161px; width: 427px; display: block;">
    	<a controls="example-slider" role="wairole:button" 
            class="slider-control prev-panel disabled prev-disabled" 
            id="example-slider-prev-panel" href="#previous" title="Previous" 
            style="height: 153px; margin-top: 4.06667px; margin-bottom: 4.06667px;">
            <span><</span>
        </a>
        <div class="viewport" style="width: 372px; display: block;">
            <div class="sliding-tray" style="width: 1488px; left: 0;">
                <div class="section" id="lorem-ipsum" hidden="false" style="height: 147px;">
                    <h2>Lorem ipsum dolor</h2>
                    <p>Lorem ipsum dolor sit amet, </p>
                </div>
                <div class="section" id="in-a-orca" hidden="false" style="height: 147px;">
                    <h2>In a orci</h2>
                    <p>In a orci. Aenean et mi quis dui semper nonummy. </p>
                </div>
                <div class="section" id="maecenas" hidden="false" style="height: 147px;">
                    <h2>Maecenas mattis</h2>
                    <p>Maecenas mattis. In interdum pede in ipsum. </p>
                </div>
            </div>
        </div>
    	<a controls="example-slider" role="wairole:button" 
            class="slider-control next-panel disabled next-disabled"
            id="example-slider-next-panel" href="#next" title="Next"
            style="height: 153px; margin-top: 4.06667px; margin-bottom: 4.06667px;">
            <span>></span>
        </a>
    </div>
</div>
<div class="measure" style="border: medium none ; margin: 0; padding: 0; 
	width: 100%; clear: both; height: 0; float: none;"></div>

Image replacement

To enable maximum accessibility, it is good to ensure users who browse with images disabled are still able to do everything that other users are able to do, with similar ease.

If you wish to use CSS image replacement for UI controls, this can be a tricky task as most image replacement techniques fail when a user has CSS enabled, but no support for images. The slider widget supports a form of CSS image replacement that is still accessible to users without images.

This technique requires that a small (1x1px) transparent image be used to displace the content of an element, so that a background image can be displayed in its place.

To enable image replacement for the slider widget:

  1. Publish a transparent 1x1px gif or png to your server, for example: ‘displacement.png’.

  2. Initialise the widget with the supportCSSImgReplace options set to true and give the path to the transparent image in the clearPixelImg option. For example:

    $('.compact').compact(options={
    	type                 : 'slider',
    	supportCSSImgReplace : true,
    	clearPixelImg        : '/assets/images/displacement.png'
    });
  3. Publish UI images to your server to use when replacing the control text.

  4. Use CSS to complete the image replacement:

    .slider .slider-control img.for-css-replacement {
    	width: 26px;
    	/* height will be set by script */
    }
    .slider .slider-control.next-panel {
    	width: 26px;
    	/* height will be set by script */
        
    	background: transparent url(/assets/images/slider-next.png) left top no-repeat;
    	display: block;
    	overflow: hidden;
    	zoom: 1; /* for IE 6&7 */
    	text-align: center;
    }

When images aren’t supported, the transparent displacement image dissapears also, allowing the original content to be displayed.

Posted in

Leave a reply