Skip to main content
SimilarExport ZIP
100%

Works with will_paginate. Requires innerShiv http://jdbartlett.github.com/innershiv/

✓ Published0🌍 Public
DDylanFM
Last edited Feb 28, 2011
Created on Feb 28, 2011

This example shows a jQuery plugin that transforms a standard paginated list into a “load more” button, fetching additional items via AJAX and appending them to the existing list. It uses `$.fn.extend` to define the `paginate` method, `$.get` for requests, and `innerShiv` to parse and insert the returned HTML. The plugin replaces the `.pagination` element with a custom link, updates the page parameter in the URL, and hides itself when fewer items than the configured `num` are returned. It relies on server-side partials formatted as `format: 'partial'` and assumes the list contains `li` elements.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu
56% match
Loading thumbnail…

sketch

This example demonstrates a jQuery plugin called `stepper` that manages step-by-step navigation through an ordered list of items, visually highlighting the active step while dimming inactive ones. The interface shows a sequence of seven steps with Previous and Next links, allowing users to move forward or backward through the list by clicking those controls or double-clicking a specific step to activate it directly. The code uses the jQuery library to implement custom event-driven behavior, binding handlers for activation, deactivation, and navigation events. The plugin manipulates CSS classes (`active` and `inactive`) to provide visual feedback, relying on the loaded Google-hosted jQuery version rather than any data source or rendering library.

DDylanFM
55% match
Loading thumbnail…

Gist 305339

This example demonstrates a reusable jQuery plugin pattern for encapsulating a custom visualization or interaction, applying it to selected DOM elements with configurable defaults. The code defines a `PluginClass` that initializes on plugin call, using `$.fn.extend` and `$.extend` to merge user options with defaults. It shows the structural scaffolding for a visualization module, though it contains no actual rendering logic or data-binding calls. The implementation relies on jQuery’s event and DOM utilities, with the plugin returning `this` to support method chaining, a common convention for jQuery-based visual components. The source is a single JavaScript file from a gist, focusing on code organization rather than visual output.

DDylanFM
55% match
Loading thumbnail…

sketch

This example presents a step-by-step navigation interface where clicking a link updates the active step label. The page uses jQuery to handle the click events and a custom router function with `setInterval` to detect hash changes and synchronize the highlighted list item. The rendering approach is a simple HTML ordered list with CSS styling for the active state, and the code relies on Google's AJAX API loader to load jQuery. No data visualization or animation is shown beyond the step highlighting.

DDylanFM
54% 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
53% match
Loading thumbnail…

D3 PJAX (& execute JS loaded through the d3.html() request as well)

This example demonstrates a PJAX-style navigation pattern using D3.js, where clicking menu links asynchronously loads page content into a central area without full page reloads. The demo includes three pages (Anteater, Baobao, Cuttlefish), each displaying an article and a script-generated timestamp. The `d3.html()` API fetches the requested HTML fragment, while the `pjax` function handles click events, updates the browser history via `history.pushState`, and re-applies links after each load. It also executes any JavaScript found in the loaded fragment, using a custom `evalScript` function and a `d3.selection.prototype.replaceWtext` hack to safely replace `document.write` calls with text content.

GGerHobbelt
53% match
Loading thumbnail…

Fork of D3 Starter

This interactive paginated list displays rows of ID-value pairs from a remote CSV file, loaded with `d3.csv`. Two buttons navigate through the data in batches of 20 records, using D3’s selection API to append, update, and remove paragraph elements dynamically. The code relies on `d3.select`, `d3.merge`, and event handlers for click interactions, with an embedded YouTube tutorial, and the page uses a D3 v4 script alongside v7.

AAnas1108
52% match
Loading thumbnail…

Gist 7233762

This example shows a JavaScript application skeleton converted to use AJAX, with the updated files provided as a gist. The code demonstrates an asynchronous data-loading pattern, fetching external resources via `XMLHttpRequest` or a similar AJAX mechanism. It relies on standard browser APIs for handling responses and updating the page content dynamically. The visualization aspect is minimal, focusing instead on the structural change from a static app to one that retrieves data on demand. The author lists the modified files and includes instructions for downloading the original skeleton, making the gist a practical exercise in refactoring for asynchronous behavior.

EElaineYu
52% match