Tabbed Interface: Js Vs Iframe?

[aam82]

Hi, I'm looking for opinions on the two methods Caspio suggests in 'Tech Tips' on how to create a tabbed interface. One is with a javascript, and the other is with nested iframes.

 

js: http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-tabbed-navigation-for-multiple-datapages/

iframe: http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-embeddable-tabbed-interface/

 

Does anyone have a preference for one over the other? Thanks

[Jan]

Hello aam82,

 

In the article about deployment methods, they write about iFrames and Embedded:

"Use iFrame method if you simply need to put a form/report inside your content and the form/report doesn't need to interact with the parent or what's outside the iFrame."

"Embedding a DataPage in an existing web page gives you the most control over the presentation of the DataPage and the layout of your web page. This method requires JavaScript on the user’s browser."

 

Maybe, it can help.

[scribblemilk]

Has anyone successfully embedded the iframe tabular interface into a squarespace embed block? In mine the squarespace footer cuts through the centre of the iframe so i can view the entire contents of the block, i haven't changed any of the code from what was given via the below other than the instructed menu and link name changes.

 

http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-embeddable-tabbed-interface/

[LWSChad]

Hi, I'm looking for opinions on the two methods Caspio suggests in 'Tech Tips' on how to create a tabbed interface. One is with a javascript, and the other is with nested iframes.

 

js: http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-tabbed-navigation-for-multiple-datapages/

iframe: http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-embeddable-tabbed-interface/

 

Does anyone have a preference for one over the other? Thanks

I use iframes.

They load quickly, and you can refresh one datapage rather than an entire web page.

 

Difficult, but awesome

[aam82]

I use iframes.

They load quickly, and you can refresh one datapage rather than an entire web page.

 

Difficult, but awesome

What do you do for iframes on mobile?

 

Edit: this is useful http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

 

But I forgot that iFrames don't take external parameters. 

[mparks]

Here's a technique we use for tabbed interface. It uses a Bootstrap framework which has responsiveness built-into it...the embedded Caspio Datapages still take a little work to become responsive but it can be done....

 

<ul class="nav nav-pills">

          <li class="active">

                  <a href="#" onclick="TabOne.html">Tab One</a>

          </li>

           <li>

                  <a href="#" onclick="TabTwo.html">Tab Two</a>

           </li>

</ul>

 

If you need to pass parameters between the Caspio datapages that are embedded in the two html pages...then you can use this technique which uses the new localStorage object that is built into your html web browser (note you will need to clear the localStorage object at some point after leaving the tabbed page).  The example below is passing a variable named ID back and forth between the two tab pages. 

 

 <ul class="nav nav-pills">

      <li class="active">

          <a href="#" onclick="getTabOneUrl()">Tab One</a>

      </li>

      <li>

         <a href="#" onclick="getTabTwoUrl()">Tab Two</a>

      </li>

</ul>

 

Here's the javascript for the getTabOneUrl() and getTabTwoUrl() functions....

 

$(document).ready(function() {

 

function getUrlVars() {

    var vars = [], hash;

    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++) {

        hash = hashes.split('=');

        vars.push(hash[0]);

        vars[hash[0]] = hash[1];

    }

    return vars;

}

 

var Id = getUrlVars()["ID"];

 

if(localStorage.getItem('Id') == null){

    localStorage.setItem('Id', Id)

 }

 else {

    Id = localStorage.getItem('Id');

}

 

function getTabOneUrl() {

 

    window.location.href = "TabOne.html?ID=" + Id;

}

 

function getTabTwoUrl() {

 

    window.location.href = "TabTwo.html?ID=" + Id;

}

 

}

 

Here are a bunch of free bootstrap templates...http://startbootstrap.com/template-categories/all/

 

Here's where to get bootstrap...http://getbootstrap.com/

[LWSChad]

What do you do for iframes on mobile?

 

I don't do anything special. Check out my code...

Parent Page - leadinfocenter.html (LIC)

<html>
<head>
<meta charset="utf-8">
</head>
<body onLoad="setIfrSrc()">

