[Pro] iframe scrolling iPad

Legacy Dynamo
1

Hi there,
I’m new here and hope that someone can help me.
Having problems with the guestbook action (using Disqus), as I can not make it scroll on my iPad (works fine on the computer).
I already tried to put the action on top of an HTML item, as well as insert it as a child item.
Furthermore I followed an example of http://davidwalsh.name/scroll-iframes-ios and entered
the code as follows on the page (>HTML item, “Before ”), but it still won’t work.

.scroll-wrapper { display: inline-block; -webkit-overflow-scrolling: touch; overflow-y: scroll; } .scroll-wrapper, .scroll-wrapper { width: 100%; height: 400px; }

Has anyone any idea what I’m doing wrong or how to solve this ?

Thanks in advance

BR
Tom

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

This code, as written, will only work if your Disqus frame has the class ‘scroll-wrapper’ added to it. If you post a link to your page, one of us can use the Web Inspector in Safari (or, come to think of it, you could) to figure out exactly what classnames are applied to it already. Then it will be a trivial exercise of changing the CSS to match the actual class of the Disqus iframe.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Sorry for my late reply but I was out traveling (and sorry double asking the question in 2 groups).

Here’s a link to the subpage where I tried out 3 different version of CSS but none of it worked…
http://www.eickerabgrund.de/baustellen/

As I have zero experience with this kind of special things, your help would be very much appreciated.

BR
Tom

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

This code, as written, will only work if your Disqus frame has the class ‘scroll-wrapper’ added to it.

You have not added the class to the iframe - you have included the style code for scroll-wrapper1 but not added the corresponding class.

It might be easier to use the style code to target the iframe through its ID which is dsq-2 (on the first page)

So your code would be

<style type=”text/css”>

#dsq-2 { display: inline-block;

-webkit-overflow-scrolling: touch;

overflow-y: scroll;

}

#dsq-2 {

width: 100%;

height: 400px; }

</style>

David

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Thanks David for the quick feedback.
I’ll give it a try.
BR
Tom

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Hi again,
I modified my test-page but the only thing which changed, is that the guestbook within the iframe moved to the left bottom corner. See following link (ignore the layout):
http://www.eickerabgrund.de/baustellen/gastebuch.html
What am I doing wrong ?
Tom

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Well - it scrolls but you have 2 items on the page with the ID of dsq-2

One is a Div and the other is the iFrame itself - change the Div name to something else

D

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

I changed the DIV’s name to ‘DIVframe’ uploaded it again, tried it on my iphone (4S) and on ipad (3) but it does not scroll at all on my devices…changing the name/ID of the DIV only did bring the Disqus layout back into it’s correct position.
I pasted the code in “Before ” - maybe that is not correct ?!
Tom

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Look at your code - you have:

<style type="”text/css”">

    #dsq-2 { display: inline-block;

-webkit-overflow-scrolling: touch;

overflow-y: scroll;

}

    #dsq-2 {

width: 100%;

height: 400px; }

</style>

Fix the first line so that it reads

<style type="text/css">

There should be no curly quotes in there - just straight ones!

D

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

OK - rather than take as verbatim the code you had originally I revisited the article and have some revised code for you:

<style type="text/css">
    #Gastebuch {
    display: inline-block;
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
		}
    #Gastebuch iframe {
		width: 100%;
		height: 400px;
		}
</style>

My example page is at http://www.deltadesign.co/Tom/youriframepage.html

Does it work for you?

D

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Yeeeees !!! It works perfectly on our homepage:
http://www.eickerabgrund.de/gastebuch.html

Thank you so much for your effort and help !!!
This is a wonderfull xmas present.

Thanks, thanks, thanks
Regards
Tom

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options