if isMobile

100%

✓ Published0🌍 Public

Last edited May 7, 2015

Created on May 7, 2015

This example demonstrates a simple branching interaction that checks whether a user is on a touch-enabled device. It shows a plain JavaScript conditional statement that executes one block of code if `isMobile` evaluates to true, and a different block otherwise. The code relies on the `ontouchstart` and `onmsgesturechange` window properties to detect touch capability, assigning the result to a variable. No visualization libraries or data sources are used; the example is purely a logic skeleton for responsive behavior.

AI-generated description

Similar vizzes

Loading thumbnail…

CSS Media Queries for Desktop, Tablet, Mobile.

This example maps out CSS Media Query breakpoints for desktop, tablet, and mobile screen sizes, using plain CSS within a gist by MistyBlunch. It shows how `@media` rules with `min-width` and `max-width` conditions segment the viewport into device-specific ranges, from high-resolution desktops (1281px and up) down to smartphones (320px to 480px). The code also demonstrates an `orientation: landscape` variant for tablets. No external libraries or data sources appear; it relies solely on native CSS syntax to define responsive behavior at each width threshold.

MMistyBlunch

56% match

Loading thumbnail…

Swipe function

This example demonstrates swipe detection on a web page, where a user can swipe left, right, up, or down on a touch surface to trigger a visual response. The interface displays a message indicating the direction of the swipe. The code implements a custom `swipedetect` function using the `touchstart`, `touchmove`, and `touchend` events, calculating distance traveled and elapsed time to determine the swipe direction. The result is shown in the `#touchsurface` div, which has a styled green border and yellow text, with the background set to black via CSS.

HHariprashanth75

52% match

Loading thumbnail…

Gist fefe34600946bdbccd93fc2b6728aefe

This example shows a JavaScript promise used to model a conditional request for a new phone. The code defines a `Promise` constructor that resolves with a phone object when a boolean flag `isMonHappy` is true, and rejects with an error otherwise. The `askMon` function calls the promise, chaining `.then()` to log the resolved phone details and `.catch()` to log the rejection message. The demonstration relies solely on native promise syntax and `console.log` for output, with no external libraries or rendering.

MMistyBlunch

52% match

Loading thumbnail…

Untitled

This example demonstrates basic JavaScript conditionals and DOM manipulation. It shows a simple age check that writes either "Qualifies for driving" or "Does not qualify for driving" to the page based on a hardcoded variable. The code uses standard `document.write` for the conditional output and `document.getElementById` to set the text content of an element with the ID `message-element`. A separate `index.js` file assigns the string 'Hello World' to that element. The project references D3 version 6 in its README, but the visible code relies only on core JavaScript APIs.

Iikbb-kbj

51% match

Loading thumbnail…

Multitouch

This multitouch visualization maps each finger contact to a colored circle on an SVG canvas, with touches tracked by identifier. The example uses D3’s `d3.touches` API to capture touch events and `d3.event` to prevent default scrolling. Newly detected touches enter with an elastic scaling animation via `transition.attr("r", …)`, while removed touches shrink and exit. Circle positions update directly from touch coordinates, and color assignment uses `d3.scale.category10`. The code relies on touch-supporting browsers, such as iOS Safari, to dispatch the appropriate events.

Mmbostock

50% match

Loading thumbnail…

Title here

This example tests browser support for coarse and fine pointer media queries. It displays the boolean results of `pointer: coarse`, `any-pointer: coarse`, `pointer: fine`, and `any-pointer: fine` as headings using D3 v5. The code uses `window.matchMedia` to assess the user’s primary and any input device, and dynamically loads D3 based on browser compatibility.

GGerardoFurtado

50% match

Loading thumbnail…

Gist fa954043cfef0a0c69112a156ff518c2

This example is a CSS code snippet that addresses a mobile browser viewport bug. The code demonstrates a workaround for iPhones where the CSS `100vh` unit incorrectly calculates the viewport height, failing to account for the browser's bottom menu overlay. The fix is implemented by declaring a `min-height` property twice on the `body` element: first with the standard `100vh` value, and then with the `-webkit-fill-available` value for WebKit-based browsers. Additionally, the `html` element receives a `height` of `-webkit-fill-available` to ensure full-page coverage.

KKopylovVitalik

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

48% match