Adding an Iframe

Xway
1

Previously, in Freeway, I made a flip book in Slideshare and exported the link into a separate ‘Iframe page’ of each issue. On the web page I then created a link to that page. Is Xway different and I don’t create that separate page and make the Iframe directly onto the page?

This is how it worked for me in Freeway.

2

Hi Noel,

Your links open in two different ways (as it notes at the top of the page): clicking on a cover image opens the magazine in the current window, while clicking on a text link opens the magazine in a new window.

  1. The first behaviour is simple, and doesn’t need iframes. You can just set the Slideshare URL as an external link. One issue with this behaviour is that if the window is fairly wide, users only see the top part of each page (without scrolling).
  2. To control the width at which the magazine is displayed, you could create a new page for each issue and add an iframe with a fixed width. I think the iframe needs to be at least 450px wide to accommodate the cookies dialog: 640px might be a good choice. The iframe would link to the relevant Slideshare URL, and you would add a link to this new page on the image and/or text on the initial (Back Issues) page. If you want the iframe page to open in a new window or tab, select Open in New Window or Tab in the Link dialog or Link Inspector.
  3. If you’d like the iframe to appear in the middle of the iframe page, one way to do that is to set the pagediv to be a flex container, with Justify Content and Align Items both set to Center. Then insert an iframe with the Slideshare URL and give it a width of (e.g.) 640px and a height of (e.g.) 96vh (meaning 96% of the height of the browser’s content area). This assumes you don’t also want to display other page content (such as a menu). If you do want to include a menu, insert another box as a flex container and put the iframe in that.
3

Great, thank you very much for that. On my first attempt the Iframe was 640 wide but showed up as a link on a white background over the whole screen - how do I make it so it just appears as a pop up about 640 x 930

4

When you say “popup” do you mean “popup window” or “popup box”?

  1. Popup windows: these require JavaScript, and they’re disliked (and possibly blocked) by many users. Freeway had a Link To New Window Action which you might have been using.
  2. Popup boxes: there’s a section called “Popup boxes” in the Xway User Guide - but creating a separate popup box for every magazine issue might involve quite a lot of work!

I’m not entirely sure what this means, but here’s an Xway document that contains an iframe page with a Slideshare link:

Slideshare.zip (10.2 KB)

The page background is white, but you can change that if you wish.

5

Maybe ‘pop up’ is the wrong term. In my original example done in Freeway if you click on the text link a new page comes up that is just the 640x930 size is shown - not a page taking up the full screen with the Slideshare link in the middle.

6

The Freeway site opens a new window using JavaScript (presumably output by the Text Link to New Window Action). But popup windows have gained a bad reputation, and may be automatically blocked.

I would avoid doing that.

This depends on how people browse, doesn’t it? If they use browser tabs, the page will open in a new tab. Otherwise I think it will open in a new window that matches the size of the current window (I use tabs).

7

Another thing to consider is that mobile phones (and most tablets) don’t have windows, so using JavaScript to open a new window won’t have any effect there.

Incidentally, putting the iframe within a flex container (in Xway) solves the problem of what happens if a device is narrower than the width of the iframe: the default Flex value (Initial) allows items to shrink when needed.

The cookies dialog can be a bit tricky on a phone - it doesn’t seem to shrink beyond 430px.

8

Many thanks for your replies. This is how it worked on the Freeway site, just a small box showing that is the size of the flip book - is this not recommended anymore?

freeway iframe
freeway iframe1920×1659 676 KB

9

Popup windows aren’t recommended. They’re unpopular with many users, and are often blocked.

Popup boxes are another matter. Exhibeo uses these in some of its themes, such as Thumblie. You can create them in Xway (there is a section called Popup boxes in the Xway User Guide), but you’d either need to create a separate popup box for each magazine issue (which would be unwieldy) or write some JavaScript to display a popup box using the appropriate iframe link.

My advice would be to start off simple: link to a new page containing an iframe and open it in the existing window/tab or in a new window/tab. You can always go back and implement a more complex behaviour (e.g. popup boxes) at a later date.

10

Many thanks for that - good to know that’s the way I should go.