artdesign-box-iframe

jQuery PlugIn to load IFrame content

Usage no npm install needed!

<script type="module">
  import artdesignBoxIframe from 'https://cdn.skypack.dev/artdesign-box-iframe';
</script>

README

ArtDesignBoxIFrame (v1.0.0)

jQuery PlugIn to load IFrame content

  • ArtDesignBoxIFrame is a jQuery PlugIn to load IFrame content
  • Full width and full height - 100%
  • Class prefix to prevent conflict with classes from other CSS files
  • Full style control with JS - no need CSS: icon, colors, opacity etc
  • Full control of the position of close element
  • Multiple instances

ArtDesignBoxIFrame

Full instructions, Examples and Download - www.artdesign-jquery.com/ArtDesignBoxIFrame

Instruction

Load files

First method

Define a required files in file Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js

window.ArtDesignFilesLoader.RequiredResources([
    "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css",
    "JavaScript/ColorAnimation/ColorAnimation.js",
    "JavaScript/ArtDesign/ArtDesignData2Options/ArtDesignData2Options.js",
    "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js",
    "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js",
    "JavaScript/ArtDesign/ArtDesignBoxIFrame/ArtDesignBoxIFrame.js"
]);

Load Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/ with param BasePath were BasePath is path to folder Resources.

<script type="text/javascript" src="Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/"></script>

Then initialize a PlugIn with function window.ArtDesignFilesLoader.Ready().

window.ArtDesignFilesLoader.Ready(function() {
    $("body").ArtDesignBoxIFrame();
});
Second method

Load all the necessary files to run a PlugIn.

<link rel="stylesheet" href="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css">
<script type="text/javascript" src="JavaScript/jQuery/jQuery.js"></script>
<script type="text/javascript" src="JavaScript/ColorAnimation/ColorAnimation.js"></script>
<script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignData2Options/ArtDesignData2Options.js"></script>
<script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js"></script>
<script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js"></script>
<script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignBoxIFrame/ArtDesignBoxIFrame.js"></script>

Then initialize a PlugIn.

$(document).ready(function() {
    $("body").ArtDesignBoxIFrame();
}

SetUp web elements

ArtDesignBoxIFrame

Create <a> and add attr data-plugin-ad-box-iframe="box-iframe" to <a>.

<a href="http://jquery.com" data-plugin-ad-box-iframe="box-iframe">jQuery.com</a>