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! :)
Related
I have to show a web page in other web page . Iframe is the best option to do that. Everything is okay but i am facing an issue with position of popup inside iframe.
1) I have ketp its position fixed, instead of that it is supporting scrolling. (Not in iframe scrolling but main page scrolling.)
2) it is not coming out from iframe. And not supporting main page position but iframe position. Please help.
.Popup{position:fixed; top:35%;left:50%;margin-left:-100px; width: 180px: padding:10px: }
Thanks in advance
I have embedded a ecwid store in my webage via iframe.
Whenever I load the page, ecwid automatically scrolls to the iframe, instead of the top of the page.
As seen here (ecwid: how to force the scroll position), ecwid's solution for this is to add the following DIV inside the {body} tag:
<div id="ecwid_product_browser_scroller"></div>
I've made a fiddle to try to make it work, but it won't happen. I do know that people have used the same code to force the bar not to scroll down, so I must be doing something wrong.
Here's the fiddle: fiddle
Notice that the store is forcing the bar to scroll down. I would like it to stay at the top so customers actually see the banner.
UPDATE:
Still don't know why the DIV does not work here fiddle. What am I missing?
We did manage to make it work inside the new fiddle but it does not work in my website
I think u want to do this
add jquery as i have done
http://jsfiddle.net/v3g20qxd/7/
I have added the pageYOffset and scrollBy in this
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.
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)
I have a media query that works well, except, when user resize window, the images on the jQuery slider dont resize, until the user manually refreshes the page. I am getting that the slider(http://bxslider.com/) gets the window size when page is rendered and not on the fly. Anyone experienced same thing before?
All help will be appreciated.
Well since you're using jQuery you can check for the window being resized and then reload the slider.
The event hook is:
window.onresize = function(event) {
//Now reload your slider from the link in your post it seems like it's:
$('.bxslider').bxSlider();
}