Opacity gecko based browsers

[Swetsenegger]

Will opacity be supported for gecko based browsers (NS, Moz, FF) in the future?

And if so, when.
If not...why not?

[Maz]

Not because it an MS IE feature only.

maz

[Swetsenegger]

Not because it an MS IE feature only.

maz

-moz-opacity:0.8

[Ruth]

You can set opacity by creating a class in the style sheet, i.e.

Code: Select all

.opaque {
	opacity: .5;
	filter: alpha(opacity=50);
	-moz-opacity: .5;
}

the first is I believe for Safari, the second is ie and the last is of course mozilla.

alpha(opacity) is proprietary to IE, moz-opacity is a take off on that and proprietary to mozilla. Of course, you have to apply the class to something, say the background-color, or an image. Hope that helps

Ruth

[Swetsenegger]

You can set opacity by creating a class in the style sheet, i.e.

Code: Select all

.opaque {
	opacity: .5;
	filter: alpha(opacity=50);
	-moz-opacity: .5;
}

the first is I believe for Safari, the second is ie and the last is of course mozilla.

alpha(opacity) is proprietary to IE, moz-opacity is a take off on that and proprietary to mozilla. Of course, you have to apply the class to something, say the background-color, or an image. Hope that helps

Ruth

I understand, but why is only filter:alpha(opacity=xx); supported in the menu style, and not the mozilla equivalent?

[John]

I understand, but why is only filter:alpha(opacity=xx); supported in the menu style, and not the mozilla equivalent?

I think Andy is doing a fantastic job of supporting as many browsers as he does, but it's virtually impossible to cover them all. There are too many browsers, too many still in beta, and too many that have decided on their own versions of the standards. Given that, my guess is IE was chosen because it is the most widely used browser.

[Swetsenegger]

I understand, but why is only filter:alpha(opacity=xx); supported in the menu style, and not the mozilla equivalent?

I think Andy is doing a fantastic job of supporting as many browsers as he does, but it's virtually impossible to cover them all. There are too many browsers, too many still in beta, and too many that have decided on their own versions of the standards. Given that, my guess is IE was chosen because it is the most widely used browser.

I do understand all that, and believe me I'm very happy with a menu like this free for personal use!

However, healthy criticism is a good thing isn't it?

Gecko based browsers (mozilla, firefox and netscape) are together a big number two besides IE. With the lack of a pop-up killer in IE a lot of 'advanced' internetters switched to one of these 3 and linux doesn't even have a IE.

Gecko supported opacity before IE did. The style items in the menu look a lot like CSS styling, filter:alpha(opacity=80) is directly from CSS.

In CSS -moz-opacity:0.8 does exactly the same. So isn't it possible to add it in the menu? That's all I'm asking. And replies opacity is only supported in IE are basically not true.

[Ruth]

Actually, the menu does allow you to apply the moz-opacity, and also opacity to cover the safari. It's applied through off/on class. You will have to check it and make sure you have the look you want in the final result. . I did check the on/off class for it and it and it does work but details are up to you.

Put the opacity class, whatever you want to name it in the head of the document, or I guess it would work in an external style sheet. i.e.

Code: Select all

.opaque { 
   opacity: .5;
   -moz-opacity: .5; 
}

Then in the menu_data.js file in the global style definitions put

Code: Select all

offclass="opaque"; 
onclass="opaque";

That will apply opacity to the menu. [whichever section uses the particular style definition in which you put that on/off class]

opacity and -moz-opacity code from 0-1 in fractions, i.e. .1, .2, .3 etc. So, .5 is equal to 50%. Also note, I took out the alpha, that is applied through the filters in the overfilters code.

As to adding it to the menu, I'm not really sure about in depth things but I know that each little minor change requires changing a lot of things when programming. Sort of like a sentence structure if I can make an analogy with all the programmers reading this If the sentence says, "I understand now just how important my old car was to me." and you change I to he, well guess what, you have a LOT of changing to do in the sentence.

Ruth

[Swetsenegger]

Actually, the menu does allow you to apply the moz-opacity, and also opacity to cover the safari. It's applied through off/on class. You will have to check it and make sure you have the look you want in the final result. . I did check the on/off class for it and it and it does work but details are up to you.

Put the opacity class, whatever you want to name it in the head of the document, or I guess it would work in an external style sheet. i.e.

Code: Select all

.opaque { 
   opacity: .5;
   -moz-opacity: .5; 
}

Then in the menu_data.js file in the global style definitions put

Code: Select all

offclass="opaque"; 
onclass="opaque";

That will apply opacity to the menu. [whichever section uses the particular style definition in which you put that on/off class]

opacity and -moz-opacity code from 0-1 in fractions, i.e. .1, .2, .3 etc. So, .5 is equal to 50%. Also note, I took out the alpha, that is applied through the filters in the overfilters code.

As to adding it to the menu, I'm not really sure about in depth things but I know that each little minor change requires changing a lot of things when programming. Sort of like a sentence structure if I can make an analogy with all the programmers reading this If the sentence says, "I understand now just how important my old car was to me." and you change I to he, well guess what, you have a LOT of changing to do in the sentence.

