fullscreen.js, no dependency

100%

fullscreen.js, no dependency

✓ Published0🌍 Public

Last edited Jul 30, 2018

Created on Jul 30, 2018

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.

AI-generated description

Similar vizzes

Loading thumbnail…

[Run it!](https://bl.ocks.org/curran/raw/3184b45f555dae6bebb1536110763824/)

This example displays a live webcam feed as an immersive digital mirror, filling the entire viewport with the video stream. It uses the MediaDevices `getUserMedia` API to request camera access and the `webrtc-adapter` library for cross-browser compatibility, with `window.URL.createObjectURL` to bind the stream to an HTML5 video element. The page relies on minimal CSS and JavaScript, drawing from the camera-control techniques in David Walsh’s tutorial and the MDN documentation for media capture.

CCurran Kelleher

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

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

58% match

Loading thumbnail…

Fork you

This example, titled “Fork you,” presents a blank HTML page that immediately loads an embedded YouTube video. It shows a playful, minimal interface where the sole content is a video player, demonstrating how a bare-bones HTML document can integrate external media. The code uses a standard `<iframe>` with YouTube’s embed URL and parameters for autoplay and fullscreen access, while the rest of the page remains empty. No JavaScript libraries or data visualization APIs are present; the rendering approach relies solely on the browser’s native handling of the iframe and YouTube’s player.

Ssamuelsimkai

56% match

Loading thumbnail…

Hello HTML

This example shows a minimal HTML page that uses CSS and JavaScript to render an empty, full-screen viewport. The page contains no data or visualization, instead serving as a bare starter template. The code employs basic CSS styling to remove margins and hide overflow on the body, while the HTML structure defines a title and the document type. No external libraries or APIs are used. The example demonstrates the simplest possible setup for building a web-based visualization from scratch.

Bbeebeckzzz

55% match

Loading thumbnail…

video display

This example displays a responsive embedded YouTube video within a D3.js v4 page, using an HTML iframe inside a styled video container. The container maintains a 16:9 aspect ratio with padding and positioning, while the iframe fills the available space. No data visualization or D3 API calls are present; the code solely handles video presentation through standard HTML and CSS.

BBrieLewis

55% match

Loading thumbnail…

Photobooth

This example creates a photobooth that captures images from a user's webcam and displays them in a gallery. The video monitor cycles through CSS filter effects—including grayscale, sepia, blur, hue rotations, and inversion—when clicked, while a hidden canvas draws the current video frame to generate snapshot images. The capture process uses the `navigator.getUserMedia` API for webcam streaming and the canvas element's `drawImage` and `toDataURL` methods to save frames as webp images. The animations are powered by JavaScript timers controlling the video element and canvas operations.

11wheel

55% match

Loading thumbnail…

javascript svg

This example generates a full-screen SVG visualization using the browser’s native Document Object Model (DOM) APIs. It creates 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the window. The rectangles are appended to an SVG element created via `document.createElementNS`, with dimensions set from `window.innerWidth` and `window.innerHeight`. The code runs directly in an HTML page with no external libraries, demonstrating a simple programmatic approach to SVG rendering in a React-hosted environment.

CCosmosDude1

55% match