Gist 5374ae5e90acada9f9225c8154461e5f

100%

Gist 5374ae5e90acada9f9225c8154461e5f

✓ Published0🌍 Public

Last edited Jun 13, 2016

Created on Jun 13, 2016

This visualization presents an interactive tooltip and navigation system built on top of the fullpage.js scrolling framework. The code attaches click handlers to the navigation dots generated by fullpage.js, redirecting users to the corresponding section hash when clicked. It uses jQuery selectors to target the `#fp-nav > ul > li > div` elements and binds a `click` event that navigates via `document.location.href`. The example demonstrates a quick fix for making fullpage.js’s built-in dot navigation clickable, enhancing usability without altering the core library’s behavior. No external data sources or rendering libraries are involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 280440

This visualization demonstrates a custom hover effect for navigation links, where each link reveals a small dot marker on its left side. The effect is implemented using CSS pseudo-elements, specifically `:hover:before`, which injects the dot image via the `content` property. The dot is positioned absolutely using `top: 6px` and `left: 4px` relative to the link, and the rule applies only when the user hovers over the link. No JavaScript or data libraries are involved; the example relies purely on CSS styling. The `gistfile1.css` file contains the styling, and the dot image is loaded from an external path.

CCaged

68% match

Loading thumbnail…

Gist 4632462

This example demonstrates how to turn a traditional multi-page website into a smooth, AJAX-driven single-page experience using the HTML5 History API. It shows the process of intercepting internal link clicks, fetching new page content via jQuery’s `$.ajax`, and dynamically replacing the page’s content and document title without a full reload. The implementation relies on History.js for state management, jQuery selectors to identify content and menu regions, and the optional jQuery ScrollTo plugin to animate scrolling after content updates. The readme documents installation steps and explains the state-change workflow.

TThanad

66% match

Loading thumbnail…

D3 PJAX

This example demonstrates a PJAX-style navigation interface where clicking links updates the page content without a full reload, using the browser’s History API to manage the back and forward buttons. The code defines a `pjax` function that attaches click handlers to all `ul li a` links, calls `history.pushState` with the target URL, and loads the new page fragment via `d3.html`. It replaces the content of `#main` with the corresponding element from the fetched document and re-applies the link handlers. A `popstate` listener loads the previous state when the user navigates backward or forward.

Mmbostock

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

64% match

Loading thumbnail…

browsing tools dotjs snippets

This example shows a collection of JavaScript snippets that add keyboard and mouse shortcuts to specific websites, such as Forrst and Dribbble. It demonstrates how jQuery is used to bind click handlers to page elements, triggering navigation to the next paginated page, and how a custom keydown handler detects the Control key to open a Dribbble shot in a new window. The code relies on jQuery selectors and CSS properties to identify active elements, and it uses `document.location` for redirection. The snippets are designed for the dotjs browser extension, which injects user scripts into matching sites.

TTBD

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

63% match

Loading thumbnail…

Scroll Highlighting (as seen at http://geojson.org/geojson-spec.html)

This example shows a navigation menu that automatically highlights the section currently visible in the viewport as the user scrolls. The code uses jQuery to listen for window scroll and resize events, then checks each heading’s offset position against the viewport bounds to determine which one is active. It applies “active” and “first” CSS classes to corresponding navigation links via `$('#nav a')`, and it runs once on page load. The data comes from the headings’ `id` attributes in the document, as seen in the GeoJSON specification page.

RRestuta

62% match

Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl

62% match