Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

Version 1.2 About

What's new?

The headline acts of Glow 1.2 are AutoSuggest, AutoComplete, Carousel and Slider. 4 additions to glow.widgets.

Additionally, there are many improvements to existing modules, along with fixes for many of the bugs you've reported.

As always, keep the suggestions and bug reports rolling in. We've received some great ideas so far that we'll be adding to future roadmaps.

New Widgets

AutoSuggest

glow.widgets.AutoSuggest lets you link a regular HTML text input with a dataSource to offser suggestions to the user as they type.

This datasource can be static, as in a JSON object included on the page. Dynamic, as in the server is called every time the user enters text. Or somewhere in between, perhaps a file for each letter of the alphabet, containing data for results starting with that letter.

The output is fully in your hands, so the results displayed can contain the matched term, a description, an image or any other HTML.

Give it a spin:

Select Colour:

(type the name of a web-safe colour)

See the AutoSuggest API page for more details and examples.

Matt Haynes' carousel is probably the most popular unofficial Glow widget. Recognising it's greatness, we've enhanced it and rolled into Glow as an official widget.

The Carousel provides an animated way for the user to scroll through a list of items. Options are provided to make the carousel loop, and items can be added dynamically at run time.

Future version of Glow will add features to the Carousel, such as paginated navigation.

Give it a spin

  1. BBC One
  2. BBC Two
  3. BBC Three
  4. BBC Four
  5. BBC HD
  6. CBBC
  7. CBeebies
  8. BBC News
  9. BBC Parliament
  10. Radio 1
  11. Radio 2
  12. Radio 3
  13. Radio 4
  14. Five Live
  15. 6Music
  16. BBC 7

See the Carousel API page for more details and examples.

Slider

The Slider is the first of a suite of enhanced form inputs to become a Glow widget, providing an intuative way for the user to select a value within a given range.

The slider can snap to interval values, fire events as the user interacts with it and contain text or image labels.

As with all Glow widgets, 2 themes are provided but you can easily apply a custom design.

Give it a spin:

See the Slider API page for more details and examples.

Enhancements to Existing Modules

Animation Timeline duration

Following requests you can now find out a timeline's total duration in seconds via the duration property.

See the Timeline API page for more details and examples.

Snapping Draggables to a Grid

Draggables can be snapped to a grid using the "step" option in the constructor. 

// create a draggable that snaps every 5 pixels
var myDraggable = new glow.dragdrop.Draggable('#draggable', { step: 5
});

See the Draggable API page for more details and examples.

NodeList show & hide

Following user requests, you can now show / hide elements via a simple method. 

glow.dom.get("#something").show();
glow.dom.get("a.notImportant").hide();

See the NodeList API page for more details and examples.

Cloning simple objects

glow.lang.clone has been introduced to deep clone simple JavaScript object, meaning the clone's properties can be edited without affecting the original.

See the glow.lang API page for more details and examples.

Overlay id & className Constructor Options

Small update. Constructor options have been added to Overlay (and therefore Panel and InfoPanel) to make it easier to add a custom ID and class names.

See the Overlay API page for more details and examples.

Simpler API for glow.anim.css

Previously, if you wanted to animate values from their current value to a new one, you'd have to do something like: 

var myAnim = glow.anim.css("#elm", 5, { "background-color": {to: "#f00"}, "left": {to: "50px"}
}).start();

Now, to animate a CSS property to a value, you can simply do: 

var myAnim = glow.anim.css("#elm", 5, { "background-color": "#f00", "left": "50px"
}).start();

See the glow.anim API page for more details and examples.

NodeList#css no longer requires units.

Previously, the following would have no effect: 

glow.dom.get("#elm").css("left", 50)

Now, pixels are assumed unless the CSS property doesn't require a unit (such as "line-height" and "opacity").

See the NodeList API page for more details and examples.

Easier Property Adding when Firing Events

Previously, if you wanted to fire an event with custom properties added to the event object, you'd have to do something like: 

var myEvent = new glow.events.Event();
myEvent.distanceFallen = ball.startHeight - ball.bouncedAt;
glow.events.fire(ball, "bounce", myEvent);

This can now be shortened to: 

glow.events.fire(ball, "bounce", { distanceFallen: ball.startHeight - ball.bouncedAt
});

See the glow.events API page for more details and examples.

API Quick Reference

JavaScript is required to use the quick reference

Related links

BBC © 2014The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.