Embed Deployment Code Not Working In Weebly

kpcollier · December 5, 2018

I have multiple pages on my weebly website, with all of them using Caspio applications.

I have created multiple Embeddable Tabbed Displays from the Caspio Howto article. I successfully deployed one of these datapages on Weebly. However, when trying to create the 2nd page on Weebly that includes the 2nd embeddable tabbed display, the site freaks out.

First, the site sends me to a 3rd embeddable tabbed display that isn't even deployed yet (the datapage says disabled and the code is not embedded ANYWHERE). It also takes away all of the styling from the Weebly Page, including my page title, menubar, etc.

I can't figure out what is going on. I asked Weebly and they gave me the cold shoulder cause its "3rd party code".

Any help appreciated :wacko:

Vitalikssssss · December 6, 2018

Hi @kpcollier,

Can you share with us a code which you used for the tabbed interface?

Do you have any custom JS in your Datapages?

Regards,

vitalikssssss

kpcollier · December 6, 2018

@Vitalikssssss,

Yes, I have some JS for a popup in one of the pages. You can find the JS in this post.

Here is the code I am using for the embeddable tab.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
iframe#viewer0 {
height: 768px !important;
}

iframe#viewer1 {
height: 768px !important;
}

iframe#viewer2 {
height: 768px !important;
}

iframe#viewer3 {
height: 768px !important;
}

iframe#viewer4 {
height: 768px !important;
}

iframe#viewer5 {
height: 768px !important;
}

iframe#viewer6 {
height: 768px !important;
}

</style>

</head>

<style>
.ui-resizable-helper { border: 1px dotted gray; }
ul#menu { width: 100%; height: 40px; background: #505459; font-size: .8em; font-family: "Arial", sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; text-align: center; }
ul#menu li { display: block; display: inline-block; margin: 0 0 0 5px; padding: 8px 15px 0; cursor:pointer;}
ul#menu li a {color: #fff; text-decoration: none; display: block; float: left; line-height: 200%; }
ul#menu li a:hover { color: #333; }
.content{display:block; width: 100%; height:100%; padding: 10px; border:2px solid #505459; overflow:hidden; position:relative;}
.ChannelView{ width:100%; height:100%; margin-bottom:100%;}
</style>

<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";
}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)">Job Sheet</a></li>
<li><a onclick="channel(1)">Done Jobs</a></li>
<li><a onclick="channel(2)">SI Task Report</a></li>
<li><a onclick="channel(3)">SI Consolidated Sheet</a></li>
<li><a onclick="channel(4)">Orders</a></li>
<li><a onclick="channel(5)">Bid Board</a></li>
<li><a onclick="channel(6)">Vehicle Inspection Form</a></li>

</ul>
</div>

<div class="content">

<iframe frameborder=0 id="viewer0" class="ChannelView"  src="https://c3eku680.caspio.com/dp/xxx" style="display:inline"></iframe>

<iframe  frameborder=0 id="viewer1" class="ChannelView" src="https://xxxxxx.caspio.com/dp/xxx"></iframe>

<iframe  frameborder=0 id="viewer2" class="ChannelView" src="https://xxxxxx.caspio.com/dp/xxx"></iframe>

<iframe  frameborder=0 id="viewer3" class="ChannelView" src="https://xxxxxx.caspio.com/dp/xxx"></iframe>

<iframe  frameborder=0 id="viewer4" class="ChannelView" src="https://xxxxxx.caspio.com/dp/xxx"></iframe>

<iframe  frameborder=0 id="viewer5" class="ChannelView" src="https://xxxxxx.caspio.com/dp/xxxx"></iframe>

<iframe  frameborder=0 id="viewer6" class="ChannelView" src="https://xxxxxx.caspio.com/dp/xxxx"></iframe>


</div>
</div>

Login

Embed Deployment Code Not Working In Weebly

Question

kpcollier

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vitalikssssss

Link to comment

Share on other sites

kpcollier

Link to comment

Share on other sites

Join the conversation

Browse