$.fn.offsetRelative

100%

$.fn.offsetRelative

✓ Published0🌍 Public

Last edited Mar 27, 2015

Created on Jul 28, 2012

This example demonstrates how to calculate an element’s position relative to its parent container using a jQuery plugin. It shows the offset difference between the selected element and its closest ancestor, optionally filtered by a CSS selector. The plugin, defined in `jquery.offsetRelative.js`, uses jQuery’s `.offset()` method to retrieve both the element’s and parent’s absolute coordinates, then returns the left and top differences. The code relies on the jQuery library and is packaged as a CommonJS module via `package.json`, making it suitable for both browser and Node.js environments.

AI-generated description

Similar vizzes

Loading thumbnail…

$.inside

A jQuery plugin called `$.inside` computes an element's position relative to an ancestor, returning normalized coordinates between 0 and 1 that indicate how far the element extends beyond the ancestor's bounds. The demo uses a draggable and resizable `#bar` inside `#foo`, with the `inside` special event updating two meters and a large text readout in real time at 15 frames per second. The code relies on jQuery UI for drag/resize interactions and the `offsetRelative` helper to calculate offsets.

Aabernier

68% match

Loading thumbnail…

offsetX / offsetY

This example demonstrates how to precisely track the mouse position relative to an HTML element’s content area, accounting for borders, padding, and scroll offsets. A red circle with a smaller black center follows the cursor inside a child div, while the numeric offsets appear in an otherwise empty parent container. The code uses D3's event handling for `mousemove` and `getBoundingClientRect`, combined with `clientLeft`, `clientTop`, and `pageXOffset`/`pageYOffset`, to convert page coordinates into element-local coordinates. The visualization relies solely on D3.js version 2.7.4 and plain DOM styling.

AAjayyy

60% match

Loading thumbnail…

$.fn.domvertices

`$.fn.domvertices` visualizes the 2D screen-space coordinates of DOM elements as animated points. The example uses a jQuery plugin to sample the four corners of each target element and renders them into an HTML5 canvas. It employs `requestAnimationFrame` to continuously update the positions, while a lightweight force-directed layout inspired by `d3.forceSimulation` nudges the vertices into a stable, jittering arrangement. The code reads element geometry via `getBoundingClientRect` and maps the resulting coordinates directly to canvas pixels, making the correspondence between the live page structure and the drawn points explicit.

Aabernier

56% match

Loading thumbnail…

$.fn.segment

This example demonstrates a jQuery plugin that selects a contiguous slice of elements from a jQuery collection based on a starting index and a width. The plugin, `$.fn.segment`, accepts a zero-based `start` position and an optional `width` (defaulting to 1), and returns the matching subset via jQuery’s `slice` method. It handles both positive and negative indices, clamping the range to the collection’s length and ensuring a minimum width of 1. The behavior is illustrated with a diagram showing how various start/width pairs select different segments from a list of five items.

Aabernier

56% 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

55% match

Loading thumbnail…

Basic jQuery Plugin Anatomy

This example demonstrates a basic jQuery plugin that locates every anchor element within a selected collection and appends its href attribute in parentheses to the link text. The code defines the custom method `showLinkLocation` on `$.fn`, using an immediately invoked function expression to pass the jQuery object and maintain the `$` alias. It filters the collection for `a` elements, iterates with `.each()`, and appends the attribute using jQuery’s `append()` and `attr()` methods. The plugin returns `this` to preserve chaining. No external data source is used; the behavior operates entirely on the provided DOM selection.

Aamoradi

55% match

Loading thumbnail…

jQuery.fn.caroufredsel.js

This gallery example demonstrates a jQuery plugin, `carouFredSel`, which transforms a set of DOM elements into an infinite, scrollable carousel. The visualization showcases the plugin's code architecture, including its constructor, prototype methods for initialization, event binding, and utility functions for item navigation, sizing, and effects. The example highlights how the plugin manages scrolling animations, navigation controls, and responsive sizing through a modular system of helper functions, all written in JavaScript with a CoffeeScript version provided.

Aabernier

55% match

Loading thumbnail…

jsperf carouFredSel

This example shows a refactored version of the jQuery carouFredSel plugin, a carousel library for scrolling through sets of items. The code sets up an auto-playing, configurable carousel with support for mousewheel navigation, touch gestures, and cookie-based start positions. It handles responsive sizing, item pagination, and custom events for lifecycle hooks. The refactored version organizes the logic into a CarouFredSel constructor and prototype, separating concerns like scroll timing, animation queues, and configuration merging.

Aabernier

54% match