Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published2🌍 Public
JJaloYang
Last edited May 4, 2020
Created on May 1, 2020
Forked from HTML Starter

This example demonstrates a fixed-position news list that remains visible while scrolling through a page layout with header, content columns, and footer. The right-side list box uses jQuery scroll events to switch between fixed positioning and bottom-anchored placement, depending on scroll position relative to the content area and footer height. The layout is built with HTML and CSS using floats and a clearfix hack, while the interactive behavior relies on jQuery’s `scroll()` and `height()` methods. The page uses a simple red header, tan content blocks, and a blue fixed box.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates a responsive website layout built with HTML5 and CSS, featuring a navigation bar, introductory image, and content sections for boxes, events, and projects. The page uses semantic structural elements like `header`, `nav`, `main`, and `section` tags to organize material, with styling applied through a CSS framework. The design incorporates interactive buttons and links, and the visual hierarchy relies on header tags and horizontal rules. The layout is defined directly in the HTML structure, with no JavaScript libraries or data-viz libraries present.

DDannwiz
70% match
Loading thumbnail…

JS Bin

This example demonstrates scroll-position detection within a fixed-height container using vanilla JavaScript. The page defines two nested divs: an outer scrollable `divContainer` with a 200-pixel height and an inner `divContent` containing twelve sample paragraphs. When the user scrolls to the bottom, the code triggers an alert and dynamically expands the inner div’s height to 1000 pixels. The implementation relies on the container’s `onscroll` event handler and compares `scrollTop`, `scrollHeight`, and `offsetHeight` properties to determine when the bottom is reached.

JJaloYang
69% match
Loading thumbnail…

Untitled

This example demonstrates collapsible content sections controlled by clickable buttons. The interface presents a set of headers, each of which can be expanded or collapsed to reveal or hide a block of text below it. The implementation uses vanilla JavaScript event listeners to toggle CSS classes and inline `display` styles, responding to user clicks on elements with the class `collapsible`. The page is built with plain HTML and CSS, with styling that changes the button background color on hover and when active, and sets the hidden content area to a specific width with pink text on a white background.

OOghenemaro Anuyah
68% match
Loading thumbnail…

Untitled Document

This example presents a sports news interface styled as a dark-themed mobile app layout, built with React and CSS Grid. It includes a header with user controls, a horizontally scrollable scores bar displaying team logos and match results, and a filter bar for content categories. The main content area renders articles with full-width images, gradient overlays, and overlaid text using absolute positioning, alongside an audio item grid. The interface relies on Google Fonts (League Gothic and Spartan) for typography and custom CSS classes to manage layout and interactive states.

Llupica.matthew@gmail.com
68% match
Loading thumbnail…

Sample_Leaflet_scrollytelling

This example demonstrates a scrollytelling layout where scrolling through text sections triggers changes in a fixed visual panel. The page uses a two-column design: a scrollable column containing narrative content and a fixed column that updates its displayed information based on the visible section. The code leverages HTML, CSS, and JavaScript to implement the scroll-driven interaction, with `addEventListener('scroll', ...)` detecting visibility changes. It includes the Leaflet and D3 libraries as dependencies, though the core functionality focuses on DOM manipulation for content swapping rather than map rendering. The visible logic handles two content sections, with conditional checks to toggle between corresponding fixed content panels.

FFrancesco Di Filippo
68% match
Loading thumbnail…

Untitled

This example presents a minimal HTML page that displays a static heading and paragraph. Built with React, the page uses basic JSX to render the text content “Hello people” and a brief introductory sentence. The code relies on standard HTML elements within a React component structure, demonstrating a simple starter template for web development. No interactive features, data binding, or visualization libraries are employed beyond the core React framework.

Ssankalpnair
66% match
Loading thumbnail…

Untitled

This example displays a plain HTML page that uses CSS and JavaScript to render content within a React framework. The code sets up a minimal document structure, with the page body containing only the closing tags, indicating that all visual elements are generated dynamically. It serves as a bare-bones starting point for web-based visualization, demonstrating the integration of foundational web technologies with React, though no specific data or rendering libraries are invoked in the visible source.

KKulandai Yesu M
66% match
Loading thumbnail…

This is your title

This interactive visualization presents a blank, template-based web page styled with CSS for a scrollytelling narrative, using a light or dark theme toggle. Built with React and HTML/CSS, the example demonstrates responsive layout techniques with flexbox for chart rows and media queries for mobile, though it contains no actual data or chart graphics. The code primarily showcases typography, spacing, and section structure for a story-like presentation, with font imports for Open Sans and Lora.

SSelena Ding
66% match