Opacity gecko based browsers

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Swetsenegger
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Opacity gecko based browsers

Post by Swetsenegger »

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

And if so, when.
If not...why not? :)
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Not because it an MS IE feature only.

maz
Swetsenegger
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Post by Swetsenegger »

Maz wrote:Not because it an MS IE feature only.

maz
:?:

-moz-opacity:0.8
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by 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
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Post by Swetsenegger »

Ruth wrote: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?
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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.
John
Swetsenegger
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Post by Swetsenegger »

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.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by 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 :P 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
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Post by Swetsenegger »

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: 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 :P 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 :o
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Pushy, pushy :P 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
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Post by Swetsenegger »

Ruth wrote:Pushy, pushy :P 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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by 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 :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
Swetsenegger
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Post by Swetsenegger »

Aha, it's a shame, but nothing to do about it....
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by 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
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Post by Swetsenegger »

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 ;)
User avatar
Andy
Milonic
Milonic
Posts: 3308
Joined: Sun May 19, 2002 8:23 pm
Location: Menu Developer
Contact:

Post by 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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by 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
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Post by Swetsenegger »

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://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!
User avatar
Andy
Milonic
Milonic
Posts: 3308
Joined: Sun May 19, 2002 8:23 pm
Location: Menu Developer
Contact:

Post by 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
Super Advanced
Super Advanced
Posts: 32
Joined: Sun Jun 13, 2004 11:05 pm
Location: Rotterdam, The Netherlands
Contact:

Post by Swetsenegger »

Andy wrote:
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 :P
Post Reply