jquery safari opacity only

Question

#div1{ 
filter:alpha(opacity=85); 
-moz-opacity:0.85; 
-khtml-opacity:0.85; 
opacity: 0.85;
}

#div1:hover{ 
filter:alpha(opacity=100); 
-moz-opacity:1; 
-khtml-opacity:1; 
opacity: 1;
}

html>#div1.safarihack{
opacity: 1; 
}

All the above does as intended. Safari always has its opacity set to full because it doesnt render properly if not. However, i also have a jquery event that when this div is clicked, the opacity fades to 0, and i need it to fade to 0 for all browsers (fadeout is not an option).

The html of the div is then changed, and i need the opacity for all browsers to return to 0.85 or 85, except for safari, which needs to go back to 100.

How can i target this in the jquery? Is there some way i can put

html>#div1.safarihack {opacity: 1; }

into this?

$(this).html(nextHtml).animate({'opacity':'0.85',
                                              'filter':'alpha(opacity=85)', 
                                              '-moz-opacity':'0.85',
                                              '-khtml-opacity':'0.85',
                                              }, 500);

*Note that (this) = #div1**

score 0 · Answer 1 · edited May 23 '17 at 12:26

0

I think you'll find this thread interesting: Distinguish Chrome from Safari using jQuery.browser

edited May 23 '17 at 12:26

Community

1
1

answered Mar 25 '11 at 09:57

Thomas Menga

1,858
14
17

score 0 · Answer 2 · answered Mar 25 '11 at 10:00

Try

$(this).html(nextHtml).animate({opacity:($.browser.safari)?1:.85});

Note that $.browser.safari is deprecated.

There's also no need to use all those opacity-attributes in jQuery, jQuery will translate "opacity" to the attribute the current browser is supporting.

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

See finding if the current working browser is safari via css or javascript : could help you, good luck

edited May 23 '17 at 10:33

Community

1
1

answered Mar 25 '11 at 10:07

Prakash

6,562
3
25
33

andyb · Answer 4 · 2011-03-25T12:20:13.810

0

Does this demo help with your problem? I lowered the opacity to make the hover more obvious for the demo.

Edit: Updated demo in which the text opacity changes. Seems to work OK in Safari5

I don't really understand the problem with Safari opacity as I am not seeing any problems running the demo in Safari5, Chrome12 or Firefox4.

edited Mar 25 '11 at 12:20

answered Mar 25 '11 at 10:21

andyb

43,435
12
121
150

your code is the same as what i was trying. if i viewed your demo in safari it worked, and if i viewed mine it didnt. iv solved it now another way but cheers for your help, still not sure why it didnt work though. – callum.bennett Mar 25 '11 at 15:14

jquery safari opacity only

4 Answers4