Widgets

Widgets allow you to use simple structures in your HTML to create interactive behaviours, and cross-browser-compatible effects.

• Slider
• Random item
• Opacity
• Client-side language switcher
• 'For javascript-enabled users only'

Example

The slider widget allows you to create elements that slide open and shut:

Slider

The slider widget requires 3 block-level elements:

1. .cern_ww.slider: the container element
2. .toggler: the element that the user clicks on
3. .stretcher: the element that slides open

Example

<div class="cern_ww slider box">
      
	<h3 class="toggler">Some text</h3>
	
	<p class="stretcher">Lorem ipsum dolor sit amet.</p>
      
</div>

In this example we have also given the slider element the .box class so that the stretcher appears in a box.

Random item

This widget allows you to have a number of elements with the .item class and only display one of them at random.

The random item widget requires 2 elements:

1. .cern_ww.random: the container element
2. .item: the items to be randomly shown

Example

<div class="cern_ww random">
      
	<img class="item" src="foo.jpg" alt="alt text 1" />
	
	<img class="item" src="bar.jpg" alt="alt text 2" />
	
	<img class="item" src="yay.jpg" alt="alt text 3" />
	
	<img class="item" src="boo.jpg" alt="alt text 4" />
	
	<img class="item" src="mah.jpg" alt="alt text 5" />
	
	<img class="item" src="toh.jpg" alt="alt text 6" />
	
</div>

Opacity

Although you can set opacity with CSS, it's a real hassle to get it working consistently across browsers. So do it with a widget:

1. .cern_ww.opacity.value_60: 60% opacity Example
2. .cern_ww.opacity.value_10: 10% opacity Example
3. .cern_ww.opacity.value_1: 100% opacity Example

Parameters

The opacity value is set by the class value_x and should be expressed as a percentage. Adding a class of value_1 specifies 100% opacity for an element.

Client-side language switcher

For small sites we've built a language-switching function that enables you to add links on your page that allows javascript-enabled users to switch the directory of the current window URL to another directory. Check it out.

'For javascript-enabled users only'

Use this to show things only to those users who have javascript enabled. Just add these two classes to an element:

<p class="hide js_only">This will only be available to those with JS (and CSS)</p>

Image resources »