PDA

View Full Version : Reload frame from FPP

myksa
04-29-2009, 09:02 AM
Hi,

I have a website with panoramas in FPP. Panoramas are in one div, and below I have an iframe with some content.

Is there a way to reload this iframe (load a different url) from FPP with for example onLoad or onClick function? Maybe I need some javascript to do this?

Myksa
HansNyberg
04-29-2009, 10:07 AM
Yes it is just a javasscript.

Just make a button with this command
onClick="javascript:window.open('http://www.xxx.com/xxx.html','_self');void(0);"

Hans
jomla
04-30-2009, 08:39 AM
Hans,

your code opens new pop-up window actually, not new content into iFrame.

Solution to this problem is to write JavaScript function and include it in HTML which will load different URL in the iFrame once FPP event is triggered. So basically, your JavaScript function (which should go in <head> tag of your HTML file) would look something like this:

function loadIFrame(url){
document.getElementById("iframediv").innerHTML = "<iframe id='ifrm' src='" + url + "' ></iframe>";

}

where your iFrame content is stored in a HTML body <div> like this (change values accordingly of course):

<div id="iframediv" >

<iframe name="ifrm" id="ifrm" > </iframe>
</div>



Lastly, we need function stored in FPP's XML file which initiates content url change in iFrame:

Here's an example how simple button can trigger onClick event our JavaScript function from above:

<spot id="myButton" url="myButton.png" static="1" onClick="javascript: loadIFrame('http://google.com');" />

This should load google.com page into your iFrame.

Please, let me know if you have any problems integrating the script. You can, of course, use last piece of code to use it in more innovative ways ;-)

Kind Regards,
HansNyberg
04-30-2009, 09:44 AM
No it works fine. May be I misunderstood Myksa.
Here is an example.
http://www.panoramas.dk/2008/ildregatta-silkeborg/
If you click on the banner at the top you open another tour in the iFrame.

If you want to load content in an other iFrame you need just to put a name on that iFrame and use that as target.

Hans
myksa
04-30-2009, 09:57 AM
Thanks for suggestion, I hope I will have some time today to check if its working fine!

Myksa
jomla
04-30-2009, 10:05 AM
Hi Hans,

I guess you didn't understand right. Here's the qute:

"I have a website with panoramas in FPP. Panoramas are in one div, and below I have an iframe with some content. "

So, at the same page there is one <div> with panos and on the same page iFrame with content loaded from certain url.

As for your case (nice panos though ;-)), yes, but they load OVER the panorama, not changing other content at the same page.

Your quote:"If you want to load content in an other iFrame you need just to put a name on that iFrame and use that as target." basically describes my code.

Regards,
HansNyberg
04-30-2009, 10:22 AM
It does not matter, The same code can be used to load in another iFrame

I updated the link and included a small iFrame at the bottom.
Now click on the bottom banner and you load another content.
The code is exactly as i posted it, just exchanging _self with the name of the iFrame.

If the link is from inside FPP XML in another DIV or iFrame or from a HTML link on the page does not make any difference.

Hans
jomla
04-30-2009, 11:12 AM
Hans,

tried your link but content in iFrame doesn't change (combo box) while panorama preloads in the same <div>. Please correct me if I'm wrong, but goal is to have same panorama and from FPP to load some other url into iFrame when button from FPP is clicked (in your case banner). While we both clearly try to help our mate, it would be good if you could fix your example so users in future can have both solutions available here at forum. I know my code enclosed above works, unfortunately I have no time to post an example at the moment.

Regards,
HansNyberg
04-30-2009, 12:37 PM
Sorry Jomla but you might have a problem with your browser or something else.
Clicking the bottom banner (the background for the thumbs) loads another combobox for 2002 into the small iframe (target _frame2) at the bottom.
Clicking the upper banner loads a different URL with a different virtual tour into the large iFrame (target _self)
Tested on XP FF3 and IE 6 Mac Safari, FF and Opera.
Trausti Hraunfjord
04-30-2009, 03:22 PM
Confirming Hans: Things work properly on this end (XP+SP3+FF)
jomla
05-01-2009, 06:37 PM
Ahhhh...bottom bar...sorry, couldn't spot bottom banner anywhere at first so I kept clicking the top left logo. :)

Great Hans, we now have 2 solutions working, hope this might help somebody. Also, my solution can be extended to trigger some other (complex JavaScript functions) from FPP, so FPP folks - there you have it. ;-)
myksa
05-03-2009, 07:53 AM
Hi Joomla,

Your solution from 3rd post works great for me!

Many thanks for help!
jordi
11-02-2009, 11:04 AM
Hi Jomla,

I think your way is the most properly one...I'm trying it but can not for some reason...

Could you please post a link where I can see this working ?

here you can find my test page (http://olympicstudies.uab.es/moe/visita/testing.html)

here the xml (http://olympicstudies.uab.es/moe/visita/m_olimpic.xml), where you will find the specific code in line 662

and here the html (http://olympicstudies.uab.es/moe/hall.html) I'm trying to call in the Iframe
sachagriffin
11-02-2009, 12:54 PM
From my archives. This ajaxey thing.
You don't need an iframe per se, just any thing tagged with an id or class.
You can change "loadme" to id of the content.
This will open the external file and insert that at the innerhtml of the element.
Call this in your spot, and it should work. You'll just need the raw html, no head etc.

function pageloader(externalpage) {
var request = XmlHttp.create();
request.open("get", externalpage, true);
request.onreadystatechange = function()
{
if (request.readyState == 4) {
var txtDoc = request.responseText;
}
// put the assembled sidebar_html contents into the sidebar div
document.getElementById("loadme").innerHTML = txtDoc;

}
request.send(null);
}

Hi Jomla,

I think your way is the most properly one...I'm trying it but can not for some reason...

Could you please post a link where I can see this working ?

here you can find my test page (http://olympicstudies.uab.es/moe/visita/testing.html)

here the xml (http://olympicstudies.uab.es/moe/visita/m_olimpic.xml), where you will find the specific code in line 662

and here the html (http://olympicstudies.uab.es/moe/hall.html) I'm trying to call in the Iframe