iFrame implementation
In order to implement an iframe in an optimal manner several steps need to be taken:
Step 1: Make sure you have jQuery included in your page
Note: This is not required if jquery is already being used
<script src="/js/jquery.min.js"></script> Step 2: Add an empty iframe to the body of the page
<iframe id="fc-frame"></iframe>
Note: the iframe can have any valid “id” assigned to it as long as the id is the same one used for loading the script.
Step 3: Before the </body> tag add the following line:
<script src="//fundconnect.com/resources/fc.iframe.js"></script>
<script>
$(document).ready(function(){
$("iframe#fc-frame").fciframe({clientName : "AdvancedDemoClient",defaultURL : "Overview.html"});
});
</script>
Note: “iframe#fc-frame” can be different depending on the ID of the frame, for this example the iframe has “fc-frame” as an id, hence $(“iframe#fc-frame”) would work.
Mandatory options:
clientName: Name of client provided to you by fundconnect, I.E. – “AdvancedDemoClient”
defaultURL: Sets the the default page which will be loaded, I.E. – “Index.html”
Additional options:
loaderStyle: Sets the style of loader, accepts string values: ‘loader1′,’loader2′,’loader3′,’loader4′,’loader5′,’loader6′,’loader7′,’loader8’
loaderColor: Color code for the loader which is shown while page loads, currently supports hex and rgb values (#000000 / ‘0,0,0’))
loaderBgColor: Sets the background color of the loader, accepts rgb values only ‘0,0,0’
responsive: Determines if the iframe should be responsive or not, by default: true.
params: A JS object holding additional parameters such as culture, clientID, currency, shelf etc. IE. - params:{"culture":"da-DK"}
Simple example:
In this example the clientName is “AdvancedDemoClient” and the defaultURL is “Overview.html”
<!DOCTYPE html>
<html>
<head>
...
<script src="/js/jquery.min.js"></script>
...
</head>
<body>
...
<iframe id="fc-frame"></iframe>
...
<script src="//fundconnect.com/resources/fc.iframe.js"></script> <script> $(document).ready(function(){ $("iframe#fc-frame").fciframe({clientName : "AdvancedDemoClient",defaultURL : "Overview.html"}); }); </script> </body> </html>Advanced implementation
In this example the clientName is “AdvancedDemoClient” and the defaultURL is “Overview.html”, on top of that the client would like to specify the type of loader which is used and its color. Further on, this implementation supports some defualt parameters for the solution such as danish culture, currency and a set of shelves that are used.
<!DOCTYPE html>
<html>
<head>
...
<script src="/js/jquery.min.js"></script>
...
</head>
<body>
...
<iframe id="fc-frame"></iframe>
...
<script src="//fundconnect.com/resources/fc.iframe.js"></script> <script> $(document).ready(function(){ $("iframe#fc-frame").fciframe({ clientName : "AdvancedDemoClient", defaultURL : "Overview.html", loaderStyle: "loader6",
loaderColor: "#006fb0", params:{"culture":"da-DK","currency":"DKK","clientID":"SEIF","shelves":"SEIF2"