iframe content control from single responsive page/menu

Report · Feb 10, 2019

Hello experts!

Is there a way to control content from within an iframe using a main menu without refreshing the browser at each menu selection?

The detail of my need is: I've created eight standalone but associated Adobe Spark presentations (my original content was simply too lengthy for a single Spark presentation). Let's say each of the 8 presentations has 10 pages/slides. WISH #1: I would like to command the presentations from a single, responsive webpage's menu so User may select from any of the 8 topics from the menu and have the iframe refresh and point to the selected Spark presentation - but without refreshing the entire page.

I do understand the above could be sort of accomplished by simply having 8 separate web pages with a dedicated iframe for each Spark presentation. But I'm trying to create a workaround to overcome the challenge of Spark [weirdly] not having any sort of menu capabilities. I want User to have the sense that User is in an app-like environment where they are controlling content from a menu; not simply refreshing their browser in their phone, tablet, or PC.

Thanks!

Report · Feb 10, 2019

Here's an example:

iFrame target

Paul-M - Community Expert

Report · Feb 10, 2019

Thank you. This works, mostly.

But I now see that the iframe is not as responsive as I would like. The Spark presentation conforms to the iframe dimensions and not the viewing phone or tablet. If you can view this on your phone, you'll see that the Spark elements remain very small when compared to the actual Spark presentation.

Your suggested iframe examplebox.com/lorem

The actual Spark presentation.

Report · Feb 10, 2019

If you need more explanation let us know ...

Paul-M - Community Expert

Report · Feb 10, 2019

In addition to Energize's answer, try the following: Copy and past the following code into a new Dreamweaver document

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
</head>
<body>
    <iframe width='100%' height='800' src='https://slate.adobe.com/a/74EGR' frameborder='0' scrolling="yes" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</body>
</html>

Change the source to your own link.

You can then add a navigation bar so that you can link to other pages. See the result at https://petersonphenomenon.org/spark

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 10, 2019

Thank you. This works, mostly.

But I now see that the iframe is not as responsive as I would like. The Spark presentation conforms to the iframe dimensions and not the viewing phone or tablet. If you can view this on your phone, you'll see that the Spark elements remain very small when compared to the actual Spark presentation.

Your suggested iframe examplebox.com/lorem2http://examplebox.com/lorem2

The actual Spark presentation.

Report · Feb 10, 2019

Css might look soemthing like this to make it responsive:

iframe { width: 100%; height: 100%; border: 0; }

Paul-M - Community Expert

Report · Feb 10, 2019

Glad you found the problems. Spark is a great tool for designers that want show their proposed creation. It is not a substitute for web development. To create proper websites, you need an IDE (integrated development environment) like Dreamweaver.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 10, 2019

Iframes are problematic for many reasons. Here's another option.

1. Go to https://spark.adobe.com/page/XXX/embed.jpg Replace XXX with your ID

2. Download that image to your desktop.

3. Insert the image into your HTML page along with a link to your online Spark page.

4. Repeat for other Spark pages.

EDIT:

A Code Example.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 11, 2019

Thanks. This would work, but this is pretty much what I'm doing now. The problem is, when User clicks off to an individual Spark presentation, User then must click a back button to get back to the home menu; rather than simply selecting another Spark from the menu. If I place a button, say, Home, in each Spark presentation, the button will take me to the Home menu - but in a new browser window. In short time, User could have a dozen browser windows open. Ideally, I need for any of 6 to 10 [actual and fully responsive] Spark presentations accessible from a single menu. It's okay if the menu browser must refresh at each click. But, that menu has to be available each time, and the same browser window.

Thanks again!

Report · Feb 12, 2019

If Spark had the option to make channels or playlists the way YouTube does, you could embed that directly into your web page. But until that's available, I don't think what you want is feasible.

Spark feature request

Community feature requests for Adobe Spark!

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 10, 2019

If you can post link and we can help you more effectively ...

Paul-M - Community Expert

iframe content control from single responsive page/menu

1 Correct answer