I have an iframe on my pages which is properly displayed almost on all browsers. But not in Opera Mobile. How to optimize html code to properly display my iframes on Opera Mobile too?
Thank you
Opera mobile and tablet seem to render iframes at the full size of their content (which prevents overflow scrolling). This is similar if not identical to the way iOS 5 handles iframes. You may need to allow the whole page to scroll rather than relying on the iframe to contain content in the window.
Related
I am trying to track down a bug that only occurs on mobile devices (and on Firefox in mobile mode).
When I switch to Firefox mobile mode (using CTRL+SHIFT+M), the bug is immediately reproduceable (without needing to manually reload the page). At first I thought it was a CSS issue, but it seems that there may be some JavaScript at work.
If I can identify what Firefox does differently when in mobile mode, I may be able to better isolate the problem or create a hackish solution, so my question is what does Firefox do differently when interacting with a website in mobile mode?
From my understanding, Firefox in mobile mode
changes the User Agent
and it spoofs media queries such as the size of the screen and the
pixel density.
It doesn't seem to reload the page (although it does seems to
rerequest the favicon of the page I am testing).
It could trigger an onresize event when switching between modes.
Based on the above information, the User Agent is unlikely to be causing the bug that I am seeing.
CSS could be a factor.
JavaScript might be doing something on detecting the onresize event.
Does Firefox mobile mode do anything else that I have missed?
http://www.leadercastlondon.ca/
On this site, I load leadercast.js, which seems to work fine to add responsive iFrames for both Vimeo and Google Maps.
However, on IE10+, when the page loads up, the website auto-scrolls to the white section 2/3rds down the page.
This does not happen on Firefox, Chrome or IE9.
What could possibly be causing this? I have tried cutting out bits and pieces of JS with no real luck or leads at all, aside from removing leadercast.js altogether, which does stop the autoscrolling from happening.
Thanks for the help.
I have a website that needs to work without javascript.
In this website I show a iframe which contains the main content of the page. Because of a no javascript requirement, I have to show the iframe initially with scrolling. I want the scrollbars when there is no javascript.
If javascript is available, I resize the Iframe. I have to because the content of the page changes. Is it possible to remove the scrollbars when the frame is resized? Chrome and Safari hide the iframe scrollbars when its contents fit, so no issues there.
Is this possible in:
Firefox 13
IE 9
Opera 12
I've tried to do the following in javascript:
var iframe = document.getElementById('planneriframe');
iframe.setAttribute('style', 'style="overflow: hidden;"');
iframe.setAttribute('verticalscrolling', 'no"');
iframe.setAttribute('scrolling', 'no"');
it does add/change all the attributes, but the scrollbar is not hidden.
Solutions taking another approach or working javascript are welcome.
UPDATE
A better link to the site: http://planner.gvb.reizenapp.nl/advice
This contains no javascript for resizing the iframe tough, buts that not really relevant I think.
I am trying to create a page which accepts URL of the website and shows me all the display sizes horizontally.
something like this : http://dfcb.github.com/Responsivator/
or
something like this : http://mattkersley.com/responsive/
In both the websites they are using iframes to load content in the specified width and then they are playing with width and height for different devices, it works well in all browsers apart from IE7 and IE8 I am wondering how to make it work on IE 7 and 8. There should be some way or other.
I read somewhere that http://www.ehow.com/how_8123203_use-iframes-ie8.html you can use P3P headers but I am not sure.
language is not an issue. but I just want it to be working on every browser.
I have developed a test page and kept it online : http://sentimentanalysis.comeze.com/responsiate/
if you see closely it works fine on chrome, ff, IE 9 but works pretty weird on IE7 and 8, how to make it look same? Is it possible?
Any pointers would be helpful.
Responsive design doesn't work in IE7 and 8.
Using methods like:
#media only screen and (max-width: 768px){}
do not working in IE7 or IE8, the only way around this is the client side Chrome frame.
Mobile headers (not responsive media queries)
You can send pretend mobile headers but that's about it. This would require a lot of messing about to fool the server into thinking you are on a mobile device, but it will take a lot of doing. Your server will have to request the page and all of it's assets (images, styles and scripts) and it won't show the true responsive design of the site: only the full mobile site if the target has one.
I'm testing jquery-mobile with Opera Mobile browser. There are bugs, which are visible on both Opera Mobile Emulator and Opera Mobile on mobile device. On both they are occuring randomly (often, but not always).
The most visible is with refreshing list with listview('refresh'); call. Sometimes the changes are not visible, and the pure HTML before the modifications is displayed. But after tapping the device the changes became visible.
And also, some clicks on buttons does not work. Most of the time it works, but sometimes the button need to be pressed a few times.
JQuery version is 1.6.4, jquery-mobile version is 1.0.
Did you find similar bugs, or know what is causing them and how to prevent them? I think that jQuery-mobile is using some unstandard behaviour, which is working on other browsers, but is causing bug under Opera, because most of the apps works fine, but some are causing problems only under Opera/Opera Mobile.