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.
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 am trying to load background image to a page using Dreamweaver. It shows in IE and Edge but not Chrome or Mozilla. I have tried moving the photo's location (file path) and tried in both straight HTML and CSS with the same result. I cannot find another way to write the code or think of one (being very new to this) so that it will show in all browsers. This is the CSS code:
background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')
set in the body brackets;
and html:
<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">
Everywhere I look I find examples with ellipsis points, like url(...website.com/greanleaf.jpg) and the dots totally confuse me. I think perhaps I need help with how file paths work.
This is due to the implementation of the body and html tags in Firefox and Chrome browsers. the body and HTML tags are only as big as the HTML content of them. where as Edge and IE the HTML and Body are auto sized to the size of the view port.
Add this to your CSS
body, html{
min-height:100%;
min-width:100%;
}
Ok , so if your code is correct and the image it's shown in IE and edge try to
refresh your browser but not normally with this command : Control + Shift + R
so that you're sure to be running the latest and greatest version of what that web
site's serving.
First, you'll need to be sure that the browser is correctly locating the image.
A good way to be sure is looking at Chrome's network tab. Hit F12 in Chrome to reveal Developer Tools. Click the Network tab and then refresh the browser. You will receive a list of resources that have/have not loaded. If your image is listed in red, then it failed to load. Your problem will be an incorrect path.
This is a good resource for understanding relative file paths.
https://css-tricks.com/quick-reminder-about-file-paths/
However, if it did load successfully, the image isn't showing for another reason. Without seeing all of your code, I can only make a guess. Is the container that your image is in empty? Without content or a specified height, the background image won't show in some browsers.
I am having issues with overlaying divs with transparency and being able to click on both layers in Chrome (but not IE).
In my search for answers I found the following example to illustrate:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
The source for that page is commented to explain about transparency.
If I view this page in IE I can highlight (ie interact) both the text in the box("Here is a div with...") AND the text at the top ("This DIV is overlayed on..."). However, when I open the same page in Chrome, I cannot select the text at the top.
This highlights the issue I am having in using iframes which contains links, but I also want the page containing the iframe to also allow links to be clicked. The transparanecy works in Chrome in as much as I can see both sets of links, but can only click those on the top layer (ie the iframe). The top iframe allows me to see what is behind but not interact with it.
I know about pointer-events:none however, that then stops the links on the iframe. I can basically get it working on the background html OR the overlying iframe but not both!
Hope this all makes sense and thanks in advance.
It seems that the solution specifically for chrome is using the css:
div#parent, div#parent div {pointer-events:none;}
meaning Div, and all children div as well should enable clicking through.
I found the solution here:
Click through transparency in Chrome
I have a "simple" web application that has a navigation and a content area.
Within the content area I have a iframe with more complex content. Unfortunately the content in the iframe has another iframe.
The get an overview look here:
.
In my scenario it is quite helpful to see the full iframe content, so we hide the navigation and change the content size on top of it:
If I go back now to initial view the iframe inside the iframe doesn't change the size:
This happend only on Safari mobile (iPad) OS 5.1. On normal Safari browser it works as expected.
Does anyone have a similar problem or an idea what is happening here?
Of course a solution would be even better :)
If this is an issue that only occurs in Safari or iPad you could add some cross-browser CSS support to tell the specific browser how it should appear. I like using this one
This allows you to add specific css instructions such as
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
.iphone.safari .scrollingframe {css style}
Hope this helps.
I'm working on a website that has rich content displayed in a Unity window. However, this Unity window sits under a navigation menu that has drop-downs, and drop-down menus are going behind the Unity window.
With Flash, this was easily solved by setting the wmode property to transparent. Is there a similar solution with Unity, or a different solution entirely that works and allows me to place standard HTML over the top of Unity windows?
Thanks in advance.
Some related posts on unity forums
http://forum.unity3d.com/threads/22270-Unity-Flash-Div-issue-in-Browser
http://answers.unity3d.com/questions/10599/does-unity-have-an-embed-parameter-equivalent-to-f.html
The answer: there isn't a way to set some equivalent of the flash wmode=transparent but there is a workaround with setting the css visibility:hidden (or resizing to width:1px & height:1px)
So, kind of a hack, but you could set the menu's hover event to change visibility of the unity window as a workaround.
Old post, but this might help someone.
I can get HTML to display over the Unity window in Safari, Chrome, Firefox on my Mac and Windows IE 10 & 11 with a div. I can get it to always display with an iFrame in all windows. The trick with the iFrame is not all browsers support transparent iFrame, so sometimes you will see the iFrame, but not transparent. IE 8 does not support transparency at all and if its set to be on, then the iFrame will not display above the Unity screen.
DIV:
I basically float a DIV over the unity content. Content can be either plain HTML or Flash. Opacity seems to help make it work.
My situation is we have a menu that needs to display over the top part of the Unity window. Note that Unity is NOT in full screen mode, but sits in a Div. Maybe this is why I can do it??
Anyway- the code looks something like this:
<div>
<div><unity object></div>
<div style="position:absolute; opacity:.9">html or flash content</div>
</div>
The iFrame approach works fine for content that is always the same size, but if you have something like a combobox, then its an issue because the window needs to first resize the height to show the drop down, and then the iFrame background will cover all the content. A hack, is to open a SECOND iframe with the combobox. Sucks, but that is the way I had to do it..
hth-
Dustin