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
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 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
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.
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 building a Flash banner ad to be displayed on a client's site. When the user hovers over the ad, the Flash movie expands by increasing the height and width of the flash object.
The problem is that the client is using overflow:hidden all over their site, and my banner ad is contained within a div that is styled with overflow:hidden.
When the flash movie expands it gets clipped. This only happens in IE 8, all other browsers (at least IE 7 and FF) do not clip the flash movie. I tried explicitly using wmode=window but that doesn't seem to do anything. Maybe IE 8 is being standards compliant and doing the right thing here, but I just need this to work!
Any ideas on how to get the flash content to expand out of the div without changing the styles (not sure what would happen if I changed the overflow:hidden style on the client's site).
Thanks!
To isolate the banner's style from the rest of the site, you might try putting it in an iframe with a 0px border. The trick is that then the iframe has to big enough to accommodate the expanding flash object.
You cannot do it without changing the style. The way banner ads work is that they use Flash and JavaScript to trigger the change in styles. So you would have two styles, one of the collapse and another for the expanded states, Flash would make the call to the JavaScript and it would change the style.
when the flash object was wider than the DIV and DIV is overflow:hidden to limit the flash object to the sidebar
may embedded flash object still overflowed into the next DIV.
the issue is related to the embedded object and that wmode=”transparent” parameter needs to be included.
<embed
src="your-swf-url-here"
width="xx"
height="xx"
wmode="transparent"
/>