Skip to main content
SimilarExport ZIP
100%

utilities for toggling fullscreen

✓ Published0🌍 Public
MMAKIO135
Last edited Mar 27, 2019
Created on Mar 27, 2019

This utility demonstrates a browser-based fullscreen toggle for data-visualization canvases. A single click event triggers the `toggleFullScreen()` function, which checks the current fullscreen state via `isFullScreen()` and then calls either `requestFullScreen(element)` or `exitFullScreen()`. The code provides cross-browser support by testing for standard and vendor-prefixed APIs (`requestFullscreen`, `msRequestFullscreen`, `mozRequestFullScreen`, `webkitRequestFullscreen`) and their exit counterparts. The script targets the document root element, making it applicable to any visualization rendered in the page.

AI-generated description

Similar vizzes

Loading thumbnail…

fullscreen.js, no dependency

This example demonstrates how to add a fullscreen toggle button to any web page, showing a persistent user interface control that enables immersive viewing. The code appends a clickable “Fullscreen” button to the document body, leveraging the native browser fullscreen API through vendor-prefixed methods like `webkitRequestFullScreen` and `mozRequestFullScreen` to handle cross-browser support. On activation or exit, it triggers a redraw of the page after 200 milliseconds to refresh the visualization. The button label changes to a multiplication sign when in fullscreen mode, reflecting the current state via the `fullscreenchange` event listener.

PPhilippe Rivière
79% match
Loading thumbnail…

Fullsize.js Prototype

This prototype demonstrates a minimal reusable utility for creating full-screen D3 visualizations that respond to browser resize events. The `fullsize` function appends a fixed-position div, adds an SVG child, and on every resize extracts the div’s dimensions to update the SVG’s width and height attributes, then calls a user-supplied render function. The example renders two diagonal lines forming an X, with coordinates recomputed from the current width and height, using D3 v4’s data join and merge pattern.

CCurran Kelleher
59% match
Loading thumbnail…

Javascript

This example demonstrates a collection of JavaScript utilities for enhancing web page interactivity, focusing on user-input controls and navigation. It shows how keyboard and click events can be managed to prevent accidental data loss and to streamline table or list interactions. The code uses plain JavaScript with jQuery for DOM manipulation, including the `bind` method for event handling, `history.pushState` for URL updates without page reloads, and jQuery’s `prop` and `is` methods to toggle checkbox states. The snippets cover F5 key disabling, dynamic URL changes, and bulk selection of checkboxes, reflecting a typical admin-panel or form-heavy workflow.

IIliaIdakiev
54% match
Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed
53% match
Loading thumbnail…

Toggling element visibility in v5

This interactive line chart displays two time series from a CSV file, showing closing and opening values over dates. The visualization allows users to toggle the visibility of each line by clicking on its corresponding legend label. Built with D3.js v5, it uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to construct the SVG paths, while legend clicks dynamically adjust the `opacity` of each line group.

Dd3noob
53% match
Loading thumbnail…

Gist 2d272134b57b02eb8cdd0c5904249591

This example tests the archival fidelity of a web page by loading a series of images and scripts that mimic dynamic behavior, including DOM manipulation, AJAX requests, and delayed updates. It uses JavaScript’s `XMLHttpRequest` to fetch remote images and replaces them via base64 data URLs, while `setTimeout` and scroll events trigger asynchronous content changes. The page is rendered within an iframe by the pywb web archiving tool, with a banner and rewrite layer applied. The visualization demonstrates how archived sites handle live interactions and resource loading over time.

NN0taN3rd
53% match
Loading thumbnail…

hgis

This example renders a full-screen SVG canvas that resizes to fill the browser viewport. The visualization sets up a fixed, full-body layout using Bootstrap utility classes and custom CSS with overflow hidden. The D3 v5 library handles the SVG element, and the code uses `document.body.clientWidth` and `document.body.clientHeight` to compute the canvas dimensions. The header and fill areas are styled with Bootstrap’s background color classes, but no actual data or marks are drawn in the provided scripts.

AAnimesh Nautiyal
52% match
Loading thumbnail…

Tailwindcss play link https://play.tailwindcss.com/jJ7APsi5d8 ide window prime for embedding some code

This example showcases a Tailwind CSS-based user interface for a code editor window, rendered as an SVG. It demonstrates a responsive layout with a top toolbar containing window controls and a sidebar toggle button, alongside a document title linking to a GitHub source file. The code uses Tailwind utility classes for styling, including grid layouts, flexbox, and custom pseudo-element effects for hover states. A reset button triggers a visual refresh, while the interface is designed with accessibility features like ARIA labels and focus states. The layout adapts across breakpoints, showing hidden elements on smaller screens.

HHugoberry
52% match