Responsive Embedable Tabbed Interface

[Gregstand]

I've built an embedable tabbed interface that contains 3 iframe tabs, using the standard Caspio code http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-embeddable-tabbed-interface/.

 

One tab is a pivot table, another a tabular report, the other is a list.  I've deployed the whole interface using the embedded option.  But how can I make this whole package responsive?   Do I apply Caspio responsive code to each report separately, to the interface, or what?

 

Any help appreciated.

 

[aam82]

Have you embedded your interface on a private domain? Or are users accessing the HTML datapage via URL deployment?

[Gregstand]

Hi,

I deployed the interface (ie the HTML datapage containing the Caspio code and the report URL's)  to a page on my private domain using the Caspio 'embed deployment method'.

 

Are you saying that the HTML datapage should instead be deployed using the Caspio URL method?

[aam82]

I've successfully tested this plugin with Caspio iframes on a private domain.

http://blog.apps.npr.org/pym.js/

 

I don't know how all of it works, but I get the idea that responsive iframes that cross domains are tricky because you are loading your page, then the frame, then the frame loads its content, then you need to set your host page's iframe to the final frame dimensions, which are dynamic depending on report content.

 

I think this could work well for a single-page application, and it sounds like that's what you need, but I prefer to work with multiple browser tabs. When you use iframes, links are bound within the frame unless you code the link to control the parent document (that plugin provides a method), in which case you have a <a href="javascript:..."> link, which doesn't behave like a normal link across all browsers. For example, the user can't middle-click such links choose to open in a new tab.

[Gregstand]

Thanks!  I'll give that a go.  Very informative comments too.

[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();