469,934 Members | 2,322 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,934 developers. It's quick & easy.

Opera dynamic opacity: solved

VK
Formally it may appertain to a CSS newsgroup, but from the other side
it is *dynamic* plus it is JavaScript based.

Anyway I had a customer who wanted cross-browser full-Aqua (Office XP
style) so I had to hack Opera for it.

This algorithm formally *doesn't* break a single standard, moreover it
works as intended on Opera only (I hope they did not mean *that* as
their official opacity path).

Fill free to use this approach if you need it. (Watch line breaks as
usual).

P.S. I'm currently totally traumatized by transparency, I hate it, hate
it, hate it!
:-| :-)

<html>
<head>
<title>Opera Opacity</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: #FFFFFF;
}

#LoremIpsum {
width: 75%;
font: 1.2em "Times New Roman", serif;
}

#div1 {
left: 20px;
top: 20px;
background-color: #3067C0;
}

..floating {
font: bold small-caps 1em "Times New Roman", Times, serif;
margin: 0px 0px;
padding: 5px 5px;
border: 1px #0000FF solid;
position: absolute;
z-index: 1;
height: 100px;
width: 200px;
}
</style>

<script type="text/javascript">
var bgStart = 'url(data:image/png;base64,';
bgStart+= 'iVBORw0KGgoAAAANSUhEUgAAAAoAA';
bgStart+= 'AAKCAYAAACNMs+9AAAAFUlEQVR42mM0SD';
var bgEnd = 'AAAAAElFTkSuQmCC)';
var bgGrade = [
'/wn4EIwDiqkL4KAVbbF2f0aBUI',
'/wjIEIwDiqkL4KAX59Fm2vBnLj',
'9whoEIwDiqkL4KAZ14FWnd9+Mk',
'+wmYEIwDiqkL4KAcUaFG/cP0wP',
'8wk4EIwDiqkL4KAeQVE2sbcbuX',
'9Qz0AEYBxVSF+FAAMfEmebdV9f',
'+QxkAEYBxVSF+FACrBEW0gimmK',
'/gy0AEYBxVSF+FAFJjEHMGT84i',
'9gzEAEYBxVSF+FAHFeD29qarCb',
'8gyUAEYBxVSF+FAJBZDmtRyGAL',
'none'
];
var trueColor = '#3067C0';

function $(id) {
return document.getElementById(id);
}

function init() {
with ($('div1').style) {
backgroundColor = 'transparent';
backgroundRepeat= 'repeat';
backgroundImage = bgStart+bgGrade[0]+bgEnd;
}
}

function demo(n) {
$('div1').style.backgroundImage = (n != 10)?
bgStart+bgGrade[n]+bgEnd : bgGrade[n];
}

window.onload = init;
</script>

</head>

<body>

<p id="LoremIpsum">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p>&nbsp;</p>
<form method="POST" action="">
<select name="opacity" onchange="demo(this.selectedIndex)">
<option value="0" selected>opaque</option>
<option value="1">10</option>
<option value="2">20</option>
<option value="3">30</option>
<option value="4">40</option>
<option value="5">50</option>
<option value="6">60</option>
<option value="7">70</option>
<option value="8">80</option>
<option value="9">90</option>
<option value="10">transparent</option>
</select>

</form>

<div id="div1" class="floating">
Lorem ipsum dolor sit amet
</div>

</body>

</html>

Jan 9 '06 #1
1 2978
VK wrote :

[snipped]
This algorithm formally *doesn't* break a single standard, moreover it
works as intended on Opera only (I hope they did not mean *that* as
their official opacity path).

I tried your demo and it worked (the onchange implementation is a bit
buggy, iffy in Opera 9 beta 1). Amazing! But to say that your demo is a
solution to Opera's lack of support for CSS3 opacity is a bit too far
for me. I have asked Opera dev. many months before to support CSS3
opacity: CSS3 color module has been a CR since may 2003. The real
solution would come from supporting css opacity just like recent Mozilla
releases.

The nr1 problem with your demo is that it can not be easily implemented;
your demo is a difficult, complex workaround, not a real/complete solution.

Fill free to use this approach if you need it. (Watch line breaks as
usual).

Gérard
--
remove blah to email me
Jan 10 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Simon | last post: by
2 posts views Thread by Martin Doyle | last post: by
3 posts views Thread by maya | last post: by
8 posts views Thread by FAQ server | last post: by
4 posts views Thread by Geoff Cox | last post: by
4 posts views Thread by =?Utf-8?B?R29yZnk=?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.