Skip to main content
100%

Multiple docs opened in parallel

✓ Published0🌍 Public
Aalessioalex
Last edited Aug 22, 2021
Created on Aug 22, 2021

The interface simulates a document manager where users open spreadsheet files in parallel, displayed side-by-side in separate iframes. A modal dialog collects the file path, and a navigation sidebar lists opened documents, allowing users to add new ones. The active document is visually distinguished with a highlighted border, while the layout uses flexbox to divide the navigation panel and main content area that hosts the document iframes.

AI-generated description

Similar vizzes

Loading thumbnail…

Google Docs Viewer and Office Web Apps Viewer

This example demonstrates how to embed external document files directly into a webpage using two different browser-based viewer services. It shows a PDF file rendered through the Google Docs Viewer, enabled by an iframe that calls the `docs.google.com/viewer` API endpoint with a `url` parameter pointing to a sample PDF hosted on GitHub. A second iframe displays a Word document via the Microsoft Office Web Viewer, using the `view.officeapps.live.com/op/embed.aspx` API to load a demo `.docx` file. Both examples use fixed-width iframes with a height of 780 pixels to present the documents without leaving the page.

PP15GitHubStudent
57% match
Loading thumbnail…

Untitled

This visualization presents a multi-panel interface for exploring geospatial and mapping data. A sidebar on the left lists map layers, while the central viewport is divided into sections for a large map display, a grid of detail panels, and a document viewer with form and template areas. The right sidebar shows variable controls. The layout is constructed entirely with HTML and CSS absolute positioning, using styled divs with color-coded backgrounds to structure the interface, but no interactive data is rendered.

LLCherryholmes
53% match
Loading thumbnail…

Attach modal to Sketch document

This example shows how to attach a modal alert dialog to the active Sketch document window using the Sketch scripting API. It creates an `NSAlert` with OK and Cancel buttons and presents it as a sheet via `beginSheetModalForWindow:completionHandler:`. The completion handler uses a block created with `__mocha__.createBlock_function` to process the return code, logging success or cancelation. The code manages asynchronous execution through `coscript.createFiber()` and cleans up the fiber after the dialog closes.

KKevinGutowski
53% match
Loading thumbnail…

Tabbed View

This example demonstrates a nested tabbed view interface where users can switch between multiple panels. The outer TabbedView creates three tabs (first, second, third), and within the second tab, an inner TabbedView contains three additional tabs (one, two, three). The implementation uses d3.v7 to dynamically construct the DOM hierarchy, with a BlankLayout managing the overall viewport size. The code defines reusable layout components with customizable header, footer, and tab positioning (Left, Inner, Right), demonstrating a modular approach to building complex, resizable data visualization interfaces.

Ttux.harmon@gmail.com
52% match
Loading thumbnail…

Progressbar modal

This example demonstrates a modal progress bar displayed over the main application window, using a native macOS sheet to block interaction while a short task runs. The code creates an `NSProgressIndicator` with a blue tint, embeds it in an `NSWindow` configured as a document-modal sheet, and attaches it via `beginSheet_completionHandler` on `NSApplication.sharedApplication().mainWindow()`. The progress animation starts immediately, and the sheet closes after a three-second delay using `setTimeout` and `endSheet`, illustrating Apple’s AppKit APIs in JavaScript via JSTalk-style syntax.

KKevinGutowski
52% match
Loading thumbnail…

Trigger a Sheet alert

This example demonstrates a temporary modal progress bar that appears over the Sketch document window, indicating an ongoing sheet operation. The script uses the `sketch` API to access the selected document and its window controller. It constructs a 200x100 pixel `NSWindow` with a title and modal style, adds an `NSProgressIndicator` that starts animating in blue, and begins a sheet session with `beginSheet_completionHandler`. After a five-second timeout, the sheet is dismissed with `endSheet`, completing the interaction.

KKevinGutowski
51% match
Loading thumbnail…

tabs

Two buttons act as tabs to switch between two content divs. The example shows a minimal tabbed interface, where clicking “tab 1” displays the first div and hides the second, while clicking “tab 2” reverses the visibility. The code uses D3 v3 selections and event handling: `d3.select("#uno").style("display", "block")` and similar calls control the display property, and `d3.select('#b1').on('click', function() {...})` binds click events to the buttons. The page also suggests jQuery UI tabs as a more robust alternative.

Aaaizemberg
51% match
Loading thumbnail…

Untitled

This example presents a mobile-style user interface for an iNaturalist data visualizer, built with the Onsen UI framework and jQuery. The interface includes a navigator with a tab bar offering five sections: Home, Time, Space, Species, and Settings. Each tab is a separate page template, with the Home page containing a file input for uploading CSV data. The JavaScript handles page initialization events and logs tab clicks through jQuery’s `$(document).ready` and `click` handlers, though the actual data visualization logic is not yet implemented.

Aarun-subba
51% match