iFrame not working as expected

[brutalexcess]

Hello, people of the Internet. I am rather new. I mean, this is my first post and for good reason. Now on to my problem… Oh wait, maybe I should introduce myself…

I am brutalexcess. There. Done.

Now my problem.

I am creating a HTML5 interactive story using Twine and unfortunately Newgrounds, the platform I want to put my finished game on, uses iframes with scrollbars disabled, which means that hidden content remains hidden. I need to add an element that allows the content of the generated HTML page to encapsulate the written content of the story and add scrollbars where necessary. I have tried many different things but none of them seem to work.

My most up-to-date solution involves this:

.scrolling {
    height:848;
    width:480;
    overflow:auto;
}

In the HTML code, I have the following (due to the shear amount of text, I have removed the content of the written story for read ability):

<iframe id="scrolling">
<div id="passages">
<noscript><div id="noscript">Please enable Javascript to play this story!</div></noscript>
<style>
#sidebar{display:none;}
</style>
</div>
...
</iframe></body></html>

The “…” is where the content would be, but as you can see the iframe encapsulates the container “passages” which is where the content of the story would be. Unfortunately this results in an unexpected visual output. See here

Any suggestions? Thanks for your help!

[TheDutchCoder]

First thing I can see is you use a class in your CSS .scrolling, but not in your HTML. There you use an id<iframe id="scrolling">.

Try changing the HTML to <iframe class="scrolling"> and see if that helps.

If not, let us know and we can assist you further!

[brutalexcess]

UPDATE: iframes just don’t work, because I’ve figured out that iframes make internal code local to the iframe, meaning that it cannot access functions outside of the iframe, so I get errors causing most of the page to disappear.

I’ve started using DIVs and putting a class on that.

I’ve tested and to no avail, see the image.

I’ve also tried it with Body as well and it won’t work.

What I’ve also realised with NG’s source code is that the iframe that embeds the Twine game into the element has scrolling turned off by default. Would that cause the scrollbars to not appear regardless of what I do with the HTML document?

EDIT: I did try replacing the “id” text with “class” to link to the class properly in the CSS but the same visual output occurs. This is why I changed to DIVs instead, but apparently Newgrounds doesn’t seem to add the scrollbars to the embedded object correctly.

In short, Object A (my game) is being embedded to Object B (the iFrame element with scrolling off by default). Object A would use CSS to add scrollbars to force them back on, but I have not had any luck with it yet.

[brutalexcess]

Also, if that truely is the problem, we might need to see your code to propose solutions.

Here is a link to my file on dropbox then.

[TheDutchCoder]

Well it looks like the script is putting all the content in the div with id “passages”.

Your “scrolling” div is completely empty.

The rest of the CSS seems to be fine, it should scroll automatically, but maybe Newgrounds is forcing some styles.

It’s hard to tell without access to the Newgrounds output.

[brutalexcess]

I tried setting it to scroll, tested and didn’t work. Same for the !important tag and that didn’t work either. Obviously something forced by Newgrounds scripts, and now I don’t like them… :)

[TheDutchCoder]

The iframe is set to “scrolling=no”, that’s one of the problems.

In order to make it scroll, make sure the iframe doesn’t have that attribute (or sit it to “yes”), and then in your CSS, set the following:

html {
  height: 100%;
}

That should fix it!

[brutalexcess]

In order to make it scroll, make sure the iframe doesn’t have that attribute (or sit it to “yes”), and then in your CSS, set the following:

The iframe element is on Newgrounds itself, it cannot be changed without doing fancy tricks with your web browser’s developer tools, which I would assume is against NG Terms of Service – technically, that’s probably the only workaround I can think of up to this point until they decide to reply to my email and suggest considering implementing a “Scrollbar Enabled” function for HTML5 games. Until that day comes, I suppose I would have to wait.

[TheDutchCoder]

Yeah I feared that would be the case.

Is there a way you can target the iFrame with JavaScript? Or will they prevent you from doing that too?

[brutalexcess]

Possibly…

I did a small look-up and found this article… soo, would something like the following work?

function setParentIframeScrolling() {
       var obj = parent.getElement("iframe");
       obj.innerHTML = "<scrolling=true>";
}

[TheDutchCoder]

I think it could yes.

Honestly, I’ve never tried to target iframes before, so I’m unsure, but it seems like it’s worth a try!

[brutalexcess]

I got it working! After hours of research I finally got it working!

Going to mark this as solved.

The article and the following quote saved my day:

Shaz3e
Permalink to comment# May 8, 2014

I think you should use something like this it won’t harm you.

.element > tag{
overflow-y: scroll;
height:400px;
}

Please change .element and tag appropriately

http://www.newgrounds.com/projects/games/783431/preview

[TheDutchCoder]

Yeah that works ;-)
Glad you found a solution!

[Author]

Posts