Highlighted

iframe content control from single responsive page/menu

Contributor ,
Feb 10, 2019

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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!

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

983

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

iframe content control from single responsive page/menu

Contributor ,
Feb 10, 2019

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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!

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

984

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 10, 2019 0
Adobe Community Professional ,
Feb 10, 2019

Copy link to clipboard

Copied

Here's an example:

iFrame target

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 0
Contributor ,
Feb 10, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 0
Adobe Community Professional ,
Feb 10, 2019

Copy link to clipboard

Copied

If you need more explanation let us know ...

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 0
Adobe Community Professional ,
Feb 10, 2019

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 1
Contributor ,
Feb 10, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 0
Adobe Community Professional ,
Feb 10, 2019

Copy link to clipboard

Copied

Css might look soemthing like this to make it responsive:

iframe {
   width: 100%;
   height: 100%;
   border: 0;
}
Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 0
Adobe Community Professional ,
Feb 10, 2019

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 0
Adobe Community Professional ,
Feb 10, 2019

Copy link to clipboard

Copied

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.

<a target="_new" href="https://spark.adobe.com/page/pjkLApZirXMHL/"><img class="spark" src="https://spark.adobe.com/page/pjkLApZirXMHL/embed.jpg"></a>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 1
Contributor ,
Feb 11, 2019

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2019 0
Adobe Community Professional ,
Feb 12, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2019 1
Adobe Community Professional ,
Feb 10, 2019

Copy link to clipboard

Copied

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

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 1