### Update DOM with setup()
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Call the setup method to refresh internal tracking after modifying navigation items in the DOM.
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
// After dynamically adding new navigation items
document.querySelector('#my-awesome-nav').innerHTML += 'New Section';
// Rebuild Gumshoe's internal tracking
spy.setup();
```
--------------------------------
### setup() Method
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Recalculates and rebuilds internal data structures. Use this when navigation items are dynamically added or removed after initialization.
```APIDOC
## setup() Method
### Description
Recalculates and rebuilds internal data structures based on the current DOM state. Use this method when navigation items are dynamically added or removed after Gumshoe has been initialized.
### Method
`spy.setup()`
### Parameters
None
### Request Example
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
// After dynamically adding new navigation items
document.querySelector('#my-awesome-nav').innerHTML += 'New Section';
// Rebuild Gumshoe's internal tracking
spy.setup();
```
### Response
None
```
--------------------------------
### Gumshoe setup() Method
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Call the `setup()` method to recalculate Gumshoe's internal measurements, useful when navigation items are dynamically added to the DOM after initialization.
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
spy.setup();
```
--------------------------------
### Complete HTML, CSS, and JavaScript Example
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
This snippet includes the full HTML structure, CSS for styling a fixed sidebar and content sections, and JavaScript to initialize Gumshoe with various configuration options. It also demonstrates listening for the 'gumshoeActivate' event.
```html
Documentation
API Reference
Content here...
```
--------------------------------
### Install Gumshoe via NPM (Bash)
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Install Gumshoe using NPM or your preferred package manager. This command adds the Gumshoe library to your project's dependencies.
```bash
npm install gumshoejs
```
--------------------------------
### Initialize Gumshoe Instance
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Create a new instance by providing a CSS selector for navigation links and an optional configuration object.
```javascript
// Basic initialization - select all anchor links in the navigation
var spy = new Gumshoe('#my-awesome-nav a');
// Full configuration with all options
var spy = new Gumshoe('#my-awesome-nav a', {
// Active classes
navClass: 'active', // Class applied to the nav list item
contentClass: 'active', // Class applied to the content section
// Nested navigation support
nested: false, // If true, add classes to parent nav items
nestedClass: 'active', // Class applied to parent items
// Offset & reflow
offset: 0, // Pixels from top to activate content
reflow: false, // Listen for resize events
// Event support
events: true // Emit custom events
});
```
--------------------------------
### Gumshoe Initialization with Options
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Instantiate Gumshoe with various options to customize its behavior, such as active classes, nested navigation, offsets, and event emission.
```APIDOC
## Initialize Gumshoe with Options
### Description
Instantiate Gumshoe with custom options to control active classes, nested navigation, offsets, and event handling.
### Method
`new Gumshoe(selector, options)`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Options
- **navClass** (string) - `active` - Applied to the navigation list item.
- **contentClass** (string) - `active` - Applied to the content.
- **nested** (boolean) - `false` - If true, add classes to parents of active link.
- **nestedClass** (string) - `active` - Applied to the parent items.
- **offset** (number or function) - `0` - How far from the top of the page to activate a content area. Can be a number or a function that returns a number.
- **reflow** (boolean) - `false` - If true, listen for reflows.
- **events** (boolean) - `true` - If true, emit custom events.
### Request Example
```javascript
var spy = new Gumshoe('#my-awesome-nav a', {
navClass: 'active',
contentClass: 'active',
nested: false,
nestedClass: 'active',
offset: 0,
reflow: false,
events: true
});
```
### Response
None (initialization does not return a value)
```
--------------------------------
### Gumshoe Initialization with Options
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Instantiate Gumshoe with various options to customize active classes, nested navigation behavior, offset, reflow detection, and event emission.
```javascript
var spy = new Gumshoe('#my-awesome-nav a', {
// Active classes
navClass: 'active', // applied to the nav list item
contentClass: 'active', // applied to the content
// Nested navigation
nested: false, // if true, add classes to parents of active link
nestedClass: 'active', // applied to the parent items
// Offset & reflow
offset: 0, // how far from the top of the page to activate a content area
reflow: false, // if true, listen for reflows
// Event support
events: true // if true, emit custom events
});
```
--------------------------------
### Gumshoe Constructor
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Initializes a new Gumshoe instance to track scroll position and activate navigation links. It accepts a CSS selector for navigation links and an optional configuration object.
```APIDOC
## Constructor - new Gumshoe()
### Description
Creates a new Gumshoe instance that monitors scroll position and activates navigation links when their corresponding content sections enter the viewport. The constructor accepts a CSS selector for the navigation links and an optional configuration object.
### Method
`new Gumshoe(selector, options)`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Parameters (Options Object)
- **navClass** (string) - Optional - Class applied to the active nav list item.
- **contentClass** (string) - Optional - Class applied to the active content section.
- **nested** (boolean) - Optional - If true, add classes to parent nav items for nested navigation support. Defaults to `false`.
- **nestedClass** (string) - Optional - Class applied to parent items when nested navigation is enabled.
- **offset** (number or function) - Optional - Pixels from the top of the viewport to activate content. Can be a static number or a function that returns a dynamic offset value.
- **reflow** (boolean) - Optional - If true, listen for window resize events to recalculate offsets. Defaults to `false`.
- **events** (boolean) - Optional - If true, emit custom events for advanced integrations. Defaults to `true`.
### Request Example
```javascript
// Basic initialization
var spy = new Gumshoe('#my-awesome-nav a');
// Full configuration with all options
var spy = new Gumshoe('#my-awesome-nav a', {
navClass: 'active',
contentClass: 'active',
nested: false,
nestedClass: 'active',
offset: 0,
reflow: false,
events: true
});
```
### Response
None (This is a constructor)
```
--------------------------------
### Initialize Gumshoe with Reflow Detection (JavaScript)
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Enable Gumshoe to detect layout changes (reflows) by setting the `reflow` option to `true`. This is useful if your linked content has different layouts at various viewports.
```javascript
var spy = new Gumshoe('#my-awesome-nav a', {
reflow: true
});
```
--------------------------------
### Gumshoe Instance Methods
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Methods for controlling the lifecycle and detection state of a Gumshoe instance.
```APIDOC
## detect()
### Description
Manually triggers detection of the currently active content section and updates navigation accordingly. Useful when content visibility changes programmatically without scrolling.
## destroy()
### Description
Completely removes the Gumshoe instance, deactivating all navigation items, removing event listeners, and cleaning up internal state.
```
--------------------------------
### Enable responsive reflow support
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Set the reflow option to true to automatically recalculate content positions when the window is resized.
```javascript
var spy = new Gumshoe('#my-awesome-nav a', {
reflow: true // Listen for resize events and recalculate
});
```
--------------------------------
### Configure Nested Navigation
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Enable hierarchical highlighting by setting the nested option to true and defining a nestedClass.
```html
```
--------------------------------
### Initialize Gumshoe with Nested Navigation Support (JavaScript)
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
To enable active class highlighting for parent list items in nested navigation, set the `nested` option to `true` and optionally customize the `nestedClass`.
```javascript
var spy = new Gumshoe('#my-awesome-nav a', {
nested: true,
nestedClass: 'active-parent'
});
```
--------------------------------
### Initialize Gumshoe
Source: https://github.com/cferdinandi/gumshoe/blob/master/nested-nav.html
Initializes the Gumshoe instance with nested navigation support.
```javascript
var spy = new Gumshoe('#my-awesome-nav a', { nested: true });
```
--------------------------------
### Gumshoe detect() Method
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Manually trigger Gumshoe's detection logic with the `detect()` method to activate the appropriate navigation link for the content currently in the viewport.
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
spy.detect();
```
--------------------------------
### Configure Gumshoe CSS Layout
Source: https://github.com/cferdinandi/gumshoe/blob/master/nested-nav.html
Defines the container, grid, and navigation styling for the Gumshoe implementation.
```css
html { overflow-y: auto; scroll-behavior: smooth; } /* Sets body width */ .container { max-width: 90em; width: 88%; margin-left: auto; margin-right: auto; } /** * Grid */ .grid { display: grid; grid-gap: 2em; grid-template-columns: 30% 70%; } #my-awesome-nav { position: fixed; } #my-awesome-nav a { display: inline-block; padding: 0.25em 0.5em; } #my-awesome-nav li.active > a { background-color: black; } #my-awesome-nav li.active > a { color: white; } /** * Sections */ .section { color: #ffffff; height: 95vh; margin: 0; padding: 2em; } .subsection { height: 25vh; margin: 0; } #eenie { background-color: #0088cc; } #meenie { background-color: rebeccapurple; } #miney { background-color: #272727; } #mo { background-color: #f42b37; }
```
--------------------------------
### Gumshoe Configuration
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Configuration options for Gumshoe instances.
```APIDOC
## Reflow Support
### Description
When content sections have responsive layouts that change height at different viewport sizes, enable reflow detection to automatically recalculate positions on window resize.
### Parameters
- **reflow** (boolean) - Optional - Set to true to listen for resize events and recalculate.
```
--------------------------------
### Include Gumshoe via CDN (HTML)
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Include Gumshoe using the jsDelivr CDN. It's recommended to use a specific version or version range for production sites to ensure stability.
```html
```
```html
```
```html
```
```html
```
--------------------------------
### Set Fixed Header Offsets
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Adjust activation thresholds using static pixel values or dynamic functions to account for fixed headers.
```javascript
// Static offset value (pixels from top)
var spy = new Gumshoe('#my-awesome-nav a', {
offset: 100
});
// Dynamic offset calculation for fixed header
var header = document.querySelector('#my-header');
var spy = new Gumshoe('#my-awesome-nav a', {
offset: function () {
// Calculate header height including padding and margins
var computed = window.getComputedStyle(header);
return parseFloat(computed.height) +
parseFloat(computed.marginTop) +
parseFloat(computed.marginBottom) +
parseFloat(computed.paddingTop) +
parseFloat(computed.paddingBottom);
}
});
// Simple header height offset
var spy = new Gumshoe('#my-awesome-nav a', {
offset: function () {
return header.getBoundingClientRect().height;
}
});
```
--------------------------------
### CSS Layout and Navigation Styling
Source: https://github.com/cferdinandi/gumshoe/blob/master/src/copy/index.html
Defines the grid structure, container constraints, and active state styling for the navigation menu.
```css
html { overflow-y: auto; scroll-behavior: smooth; } /* Sets body width */ .container { max-width: 90em; width: 88%; margin-left: auto; margin-right: auto; } /** * Grid */ .grid { display: grid; grid-gap: 2em; grid-template-columns: 30% 70%; } #my-awesome-nav { position: fixed; } #my-awesome-nav li.active { background-color: black; } #my-awesome-nav li.active a { color: white; } /** * Sections */ .section { color: #ffffff; height: 95vh; margin: 0; padding: 2em; } .section-small { height: 50vh; } .eenie { background-color: #0088cc; } .meenie { background-color: rebeccapurple; } .miney { background-color: #272727; } .mo { background-color: #f42b37; } .tiger { background-color: #e5e5e5; color: #000000; }
```
--------------------------------
### Initialize Gumshoe with Custom Offset
Source: https://github.com/cferdinandi/gumshoe/blob/master/src/copy/fixed-nav.html
Instantiate Gumshoe with a custom offset function to account for fixed headers. This ensures smooth scrolling correctly positions content below dynamic header heights.
```javascript
var spy = new Gumshoe('#my-awesome-nav a', {
offset: function () {
var header = document.querySelector('#my-header');
var computed = window.getComputedStyle(header);
return parseFloat(computed.height) + parseFloat(computed.marginTop) + parseFloat(computed.marginBottom) + parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom);
}
});
```
--------------------------------
### Dynamically Offset Navigation with Fixed Header
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Use a function to dynamically calculate and apply an offset based on a fixed header's height. This ensures content activation is accurate even with a sticky header.
```javascript
// Get the header
var header = document.querySelector('#my-header');
// Initialize Gumshoe
var spy = new Gumshoe('#my-awesome-nav a', {
offset: function () {
return header.getBoundingClientRect().height;
}
});
```
--------------------------------
### Manually trigger detection with detect()
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Use this method to update navigation state after programmatic content changes, such as opening an accordion or tab.
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
// Force detection after programmatic content changes
spy.detect();
// Example: Detect after accordion or tab content is revealed
document.querySelector('.accordion-trigger').addEventListener('click', function() {
// Toggle accordion content...
spy.detect();
});
```
--------------------------------
### Listen for Gumshoe Activation Events
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Add an event listener to the document to react when Gumshoe activates a navigation link. The event detail provides access to the link, content, and settings.
```javascript
// Listen for activate events
document.addEventListener('gumshoeActivate', function (event) {
// The list item
var li = event.target;
// The link
var link = event.detail.link;
// The content
var content = event.detail.content;
}, false);
```
--------------------------------
### Include Gumshoe with Polyfills (HTML)
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Use this script tag to include the Gumshoe version with built-in polyfills for older browsers. Ensure the path is correct for your project.
```html
```
--------------------------------
### Initialize Gumshoe
Source: https://github.com/cferdinandi/gumshoe/blob/master/src/copy/index.html
Initializes the Gumshoe instance targeting anchor tags within the specified navigation element.
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
```
--------------------------------
### Gumshoe Public Methods
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Utilize public methods to manually control Gumshoe's behavior, such as re-calculating positions, detecting the active element, or destroying an instance.
```APIDOC
## Gumshoe Public Methods
### Description
Gumshoe exposes several public methods to interact with its functionality after instantiation.
### Methods
#### `setup()`
Setups all of the calculations Gumshoe needs behind-the-scenes. If you dynamically add navigation items to the DOM after Gumshoe is instantiated, you can run this method to update the calculations.
**Example**
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
spy.setup();
```
#### `detect()`
Activate the navigation link that's content is currently in the viewport.
**Example**
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
spy.detect();
```
#### `destroy()`
Destroy the current instantiation of Gumshoe.
**Example**
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
spy.destroy();
```
### Response
None (methods do not return values)
```
--------------------------------
### Offsetting for Fixed Headers
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Adjust the activation point of content sections to account for fixed headers on the page.
```APIDOC
## Accounting for Fixed Headers
### Description
If you have a fixed header on your page, you may want to offset when a piece of content is considered "active." The `offset` user setting accepts either a number, or a function that returns a number. If you need to dynamically calculate dimensions, a function is the preferred method.
### Method
`new Gumshoe(selector, options)` with `offset` option.
### Parameters
#### Offset Option
- **offset** (number or function) - Required - How far from the top of the page to activate a content area. A function can be used to dynamically calculate the offset, for example, based on a fixed header's height.
### Request Example
```javascript
// Get the header
var header = document.querySelector('#my-header');
// Initialize Gumshoe with a dynamic offset
var spy = new Gumshoe('#my-awesome-nav a', {
offset: function () {
return header.getBoundingClientRect().height;
}
});
```
### Response
None (initialization does not return a value)
```
--------------------------------
### Initialize Gumshoe for Navigation
Source: https://github.com/cferdinandi/gumshoe/blob/master/src/copy/nested-nav.html
Instantiate Gumshoe to enable smooth scrolling for anchor links within the navigation element. The 'nested' option allows for hierarchical menu structures.
```javascript
var spy = new Gumshoe('#my-awesome-nav a', {
nested: true
});
```
--------------------------------
### Clean up instances with destroy()
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Removes event listeners and internal state. Essential for DOM cleanup or reinitializing with new configuration settings.
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
// Later, destroy the instance
spy.destroy();
// Reinitialize with different settings
spy = new Gumshoe('#my-awesome-nav a', {
nested: true,
offset: 50
});
```
--------------------------------
### HTML Navigation Markup
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Gumshoe requires a list of anchor links in your HTML. This can be an ordered or unordered list, styled as needed. The `href` attributes should correspond to the IDs of the sections you want to link to.
```html
```
--------------------------------
### Handle gumshoeActivate events
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Fires when a navigation link becomes active. Access metadata via event.detail to update UI elements like page titles.
```javascript
var spy = new Gumshoe('#my-awesome-nav a', {
events: true // Enable custom events (default)
});
// Listen for activation events
document.addEventListener('gumshoeActivate', function (event) {
// The list item that became active
var listItem = event.target;
// The anchor link element
var link = event.detail.link;
// The content section element
var content = event.detail.content;
// Current Gumshoe settings
var settings = event.detail.settings;
console.log('Activated:', link.href);
console.log('Content ID:', content.id);
// Example: Update page title based on active section
document.title = content.querySelector('h2').textContent + ' - My Site';
}, false);
```
--------------------------------
### Gumshoe Custom Events
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Listen for custom events emitted by Gumshoe to react to link activation and deactivation.
```APIDOC
## Gumshoe Custom Events
### Description
Gumshoe emits custom events `gumshoeActivate` and `gumshoeDeactivate` which can be listened to using `addEventListener()`.
### Events
- **gumshoeActivate**: Emitted when a link is activated.
- **gumshoeDeactivate**: Emitted when a link is deactivated.
Both events are emitted on the list item and bubble up. The `event.detail` object includes the `link` and `content` elements, and the `settings` for the current instantiation.
### Request Example
```javascript
// Listen for activate events
document.addEventListener('gumshoeActivate', function (event) {
// The list item
var li = event.target;
// The link
var link = event.detail.link;
// The content
var content = event.detail.content;
// The settings
var settings = event.detail.settings;
}, false);
// Listen for deactivate events
document.addEventListener('gumshoeDeactivate', function (event) {
// The list item
var li = event.target;
// The link
var link = event.detail.link;
// The content
var content = event.detail.content;
// The settings
var settings = event.detail.settings;
}, false);
```
### Response
None (event listeners do not return values)
```
--------------------------------
### Active Link Styling (CSS)
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Gumshoe adds an '.active' class to the relevant list item and link. You need to add custom CSS to style the active state of your navigation links.
```css
#my-awesome-nav li.active a {
font-weight: bold;
}
```
--------------------------------
### Handle gumshoeDeactivate events
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Fires when a navigation link is deactivated. Useful for stopping media or cleaning up state associated with a section.
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
// Listen for deactivation events
document.addEventListener('gumshoeDeactivate', function (event) {
var listItem = event.target;
var link = event.detail.link;
var content = event.detail.content;
console.log('Deactivated:', link.href);
// Example: Stop video playback when section is deactivated
var video = content.querySelector('video');
if (video) {
video.pause();
}
}, false);
// Combined example: Track section viewing analytics
document.addEventListener('gumshoeActivate', function (event) {
analytics.track('Section Viewed', {
section: event.detail.content.id,
timestamp: Date.now()
});
}, false);
```
--------------------------------
### Gumshoe destroy() Method
Source: https://github.com/cferdinandi/gumshoe/blob/master/README.md
Remove Gumshoe from the page and clean up any event listeners or added classes by calling the `destroy()` method on an instance.
```javascript
var spy = new Gumshoe('#my-awesome-nav a');
spy.destroy();
```
--------------------------------
### Gumshoe Custom Events
Source: https://context7.com/cferdinandi/gumshoe/llms.txt
Custom events emitted by Gumshoe to track activation and deactivation of navigation items.
```APIDOC
## gumshoeActivate
### Description
Fires when a navigation link becomes active. The event bubbles up from the list item and includes the link element, content element, and current settings in event.detail.
## gumshoeDeactivate
### Description
Fires when a navigation link is deactivated. Use this to clean up any state or animations associated with the previously active section.
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.