Skip to main content
100%

$.inside

✓ Published0🌍 Public
Aabernier
Last edited Aug 10, 2012
Created on Jul 28, 2012

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.

AI-generated description

$.fn

Synopsis

$el.inside( <ancestor> [, <includeMargin>] )

Arguments

<ancestor>: The ancestor to compare $el with

    'selector' | jQuery | node

<includeMargin>: Whether to take margins into account

Returns

{
    left: <left>
    top: <top>
}

<left|top>: Position of $el to <ancestor>

    +-----+                   +-----+
    | 0/0 |                   | 1/0 | 
    +-----+                   +-----+
           +-----------------+
           |     +-----+     |
           |     |.5/.5|     |
           |     +-----+     |
           +-----------------+
    +-----+                   +-----+
    | 0/1 |                   | 1/1 |
    +-----+                   +-----+

Example

Determine if an element is in the viewport — and how far:

$('#foo').inside('html');

$.event.special

Synopsis

$(el).bind('inside', {ancestor: 'html'}, function (e, inside) {
  // inside.left
  // inside.top
});

Similar vizzes

Loading thumbnail…

$.fn.offsetRelative

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.

Aabernier
68% 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
60% match
Loading thumbnail…

$.fn.firework

A jQuery plugin demo shows a fireworks animation inside a bordered div, triggered by a button or on page load. It renders star-shaped characters from a configurable array (including emoji and HTML snippets) as absolutely positioned spans that animate outward with randomized distance, font size, and opacity changes using jQuery’s `animate()` method with easing functions from jQuery UI. Options like `amount`, `boundary`, `duration`, and `content` are editable live via `contenteditable` text parsed with `eval`, and the plugin’s defaults and custom settings are merged via `$.extend`.

Aabernier
59% match
Loading thumbnail…

Inertia

A 3D cube rendered with CSS transforms sits at the center of a scrollable background grid. Dragging the background applies inertial motion, with velocity and friction computed per frame using a custom Loop animation and Hammer.js for touch gestures. jQuery UI handles pointer interactions, while mousewheel events adjust the cube’s rotation. The cube’s six faces use CSS `rotateX` and `rotateY` transforms with `translateZ` offsets, and the background’s scroll position is updated with `translateZ` for depth. The code relies on raw GitHub-sourced libraries and jQuery for event handling.

Aabernier
59% match
Loading thumbnail…

Enter, Update, Exit

Four bars in a static HTML layout demonstrate a D3 data join, showing how elements enter, update, and exit based on an array of heights. Using `d3.select` and `selection.data`, the code binds the values `[100, 200, 300, 400]` to existing `.bar` divs, then applies inline styles for height and vertical margin to position them. The example also includes a separate SVG mask with a circle and horizontal rectangles, though it does not interact with the bars. This is a minimal v3-era reproduction using the D3 7.8.2 library.

Xxinyuwangxyw
58% 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
57% match
Loading thumbnail…

responsive d3

This example demonstrates a responsive bar chart that updates its width and bar positions when the browser window is resized. The visualization uses D3.js scales and axes to render two bars representing "Leave" and "Remain" categories, with data values randomly generated. Clicking an update button triggers a transition that animates the bars to new random heights, while the W library listens for viewport resize events and adjusts the x-scale range accordingly. The SVG rendering includes hover effects that turn bars black and uses D3's ordinal and linear scales, along with axis components and transition methods.

BBenHeubl
56% match
Loading thumbnail…

simple bar chat with interaction

Ten labeled bars display numeric values in a simple SVG bar chart. Hovering a bar turns it red and enlarges its corresponding text label; moving the mouse out triggers a 500-millisecond transition restoring the original fill and font size. The example uses D3 v4 with `d3.scaleLinear` for positioning, `d3.select` and `.on("mouseover")`/`.on("mouseout")` for interaction, and `.transition().duration()` to animate the visual feedback. The chart is built from a static array of ten numbers.

EElisaDnr
56% match