Provides a hook for CSS/JQuery effects to the top level elements in DSpace community lists

100%

Provides a hook for CSS/JQuery effects to the top level elements in DSpace community lists

✓ Published0🌍 Public

Last edited Dec 29, 2013

Created on Dec 29, 2013

This example customizes DSpace community-list navigation by assigning CSS class hooks to top-level elements. It uses an XSLT template to match the `dri:referenceSet` hierarchy and iterates over each `dri:reference` node, dynamically pulling metadata from the DSpace REST API via the `document()` function. For each entry, it constructs an HTML `div` with class `artifact-description top-level-nav` and extracts the title and handle from the item’s DIM metadata fields. The code builds a link by concatenating `/xmlui/handle` with the identifier substring, enabling jQuery accordion effects or other CSS interactions on these top-level items.

AI-generated description

Similar vizzes

Loading thumbnail…

{$title || " - "}

This example displays a list of EAD (Encoded Archival Description) titles sorted alphabetically from a collection of finalized XML files, rendered as plain paragraph elements in an XHTML page. It uses XQuery 3.1 with the `fn:collection` function to gather titles from `titleproper[@type="filing"]` nodes, and a local template function `local:template` constructs the HTML output, setting a dynamic heading level and tab title. The code demonstrates a server-side, XML-to-HTML transformation pipeline without client-side JavaScript libraries or interactive visualization components.

CCliffordAnderson

58% match

Loading thumbnail…

Digital Science for Library Workship

This example visualizes a list of Digital Science tools, sourced from a gist by Clifford Anderson, as a static text-based layout. It reads the topics from a Markdown file and renders each entry as a clickable hyperlink to its official website. The code uses the D3.js library, specifically `d3.select` and text element creation, to position the items within an SVG canvas. The visualization does not encode data into shapes or colors; instead, it presents the information as a clean, typographic interface for workshop attendees.

CCliffordAnderson

58% match

Loading thumbnail…

Custom CSS for Dynalist

This example shows how to customize the appearance and typography of Dynalist, a hierarchical note-taking app, through custom CSS. It demonstrates how to style tags, notes, code blocks, the current line highlight, page headers, heading levels (H1, H2, H3), and bullet points, while also resizing the CSS textarea and setting its font to a monospace stack. The code relies on plain CSS, including pseudo-classes like `:hover` and structural selectors such as `.Node-noteContainer > [class*='Node']` and `.Node-self.is-collapsed.is-parent > .Node-bullet`, without external libraries. It uses font families like 'Fira Code' and 'Menlo', with opacity, border-radius, and padding for visual refinement.

HHerbCaudill

56% match

Loading thumbnail…

D3 and Custom Data Attributes

This example shows how D3’s `datum` operator can read HTML5 custom data attributes from DOM elements and use that data for sorting. The code selects all list items, binds each element’s `dataset` object—containing the `username` attribute—via `.datum()`, then reorders the list with `.sort()` based on `d3.ascending` on the username values. It uses D3 v3 directly on a static, two-item unordered list, making no external data requests or canvas rendering.

Mmbostock

56% match

Loading thumbnail…

<title>Testing XPath

This example demonstrates how an XML TEI document’s structure can be queried using XPath and represented as an interactive node-link diagram. It displays the document’s hierarchical elements—such as `teiHeader`, `text`, `body`, and `p`—as circles connected by links, with text content visible alongside node labels. The visualization uses D3.js’s `d3.hierarchy` and `d3.tree` layout to calculate positions, while `d3.zoom` enables panning and zooming. The code loads the XML via a local file and parses it with `DOMParser`, then applies XPath expressions via `document.evaluate` to extract elements and text for rendering.

CCliffordAnderson

55% match

Loading thumbnail…

Force-Directed Layout from XML

This example visualizes a hierarchical XML document as a force-directed network, where each XML element becomes a draggable circle and parent-child relationships appear as links. The circle size reflects the numeric text content of each element, scaled using `d3.scaleSqrt`. The code uses `d3.forceSimulation` with link, charge, and centering forces, and loads the XML via `d3.xml`. It parses the document with native DOM queries, then renders the network as SVG with interactive dragging enabled through `d3.drag`.

Mmbostock

55% match

Loading thumbnail…

Manipulating the artifacts

This interactive HTML page demonstrates an accordion-style interface for concealing and revealing artifact content. Two header divs, labeled “Target name,” toggle the visibility of their adjacent content sections when clicked. The example uses jQuery’s `slideToggle()` method to animate the show/hide behavior and updates the header text based on the content’s visibility state, although both states display the same label. Styling is applied via an external CSS file, with inline styles for borders, while the page loads the jQuery library from Google’s CDN.

OOghenemaro Anuyah

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

54% match