3

I tried posting this to the timeline.js Google group but it got deleted.

I'm seeing scrollbars on the outer iFrame on the plugin's website (http://timeline.verite.co) and on our test site.

When embedding the iframe into our site I tried adding:

<iframe scrolling="no" style="overflow:visible;"

But while the scrollbars disappear, the right edge gets cut off slightly.

Also, the suggested embed code has width="100%".

  • If I reduce this to 95%
  • The iframe is much smaller than the containing div
  • but the right edge still gets cut off slightly
  • We see this in Firefox, Chrome and Safari on Mac
  • We also see the scrollbars in our preview on the timeline.js website

I'm sure I'm missing something simple but can't see anything on the timeline.js site or in the Google Group - except a few "you're doing it wrong" comments for other posts.

Is there a trick to removing scrollbars in iFrames? Sorry if this is simple.

Cheers

Ben

CMSCSS
  • 2,076
  • 9
  • 28
  • 49

1 Answers1

1

Add width, height and frameborder in your iframe as shown below

width='100%' height='700' frameborder='0'

Try this, i think now it's works 

<iframe src='embed.verite.co/timeline/?source=0Aj2TitNEGaD2dHlqV3ZRcDhMYlY3MjZmUEt2aWQ0ckE&font=Bevan-PotanoSans&maptype=toner&lang=en' width='100%' height='100%' frameborder='0'></iframe>
vinod_vh
  • 1,021
  • 11
  • 16
  • Thanks, but I am already using the full embed code from the site which includes those items: `` – CMSCSS Apr 16 '13 at 19:49
  • Try this, Remove scrolling and change style="overflow:hidden;" – vinod_vh Apr 17 '13 at 05:45
  • Thanks heaps. I tried your suggestions but the right edge still gets cut off (looks like by 1px) and scrollbars appear in Safari and Chrome but not Firefox. – CMSCSS Apr 17 '13 at 21:03
  • Thanks - this removes the scrollbars but crops the right-hand edge: `` – CMSCSS Apr 18 '13 at 17:19
  • Try this and let me know ' – vinod_vh Apr 19 '13 at 04:05
  • Thanks heaps. Your iframe code sort of collapses the entire iframe in on itself. If I could post a screenshot I would but it ends up being sized to the minimum size with scrollbars - about 100px W x 240px H. Here is the link to the Google spreadsheet - it's just a straight copy (with updated data) of the example spreadsheet on the timeline.js website: https://docs.google.com/spreadsheet/pub?key=0Aj2TitNEGaD2dHlqV3ZRcDhMYlY3MjZmUEt2aWQ0ckE&output=html – CMSCSS Apr 21 '13 at 01:03
  • Try this, i think now it's work – vinod_vh Apr 22 '13 at 08:03
  • OK, this now works - thank you. How do I give your last comment credit as the initial answer doesn't work - I don't really understand this aspect to Stack Overflow sorry. – CMSCSS Apr 29 '13 at 23:43
  • @CMSCSS i will edit my ans. you just approve that, then credits will come automatically..:-) – vinod_vh May 08 '13 at 10:46