I've got an Adobe Edge JavaScript and CSS3 animation's EdgePreload HTML page included in another page, using the iframe tag. It works nicely, but when I try to use -webkit-transform:scale(0.5,0.5), the iframe itself scales from being 1600 x 900px, to 800 x 450px, but the contents remain the same size. I would post a link to the file, but it's currently offline. If you need any other information, please say so.
On transformation is the IFrame getting relaoded?..if not that is the issue for not resizing.. the contents are aligned based on load iframe size. Please try to relaod the Iframe after you transform..
If a relaod is impossible might have to explicitly access Iframe DOM and resize content in that case CROSS DOMAIN POLICY will come into play and will be tedious..
Related
In my app I am displaying website using the WKWebView component but since the website has <iframe> content, scrolling does not work. The iframe content itself registers taps and swipes but it never scrolls.
When I open the same page with Safari it works well, I can interact with iframe's content and scroll without any issues.
My iframe takes full width and height of the webpage and I added this property:
-webkit-overflow-scrolling: touch;
But it does not help. Unfortunately I cannot show the webpage in question because it contains proprietary data and is behing login screen.
I would prefer to solve this without having to modify the webpage, since Safari works fine.
EDIT: It looks like the iframe might be detecting the events and not "forwarding" them, because when there is also for example navbar on the page (that is not part of the iframe) I can swipe it and scroll. However since there is very little space on the screen, I would prefer not to have any other elements apart from iframe itself.
EDIT 2: I tried to display the page from iframe directly in the WKWebView but it still does not scroll at all. Works great in Safari.
Solution: In the end I solved the issue by changing the userAgent property of the WKWebView to match either iOS 12 Safari for iPhone or iPad depending on the device. The website in question is fairly complex regarding user interaction so I guess they were sending "incorrect" settings to the browser with the default user agent.
I would look for scroll-blocking event listeners that might conditionally load. If you have some kind of touch, touchmove, click, hover javascript events they might interfere with the default logic by using e.preventDefault().
Also you need to look for such events both in framed page and host page.
Try to replace a host page and framed page to see if scroll works well with different URLs.
Try placing the iframe in a div with -webkit-overflow-scrolling which takes up the full view and make the iframe the the size of it's content.
Example from: https://coderwall.com/p/c-aqqw/scrollable-iframe-on-mobile-safari
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe src="./yxz" style="width:100%;height:100%">
</div>
You may have to get creative with resizing the iframe to match it's content (see: Adjust width and height of iframe to fit with content in it)
I was trying to embed my code on my new google site but it looks like there is an extra scrollbar on the embed code section. At first I thought it was the size too short but after I have adjusted the size is still the same, I still can see the scrollbar from the embedded code section.
Does anyone know how to prevent this?
To disable scrolling for embed code, add :
<script>
parent.document.getElementsByTagName('iframe')[0].scrolling="no";
</script>
This changes the scrolling value of the parent iFrame ( scrolling="yes" ) to no.)
You can change the no to auto in the code if you want it to add scrolling automatically.
As #Vico said, you can remove the scrolling with the added but that will most likely just remove scrolling and not make your embed URL Responsive.
Unfortunately there is not a way to actually communicate your mobile environment from your google site to your embedded URL because the new google sites embed uses iFrame. The only work around would be to increase the size of your embedded container on your google site drastically. Once you do that you should be able to view your full webApp or what not on your site with no up-down scrolling but you may still see side-to-side scrolling. To remove that you van add
<body style="overflow: hidden;">
and it will be hidden.
Maybe this trick will help: Expand the inserted "Embed < >" box's boundary. (from
Auto adjust heigth of Google Site embed code (html))
I am making an html webpage with a video in the background and would like to accomplish the following using CSS:
The video keeps its aspect ratio
The video fills the width of the screen
At relatively large window size the whole video is visible
The video has a minimum height (i.e. when the window is shrunk, at a certain size, the whole video is no longer visible).
There are elements positioned directly below the video, dynamically following it if the window is resized
It would also be nice if when the video is invisible it is centered (not crucial).
I've been trying this for ages now and have been able to get most of the points but not all of them; in particular I find the last point (positioning another element directly below) to be hard to combine with the others. I've been using the html video element and CSS.
Is this possible?
You can use a Jquery plugin for this. I recommend looking at this one in particular.
Vide - Jquery Plugin For Fullscreen Background Videos
In any modern browser, when you visit an image url (eg, http://i.imgur.com/xrM9q.jpg), it automatically resizes that image and gives you the option to "zoom in" with a little magnifying glass. This is not always the case with an iframe:
<iframe src='http://i.imgur.com/xrM9q.jpg'> </iframe>
If you link an iframe to an image, Firefox will give this nice behavior: it starts out behaving like max-width: 100%; max-height: 100%, then you can click on it to make it big.
However, in Chrome, the image is just full-size. Try opening this example in Chrome and Firefox.
How do I get Chrome to handle images "smartly"? That is to say, have the default behavior show a magnifying glass cursor and provide auto-resizing?
(To clarify: I want this to work in a Chrome extension. The only solution I've come up with so far is to put a content script on all pages and manually change styling on images on the page. That solution sucks, so I'm hoping for a method that is less hacky and doesn't effect every page the user visits)
Try making the iframe refer to another html file and in that html file put the img tag with the width and height constraint. I think it will work on most browsers this way.
Hi I want to disable the resizing the html web page by the user. How to do that
I want to disable the resize button and manual resizing by dragging. pls help
You can't, thank God.
When you open a new popup you can request it be unresizable using the feature resizable:
window.open('something.html', '_blank', 'resizable=no');
however modern browsers may ignore your request as it is considered egregiously user-hostile.
Use liquid layout to make your page respond flexibly to changes in window size, rather than attempting to set it in concrete. The web is inherently a variable-size medium, and mobile browser users get no input in how large their screen is anyway.
Pardon? Are you talking about resizing the browser window? If that's the case then you can't do this in HTML, or JavaScript as it would be a security risk allow web pages to control browsers behaviour.
If you want to get rid of scroll bars you can set the body tag to 'overflow: hidden' in CSS?
If you mean to stop the page shrinking and expanding in sympathy with browser window size, then use fixed width elements as supposed to relative (%)