Develop Reference

Parent webpage jumps / autoscrolls to an iframe location when content within iframe transitions using #pageName

Parent webpage jumps / autoscrolls to location of iframe when transition happens within an iframe. Transition happens using jquery mobile - $.mobile.changePage($(#pageName)) [ using an anchor to transition to a div ].
I have gone through various links on stackoverflow e.g., Loading iframe with an #element specified moves the parent viewpoint to the same location (hiding iframe till it loads and page changes but it doesn't solve the issue)
There were few other links that mentioned a) About window.parent scrollToTop when iframe loads but I do not want the parent page to scroll at all when page within an iframe changes. b) Changing focus to parent page when iframe loads but it didn't help too. (Note page transitions to another div in an iframe so it seems we need to use anchor tags as per jquery mobile). Is their a way to stop this parent page autoscrolling ? Any help is appreciated.

Issue was jQuery mobile's focusPage, which was autofocusing content within an iframe. To change this behavior - I added below mentioned javascript in of webpage displayed within an iframe
<script type="text/javascript">
if (self != top) { //if inside iframe
//don't use focusPage for embedded site to prevent autoscroll
$.mobile.focusPage = function ( page ) {
return;
}
}
</script>
Note: This link helped in resolving this issue : When within iframe JQuery Mobile autoscrolls to the iframe top

Iframe content height. scrolling iframe content with parent page

I am trying to add dynamic image gallery to a site I am working on but I am limited to only HTML and css. So I made a separate page on my own server with required php file to create the gallery and used Iframe to load the gallery page to the site.
Problem is now there is two separate scroll bars. one to scroll the content in the iframe and one for the parent page. This makes scrolling on the page very messy. Is there any way so that I can get rid of the scroll bar for the Iframe and be able to scroll through the content within the Iframe from the parent page. Anyway I can make the Iframe behave like a div? I thought the best way would be to set the height of iframe so the height of iframe would change to fit whatever the content that's in it. This way I thought there wouldn't be need for a scroll bar on the iframe.
Here is the gallery page I am trying to load with Iframe http://lejund.com/plugin/#*
I am open to all your suggestions. Is there better way to achieve this other than the Iframe?
Thank you

I found this solution on github by davidjbradshaw.
https://github.com/davidjbradshaw/iframe-resizer
It's using window.postmessage to achieve this.

Scroll parent frame to anchor in iframe

I'm new here ... hope I'm doing everything right ;-D
I've found a few topics with similar problems but they do not look like they want to reach what I want to reach.
I've got a website with a long content area, the website has scrollbars. Somewhere inside this content area is an iframe. This iframe implements a site with full height (a support board) and resizes the iframe when the contents height is changing - so the iframe has no scrollbars. Now what I want is: when I'm opening the website with i.e. http://www.mywebsite.com/#new I want the page to scroll down to the iframe but not only the begining of the iframe but the position where the anchor is placed inside this iframe.
So the iframe itself doesn't need to be scrolled (it's always 100% height) but the parent frame should be scrolled to the position where - inside of the iframe - the anchor is placed.
I really don't know how to solve this. Adding the anchor to the iframes url doesn't help and also just adding the anchor to the website url doesn't work. I'm sure I have to implement something with javascript or similar but don't know how! I'm able to modify the code of both - the website inside the iframe and the parent site!
//EDIT
Oh i forgot... I can't do it with an onClick-Action or a link attribute (that's what seams to be the solution in a related post) because it's not a jump inside the same page. The page is being reloaded and should jump to the anchor :-D So it has to work when I'm entering the URL on my own...
Hope you understand what I need!
//EDIT2
Possible frameworks:
Main page is a wordpress blog, so JQuery is possible!
Iframe page is a simple machine forum (SMF) - I think only native JS here!

Here is an answer that will put you "on the right way".
Assuming your iFrame is always in the same position inside your main page, what you need is to scroll the main page to this point: iframe y coordinate + anchor coordinate inside iFrame.
So I will call you anchor: <a name="anchor1">Here</a> and you iFrame: <iframe id ="myiFrame" ...
To get the iframe position in the page you can use $("#myiFrame").position().top and the anchor position inside the iFrame with $("#myiFrame").contents().find('a[name=anchor]').position().top.
So your script moght look like:
var y = $("#myiFrame").position().top + $("#myiFrame").contents().find('a[name=anchor]').position().top;
$(window).scrollTop(y)

jQuery Mobile Navbar links not working when iframe is used on Android

I have a mobile project that I have created using jQuery Mobile.
The problem I am experiencing only (appears to) happens on Android Devices.
My application consists of a fixed header (at the top) and fixed footer (at the bottom) and some content (between the header and footer).
The footer contains links (within a navbar) and the content contains an iFrame. I am pulling different pages into the iFrame (source) depending on the current page (selected from the navbar) etc...
The iframe is contained within a div and the height is set to 100% so that it fits the applications content area. Everything works as expected - when loading the app in my desktop browser (to test) and also on IOS devices etc... E.g. The iFrame loads and renders the iFrames source correctly and allows me to use the navbar in the footer to change between the pages (loading new content into the iframe each time).
However, on Android, the iFrame also loads and renders correctly, although I am not able use the navbar (I cant click the links). It appears that the content of the iFrame is being rendered off the page (outside the iFrame and containing div (although not visible) behind the footer / navbar (it is not cut or cropped) and I think it is taking touch event focus from the navbar itself (if that makes sense) - E.g. when I click / touch a link in the navbar, it is either ignored, or if (by chance) there is a link within the iframe rendered under the selected navbar link, the link from source within the iFrame is loaded and the navbar link is ignored...
I have been banging my head on this one for a while now, so any help would be very much appreciated.
Cheers !

I updated to a the latest version of jQuery mobile (updating my code accordingly) which seemed to fix this and other issues :) I would advise (and the lesson I learned is to) first updating to the latest libs if you experience any problems within this space.

Facebook scrollTo not working in iframe?

I'm trying to have my iframe load up to the top of the page when the page refreshes. Basically I have an iframe, the initial page high is 1250px but the 2nd page that it sends you to is only 500px in height. The problem is when your redirected to the new page you only see white space and have to scroll up.
I have tried using the following:
$("#postyourwave").click(function(){
FB.Canvas.scrollTo(0,0);
});
but to no luck. Can anyone help me out?

Try setting Canvas Height to 'fixed' within the application settings.

The issue is the scrolling iframe within the canvas, I have been told this is not possible. If someone knows please fill me in! :)