Long story short, I'm developing a theme template for a blog that enables you to view the posts in blocks. The main part of the post is displayed at first, then the secondary content is displayed over that when you hover over the post block.
Everything works fine on a Mac Versions of all major browsers, but start browsing on a PC, and all hell breaks loose when you start trying to display content over Flash Video embeds. The flash element remains visible over the content. It's completely unusable.
From a PC, you can view an example of the problem here: http://photorific.tumblr.com
I'm almost certain this is a bug in the Flash Plugin for Windows, but I was wondering if anyone else had come across this problem before, and if there were any solutions.
This problem has presented itself for a while now and any help would be really, really, really appreciated!
This is a known bug in Flash Player on windows. It essentially ignores any form of z-index, or assumes the flash object is at z-index: +INFINITY. Either way, there's two fixes. As stated previously, you can use the wmode=transparent param, but this will let other content bleed through the flash movie. The other option is to use an IFRAME shim between the Flash movie and whatever content you want to appear over the Flash movie.
MooTools has a plugin called IframeShim which can do this for you automatically. I'd be surprised if there wasn't an equivalent function available for jquery.
Try putting wmode="transparent" in the object tag for the flash content.
Thanks for the replies. #Marc, it's good to know I'm not going crazy.
I did find out that setting the window mode property, which Tumblr doesn't do natively when outputting video code, worked fine.... but it had to be opaque rather than transparent.
Working with a raw video string (<object><params /><embed /></object>), here's the solution I came up with that works perfectly for me:
/* Add wmode = opaque
-------------------------------------------------------*/
if( ! player.match(/name="wmode"/))
player = player.replace(/<param/, '<param name="wmode" value="opaque" /><param');
if( ! player.match(/wmode="(transparent|opaque)"/))
player = player.replace(/\/><\/object>/, 'wmode="opaque" /></object>');
player = player.replace('wmode="transparent"', 'wmode="opaque"');
player = player.replace('name="wmode" value="transparent"', 'name="wmode" value="opaque"');
Now, flash video on windows sits nicely behind the desired divs.... as long as javascript is enabled.
Thanks again for all you're answers.
Related
I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that
I want to place a div above an iframe with flash content (for example like a youtube video).
I do not have access to the content in the iframe, so I can't modify something in there.
I've tried a lot of things (z-index... everything).
But nothing works. I am only asking because I really can't find a solution :(
The problem is that the iframe contains the flash content.
I can't really help with a tested solution I'm afraid, as I don't have any flash files to test creating an answer with, but I can tell you why this is happening.
Flash is a browser plugin, which means flash movies are never really part of the HTML document. Instead what happens is the area of the page is reserved for the plugin to run in, which is then invoked and runs 'on top' of the page. Therefore setting z-index on other elements will never actually solve the problem, no matter what combination you try.
However, there is a 'magic' parameter / attribute you can set on the elements themselves that the plugin recognises, called "wmode". If you set this parameter / attribute to 'transparent', the Flash plugin allows some HTML elements to show through, giving the illusion that they are on top of the Flash movie.
If you're able to contact the owner of the iframe to set the wmode parameter to transparent, I'd suggest doing that. If this is a youtube or vimeo embed, see if there's any documentation or options on adding the parameter yourself.
Failing that there's not a lot you can do, as even JavaScript won't be your friend here (you can't modify the contents of a frame with JS for security reasons)
EDIT:
Just remembered, if there's a way of you using HTML5 video instead of Flash, that would help. HTML5 videos are rendered as part of the Document Object Model, and therefore are controllable through the z-index property.
Neal
Im trying to implement a mini browser in adobe air. The browser should work in the same ways as a mobile phone browser, i.e. fit the width of the website to a certain width(specified within the html component) and leave the height to be scrollable.
I have managed to do a mini browser by using the scaleX,scaleY properties of the mx:HTML component however these make the websites look unreadable.
I have also tried setting the css3 zoom property, and that works fine, but it only zooms out certain elements, therefore messing up the site layout.
My question is: Is there a way to make a mini web browser which shows the full content of the website?
Thanks for your help
Air browser cannot be scaled without have an horrible look (no anti-aliasing).
A few years later but here is what I ended up doing:
The requirement was to show the full website that person B was looking at so that person A could guide them through the site. Due to all the limitations of the Adobe AIR Browser we ended up using IECapt (http://iecapt.sourceforge.net/) within an external process to capture the screenshot and send it back to AIR.
This is all well and good, but IECapt is quite out of date as well so recently we have started to look at the using Chromium (http://www.magpcss.net/cef_downloads/) as an ANE within our application and with that we can alter the zoom and dimensions of the page while still being able to keep it up-to-date.
This may sound like a SuperUser issue, but I wrote the page in question and I'm wondering if there is something I can do to fix the problem....
I have a page in production that simlply displays data in a bunch of tables. Our employees basically go to this page to print a form with our clients information filled in for them. Today for a specific client the page is not printing. I've tried printing using IE 7 and 8 as well as Chrome on Windows XP and Windows 7. This client's data is by no means make the page longer or contain more data that others clients.
Symptoms:
Does NOT print using IE8 or IE7 on WinXP and Windows 7.
DOES print with Chrome.
The page to print is displayed fine as a far as the actual web page goes... it scrolls, there are no errors and and nothing seems to be wrong with the page.
When using IE to print, the document just spools with out actually printing out...I end up canceling the document from the printers window.
When viewing print preview the first page is displayed, but when we try to go to the second page in the print preview IE locks up.
This does not happen for every client, but when it does happen it can be reproduced.
The page is pretty long and has client info that is keeping me from just copy and pasting the markup for you guys. I am hopeing that some one else has experienced a similiar issue in IE and has some advice.
NOTE: The users are not allowed to use other browsers, so save the IE flamming please.
Hmmm, very hard to tell without markup.
Just to throw some ideas:
Are you using anything difficult on the pages, like Flash or Java?
Custom fonts / cufon?
Huge downscaled images?
opacity or IE specific crazy filter CSS rules?
A huge structure that IE doesn't manage to break up into pages, e.g. a giant table with position: absolute ?
If you use images, try turning off the images. Try turning off CSS.
A few things to try when debugging:
Switch everything over to a standard font and font size (e.g. Arial 12px).
Eliminate all CSS and JavaScript, and if that fixes it then you can narrow down from there by taking out chunk by chunk until it starts working.
If that doesn't work, try cutting down the content significantly to see if it will show up.
I had youtube channel where I had for in my web site to display this videos from youtube channel .I did my code well but I had a problem with IE browser the sound continuous after I closed the player as you must let the player work after it finished ,So what I can Do?
You probably didnt reset either the object or embed container or something.
Thing is that internet explorer embeds flash differently.
You probably just deleted the content element so it became invisible but did not unset the flash media.
consider using this widely used javascript library to take care of all that for you:
http://code.google.com/p/swfobject/