TinyPortal

Development => Support => Topic started by: kfrost on March 12, 2009, 02:34:58 AM

Title: Guide to using an Article to display WP with an IFrame
Post by: kfrost on March 12, 2009, 02:34:58 AM
Hello,

I've spent the afternoon trying to figure out how to add a Tab called blogs to my forum and when clicked I'd like to display my blog site in the center panel.  I found the long TP thread and the IFrame code.

I found a How To on creating articles but seems dated because it talks about being able to create static, contect etc.  I'm using SMF 1.1.8 with TP 1.0 Beta 3.  www.carolinaTechTalk.com

As you see I have a Blogs tab created and I created an HTML article and added the IFrame code to.  But I'm not having much luck past this.

Is there a how to guide on creating an article the proper way and then editing the index.template.php file so when the brower button is clicked, WP shows in the center panel?

Thanks

Title: Re: Guide to using an Article to display WP with an IFrame
Post by: Ken. on March 12, 2009, 10:18:52 AM
Hi kfrost, welcome to TinyPortal.

If you've read the topics here on TP about iFrames then you probably already know about as much as anyone else about them.

For my WP page I use the code from one of those topics in an html article and it works reasonably well.

What is your exact problem at this time? Doing the article, or linking the button?
Title: Re: Guide to using an Article to display WP with an IFrame
Post by: kfrost on March 12, 2009, 01:30:42 PM
Hello Ken,

Thanks for the welcome.  I would say I'm having problems with a little of both.  Steps I've followed.  There is an article about adding tabs,

http://docs.tinyportal.co.uk/index.php/topic,30.html

with that along with a comment from Crip, I've got the Blogs Tab showing in TP.  www.carolinaTechTalk.com 3rd tab from the left.

I added this to the index.template.php to accomplish the tab appearing. 


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



The next part I'm pretty positive is a problem area.  It's setting the reference to what should open when the Blogs tab is clicked.



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




As for the article, I created HTML article and I pasted the code from the TP post into the top editor under Title.  The odd thing I've noticed is sometimes I paste the code in and click save my blog shows up here.  But there doesn't appear to be a way to edit the code anymore.  The window showed up small when I opened the article directly so I tried resizing and saved and the code is gone.  Sometimes I get the error web page isn't found.

But yes, the main problem now is wiring up the Blogs Click event to show an article with this code in it.  If you go to the site right now and click Blogs, it loads up the Forum instead of this article I've created to load the Blog website.

Thans.
Title: Re: Guide to using an Article to display WP with an IFrame
Post by: G6Cad on March 12, 2009, 02:17:09 PM
Change action=Blog to action=blog

PhP code is case sensitive and also, you define the first action to blog and the other to blogs

They need to be same all the way
Title: Re: Guide to using an Article to display WP with an IFrame
Post by: kfrost on March 12, 2009, 03:26:08 PM
Thank you G6,

But how does me setting the action to blog in the index.template.php indicate that when it's clicked it should open a specific article?  Do I have to make the title of the article read blog as well?
Currently the title of the article reads as Blogs.  Also, I've played around with using different things for the action.  I just have it as Blogs now because again that's the title of the article.  I'll state this again, I know Zero about PHP.

It seems as if there is a condition somewhere I need to define what the action blog should do.  It's also puzzling that even though I do have the action wrong, that when you click the Blogs Tab it's opening up Forums.
Title: Re: Guide to using an Article to display WP with an IFrame
Post by: Renegd98 on March 12, 2009, 03:39:02 PM
Instead of ?action=blog

it should be ?page=xx

where xx is the article you want opened.
Title: Re: Guide to using an Article to display WP with an IFrame
Post by: Ken. on March 12, 2009, 03:42:33 PM
The path for the button should be to the article and not be to the blog.

Example:
"http://www.ourfamilyforum.org/FamilyForum/index.php?page=73"
...or... "?page=73"

EDIT: Ya beat me Renegd98!  :o
Title: Re: Guide to using an Article to display WP with an IFrame
Post by: Zetan on March 12, 2009, 04:07:56 PM
You can also use a "Query" title for the Article, that once set.. you can link to the article using either:

?page=xx , "xx" being the actual article page number

or

?page=articletitle or, in your case: ?page=blogs
Title: Re: Guide to using an Article to display WP with an IFrame
Post by: kfrost on March 12, 2009, 08:48:11 PM
Thanks everyone, that definitely gets me a step closer.  I'm going to post what's going on so the next person trying to do this can follow along.

FYI.  If I try to make any modifications to the article and click save, it completely removes the code related to the iFrame I put in.

Also, very sporadically the link I put in the src="" will actually work.  Sometimes I'm getting page not found but if I view source and paste the URL I have for the blog site into another browser, it comes up fine so not sure what's going on there.

Also, it seems that you also have to add the article to a category.  Because until I did I got an error that the article was either missing or in active but I made sure the active radio button was selected.

Right now I'm at the point to where the article is showing up.  However, it overlays the left and right panels.  Also, the code I pasted in the article is displaying instead of the Blog website.  I'm not sure what's causing this but it seems if I keep deleting the article and creating a new one eventually it will work.

Another question, is how would I know what page number the article is? 

Thanks.

P.S.  I closed down my browser and opened up the site again.  If I go into Manage articles, and open the blogs article, now the blog webpage shows up there correctly.  However, if you click on the blog tab, I still only see the script I added spewed out in the page as text instead of the blog site

Title: Re: Guide to using an Article to display WP with an IFrame
Post by: Ken. on March 12, 2009, 09:12:05 PM
kfrost, TP v103b has an issue with the editor, so you need to turn it off or do the fix that Bloc posted in this post:
http://www.tinyportal.net/index.php/topic,28788.msg229572.html#msg229572

As for the panels... in my experience it's best to have TP side panels turned off while WP is displayed in an article because WP wants lots more space than is available when they are on.


QuoteAlso, very sporadically the link I put in the src="" will actually work.  Sometimes I'm getting page not found but if I view source and paste the URL I have for the blog site into another browser, it comes up fine so not sure what's going on there.
You will likely need the full url, including the 'http'.

QuoteAnother question, is how would I know what page number the article is?
The number should be visible in your browser address window when the article is open.
Title: Re: Guide to using an Article to display WP with an IFrame
Post by: kfrost on March 12, 2009, 10:02:26 PM
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.

Title: Re: Guide to using an Article to display WP with an IFrame
Post by: kfrost on March 12, 2009, 10:40:09 PM
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.



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

// 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)


<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!
Title: Re: Guide to using an Article to display WP with an IFrame
Post by: Ken. on March 12, 2009, 10:51:45 PM
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.