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

fabrik-fitframe

v1.0.15

Published

wrapper to create responsive iframes

Downloads

4

Readme

FitFrame.js

A lightweight, easy-to-use jQuery plugin for responsive iframes.

Setup

FitFrame.js requires jQuery. It has only been tested with jQuery 1.11 so if you have problems with any other versions let me know.

You can install via bower

bower install fitframe --save

Or via npm

bower install fabrik-fitframe --save

If you're using mode: wrap (the default) you'll want to reference fitframe.css:

<link rel="stylesheet" href="fitframe.css" />

And of course you'll need to reference jQuery and FitFrame.js:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="fitframe.js"></script>

Usage (wrap mode)

The default mode of FitFrame.js is wrap and uses intrinsic ratios to make the iframes responsive.

By wrapping the iframe element in a div with height: 0 and padding: X (where X is the ratio between the iframe height and width) we can create a responsive iframe that maintains aspect ratio as its container resizes. So for a 16:9 video the container elements gets a height of 56.25% of it's width ((9/16) * 100). Clever stuff I know!

This is the recommended mode since no JavaScript is actually executed when the viewport size changes.

To initialize FitFrame.js just call fitFrame() on your container element:

$('.container').fitFrame();

Adding elements at runtime

If you're adding DOM elements to your container at runtime you have two options.

  1. Just call the update function to have FitFrame.js search for any new iframes that have been added and make them responsive:

     $('.container').fitFrame('update');
  2. If you want to wrap the iframe before you add it to the DOM you can use the wrap function, passing the iframe object to wrap:

     var wrapped = $('.container').fitFrame('wrap', $(iframeHtml));      
     $('.add-embed').before(wrapped);

You can see an example of this in demos/demo-wrap.html that uses embed.ly to dynamically load videos using a URL. Note that you'll need to set your embedly API key in the code.

Usage (resize mode)

The resize mode binds to the window resize event and sets the size of the iframe element to fit the container. No wrapper element is used and you don't need to add any additional CSS.

If you just want to fit your iframes to the width of the container then you are best off using the wrap mode. That said, with the use of CSS transitions we can create a more interesting experience when resizing the browser. You can see an example of this in demos/demo-resize-width.html. To use resize mode:

$('.container').fitFrame({ mode: 'resize' });

Adding elements at runtime

Resize mode also supports adding elements at runtime and again you can do these for all new iframes or individually:

  1. Resize all new iframes

     $('.container').fitFrame('update');
  2. Resize an individual element before adding it to the DOM:

     var resized = $('.container').fitFrame('resize', $(iframeHtml));      
     $('.add-embed').before(resized);
        

Fit iframe to container height

This was the original reason for creating the plugin since I needed to make an iframe always fit the height of its container (without any awful black bars!).

To do this, set the fitHeight option to true:

$('.container').fitFrame({
 mode: 'resize',
 fitHeight: true
});

You can see an example of this in demos/demo-resize-height.html.

Options

defaults = {
  wrapperCssClass: 'fitframe-wrap',
  iframeCssClass: 'fitframe',
  mode: 'wrap',
  fitHeight: false
};

Cleanup

Like all good citizens, FitFrame.js will cleanup after itself:

$('.container').fitFrame('destroy');

And can be safely re-initialized if required.