Reloading a Hype document when viewing a PubCoder page

[Benjamin889]

Hi Daniel,

This is just what I've been looking for.

However my code skills aren't great.

I'm stuck on the 'Adjusting the HTML page' could you simplify it down anymore? Am I adding it to the script javascript file?

Thanks
Ben.

[Daniel]

@Benjamin889

I’m stuck on the ‘ Adjusting the HTML page ’ could you simplify it down anymore? Am I adding it to the script javascript file?

I added some additional detail, let me know if I can help clarify.

[Benjamin889]

@Daniel

Hi Daniel,

I've used these steps you've given and it works great.

I've got it hidden in my PubCoder file and when i tap it shows the Hype file. I have animation happening in the Hype document and when it's shown the animation has already played.

Would you know how I could delay that at all so the animation plays when it's showing?

Thanks
Ben,

[Daniel]

1. Go to the page in PubCoder where you have your Hype document in place. Drag an 'Action List' to your page (it can be off scene).
2. Select 'Load' in the Interactivity list
3. Click 'Add New Action' > JavaScript

In that area, we're going to add JavaScript that resets the src of the 'iframe' containing the Hype document:

document.getElementById('hypeframe').src = '../folders/document.hyperesources/document_hype_generated_script.js';

This requires that you go back to your embedded Hype document and add a 'id' to it:

<iframe id="hypeframe" src="../uncategorized/document.html" height="768" width="1024" style="border:none;" frameborder="0" scrolling="no"></iframe>

[Benjamin889]

Thanks for this Daniel.

Please bear with me as I’m still learning both programmes.

I’ve done that and added an ‘interactive area’ for my button to play the Hype animation.

I have this message come up when I’m previewing

I have miss interrupted something?

Thanks,
Ben.

[Daniel]

Hmm, using that type of object should also work, since it also can trigger the 'load' event: https://docs.pubcoder.com/pubcoder_events_and_actions.html#load

Can you share a simplified PubCoder document?

[Benjamin889]

Yes sure I’ve got a single page Pubcoder document with the assets in.

It’s the ‘Product Range’ i’m trying to apply it too.

I couldn’t attach the zip file so here is a WeTransfer link. [https://we.tl/t-43fIVdHdtc]

Thanks.

[Daniel]

I think you copied my code above incorrectly:

[Benjamin889]

Thanks Daniel,

I’ll have another test and see what the outcome is.

Thank you.

[Benjamin889]

Hi Daniel

I've amended the code and I now have this appear.

[Daniel]

My mistake, it should be the same as the current src, so it should be:

src="../uncategorized/product-range-ac.html"

[Benjamin889]

Brilliant thanks.

I've added that, I've got a cross mark saying 'missing semicolon'

Do you mind pointing out where it should go?

[Daniel]

Sorry I wasn't clear, the full code in that box should be:

document.getElementById('hypeframe').src="../uncategorized/product-range-ac.html";

What we're doing here is telling the frame when the page is loaded to change the src of the frame. Even though the frame source is the same, the frame will reload when this happens.

https://share.getcloudapp.com/xQuDoK8wnva

Or,

// Get the iframe
const iframe = document.getElementById('hypeframe');

// Reload the iframe
iframe.contentWindow.location.reload();

[Benjamin889]

Brilliant thanks for the file.

Is there a way that we can get it so when I tap on the 'Interactive Area' that it will load the Hype animation and not just the page.

So that I can tap to bring and play the hyper animation multiple times?!

RPReplay_Final1594307583

[Benjamin889]

Hi Daniel,

I've managed to get the animation from Hyper playing on a tap. Instead of having it 'Load', I changed it to 'Run' and that plays the animation every time I tap.

Is there a snippet of Javascript that I could put that would delay the animation but a second or less and I could just change the time it delays the animation.

Thanks for all your help so far.

[Daniel]

You'd like the animation to play a few seconds after the tap? Can you be more clear about what looks incorrect and what you're trying to do?

[Benjamin889]

I've got the animation on a tap and works well. I'd like to be able add some Javascript that will delay loading the HTML so that it doesn't start straight away as it misses some of the animation playing.

I would like to be able to change the time it takes to load the HTML.

[Daniel]

@Benjamin889

I'd like to be able add some Javascript that will delay loading the HTML so that it doesn't start straight away as it misses some of the animation playing.

For this, I would just build in a pause in your Hype animation:

[Benjamin889]

Hi Daniel,

I thought that would be an easier option with delaying the animation.

All these work great on my Mac and in iBooks.

I'm having an issue with the Hype animation on Digital Editions on a Windows laptop.

I'm not sure if its PubCoder or Hype, thought I'd see if you knew what the issue would be as you;ve helped me out so well.

Attached is an image of what the Hype animation shows in Digital Editions on Windows.

Thanks.

[Daniel]

It works for me fine in the Mac version -- my guess is that it's a bug in the Windows version. (The code i'm seeing is not related to Hype in your screenshot)