I have a piece of Flash on an HTML page that when you hover over it, it expands out to reveal more information.
There are text links that it expands over, however in everything but IE, when it's not expanded those links are still covered by the Flash making them unclickable.
I have the Flash piece in a separate DIV wmode set to transparent.
I know this is possible to make work but for the life of me, I can only get it to work in IE.
Does anyone have any idea of what I'm missing?
Thanks.
I'm a little confused by what you're looking for, so I'll give you a couple of areas to look into. With luck, one of these will get you going, but otherwise, feel free to ask more questions. I'm a little slow on the uptake sometimes....
First off, by default, most browsers place flash files in the uppermost layer. So, the links that you cannot click are stuck in behind your flash presentation - basically, in the eyes of the browser, you are actually clicking on the flash presentation!
This article has some good information on this:
http://kb2.adobe.com/cps/155/tn_15523.html
But basically, you can use a parameter called WMODE in both the object and embed tags. For example, you could implement it like this:
and then add wmode="transparent" into your embed tag.
However, to make it smooth across all browsers (and to make the code a little easier to read/follow), you should also add some z-index values to your stylesheet.
I hope this helps a bit. If not, remember, I'm slow on the uptake....:-)
Related
I've been searching for a way to put a looping animation with alpha over top of web content for a few weeks now. The fact that I can't seem to find anyone asking this question or any answers to it makes me think the solution is so mind-numbingly easy that no one needs to ask it.
For an example of this effect go to bonfirestudios.com
They have used this technique multiple times throughout the website, most notably their logo on the main page. They have an animation loop playing over top of their website content. It could just be a video played with a screen blending mode, but my knowledge of html and css is so limited I'm not sure what I should be looking for.
It seems so simple in concept: play a video (with alpha data) on loop, but I can't find anything (or don't know where/how to look specifically) that explains how to achieve this effect. Notably, there are no video controls or anything to otherwise indicate it is a video that's playing. I've checked their code, but my limited understanding of javascript and the like find it hard to know what I'm looking for.
Any help or direction is greatly appreciated, thank you.
It is a video playing (right-click over the animation and you'll see such option as "save video").
The container format is webM (which can contain VP8 or VP9 video codec). This format is from Google and supports transparency.
So I searched quite some time for an answer to that now, but so far was not able to find any. This is my first time really looking into HTML5 video questions, so please forgive me if my question is totally stupid.
I read quite a few things about this awesome video tag and how it works. However, I only find the info that the controls parameter enables the whole control bar or not, and then it seems to be up to the browser, which controls exactly are shown.
To make even more clear what I am talking about, in Chrome, the full screen Button looks like this:
I found this example here: http://www.w3schools.com/html/html5_video.asp
And as you can (probably) see, the button is there, when you open this site. However, as soon as you click the "Try it yourself" button right below it, the full screen button is not shown anymore, and that is, despite the code seems to be basically the same.
I understand that this is inherent to the browser how it handles it. However, the behaviour is exactly the same in at least Firefox, so I am wondering: What is the logic behind this? Is there any way to "trick" the browser into allowing the fullscreen button?
Some points that I (I think) have already ruled out as the source of the problem:
The actual size of the video being larger than the player
Some CSS tricks like setting the width to a specific value and max-width to 100%
Any ideas?
That is because the video in your second example is inside an iframe, which is quite restrictive as to how you can manipulate the content inside of it.
I imagine adding the allowfullscreen attribute to an iframe would show a different result r.e. video controls.
I have a few "a href" image links and hovers on a website for navigation (www.byrdnick.com, in the non-mobile version of the site). It seems that these image links confuses iOS browsers. When you tap the image link once, it changes to the hover image. When you tap the hover image, nothing happens. When you tap the hover image a second time, you are finally redirected to the link.
Is there any way I can make these image links work or am I going to have to try a whole new method like a map or something?
Thanks in advance to all you gurus who help guys like me out!
This is because of all the strange stuff your psd2css.js javascript does to tweak your divs and links.
I never used this tool, but it seems that your Web page was generated using an tool called psd2cssonline? This tool seems to add some obscure treatments behind the scenes to all your <a href> links. This is easy to see in the psd2css.js file, once the document is loaded, the script adds some magic to all your <img> hover functions.
I didn't study the whole javascript added by this tool, but I'm pretty sure that it is the reason of the problems. This tools does not seem to be compatible with touch-screen devices or somehow does mess with touch events in a mobile environment where "hover" are non-sense (you can't "hover" an item on a touch-screen!), and will probably need to be updated to be able to manage mobile versions of the web sites it generates.
Meanwhile, you may try to disable this script (and everything else that may be generated by this tool to automatically add behavior to your links) when your website is accessed on mobile, to avoid messing with the "hover" events in such cases and simply keep the standard behavior that you have without any similar script.
As long as it's something similar to what I have below and you don't have any odd class that is conflicting, you should be ok.
<img src="some image" />
I'm writing a web app. It's only ever going to be used with IE8, so I'm not concerned with the behavior of any other browsers here.
So: I know how to custom-style a button using CSS properties e.g. background-color, border, and so on. However, when you apply styles that way, the resulting button looks like a blocky table cell, nothing like the nice, glassy-looking button that IE8 renders by default.
Is there some way to add a tint to the nice glass-looking button? I.e., it looks just like it normally does, but with a red outline instead of blue, and a red highlight on mouse-over?
Or is this something I'm going to have to do by hand with images? Again, IE8-specific methods are perfectly acceptable.
Thanks!
-dan
There isn't really a filter that will get you as close to the default in IE, though you can get pretty close using the button tag and standard css. It will not look the same in all versions of IE though.
Here's the filter reference though if you want to try other things.
Regardless of browser, one of the quickest, easiest, most widely tested methods for styling buttons via markup is Jquery UI's button It's a matter of adding a few tags to the class element, and you've got a button based on an link, button, or input field. For styling, you can handle styling via CSS, or via the very well done ThemeRoller option, where you can control everything from text size to background type via a simple gui interface--and you can change on the back end or even the user end on the blink of an eye, even via drop down.
One caveat, since IE is non-standards compliant, rounded buttons fail gracefully to square--with proper styling.
I realize that you have determined that you can use a proprietary solution for IE, and in your case it might be just fine over the long term. But in my experience, that's a really dangerous path to follow. What if the actual long term is longer than your anticipated "long term?" You're specifying that it's acceptable to be proprietary to a browser that's well behind the accepted standards, is already a version behind, and uses unsupported (by universal standards) solutions to solve problems. Conceivably, that version is going to get tougher and tougher to find, and if Microsoft holds true to their patterns, once you install IE9 it will effectively render your computer difficult of downgrading. And, I can't emphasize enough that IE's market share is dropping like a rock, which is scary considering basically 95% of the machines out there have it pre-installed. All it's going to take is one overzealous IT director with "security in mind" to render your programming efforts moot. Sorry for the rant, but IE proprietary code has bit me hard more than a few times...
I'd have to double-check, but you should be able to use a combination of a background color and use a transparent PNG or GIF as the "background image" to add the highlights.
All things being equal, I've rather embraced the flat, square button - finding ways to make it work well with the design - but then again I've always been a straight line, square edge kind of guy. :)
As others have mentioned, you do want to be mindful (within reason) of what you may have to handle. It's quite possible that before the next re-write you're going to have to deal with IE9 - writing code that works well in IE8 and IE9 would be the most prudent approach.
Have a look at http://www.webdesignerwall.com/demo/css-buttons.html and also http://css3pie.com/.
Combining those you can get nice looking buttons in IE as well..
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.