Opacity gecko based browsers

Poster: Swetsenegger
Dated: Monday June 21 2004 - 18:59:56 BST

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

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

Poster: Maz
Dated: Monday June 21 2004 - 19:20:41 BST

Not because it an MS IE feature only.

maz

Poster: Swetsenegger
Dated: Monday June 21 2004 - 20:14:59 BST

Maz wrote:

Not because it an MS IE feature only.

maz

-moz-opacity:0.8

Poster: Ruth
Dated: Tuesday June 22 2004 - 1:41:42 BST

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

Code:

.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

Poster: Swetsenegger
Dated: Tuesday June 22 2004 - 8:07:05 BST

Ruth wrote:

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

Code:

.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?

Poster: John
Dated: Tuesday June 22 2004 - 15:08:51 BST

Swetsenegger wrote:

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.

Poster: Swetsenegger
Dated: Tuesday June 22 2004 - 15:36:01 BST

John wrote:

Swetsenegger wrote:

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.

Poster: Ruth
Dated: Tuesday June 22 2004 - 16:45:40 BST

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:

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

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

Code:

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

Poster: Swetsenegger
Dated: Tuesday June 22 2004 - 21:33:18 BST

Ruth wrote:

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:

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

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

Code:

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

Poster: Ruth
Dated: Wednesday June 23 2004 - 0:05:21 BST

Pushy, pushy

Ok, that can be applied to images like so

Code:

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

Poster: Swetsenegger
Dated: Wednesday June 23 2004 - 7:31:27 BST

Ruth wrote:

Pushy, pushy

Ok, that can be applied to images like so

Code:

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

Poster: Ruth
Dated: Wednesday June 23 2004 - 14:22:43 BST

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 :lol:

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

Poster: Swetsenegger
Dated: Wednesday June 23 2004 - 14:34:39 BST

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

Poster: kevin3442
Dated: Monday June 28 2004 - 22:21:11 BST

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

Poster: Swetsenegger
Dated: Tuesday June 29 2004 - 15:24:21 BST

kevin3442 wrote:

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

Poster: Andy
Dated: Wednesday June 30 2004 - 18:26:59 BST

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://www.milonic.com/betas/menu.htm It's still quite buggy but it's getting there.

Let me know what you think.

Cheers
Andy

Poster: Ruth
Dated: Wednesday June 30 2004 - 18:59:02 BST

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

Poster: Swetsenegger
Dated: Saturday July 3 2004 - 11:21:22 BST

Andy wrote:

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://www.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!

Poster: Andy
Dated: Monday July 5 2004 - 12:43:27 BST

Quote:

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

Poster: Swetsenegger
Dated: Monday July 5 2004 - 13:48:31 BST

Andy wrote:

Quote:

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

Poster: Swetsenegger
Dated: Thursday July 22 2004 - 18:08:17 BST

Any news about the opacity for Mozilla, Firefox and Netscape?

Refreshing memory

Poster: Swetsenegger
Dated: Tuesday October 5 2004 - 18:51:58 BST

Will the beta opacity make it in a future release?

Poster: carl
Dated: Monday December 6 2004 - 5:55:03 GMT

Actually, I've seen other dhtml menus that implement something like a Fade() transition filter by ramping the opacity from zero to the final opacity value. It ends up looking pretty sharp, covers a bunch of browsers, and will be forward-compatible with css3...

Industrial Strength JavaScript and DHTML Menus

Opacity gecko based browsers

Refreshing memory