Jump to content
aam82

Tabbed Interface: Js Vs Iframe?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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';
	}
} 

Share this post


Link to post
Share on other sites

 

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...