I have an embedded flash that is transparent so it looks like part of the background. I achieved that by setting wmode to transparent.
My problem is that the area underneath the flash becomes inaccessible, even though the flash is transparent. Therefore I cannot click on any links or buttons that are under the flash object.
How do I make the flash unobtrusive?
Clarifications:
- the flash is transparent but it has an animation that shows in the background.
- wmode set to transparent lets you click the contents underneath in IE but not Firefox.
The problem is that in your document, the object/embed that contains the Flash animation is on top of the elements you need to access. You need to put these elements on top of the Flash animation instead of the other way around.
The way to do this is to set the object's wmode to opaque, and use the CSS z-index property to set it to a z-index lower than the z-index of whatever elements you want to float over it -- you can do this in CSS or just with inline style="" attributes.
Here's an example using SWFObject to create the object/embed tags, but the same principle applies if you are just hardcoding these into your HTML.
I didn't know there could be such a thing as unobtrusive flash.
On a more serious note: what are you trying to accomplish with a layer of flash anyways?
I suggest taking a step back and looking at the page as a whole. If the things below the flash are needed, then make the flash go somewhere else or replace it with actual elements in the page to serve the same purpose.
What is the purpose of the Flash? If it doesn't do anything visible, then you can make it 1 pixel in size and/or put it in a div that is absolutely positioned off the screen.
I think I might have found the answer to my own question.
There is a javascript library called Unobtrusive Flash Objects (UFO), which got deprecated and now is swfobject.
I will give it a go and report back.
Related
I need to position a flash banner over gpu accelerated video player. I have read somewhere, that wmode direct is very important. But don't remember why.
How do i position a banner over it if i can't set wmode to opaque?
Thanks.
Short answer : You can't.
Long answer : wmode direct remove the swf from the browser display, and placed on top of it. That way, it is possible to make use of the gpu. With wmode opaque (or transparent), the swf is displayed by the browser, and the gpu acceleration can't be used.
The drawback of using wmode direct is that the swf is displayed on over all the document. So nothing can be placed over it (except maybe another direct swf - no tested, and I wouldn't recommend it). Ever.
What are the workarounds possible from this problems ? I can think of two :
foregoing gpu acceleration. Does your swf really needs gpu acceleration ? Chances are, if you don't display video, 3D graphics, or hundreds of moving sprites, that it doesn't really need it. If so, use wmode opaque, you'll loose a bit of performance, but you'll be able to place your banner.
place de banner within the swf. This'll need to edit the flash, but you could display a banner from within it. As long that this banner is an image, or another swf, it wouldn't be very hard using the Loader class.
I am using starling for rendering so I must use wmode=direct in my application for it to work.
Having said that I need to show a box on top of flash under some circumstances. But when I show the box it appears on the back because of the wmode (works fine with opaque).
Is there any way I can show content on top of flash while I am in wmode=direct?
You can try showing that box within SWF on 2D level, that level is by design above Stage3D content.
I have to place on a web page a cylinder that looks like this:
it is composed by small images that overlaps to draw the curves on the surface. Every one of them is places on the page with a different img tag enveloped in an anchor with its own href. The z-index property of the img is used to make them overlap in the right way.
The cylinder has to be composed because it is dynamically created, as you can see from the image, its faces can have different colors.
What i need to do is to make all the faces clickable and each one has to point to a different URL.
My problem is, of course, that the cylinder has curves. And i have to be sure that the clicks points to the correct URL especially near the curves, it hasn't to be precise at pixel level, but at least acceptable.
I've tried to use a map with a single area for each of the images that composes the cylinder, but of course it didn't work, as i saw from the specifications, in such cases only the first declared map in the DOM works.
I'm thinking about to solve this via Javascript, but i think it wouldn't be an easy job, so i would be happy if someone can give me some advice on what should i try.
Oh, i cannot use HTML5 features to solve this.
Neat application of older technology to solve a challenging puzzle.
I can think of two ways forward for you. One is to put a transparent (rectangular) image on top of the cylinder and create an HTML image map, using the shape="poly" attribute. For resources, search for the HTML elements map and area for reference, especially the shape attribute. There should be many good tutorials online. Nowadays this technique isn't used that much any more, but it was really popular in the late 90s.
Another way is to use event delegation in javascript, attaching an event listener to the primary container. On each of your image "pixels" apply a CSS class for the appropriate portion of the cylinder it is in. In your event handler, you can do something differently depending on the class of the clicked on image, and you can do this without the massive overhead of attaching an event on each individual "pixel". In JQuery this would be something like:
$("#cylinder").on("click", ".green", function() { location.href = "green_url"; }
$("#cylinder").on("click", ".red", function() { location.href = "red url"; }
assuming you put class="green" on your green pixels and class="red" on your red pixels. (You can do this by quadrant or other technique; color is just an example).
Your best luck SVG ! https://developer.mozilla.org/en-US/docs/SVG/Tutorial
It is almost impossible with html dom elements to do this, you will have to bend it with CSS compatible all browsers.
There is also Canvas but you will have a hard time dealing with the clicks.
Only problem with SVG is that it's not supported in < IE8, and hardly in IE8. But bending a DOM element is also not available < IE9.
EDIT:
I saw that you can't use HTML5, so your only chance is generating the whole image in GD2 for example and trying to map the points. But what is the reason you can't use HTML5 ?
You might also try doing it using javascript / canvas via getImageData() function. This canvas function will rgba values of the given point. Using the alpha value you can check if mouse is over or clicking on the correct area or if it is a transparent area and nothing should happen.
I also made jquery plugin exactly for this purpose. Maybe it might help. http://www.cw-internetdienste.de/pixelselection/
The site I'm making uses a tabbed navigation and MooTools to fade the pages in and out. One of the pages has a Flash player embedded on it, and all of the others consist of pure HTML. The problem occurs on the HTML pages -- somehow the Flash player is causing the HTML pages to display oddly. Vertical borders and text will be jagged in the same locations of the top and bottom of the player. I don't have any code to show because it would be quite overwhelming to sift through, but has anyone run into a similar problem and know of a simple fix? Thank you!
My first thought is that this probably has to do with your wmode setting on the flash player.
Quote from http://www.communitymx.com/content/article.cfm?cid=e5141
Window Mode (wmode) - What's It For?
There are three window modes. Windowless mode allows you to take advantage of the transparent movie, absolute positioning, and layering capabilities available in the browser. They are controlled with the wmode parameter in the object tag. The default mode is available by either choosing not to specify any wmode, or by using wmode="window". We'll look at Macromedia's explanation of the three modes and then we'll explore them a bit further individually.
Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.
Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.
Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.
Adobe's property listing: http://kb2.adobe.com/cps/127/tn_12701.html
you are using swfobject lib for adding the flash, arent you?
I had a different problem but maybe helps, with a jquery submenu been hidden by a flash movie, and I solved this with CSS z-index property.
Thanks, everybody, for your answers. Flash is definitely the culprit here, since the problem only exists when the embedded Flash player is present. The player is actually created by Kyte, so it's not the standard players that are made through Flash/Dreamweaver. I tried changing the wmode parameter, which useful, but didn't work. And the z-index thing didn't work either. I'll keep trying it, though, because it seems that should work.
I'm having trouble laying a html div over the Google Earth plugin in a web application, any help would be appreciated.
It's fine for Map, Terrain and Hybrid mode, but on 'Earth' mode, the Flash kicks in and automatically layers the map on top.
Z-indexing doesn't help.
Presumably I could do something like:
document.getElementById('flashDiv').setAttribute('wmode', 'opaque');
but given that Google's stuff is compiled on the fly, it makes it much more difficult. Viewing the generated code hasn't helped here. Again, due to it being compiled on the fly, stuff like SWFObject can't save the day...
Has anyone encountered anything similar? I've spent the morning trawling the Google Earth API group without much avail.
Update: After more hair-pulling, the answer may lie with an iframe shim. I may have also jumped to the conclusion that the plugin is Flash-based. Investigating...
(source: googlepages.com)
I put together a demo showing how to use IFRAME shims here:
http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html
The there is no direct support for overlaying 'z-indexing' a div either in the Api or Dom.
The plug-in loads an executable file that, in very simple terms, punches a hole in the browser window. Using the 'iframe shim' technique is the standard workaround although transparency can be tricky.
There is an open Feature request for this functionality to be added to the api - the comments section has some good information and links.
Also, there is a great online demo of this here
If it is a plugin, then you cannot reliably place other elements over the top of it. Browsers usually let go of most of their ability to 'layer' elements when plugins are involved.
I guess an Iframe may be a way around it, as long as you check that this still works on most browsers.
After looking into the way Google has users embed the code, it looks like it's with an iFrame. Still, if your running into any issues with a flash, see below...
Running into similar situations with trying to display a dropdown navigation over a flash element (or html over a YouTube video). There were a few factors that came into play.
The first was my html element that I wanted to hover over the flash element had to be a sibling html element with the css properties set for each sibling element and also for the parent div. So, for example:
<div id="parent">
<div id="sibling"></div>
<embed id=”flash”><other script code></embed>
</div>
Then my css would be
//.parent may not need to be set to relative
#parent { position: relative; }
// the value on sibling1 just needs to be higher than .sibling2
#sibling { position: relative; z-index: 20; }
#flash { position: relative; z-index: 10; display:inline }
The other thing worth noting is your flash needs to have the wmode parameter set to transparent.
This trick has worked for various flash applications as well as YouTube Video's - the trick is to make sure the html you want to display over the flash is a sibling element to the actual flash code and not the parent div, the z-index for the html to display over the flash is higher than the flash element, both html elements have their positioning set to either relative or absolute, and the wmode parameter is set to transparent.
Hopefully this helps - but my guess is that your issue is with the iFrame.
set "iframe" z-index to 100
and set div that displays on top z-index to 200 (div must be at-least position relative)