#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

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>