By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,918 Members | 1,557 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,918 IT Pros & Developers. It's quick & easy.

Opera dynamic opacity: solved

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.