⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
This software is maintained under a new repository located at yowainwright/reframe.js
⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
This is particularly awesome for making embedded stuff, like videos or playlists, scale appropriately within a content area. This can done by hand but it's difficult to maintain, especially with CMS's and multiple editors. Reframe.js solves this issue—perfectly!
Alternatively, noframe.js is provided. Noframe.js scales selected elements at a fixed ratio but does not manipulate the dom's element structure at all! This keeps things like analytic events that run on embedded content intact!
NPM
npm i reframe.js --save
Yarn
yarn add reframe.js
dist/reframe.js
reframe
the element you'd like to re-frame.reframe('iframe'); // Wrap all iFrames in the page
reframe(document.getElementById('my-frame')); // Pass a DOM element
reframe(document.querySelectorAll('.my-targets')) // Pass a live node list
Elements that have been wrapped with reframe will not be wrapped twice.
Reframe.js wraps a specified element in a div
that is an intrinsic ratio of the original element. This plugin is great for embedded content like iframes
or videos
.
Reframe.js is inspired by FitVids and does what FitVids does but without the need for jQuery
. This makes the plugin highly valuable when including it in a module that has to be very small and with minimal dependencies. Here's a basic codepen example.
This plugin is small - ~1.3kb
unminified and is meant to do 1 thing - wrap elements that aren't responsive and make them responsive. 💪
If you'd like to not use the classname 'js-reframe', just use your own.
reframe('iframe', 'my-classname');
Reframe.js works with jQuery or Zepto. As of version 2.0.0, use jquery.reframe.js
for jQuery or Zepto.
$('iframe').reframe();
// While using a custom class name
$('iframe').reframe('my-classname');
Noframe.js makes the same ratio as Reframe.js using css calc.
Noframe.js's doesn't wrap the element you'd like to be responsive. It, instead, does a calculation based on its or a parent element's max-width
. Here's a basic codepen example.
Noframe.js Notes
max width
to scale above the selected elements intial size otherwise the reframed element will only scale below its initial size. 👍dist/noframe.js
noframe
the element you'd like to re-frame.noframe('iframe');
noframe('iframe', 'parent');
Noframe.js works with jQuery or Zepto. As of version 2.0.0, use jquery.noframe.js
for jQuery or Zepto.
$('iframe').noframe();
$('iframe').noframe('parent');
Reframe.js offers the simplest solution to making elements scale at an intrinsic ratio.
Noframe.js doesn't wrap the selected element to make it scale at an intrinsic ratio. Noframe.js is the ideal solution when various events, like tracking events, could be affected when an element is wrapped. It does require a width
or max-width
which can involve a bit more setup awareness.
Created and maintained by Jeff Wainwright with Dollar Shave Club Engineering.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。