<!-- frmPerson -->

    <div id="frmPerson" class="licFrame fr1">

        <div class="divHeader dh2">

            <h5>People</h5>

            <a href="javascript:showHide('ifrPerson')" id="btnHide" class="btnShowHide"></a>

            <a onclick="window.ifrPerson.location.href = 'lic-person.html'" class="ifrRefresh"></a>

            <a onclick="popupWindow('addPerson.html', 438, 720)" class="addRecord"></a>

        </div>

        <div id="ifrDiv">                       

            <iframe name="ifrPerson" class="licIframe" id="ifrPerson"></iframe>

        </div>                            

    </div><!-- frmPerson -->

<script>

//set iframe source

function setIfrSrc() {

varLeadID = getQueryVariable("LeadID");

document.getElementById('ifrPerson').src = 'lic-person.html?LeadID='+varLeadID;

document.getElementById('ifr***').src = 'lic-***.html?LeadID='+varLeadID;

}

 

</script>

</body>

</html>

 

Child Page - lic-person.html

<html>
<head>
<meta charset="utf-8">
</head>
<body onload="resizeFrame('ifrPerson')">
	<div id="ifr" class="ifrContent killHeader licIfr">
	    <script type="application/javascript" src="http://b5.caspio.com/scripts/e1.js"></script>
            <script type="application/javascript">try{f_cbload("88appKey88","http:");}catch(v_e){;}</script>
	</div>
<script src="js.js"></script>
</body>
</html>

javascript to size the iframe

//resize LIC iframe on iframe load
function resizeFrame(ifrName) {
    // Call out to the parent iframe.
	var ifrContentH = document.getElementById('ifr').scrollHeight;
	if (ifrContentH > 32)	{
		window.frameElement.ownerDocument.getElementById(ifrName).style.height = ifrContentH+'px';
	} else	{
		window.frameElement.ownerDocument.getElementById(ifrName).style.height = '0px';
	}
} 

[aam82]

 

I don't do anything special. Check out my code...

Parent Page - leadinfocenter.html (LIC)

<html>
<head>
<meta charset="utf-8">
</head>
<body onload="resizeFrame('ifrPerson')">
	<div id="ifr" class="ifrContent killHeader licIfr">
	    <script type="application/javascript" src="http://b5.caspio.com/scripts/e1.js"></script>
            <script type="application/javascript">try{f_cbload("88appKey88","http:");}catch(v_e){;}</script>
	</div>
<script src="js.js"></script>
</body>
</html>

 

Looks like your iFrames are on your domain, and the caspio datapage is a js embed?

[Kurumi]

Hi - Just wanted to share this specific code to refresh/reload the iFrame in your DataPage.

document.getElementById('some_frame_id').contentWindow.location.reload();

Reference: https://stackoverflow.com/questions/86428/what-s-the-best-way-to-reload-refresh-an-iframe

This can be applicable to this article: https://howto.caspio.com/tech-tips-and-articles/create-embeddable-tabbed-interface/

This article provides a script for Tabbed interfaces. As the script is using iFrames, every change of tab - the DataPage will remain as it is. If you are using a Report DataPage, it will not load the new data. As a workaround, you can edit the code that will reload the iFrame with every click of the tab.

Updated script:

<script>
 function getElementByClass(classer) {
 var allHTMLTags=document.getElementsByTagName("*");
 var array = [];
 for (i=0; i<allHTMLTags.length; i++) {
 if (allHTMLTags[i].className==classer) {
 array.push(allHTMLTags[i]);
 }}
 return array;}
 
 function channel(n){
 var frames = getElementByClass("ChannelView");
 var length = frames.length;
 for(var i = 0; i < length; i++)
 { if(frames[i].id == ("viewer"+ n))
 { frames[i].style.display = "inline";
   frames[i].contentWindow.location.reload();

 }else{ frames[i].style.display = "none";}}}
 </script>
 
 <div style="display:block; text-align:left;">
 <div style="display:block;">
 <ul id="menu">
 
 <li><a onclick="channel(0)">Tab 0</a></li>
 <li><a onclick="channel(1)">Tab 1</a></li>
 <li><a onclick="channel(2)">Tab 2</a></li>
 
 </ul>
 </div>
 
 <div class="content">
 
 <iframe frameborder=0 id="viewer0" class="ChannelView" src="URL of Tab 0" style="display:inline"></iframe>
 <iframe frameborder=0 id="viewer1" class="ChannelView" src="URL of Tab 1"></iframe>
 <iframe frameborder=0 id="viewer2" class="ChannelView" src="URL of Tab 2"></iframe>
 
 </div>
 </div>

The change is by adding this code:

frames[i].contentWindow.location.reload();