Guide to using an Article to display WP with an IFrame

[kfrost]

Thanks Ken,

Adding that script looks to have solved the problem of clicking the save button and my code doesn't disappear.

I'm still left though when I click on the Blog button all it shows is the code instead of the page as you can see if you visit the page.

Also, I don't understand how this could be related but now the jscript code used to prevent the scroll bars causes a jscript exception to be thrown.

If I remove the script and just leave the IFrame, then the text shows up when I click the Blogs tab.

What's interesting is that when I'm in the articles editor, the blog shows up just fine.

Should I be wrapping the script in IFrame in some sort of container or should I just be able to copy and paste it from browser window into the top editor?  I assume that should work as for in the Article editor when everything is correct, the blog site shows up just fine.  It's just not rendering properly when I click the blog tab.

[kfrost]

Alright think I finally got it to working.  I think the main culprit of the 2nd half of my problems pertains to the WYSIWYG editor.

Even though I put the script in to resolve the save click from wiping out everything, I still noticed some other weird behavior so I decided to turn it off.  I then pasted the code in and it worked first time.

I'll try to summarize to help the next person.

I am adding a new tab called Blogs.  In your theme template find the Index.template.php file and modify this line of code.

Code Select Expand



if (in_array($context['current_action'], array('search', 'admin', 'calendar', 'profile', 'mlist', 'register', 'login', 'help', 'pm', 'forum', [u][b]'blog'[/b][/u])))



You'll notice I added 'blog'

Next search for something like // Show the [forum] button

Code Select Expand


// Show the [blog] button.
echo '<li><a' , $current_action=='blog' ? ' class="chosen"' : '' , ' href="', $scripturl, '?page=blogs"><b>Blogs</b></a></li>';


You'll see that 'blog' after action will match what you entered in the previous step.  In my case I created the article and gave it a query title of blogs so here I use ?page=blogs Blogs will be the text that shows up in the tab.

(FYI, I'm using the Headline News Theme.)
Now to create the Article.  Click Admin, under Tiny Portal, click on Articles and Categories.  I would first suggest clicking Settings and Set Use the WYSIWYG editor? to No

Save and then Click Articles.  Give your article a title and make sure the Query Title matches what you enter for ?page=' '.

Next, paste this code (which I got from a separate link titled "TP Blogs" page 6)

Code Select Expand


<script type="text/javascript">

/***********************************************
* IFrame SSI script II- ÂÃ,© Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"];

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes";

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0; //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array();
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
resizeIframe(iframeids);
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids);
tempobj.style.display="block";
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera)
{
currentfr.style.display="block";

if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false);
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe); // Bug fix line
currentfr.attachEvent("onload", readjustIframe);
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt;
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement;
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url;
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false);
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller);
else
window.onload=resizeCaller;

</script>

<iframe id="myframe" src="http://www.carolinatechtalk.com/Blogs/" marginwidth="0" marginheight="0" vspace="0" hspace="0" style="width: 100%; display: none;" frameborder="0" scrolling="no"></iframe>




Be sure to change the src to your own site

Click save and when you click on your Blogs tab, you should see the site you pointed your IFrame to.  If it doesn't work, try refreshes your browser or possibly closing it and opening a new one.

Thanks for everyones help!

[Ken.]

Glad you got it sorted out kfrost... And thanks for posting your fixes and code. :up:

Your page looks great btw.
The OJ theme you are running looks good, but some WP themes will cause issues with width when you run your side panels.