Skip to main content
100%

Link anatomy

✓ Published0🌍 Public
Aabernier
Last edited Mar 31, 2017
Created on Jul 8, 2012

This interactive HTML page dissects a URL into its semantic components—protocol, host, port, pathname, search, and hash—by displaying each part as a clickable span. Hovering over a component highlights it with a tooltip label, while clicking sets the page’s hash to that component’s ID, updating the browser location. The implementation uses jQuery for click handling and CSS pseudo-elements for tooltips, with a fixed example URL hardcoded in the markup.

AI-generated description

Originally from http://stackoverflow.com/questions/6725890/location-host-vs-location-hostname-and-cross-browser-compatibility/11379802#11379802

TODO

  • deal with anchors to be able to copy links
  • make parts contenteditable

Similar vizzes

Loading thumbnail…

0414_html

This example demonstrates a simple HTML page with a bookmark-style navigation feature that links to specific sections such as name, address, phone number, and notes. The page uses anchor tags (`<a href="#...">`) to jump between content areas, with each section containing placeholder text and a link back to the top. It relies on plain HTML and CSS for structure and styling, with JavaScript not actively used in the visible code. The layout includes centered headers, an article navigation bar, and multiple information blocks marked by named anchors or IDs.

CChomin21
64% match
Loading thumbnail…

Gist 46260

This example shows a set of hoverable links that reveal hidden text spans when the mouse enters or leaves each link. The code uses jQuery’s `.hover()` method to toggle the visibility of the corresponding `.hoverable span` elements, with the text initially hidden via `.hide()`. The data is embedded directly in the HTML structure, and the interaction is driven by standard jQuery event handlers rather than any visualization library. The rendering approach relies on simple DOM manipulation, with no canvas, SVG, or external data sources involved.

Aamundo
63% match
Loading thumbnail…

hello

This example demonstrates HTML hyperlink behavior through four anchor tags, each using a different `target` attribute value (`_blank`, `_self`, `_parent`, `_top`) to control where the linked W3C site opens. The page also includes a JavaScript alert that fires on load, plus external styling from `info.css` and a separate `java.js` file that writes dynamic content to the document using `document.write`. The rendering relies on plain HTML, CSS, and vanilla JavaScript without any visualization libraries or frameworks, showing a basic interactive web page rather than a data-driven chart.

Kkimgooq
62% 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
61% match
Loading thumbnail…

info.design.2021.hello.world

This example demonstrates a simple HTML page with bookmark navigation, where links jump to specific sections such as name, address, and phone number. The page uses plain CSS for styling and JavaScript for interaction, though the included JavaScript file is empty. It relies on native HTML anchor tags (`<a href="#...">`) and the `name` and `id` attributes to create jump targets. The layout is composed of header, section, and article elements, with placeholder text indicating information areas, and includes a "TOP" link to return to the page header.

Kkdpark-phd
61% match
Loading thumbnail…

Gist ec916d1fc2f8a4ed9fb9

This example demonstrates a minimal URL-based interaction pattern for a web page. It shows how a query string parameter, such as `?targetDiv`, is parsed with jQuery and used to reveal a specific hidden element on the page. The code uses `$(location).attr('search')` to retrieve the raw query string, strips the leading question mark with `substring(1)`, and then calls a `doStuff()` function that targets the named div via `$("#" + targetDiv).show()`. No data visualization or charting library is involved; the focus is purely on client-side DOM manipulation driven by the page’s URL.

LLayne Smith
60% match
Loading thumbnail…

Link

This visualization displays a single hyperlink presented as a simple HTML page, with the text “こちら” linking to an external website. The page uses standard HTML markup with a `<font>` tag specifying Japanese fonts, and the link is set to open in a new browser tab via `target="_top"`. No JavaScript libraries or data-processing APIs are involved; the rendering relies solely on basic HTML elements and inline text styling. The example demonstrates a minimal, functional web link without any interactive or dynamic visualization features.

YY-Reku
60% match
Loading thumbnail…

Crude javascript create link

This example implements a JavaScript function that converts plain text into HTML links by identifying URL-like patterns. It relies on a regular expression stored in `expression` and instantiated with the `RegExp` constructor to match domains and paths. The `makeLink` function scans the input string, strips any leading `http://` or `https://` protocol, then uses jQuery’s `$()` and `.each()` method to iterate over matched substrings and replace each occurrence with an anchor tag that points to the matched URL. The rendered output is intended for inline display in a web page.

TTBD
60% match