Noframe.js Example

Developer
Jeff Wainwright
Size
2,975 Kb
Views
8,096
  1. Noframe.js Example Previews
  2. Noframe.js Example HTML Codes
  3. Noframe.js Example CSS Codes
  4. Noframe.js Example JS Codes

How do I make an noframe.js example?

Noframe.js is a javascript plugin that makes elements scale at a fixed ratio. https://github.com/dollarshaveclub/reframe.js. What is a noframe.js example? How do you make a noframe.js example? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

Noframe.js Example Previews
IQ Test

Noframe.js Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Noframe.js Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article>	<header>	<h1>	Noframe.js	</h1>	<p>This page is a demo of a <a href="https://github.com/yowainwright/reframe.js">Noframe.js</a> - a very basic lightweight plugin that makes iframes or embedded content responsive.</p> <p>More deeply, this means that it makes elements scale at a fixed ratio.</p>	</header>	<div>	<iframe width="560" height="315" src="https://www.youtube.com/embed/6FQsIfE7sZM" frameborder="0" allowfullscreen></iframe> </div>	<p>This is an <code>iframe</code> that contains a video.</p>	<footer>	<p>~Thanks</p>	</footer>	</article> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Noframe.js Example - Script Codes CSS Codes

figure, p { margin: 1rem 0;
}
figcaption { margin: .5rem 0; text-align: center;
}
article { margin: 1rem; width: 100%;
}
@media screen and (min-width: 768px) { article { margin: 1rem auto; max-width: 700px; }
}
footer p, h1 { text-align: center;
}
footer, h1 { margin: 2rem auto;
}

Noframe.js Example - Script Codes JS Codes

(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.noframe = factory());
}(this, (function () { 'use strict';
function noframe(target, container) { var els = typeof target === 'string' ? document.querySelectorAll(target) : target; if (!('length' in els)) { els = [els]; } for (var i = 0; i < els.length; i++) { var el = els[i]; var height = el.offsetHeight; var width = el.offsetWidth; if (typeof container !== 'undefined' && container !== 'false') { var parent = document.querySelector(container); var maxwidth = window.getComputedStyle(parent, null).getPropertyValue('max-width'); el.style.width = '100%'; el.style.maxHeight = 'calc(' + maxwidth + ' * ' + height + '/' + width + ')'; } else { var _maxwidth = width + 'px'; el.style.display = 'block'; el.style.marginLeft = el.style.marginRight = 'auto'; var fullwidth = _maxwidth + 'px'; if (width > el.parentElement.offsetWidth) { fullwidth = el.parentElement.offsetWidth; el.style.maxHeight = 'calc(' + fullwidth + 'px * ' + height + '/' + width + ')'; } else { el.style.maxHeight = 'calc(' + _maxwidth + ' * ' + height + '/' + width + ')'; } el.style.width = fullwidth + 'px'; } el.style.height = 'calc(100vw * ' + height + '/' + width + ')'; el.style.maxWidth = '100%'; }
}
var plugin = window.$ || window.jQuery || window.zepto;
if (plugin) { plugin.fn.extend({ noframe: function noframeFunc(cName) { return noframe(this, cName); } });
}
return noframe;
})));
noframe('iframe');
Noframe.js Example - Script Codes
Noframe.js Example - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3.5
Size 2,975 Kb
Views 8,096
Do you need developer help for Noframe.js Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Wainwright (yowainwright) Script Codes
Name
A Pen by Jeff Wainwright
Stickybits Demo
Meeting Schedule Widget with Angular
ScrollDir Example
Shave, a javascript plugin for truncating text
Reframe.js Example
Playing with URLs and ScrollSpy
Trucated.js jQuery Demo
Full CSS Ribbon on 1 element
Reframe.js Demo
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!