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"
/>
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'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
Just wondering if anyone knows any tricks to getting regular html content (mainly an img tag) to display on top of a video (via the video tag)?
As others have intimated it's very easy to position HTML elements on top of VIDEO elements using absolute positioning. The challenge comes when you try to capture events on them in the iPhone, iPod and possibly older Android phones that don't play video assets inline on the page (as opposed to in a thin native playback client) since in those instances the VIDEO element greedily captures events.
If you use an IMAGE element or a DIV with its background-image set to an image you want to use as a "poster" or "thumbnail" then your users won't be able to tap on them to get the video to start playing -- the mobile browser will treat this behavior as if nothing but the VIDEO element exists in that space (good if you happen to click in the middle where the "big play" button is but not so helpful if you, say, have a custom control not in the middle.
The solution I've used in the past is to just put the IMG or DIV poster on the page where you would normally put the VIDEO element and shift the VIDEO element offscreen (absolutely positioned with left style set to, say, -3000px) so it can no longer hoard those events.
I know this isn't exactly what was asked, but hopefully this information will prove useful to someone.
You can simply put html elements on top of HTML5 video by positioning them absolutly on top of the video. Give both the video element and the HTML element a "position:absolute" and put the HTML element a z-index higher than the video element's.
Why not use the poster attribute? That way you can display an image until the video is loaded or play.
Can you set the video as background for that div? Not sure if it would work for your layout, but it seems logical...
I am currently developing a PHP website that has a lot of Flash components. On each page there are one or more custom Flash components embedded with swfObject, as well as sIFR navigation.
Every so often, ALL of the Flash objects on the page become unresponsive to the mouse (no hand pointer). So far I have found it happening only in Firefox 3.5.3 on Mac. I am using CSS to position everything with a specific stacking order to get around the bounding-box overlap issue - for example, the main navigation overlaps the top right corner of a big Flash component.
It works fine most of the time, however, if I click through the pages enough times in Firefox 3 on Mac, eventually I cannot "roll over" any of the Flash elements.
Does anyone know why all the Flash objects in a PHP page would stop responding to the mouse, sIFR included?
Here is the site if you want to give it a try.
This is usually a combination of putting wmode (transparent or opaque) on the Flash movie, which itself is contained in a floated element. Unfortunately it's a browser bug, but removing the wmode property should fix it.
In a webpage I need to show a div layer over the flash banner which is not using wmode=transparent setting.
How to solve it?
From what I remember you can shove the div into an <iframe> (perhaps using Javascript so you don't make a mess of your HTML).
Iframes are window objects like flash so they're able to overlay each other.