[Pro] autoscroll iframe content on load

gsymon · August 6, 2014, 1:07pm

I’d like to have an iFrame, do an iOS style ‘bounce’ (or something similar) to its content when it loads, to show that it goes beyond what is visible.

Is there an action that can do this?

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

waltd · August 6, 2014, 1:44pm

If you have control over the page that loads into that frame, then you can do this. But if it’s not your page, you can’t. Let me know if you want the JavaScript to do this.

Walter

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

gsymon · August 6, 2014, 1:48pm

Hi Walter,

yes I do have control. The page is my own.

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

waltd · August 6, 2014, 8:36pm

Try this, in the page that loads into the iframe:

Add Prototype to the page (or use Protaculous 2 on the page).
Create a class-based CSS style (example needs one set to .notice) that sets the body margin to a negative dimension (I tried 20px for a good jump)
Add this script tag in the Before /body slot:

<script type="text/javascript">
if(window.top != window){
  $(document.body).addClassName('notice');
  setTimeout(function(){
    $(document.body).removeClassName('notice');
  },200);
}
</script>

To make this effect smoother, you can add a separate style tag to the Before /head slot:

<style type="text/css">
body {
    transition: margin .2s;
}
</style>

This makes the position move more smoothly than just adding/removing the classname.

Walter

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

gsymon · August 8, 2014, 8:55am

Hi Walter,

thanks for the code!

You will probably sigh in despair, but I have no idea how to set a class-based style. The word ‘class’ doesn’t even appear anywhere in FW documentation.

Can you give me a pointer?

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

David_McCallum · August 8, 2014, 9:58am

Look at the style inspector

Click the cog at the top and choose new style

Put ‘notice’ (no quotes) in the name field and set your other parameters

OK the dialogue once you are done

Then apply the style to your container

David

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

waltd · August 8, 2014, 10:04am

Close. That will give you a class-based style all right, but it won’t publish it unless you apply it to something. I would recommend that you put the style name in the Tag field, preceded by a dot. That will be a “tag-only” style, which gets published whether you apply it to something or not. So the long directions are as follows:

In the New Style dialog from the Styles palette, enter .notice in the Tag field.
Tab into the Name field, delete whatever is there, and press tab again.
In the Extended interface, press New.
In the Name field, enter margin-top
In the Value field, enter -20px
Okay out of the stack of dialogs.

You now have a class-based style named notice, this style does not need to be applied to anything manually, and it can be relied on to “shake” the page inside the iframe when it is rapidly applied and removed by the script.

Walter

On Aug 8, 2014, at 5:58 AM, DeltaDave wrote:

Look at the style inspector

Click the cog at the top and choose new style

Put ‘notice’ (no quotes) in the name field and set your other parameters

OK the dialogue once you are done

Then apply the style to your container

David

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

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

David_McCallum · August 8, 2014, 10:13am

Working from my phone here Walter - can you not apply the style to an html container so that it is published

D

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

gsymon · August 8, 2014, 10:57am

Thanks Walter, Dave.

I’ve followed your instructions to the letter Walter, but it’s not working on my page.

I made the style as you said. Added your code to the page HTML Markup and added Protaculous2 to the page (didn’t set any parameters though).

My iFrame is not made from an Action, but is drawn HTML with this code added. Perhaps this is causing the problem?

My page is here : awards

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

David_McCallum · August 8, 2014, 1:43pm

At least some of the style code is in the wrong place

You have:

<style type="text/css">
body {
    transition: margin .2s;
}
</style>

But not seeing the notice style in there.

David
In the html section - it should be before

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

gsymon · August 8, 2014, 4:09pm

Thanks Dave.

Note sure why it’s not being saved/uploaded to the site. This is what I’m putting in :

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

David_McCallum · August 8, 2014, 5:31pm

Re the first one - you are putting it in Before - it should be in Before end

Re the second one - you are putting it in Before - it should be in Before end

D

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

gsymon · August 8, 2014, 5:49pm

Thanks Dave. Feeling a bit of a twit about that, but it hasn’t made any difference. There’s still no bounce.

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

waltd · August 8, 2014, 8:14pm

All of this code (style and JavaScript) must go in the page that loads into the iframe, not the outer page that contains the iframe. An iframe, like any other frame, is its own sandbox, and you cannot influence the behavior or style of its content page from outside of the content page. I’ll post an example that shows this working when I get a chance.

Walter

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

gsymon · August 8, 2014, 8:19pm

Okay Walter, feeling like a bigger twit now. The page is an old one that I made in iWeb and just update occasionally, so I’ll see about adding html in there. Apologies for being dumb about it.

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

waltd · August 8, 2014, 9:14pm

Don’t be hard on yourself, this is confusing stuff.

http://scripty.walterdavisstudio.com/bounce

Walter

On Aug 8, 2014, at 4:19 PM, grantsymon wrote:

Okay Walter, feeling like a bigger twit now. The page is an old one that I made in iWeb and just update occasionally, so I’ll see about adding html in there. Apologies for being dumb about it.

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

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

gsymon · August 9, 2014, 12:25pm

Thanks again Walter.

Adding to iWeb is something of a bodge, however, whilst thinking about this, I’m leaning towards re-creating my site in FW7 as a responsive site. The ‘why’ for my current design was precisely to cater to different browser/screen sizes with a single site. A sort of early responsive. The point being, that by placing all of the buttons/links at the top-left corner, where they remain fixed and having the content in a re-sizable iFrame … any size of browser window works.

With responsive, it seems to me that this ‘top-left’ solution is no longer necessary and I can rethink using a more conventional site where it’s no longer necessary to keep everything in an iFrame.

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