0

I've been asked to embed https://stallion-sphere.herokuapp.com in a webpage, with the problem I'm having when I use:

<iframe src="https://stallion-sphere.herokuapp.com" width="1000" height="1200" scrolling="yes">
</iframe>

Being that when when one of the horses in the stallion sphere is clicked on, a pop up appears with the details of that horse that has an height greater than 1200, but it won't scroll so that you can see the rest of the horse info.

My question is, how can I embed the horse sphere in an HTML page so that when somebody clicks on a horse, the full info that appears in the pop up can be scrolled through?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Holmey
  • 1
  • 1

1 Answers1

0

You can use the following on the iframe:

overflow:scroll

This will allow a scroll bar to popup.

Here is a jsbin:https://jsbin.com/dujemoqewa/edit?html,css,js,output

scrolling="yes"

^^ Is a pretty old way of doing it, but you can mix them for better cross-platform compatibility. That said, there are just some browsers that don't do scrolling iframes well. That's where things like Jquery come in for dynamic content. I'd recommend this post, too:

https://jsbin.com/dujemoqewa/edit?html,css,js,output

Justin C
  • 326
  • 2
  • 13
  • I'm a total beginner here, am I right in that your saying put: In place of: and add #sphere { overflow: scroll; } To the CSS? – Holmey Feb 13 '16 at 11:04
  • No worries. And yes, that is correct. All styling of the iframe should now use CSS. You have it perfectly. Please note though, that scrolling in iframes, in general, is very circumstantial. Without API, I might consider an object embed code instead: http://stackoverflow.com/questions/8702704/alternative-to-iframes-with-html5 – Justin C Feb 14 '16 at 05:56