Ruth

Great! this is almost perfect.
Unfortunately it makes the WHOLE menu translucent and not only the background. Any sollution for that, or am I pushing it

[Ruth]

Pushy, pushy Ok, that can be applied to images like so

Code: Select all

<IMG style="-moz-opacity:0.5" src="test.gif">

However, I have no clue how you would apply that to the background image of the menu. There may be another way to do it, but only if I can see what you want, so do you have a test page with the stuff up so I can mess around? And, do you have ie so you could set the overfilter alpha to what you want, set up a test page and give me the link so I can see it and get the data?

Ruth

[Swetsenegger]

Pushy, pushy Ok, that can be applied to images like so

Code: Select all

<IMG style="-moz-opacity:0.5" src="test.gif">

However, I have no clue how you would apply that to the background image of the menu. There may be another way to do it, but only if I can see what you want, so do you have a test page with the stuff up so I can mess around? And, do you have ie so you could set the overfilter alpha to what you want, set up a test page and give me the link so I can see it and get the data?

Ruth

See http://www.123swets.com
The background of the menu is black (just like the background of the website). The overfilter is set to opacity 80 (IE). When opening a submenu item, the text of the content layer is showing through the menu.

I want the same effect in Moz ofcourse. However when using you solution, the complete menu is translucent, making the letters in the menu 'fade' also which makes it hard to read...

But I love the translucent effect

[Ruth]

Ah, I see. That is not the MS alpha filter that is being applied. It is the overfilter=fade and outfilter=randomdissolve which are MS transitions, they are proprietary to internet explorer, i.e. none of the other browsers have done anything in their programs to let them see those transitions, it would be nice wouldn't it even if they only did a couple, in particular the fade and random dissolve ones, then again it might take a LOT of programming to let that happen then again again maybe they can't do it for legal reasons, I have no idea. So, as for that effect, it will only be visible in IE. Sorry

Ruth

[Swetsenegger]

Aha, it's a shame, but nothing to do about it....

[kevin3442]

If I might just add my two cents... Ruth touched on it, but I'd like to make sure it's clear for others reading, as it seems to have caused a little confusion earlier in this thread.

Opacity applied through css and opacity applied in the overfilter and outfilter settings are completely different... two different animals!

If your browsers supports opacity settings through css, then using the onclass and offclass milonic properties should work as Ruth described (also pageclass and rawcss properties).

However, applying an opacity setting in an alpha() filter, as used in the overfilter or outfilter milonic properties, will only work in IE5.5+ (on Windows), because these filters rely on DirectX technology to render their effect (DirectX being a Microsoft technology).

Cheers,

Kevin

[Swetsenegger]

However, applying an opacity setting in an alpha() filter, as used in the overfilter or outfilter milonic properties, will only work in IE5.5+ (on Windows), because these filters rely on DirectX technology to render their effect (DirectX being a Microsoft technology).

Cheers,

Kevin

OK, that's clear.
Maybe use OpenGL in a next menu

[Andy]

Hi,

I thought I'd dig the code out from the vault that I was working on years ago.

The reason I stopped developing this was because it seemed a little too slow on the lesser browsers and on lesser machines.

This post revitalized the quest so I've built the old code in to the new menu and it seems to be OK. There is a beta at http://milonic.com/betas/menu.htm It's still quite buggy but it's getting there.

Let me know what you think.

Cheers
Andy

[Ruth]

I like being able to have the fade and the shadow work on other browsers than IE. The fade looks OK, I'm not sure about the drop shadow, mainly because it's visible behind the inside of the menu so you see the whole 'box', if there were a way to make what's behind the menu 'invisible' and just leave the outside shadow....... Of course, this comes from a person who is lucky to figure out how to program the microwave

Ruth

[Swetsenegger]

Hi,

I thought I'd dig the code out from the vault that I was working on years ago.

The reason I stopped developing this was because it seemed a little too slow on the lesser browsers and on lesser machines.

This post revitalized the quest so I've built the old code in to the new menu and it seems to be OK. There is a beta at http://milonic.com/betas/menu.htm It's still quite buggy but it's getting there.

Let me know what you think.

Cheers
Andy

Hi Andy,

first of all thank you for the menu!

The beta is working on FF 0.9 and NS 7.51 on an XP machine and Mozilla 1.7 on RedHat 9.0
Both the translucentie and the fade is ok.

Only Opera on XP and Konquerer on Linux aren't working, but hell... who'll be using those

It would be great if this could be implemented in a future release!

[Andy]

It would be great if this could be implemented in a future release!

I wish it could be included. THe problem is the lack of support for opacity in Konquerer and Opera.

However, opacity is a standard property in CSS3. As these browsers start to support CSS3 it should be possible.

Cheers
Andy

[Swetsenegger]

It would be great if this could be implemented in a future release!

I wish it could be included. THe problem is the lack of support for opacity in Konquerer and Opera.

However, opacity is a standard property in CSS3. As these browsers start to support CSS3 it should be possible.

Cheers
Andy

Ok, but this will solve it for at least the number 2 browsers; Mozilla, Firefox and Netscape.

Can't I get the beta