I have a facebook app run inside an iframe. The problem is that if I have a smaller browser window, I scroll to the bottom to the app's page list and select a new page, it will open in the iframe also in the bottom.
I tried to add a #top to the links, linking to a name="#top" element inside the new page, but this doesn't work on Firefox (verified) and supposedly IE(not verified yet).
For Firefox, I understood it's a known issue and there are some workarounds to make a "scroll to top" link work, BUT I haven't found any solutions on how to open a new link inside the iframe and make it scroll.
I added a onload="location.href='#'" to the body element of the iframe and still no success.
Whatever I try, it seems to be ignored by Firefox.
Did any of you encountered this problem before? If so, can you spare some advices, please?
Thanks
You could try a "ugly" workaround using http://api.jquery.com/scrollTop/
As a Facebook-developers, I am curious. How do you resize the app-iFrame during runtime? I have a few ajax-based apps, and after every ajax-call I resize the window, eliminating this problem.
Might worth taking a look into.
Feels weird to answer my own question, but hopefully this will help others.
In the end, what did the trick for me was Facebook's scrollTo function: http://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/
I still don't know if it works on IE, since I haven't tested it yet, but on Firefox everything is ok now
Related
I have a problem with a web page I built that in iOS, not sure what versions, but I'm testing it on the new iPhone X(and newest iOS), it's possible to kind of resize the whole webpage.
I checked other regular sites and doesn't seem possible to do that.
So i'm guessing maybe some easy CSS can do that.
It looks like this (this is not my site, just another site that's it's possible to do it with)
It does not change my actual viewing of the site, I can only drag and move it, but when I let go, it goes back to the full screen.
You can see the movie here of how it moves: https://vimeo.com/263628559
I have fixed items on the screen, so it's not any particular div that it's been done too.
It was not that, I found a solution with jQuery
$(window).bind('touchmove',
function(e) {
e.preventDefault();
}
);
Good luck to all :)
I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.
I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?
I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.
Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
I've been having this weird problem that I thin I am close to solving but would like some input. It relates to this problem here: Firefox and multiple iframes not loading I have 4 iframes loading on a page, each in a separate tab. The tabs are made using Twitter Bootstrap.
Now here comes the really weird part with FireFox. The iframe only works for if the current tab is showing with the iframe. The iframes in the other tabs whose divs are not shown all have javascript errors and do not work. But if I take all the iframes and put them in the same tab that is displaying, they work.
Is there a logical explanation for this?
I recently had an issue very similar to this. From what I found, the "display:none" value of an iframe can cause error in Firefox if used in its declaration. There are a few opposing opinions on this here Setting iFrame CSS to display:none during load but I have found through my research that it's a common problem in Firefox. (edit: another link on this bug ->https://bugzilla.mozilla.org/show_bug.cgi?id=548397)
That being said, my issues vanished when I realized that not every iframe in a new instance wasn't being loaded in HTML5, but instead HTML4.
I have trouble with this page for example: http://www.last.cz/exotika.html. If you open it in FF or chrome, you start at the top of page. But when you try in IE8, it loads scrolled past the header. Compatibility mode does not help. I think the filter details that get filled by onload function cause it. Does anyone who ran into the same problem know how to fix it? A css hack would work I guess.
Thanks for suggestions. Mike
This will be executed onload(placed in core.js):
$('#item0').focus()
That's what happens, the element #item0 gets the focus and the page scrolls down to fully show the element(it will scroll until the bottom-border of the first "hotel-box"--thats what #item0 actually is-- occurs inside the viewport).
Other browsers may ignore the instruction because the element is a <div/> and can not be focused.