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
Related
I have installed Fancybox3 with NPM and imported the CSS. It is all working fine apart from when I try to open a multi-page PDF, it will default the height of the fancybox-content frame as so:
<div class="fancybox-content" style="width: 1051px; height: 9999px;">
I assume that Fancybox is trying to set the content height based on the 6 pages of PDF and it maxes out at 9999. However, with 9999px set the fancybox content is just white and no PDF is displayed (just the toolbar and PDF zoom in/out buttons). If I adjust it back to something like 100% the PDF displays correctly again.
I have tried using the fancybox options to resolve this but it does not seem to make any difference, and adding any custom CSS can fix it for PDF's but then breaks functionality for images.
Has anyone run into this before?
Try disabling preloading of iframes by setting iframe: {preload: false}
I'm guessing the answer is no but is there a reliable way to make a webpage responsive without adding a viewport meta tag to the head?
I have added a login form container that's 400px wide and centered vertically and horizontally. It looks fine on desktops but it is zoomed way out and looks tiny when you access the page on a mobile phone. Users have to swipe multiple times to zoom in so they can use the login form.
I don't have access to the head. I can only create a container within the body. However, I can add CSS for anything and basic JavaScript. I have limited access because the webpage is generated by a server program. It only allows adding a CSS file and header & footer HTML files. Basically, it limits me to wrapping the form and error container with a custom container.
You can build a responsive websites using CSS's #media rule.
Media queries allow you to apply specific css style's depending on device type an characteristics. Consider the following code, for example:
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
This code will result in your page's background color being blue until the screen width is <= 600px.
Read this MDN article for a more detailed explanation on media queries.
You can use JavaScript to program your own responsive behaviors. A simple example would be to scale the html container by the devices pixel density.
"window.devicePixelRatio" gives you the actually number pixels per css pixel. Then scale your container by it:
const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";
Css media queries may not work properly, but again you can use javascript to dynamically load styles based on the adjusted screen size when multiplying by the pixelDensity above.
From a quick glance (at Can I change the viewport meta tag in mobile safari on the fly? for example) it seems you can really create and inject relevant meta tag with JavaScript, like:
<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>
Test page: you should see wide overflowing dark paragraph before tapping the button which executes above function. After that the paragraph should fit into the viewport.
You can do it with JavaScript, but it can be apply only after the page was loaded, so it's not usefull in your case...
Currently my website is setup where the full image that is in it is loaded then automatically sized to fit the screen. This is done by setting image width to 100% in CSS. While it does work nicely, It doesn't seem to follow standards because I don't specify width and height in the image tag itself.
My idea now is to create multiple versions of the same webpage, where the only difference is the size of the image. Each image would have its own filename (like image1small.jpg, image1medium.jpg etc).
The problem is most people want to see the bigger picture right away but this doesn't go well with people with small screens since they have to scroll horizontally to see the whole thing.
I was thinking putting javascript at the top that redirects users who don't meet screen criteria to the page with the better sized image. Something like this:
<html>
<head>
<script>
if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>
The thing is a page redirect will occur for people who do not meet the screen resolution requirements for the page. I'm not sure if this can qualify as a sneaky redirect to google.
Is this a good practice to use the code like I showed above to redirect users with incompatible screen size to the correct page? or should I take a different approach to display the correct sized image to the user?
And regardless of the answer anyone gives, I feel I need to specify the width and height attribute for the image tag and I want to stick to the HTML 4.01 strict standard so that the page will work for everyone.
The first draft of the HTML 5 standard was designed to work for everyone - it basically documented "what browsers actually do", rather than what browsers were supposed to do.
The rationale behind specifying the width and height attributes is that it reserves the space on the page even before the image loads, preventing the need to re-flow the content when the image loads.
Choosing to specify the attributes, but then redirecting the page, will cause a worse re-render than using the % width without the attributes. So I think your concern is unfounded as your medicine is worse than the illness.
The desire to server different image sizes is one of the use cases for responsive images, so you can take a look at that as an option rather than reloading the page. There are several fallbacks that give you wide-ranging browser support.
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.