Using navigation buttons to direct pages within the project to an iframe on the homepage

[zephin (Tim)]

Hi
I am trying to create a homepage with an Iframe. The object is to set the iframe to page 1 within the project but have navigation to change that iframe source to page 2 etc…
In effect instead of moving to pages with navigation the source of the iframe will change.
My thoughts are the iframe ‘SCR’ needs updating from say a button or from a navigation bar.
I hope this makes sense. Apologies if this has been dealt with already.

[Heroic_Nonsense (Erwin Leerentveld)]

This can be done, quite easily if you use the Stacks plugin.

Here’s how:

Step 1: download QueryDisplay ($Free, Stacks4Stacks.com)

Step 2: drag as many instances of QueryDisplay to your page as there are pages in your iFrame target that you wish to be able to address using your own navigation

Step 3: set up an iFrame in each instance of QueryDisplay, pointing to the various pages in the iFrame’s target

Step 4: give each QueryDisplay a key that is easy to identify for you (i.e. iframe-home, iframe-contact, iframe-gallery etc.) and set it to only show when that key is present in the URL

Step 5: use custom navigation, and set the buttons or link in the navigation to the full URL of your own page, followed by a slash ‘/’ and a questionmark, and then the key that you specified in one of the QueryDisplay instances.

So, for example:

https://www.your-own-website.com/?iframe-homepage

Step 6: presto! When a visitor clicks a link in the navigation, the page will reload with the particular key in the URL, triggering that instance of QueryDisplay. The page will now only show the iFrame with that particular page.

Even better: the other QueryDisplay instances do not get loaded until the visitor “navigates” to one, cutting down on data both for you and for the iFrame target.

Cheers,
Erwin

[zephin (Tim)]

Erwin,
Thanks so much not surprisingly it works lol. So we load all pages in the embedded iFrame but just switch on and off the Querydisplay we need from the nav buttons.

A couple of things.

1. How to set a page (the iFrame-home, for instance) on loading the web site? So I can have my home page up and use nav buttons to then close and open the other pages in iframe.

2. You mention the other Querydisplay instances do not get loaded until the visitor navigates to one! How would this be completed as surely by putting the iFrame URL into the embedded iFrame then it automatically loads when you access the web page?

Kind regards
Tim Stevens