BantamJS Example Gallery

This page shows you through a handful of basic use cases, and how they may be coded with BantamJS. This page is a work in progress, as new examples are written, they will be added here. Have a cool use case for Bantam? Let us know!

Color Update

A code snippet showing how to programmatically update the color of an element.

Turn Red Turn Black

My Color Changes

Color Toggle

Another code snippet for color updating, this one toggling the color of an element when it is clicked.

Click Me

Update Box

A snippet linking a the contents of a text box to an <h3> tag.

Change Me

Collapsing Panel

A snippet implementing an expanding and collapsing panel.

Click here to toggle collapsing pane

AJAX Updated Panel

Populates a paragraph with text retrieved from the server.

Get Paragraph 1 Get Paragraph 2

Scrolling Table of Contents

The code used in this page (in combination with an unordered list of links) to scroll from the table of contents to the specified section.

Fading Tabs

A snippet to display a list of tabs, and fade between the content on each of them

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus orci sapien, ac porttitor odio cursus sit amet. Nunc quis facilisis lacus. Vestibulum ligula diam, tempus nec neque eget, fringilla tempus mauris.

Tab 2

Nulla laoreet massa enim, sed feugiat nunc tincidunt at. Proin commodo, ipsum nec mattis luctus, leo turpis vestibulum massa, at vulputate quam quam ac tortor. Nullam purus tellus, consequat eu tellus quis, hendrerit lobortis ipsum.

Tab 3

Vestibulum vel ultricies sapien. Mauris molestie sit amet quam eu dictum. Nunc ac odio nec lorem facilisis ultrices. Maecenas rutrum, neque in pretium placerat, leo lorem venenatis enim, id maximus est mi congue purus.