• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

iframe content control from single responsive page/menu

Contributor ,
Feb 10, 2019 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!

Views

2.0K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 12, 2019 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!

Votes

Translate

Translate
Community Expert ,
Feb 10, 2019 Feb 10, 2019

Copy link to clipboard

Copied

Here's an example:

iFrame target

Paul-M - Community Expert

Votes

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
community guidelines
Contributor ,
Feb 10, 2019 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.

Votes

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
community guidelines
Community Expert ,
Feb 10, 2019 Feb 10, 2019

Copy link to clipboard

Copied

If you need more explanation let us know ...

Paul-M - Community Expert

Votes

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
community guidelines
Community Expert ,
Feb 10, 2019 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

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Contributor ,
Feb 10, 2019 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.

Votes

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
community guidelines
Community Expert ,
Feb 10, 2019 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 - Community Expert

Votes

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
community guidelines
Community Expert ,
Feb 10, 2019 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.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Feb 10, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Contributor ,
Feb 11, 2019 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!

Votes

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
community guidelines
Community Expert ,
Feb 12, 2019 Feb 12, 2019

Copy link to clipboard

Copied

LATEST

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Feb 10, 2019 Feb 10, 2019

Copy link to clipboard

Copied

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

Paul-M - Community Expert

Votes

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
community guidelines