Gist 384981

100%

✓ Published0🌍 Public

Last edited Apr 30, 2010

Created on Apr 30, 2010

This example shows a simple DOM manipulation effect: an ordered list appears in reverse order. A jQuery script selects all `<li>` elements inside an `ol.reversed` list and moves each one to the beginning of its parent using the `prependTo()` method, effectively flipping the visible sequence. The code relies on jQuery’s `$(function(){...})` ready handler and the `each()` iterator, with no data source or visualization library involved—it demonstrates a lightweight, CSS-free way to reorder list items on page load.

AI-generated description

Similar vizzes

Loading thumbnail…

Order

This example demonstrates how a user can reorder a list of five items (A–E) through clicks. The initial list is rendered as an HTML `<ul>` using D3’s `d3.select` and `selectAll` chains, with each item bound to the first row of a hardcoded 5×5 string array. Clicking an item triggers the `reorder` function, which calls `.data()` on the existing `li` nodes with that click’s corresponding row, then applies D3’s `.order()` to smoothly animate the reordered elements.

Mmbostock

69% match

Loading thumbnail…

Gist 637706

This example shows a jQuery plugin modification that preserves the original parent containers of filtered list items during activation and deactivation. The code explicitly handles cases where filtered items are not siblings by storing each item’s parent in its `data` object, then uses a `putBack` function to restore items to their correct parents. It relies on jQuery selectors like `tbody > tr` and methods such as `detach()`, `appendTo()`, and `data()`. The diff adds a `siblings` option to toggle between appending items together under a single parent or individually under their original parents.

DDylanFM

62% match

Loading thumbnail…

Gist 2910053

This example demonstrates a small jQuery plugin that links rendered DOM elements back to their underlying data items. The plugin defines a `spine` method with two commands: `item`, which retrieves the data object associated with an element (using jQuery’s `.data()` or a template’s `tmplItem()`), and `forItem`, which filters a set of elements to find those matching a given data object via an `eql` comparison. The code uses jQuery templates and the `$.fn.spine` API, showing how to build reusable, chainable data-binding utilities for interactive visualizations.

Aabernier

61% match

Loading thumbnail…

selection.order

This example demonstrates how `selection.order` reorders DOM elements to match the order of their bound data. Three initial divs are created from an array, then the selection is re-bound to a longer array with a key function. New divs are appended for entering elements, and `div.order()` repositions all divs so their document order matches the data order. The code uses d3.v3 with basic selections, data joins, and the `text` operator, showing a simple before-and-after ordering effect.

Mmbostock

61% match

Loading thumbnail…

Gist 2654204

This example demonstrates how to dynamically swap CSS class names on DOM elements using a jQuery plugin. It shows a reusable `replaceClass` method that leverages the native `String.replace` function, accepting either a regexp or substring as the old class and a string or function as the replacement. The plugin iterates over each matched element via `this.each`, modifying the `class` attribute through jQuery’s `attr` callback. The code relies on jQuery’s core APIs, specifically `$.fn.each` and `$.fn.attr`, to perform the replacement without altering other attributes or event handlers. The data source is the element’s existing class attribute, and the rendering approach is direct DOM manipulation.

Aabernier

61% match

Loading thumbnail…

Gist 83eee1cf3c019a0fa43d

This example demonstrates a minimal carousel component built with Backbone.View, jQuery, and Lodash. The view manages a list of items, tracking the active and previous indexes while allowing navigation via prev/next buttons or direct method calls like `go(2)` and `next(3)`. It applies CSS classes such as `active`, `previous`, `forward`, and `backward` to reflect state changes, and triggers a `carouselchange` event whenever the current item changes. The code supports optional looping, configurable step sizes, and explicit selection of item and navigation elements via the `el`, `items`, `prev`, and `next` options.

Aabernier

60% match

Loading thumbnail…

Untitled

A clickable navigation links to three colored list items (red, green, yellow) inside a horizontally scrollable container. The page uses jQuery and the jquery.scrollTo plugin to smoothly scroll the list to the selected item when a link is clicked, with a 300-millisecond animation. The list is styled with CSS to keep all items in a single row, and the scrolling behavior is triggered by intercepting the anchor click and preventing the default jump.

Aabernier

59% match

Loading thumbnail…

Gist 8c151c128174d8bef51ffcbe4ba2f0dc

This example demonstrates a lecture-style data visualization that uses CSS to prepend the text “hello” to elements with the class `alert.lecture`, as defined in the `lecture.css` file. The code employs standard CSS selectors and the `:before` pseudo-element to inject content dynamically into the page. It illustrates how lightweight styling rules can alter visual presentation without JavaScript libraries or complex APIs, relying solely on native CSS features to modify the rendered output. The effect is immediate and purely style-based, with no interaction or data processing involved.

Aabernier

59% match