npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery-fullscreen-plugin

v1.1.5

Published

This jQuery plugin provides a simple to use mechanism to control the new fullscreen mode of modern browsers. Currently only newer Webkit-based browsers (Like Chrome) and Firefox provide this new fullscreen feature.

Downloads

5,107

Readme

jQuery Fullscreen Plugin

npm version

CDNJS

Description

This jQuery plugin provides a simple to use mechanism to control the new fullscreen mode of modern browsers. Currently only newer Webkit-based browsers (Like Chrome and Safari), Firefox and IE11+ provide this new fullscreen feature.

Usage

Entering Fullscreen mode

You can either switch the whole page or a single HTML element to fullscreen mode:

    $(document).fullScreen(true);
    $("#myVideo").fullScreen(true);

This only works when the code was triggered by a user interaction (For example a onclick event on a button). Browsers don't allow entering fullscreen mode without user interaction.

Exiting Fullscreen mode

Fullscreen mode is always exited via the document but this plugin allows it also via any HTML element. The owner document of the selected HTML element is used then:

    $(document).fullScreen(false);
    $("#myVideo").fullScreen(false);

Querying Fullscreen mode

Simply pass no argument to the fullScreen method to query the current state. The method returns the current fullscreen element (or true if browser doesn't support this) when fullscreen mode is active, false if not active or null when the browser does not support fullscreen mode at all. So you can use this method also to display a fullscreen button only when the browser supports fullscreen mode:

    $("#fullscreenButton").toggle($(document).fullScreen() != null))

Toggling Fullscreen mode

The plugin provides another method for simple fullscreen mode toggling:

    $(document).toggleFullScreen();

Notifications

The plugin triggers a fullscreenchange event on the document when the fullscreen mode has been changed. If the browser rejected a fullscreen state change then the plugin triggers a fullscreenerror event on the document. Example:

    $(document).bind("fullscreenchange", function() {
        console.log("Fullscreen " + ($(document).fullScreen() ? "on" : "off"));
    });

    $(document).bind("fullscreenerror", function() {
        alert("Browser rejected fullscreen change");
    });

Fullscreen iframe

Entering fullscreen mode from within an iframe is not allowed by default but it can be enabled with a few attributes on the iframe:

    <iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
    </iframe>

Known issues

  • In IE 11 an empty page is displayed when entering fullscreen from within an iframe. No idea why. Any help is welcome.
  • In Safari (At least in Safari 7) no keyboard input is allowed in fullscreen mode.