I am using the Google Maps API as described here, and I added Adsense Ads to the page as defined here. I would like to display different ad sizes based on the screen size of the device. Currently I display one size, that is too small for a desktop browser, and too large for a mobile browser.
Is there any way to go about doing this?
Try checking the javascript properties screen.width and screen.height.
Place them in a container and set the container to be in % width and then set your iframe to be the same. So depending on the screen size your adds will expand to fix the percentage. You may need to fire a resize event to cater for a user minimizing the screen. Example:
Your CSS:
.ad-holder{ width: 33%;height: 200px;} //width can be anything you declare
Your HTML:
<div class="ad-holder">
<iframe src="the map or ad" width="100%" height="200px" frameborder="0" id="map_options_styling_iframe">
</iframe>
</div>
Related
on my site I have an iFrame which contains products that I sell.
When viewed on a desktop PC it's fine, but when viewed on a mobile / tablet device the image doesn't resize properly. The image in the iframe is blurred because it has been stretched to fit the screen. If you rotate the device or resize the screen by even a pixel it fixes it.
An example product is here:
Click and view as a mobile device
I have a css attached to the iframe so I can control what happens inside, but I can't figure this one out.
I've applied this to the canvas but it just stretches the image, it doesn't resize it:
height:100% !important;
width:100% !important;
It seems to be getting controlled by some js from the origin server, is there something simple that I'm missing here?
Thanks in advance
Chris
Try using attributes height="100%" width="100%"
I'm trying to embed the IMDB movie trailer iframe into a mobile Ionic app,
problem is that apparently their embed code can't go below 400px width, I've set the parameters for the iframe with the width value as provided by the site:
<iframe src="http://www.imdb.com/video/imdb/vi354465561/imdb/embed?autoplay=false&width=320" width="320" height="480" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="no" scrolling="no"></iframe>
but all the elements inside their html structure show a fixed width of 400px. If this is a limitation of their page, what recommended alternative can I use to display the trailer correctly over a 320px width viewport? which is what I'm using as default mobile visualisation.
The only workaround I'm applying now is to move the iframe a bit over the container so the fullscreen button is available, but this doesn't look right.
The only solution is to change the iframe's CSS and make it responsive to your vieweport, which might be possible. Try what's mentioned here: How to apply CSS to iframe?
Edit: If all fails, seems like the only fallback could be creating a scrollable container over your iframe so that the user can at least view it completely scrolling. You can do this with the CSS Overflow property
My app has a functionality that loads another route in a iframe. The intention is to change some layout settings, colors etc and see how that page will look in the browser in its final and original version (100% in a desktop or laptop).
The problem is that the iframe is loaded in a div that has something like 2/3 of the system's width (it's a Bootstrap column). This is smaller than our media-query breakpoint and the iframe content is loading the responsive design. But that breaks the rule in paragraph one.
I needed it to be a miniaturized version of the original page.
Is there a way to achieve this result?
What I am trying to do is somehow similar to this on Google's PageSpeed:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstackoverflow.com%2F&tab=desktop
THe difference is that Google takes a picture and in my app the user must be allowed to interact with the page, browse other links, click buttons etc. It is a screen simulator/previewer but not responsive.
As CBroe mentioned, the problem is that the CSS for the page loaded within the iframe is using the size of the iframe as it's viewport size. You'll want to size the iframe according to how you want the actual page to display (1200px wide, for example) then use a scale transform to reduce the size of the iframe.
Your HTML could look like:
<iframe width="1200" height="600" src="https://example.com"></iframe>
Then rescale using CSS:
iframe {
transform: scale(0.3);
transform-origin: top left;
}
Here's a live example: https://codepen.io/JoshuaToenyes/pen/gMMLze
I'm sorry if this question has been already answered, but can't narrow down or ask the question right.
Here goes, I have a client's website that has three embedded iFrames,the website is for Holiday accommodation and uses a Calendar, Booking Enquiry and the floorplans, all come from different vendors.
The problem is they all have different widths and height.
The width in most instances is set to 100% that's fine, but the height is where the problem is, even if I try to set the height to what I want it, it defaults back to a set size.
The default size is 309px and is in two css files needed for the site in general.
Is there a little snippet of code that could over ride that size set in the CSS?
The site in question is here: http://aalen.com.au/aalen1-pims.php
The main area of concern is the Floor plans, they just end up in a smaller iFrame and doesn't show off the potential of those plans. Many thanks
Looking at the page, I can only see one CSS file affecting your iframe, app.css, there are other css files, but none of them change the height of the element.
I assume you're referring to this code from your website.
<iframe frameborder="0" height="400" scrolling="no" src="http://pl.an/aalen-1/embed" width="100%"></iframe>
It looks like you're setting the height in two places, once in app.css with the code:
iframe{
height:390px;
text-align: center;
}
You are also setting the iframe height with the height attribute as seen in the first code example. Try removing the height="400" attribute from your iframe tag and only have the height in the app.css file.
In future you can try using the Firefox developer tools or Chrome developer tools to manipulate the CSS on the page while it is open, in order to see what you need to change, and how it will affect the rest of the content on your page.
I'm looking for the correct way to assure that dynamically revealed content is visible after scrolling in an iframe on ipad / iOS5.
Oh Iframes and iPad - what a wonderful old chesnut you are. I know that:
iPad expands iframes to the full height of the content within it (almost like it was using HTML5's "seamless" property, but not quite since it doesn't inherit styles or events from the parent). Bizarre, annoying to many, but true.
<iframe height="100%"> is therefore useless since it sizes to its content not to the container
I need to wrap my iframe in a div - a la
<div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
<iframe width="100%" height="100%" src="about"blank"></iframe>
</div>
or else introduce some trickery to set the scroll position of the frame (which I think is based on tricks mentioned in this article)
My issue is that content that is dynamically shown inside the iframe body (e.g. jquery tabs, accordion, etc) may cause the browser to crop the content at the display extent of the page.
E.g. if my "tabs" are most of the way down the visible viewport inside the iframe and I perform a two-finger scroll (or implement the one finger scrollTop hack) then after that content is scrolled into view, some of its content that was previously not drawn remains undrawn. Clicking to a second tab / back again causes the content to appear as if the page doesn't draw off-screen content. After this, if I then scroll back up to the top of the page the content isn't drawn for the start of the page (which was previously visible). Scrolling the page up and down a few times with a two-finger scroll resolves the issue.
I had read this article that stated that the problem was fixed. But it doesn't seem to be fully fixed; and still doesn't get around the issue that because you have to wrap your iframe in a div and put scrollbars on that div, desktop browsers may show a double scrollbar depending on how they interpret overflow:auto.
p.s. I'm using HTML5 boilerplate page both inside and outside the iframe, with the correct meta viewport settings.
I found I was also able to solve the problem by making the document as tall as the iframe content. (As suggested Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone) But in my case I didn't want the user to be able to scroll down in the now tall app, because its supposed to be a fullscreen application. I used this code to prevent vertical scrolling:
/*
Prevent Scrolling down.
*/
$(document).on("scroll",function(){
checkForScroll();
});
var checkForScroll = function(e)
{
var iScroll = $(document).scrollTop();
if (iScroll > 1){
// Disable event binding during animation
$(document).off("scroll");
// Animate page back to top
$("body,html").animate({"scrollTop":"0"},500,function(){
$(document).on("scroll",checkForScroll);
});
}
}
I evaluated a lot of options and wrote this blog post, including test code.
http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/
Hope this helps,
Topher
I'm assuming there is a bug in iOS safari in how it treats iframes with defined width / height. Without width / height being defined it tries to scale them automatically to fit their content without any scrolling needed.
The best workaround I've found is to not scroll the iframe at all, but rather to scroll a wrapper div inside the framed-in page.
Here's an example:
<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>
a-file.html:
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>
This is a very tedious problem, especially if you are in a scenario where you must use a dynamically scaling iframe, in my case with the YouTube iframe API. You are not able to control the scroll properties of the iframe. It doesn't even work if you modify the iframe elements in the ios simulator/safari debug window.
The best solution that I found was to use negative positioning to remove the excess whitespace. Android may have mixed results so you have to use browser detection and apply that way.