Topic awaiting preservation: June 2005 - 20 lines JavaScript contest - Opacity demo $Pages that link to <a href="https://ozoneasylum.com/backlink?for=25956" title="Pages that link to Topic awaiting preservation: June 2005 - 20 lines JavaScript contest - Opacity demo" rel="nofollow" >Topic awaiting preservation: June 2005 - 20 lines JavaScript contest - Opacity demo\$

Author	Thread
BillyRayPreachersSon Bipolar (III) Inmate From: London Insane since: Jul 2004	posted 06-04-2005 15:02 I thought I'd do something a bit different this month. I'd like to see what good uses people can come up with for opacity. It can be anything from a game, to a demo, to a utility... as long as it demonstrates a good working use of opacity. Of course, not all browsers support opacity, although a fair majority do. AFAIK, it works in IE/Win4+, Firefox, Safari, Netscape (possibly v6, definately v7), Mozilla (unknown version), and Konqueror (unknown version). It does not work in IE/Mac, or Opera. Anyway - I believe that enough browsers support it to make it a viable topic for the competition. Obviously, not everybody will have worked with opacity before. Therefore, to make this competition as fair as possible, I'll be providing some basic code (see end of this post) to show how to set opacity in a few lines. You don't have to use it, but it is there if you need it. This will allow people to concentrate more on the project itself, rather than worrying about how to set opacity. Of course, you might decide to use CSS to set it, and avoid JavaScript... whatever works for you. quote: A code monkey said once: As usual, the main rule is to make your script in 20 lines of (effective) code. Comas shouldn't be used to execute several instructions on the same line See the code sample below to illustrate the basic rules : code: <script type="text/javascript"> /* .. / document.body.onclick = function() / .. / { / 01 / val = prompt( 'enter a number' ); / 02 / for( i=0; i<10; i++ ) / .. / { / 03 / alert( stupidFunction( val, i ) ) / .. / } / .. / } / .. / function stupidFunction( a, b ) / .. / { / 04 / return a>b?a:b; // I said it was a stupid function / .. / } </script> The document.body.onclick = function() does not count as a line as it's not some effective code and the function call could be put in the BODY tag ( or anyother HTML tag ). The declaration of the stupidFunction() does not count either for the same reasons. The coma in the line / 03 */ is ok, since it simply separates the parameters of a function. Anyway - the opacity code I mentioned earlier. It's fairly well commented, including a line which explains how to avoid flickering in Gecko-based browsers. It can be made smaller, but that's up to you to manage code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Simple cross-browser opacity demo</title> <style type="text/css"> div { position: absolute; width: 200px; height: 200px; } #div1 { background-color: blue; top: 50px; left: 50px; } #div2 { background-color: red; top: 100px; left: 100px; } </style> <script type="text/javascript"> <!-- function setOpacity(element, opacity) { // In NN / Moz, when opacity is 100, flickering occurs. If the opacity is reduced to 99.99, this does not happen. // This code will achieve this, if uncommented // if (opacity == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1)) opacity = 99.99; // Set CSS 3, Moz, NN, FF, gecko, Konqueror, Safari element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity = opacity / 100; // Set IE element.style.filter = 'alpha(opacity=' + opacity + ')'; } //--> </script> </head> <body onload="setOpacity(document.getElementById('div2'), 50);"> <div id="div1"></div> <div id="div2"></div> </body> </html> I'm quite looking forward to judging this one Dan (Edited by BillyRayPreachersSon on 06-04-2005 15:05)
Iron Wallaby Paranoid (IV) Inmate From: USA Insane since: May 2004	posted 06-04-2005 22:23 recycle http://www.rpi.edu/~laporj2/media/code/symbols/ I'll try to come up with another thing later. --- Website
wrayal Bipolar (III) Inmate From: Cranleigh, Surrey, England Insane since: May 2003	posted 06-05-2005 02:01 Hmm...my IE seems to be screwed - it won't do alpha filters full stop. But then, it won't even access the internet - it's completely screwed. Anyway, I was just sticking the demo commands together in preparation for an entry, but now I don't know if it works in IE :\. Could anyone test for me by any chance? function setOpacity(element, opacity) {(navigator.userAgent.indexOf('IE')!=-1)?element.style.filter = 'alpha(opacity=' + opacity + ')':(opacity == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1))?element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity=99.99/100:element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity=opacity/100} Wrayal (Edited by wrayal on 06-05-2005 02:02)
TwoD Bipolar (III) Inmate From: Sweden Insane since: Aug 2004	posted 06-06-2005 00:24 Wrayal: Nope, it didn't work when I tested it like this: code: <html> <body> <div style="background-color:blue"> <div id="test" style="background-color:red">Hello</div> there </div> <script> function setOpacity(element, opacity) {(navigator.userAgent.indexOf('IE')!=-1)?element.style.filter = 'alpha(opacity=' + opacity + ')':(opacity == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1))?element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity=99.99/100:element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity=opacity/100} setOpacity(document.getElementById('test'),50) </script> </body> </html> Maybe someone can verify that test so I didn't make a mistake. Nice topic btw /TwoD
wrayal Bipolar (III) Inmate From: Cranleigh, Surrey, England Insane since: May 2003	posted 06-06-2005 09:41 Yes, sorry, that should have beee the first thing I wrote - cool topic! Hmm...Well, I guess it's my fault then...the code works for Moz unless I made a mistake copying it. Oh well, I have 5 important exams in the next couple of weeks, but after that I will be liberated, so hopefully I will get an entry in Wrayal
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 06-06-2005 10:40 Interresting topic indeed.
BillyRayPreachersSon Bipolar (III) Inmate From: London Insane since: Jul 2004	posted 06-20-2005 22:45 Ooooooooooooooh. I just can't wait
BillyRayPreachersSon Bipolar (III) Inmate From: London Insane since: Jul 2004	posted 06-30-2005 20:02 While we have an entry, how would people feel about extending this by another few days / weeks to allow for other people to enter? I know that it's all too easy to lose track of time, or concentrate on things that need to be done, rather than fun things that we'd like to do (but go on - admit it... last minute entries are always fun to code ) What do you think? Dan (Edited by BillyRayPreachersSon on 06-30-2005 20:02)
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 07-01-2005 11:52 sorry, until the end of July I'm on a fun thing that need to be done.
BillyRayPreachersSon Bipolar (III) Inmate From: London Insane since: Jul 2004	posted 07-05-2005 08:22 Not to worry - I'm sure there will be plenty of other opportunities for great entries. Iron Wallaby: Congratulations! By default, you're the winner with your symbol code: http://www.rpi.edu/~laporj2/media/code/symbols/ Here's something I put together for the occasion, to add 'a splash of colour' into the mix: http://www.codecouch.com/dan/snippets/opacity/index.php Over to you, IW! Dan
Iron Wallaby Paranoid (IV) Inmate From: USA Insane since: May 2004	posted 07-07-2005 21:21 haha, thanks! Except my entry seems to have disappeared off of my webspace... I should look into that. Anyway, I'll try to come up with a good topic fast, since it seems one is needed. Might want to try to make this one a little different so as to cater to the people with time constraints, like myself... --- Website

Topic awaiting preservation: June 2005 - 20 lines JavaScript contest - Opacity demo\$

Author

Thread

BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

posted 06-04-2005 15:02

I thought I'd do something a bit different this month. I'd like to see what good uses people can come up with for opacity. It can be anything from a game, to a demo, to a utility... as long as it demonstrates a good working use of opacity.

Of course, not all browsers support opacity, although a fair majority do. AFAIK, it works in IE/Win4+, Firefox, Safari, Netscape (possibly v6, definately v7), Mozilla (unknown version), and Konqueror (unknown version). It does not work in IE/Mac, or Opera. Anyway - I believe that enough browsers support it to make it a viable topic for the competition.

Obviously, not everybody will have worked with opacity before. Therefore, to make this competition as fair as possible, I'll be providing some basic code (see end of this post) to show how to set opacity in a few lines. You don't have to use it, but it is there if you need it. This will allow people to concentrate more on the project itself, rather than worrying about how to set opacity. Of course, you might decide to use CSS to set it, and avoid JavaScript... whatever works for you.

quote:
A code monkey said once:
As usual, the main rule is to make your script in 20 lines of (effective) code.
Comas shouldn't be used to execute several instructions on the same line
See the code sample below to illustrate the basic rules :
code:
<script type="text/javascript">



/* .. */    document.body.onclick = function()

/* .. */    {

/* 01 */        val = prompt( 'enter a number' );

/* 02 */        for( i=0; i<10; i++ )

/* .. */        {

/* 03 */            alert( stupidFunction( val, i ) )

/* .. */        }

/* .. */    }



/* .. */    function stupidFunction( a, b )

/* .. */    {

/* 04 */        return a>b?a:b; // I said it was a stupid function

/* .. */    }



</script>
The document.body.onclick = function() does not count as a line as it's not some effective code and the function call could be put in the BODY tag ( or anyother HTML tag ).
The declaration of the stupidFunction() does not count either for the same reasons.
The coma in the line /* 03 */ is ok, since it simply separates the parameters of a function.

Anyway - the opacity code I mentioned earlier. It's fairly well commented, including a line which explains how to avoid flickering in Gecko-based browsers. It can be made smaller, but that's up to you to manage

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Simple cross-browser opacity demo</title>

	<style type="text/css">
		div {
			position: absolute;
			width: 200px;
			height: 200px;
		}

		#div1 {
			background-color: blue;
			top: 50px;
			left: 50px;
		}

		#div2 {
			background-color: red;
			top: 100px;
			left: 100px;
		}
	</style>

	<script type="text/javascript">
	<!--
		function setOpacity(element, opacity) {
			// In NN / Moz, when opacity is 100, flickering occurs. If the opacity is reduced to 99.99, this does not happen.
			// This code will achieve this, if uncommented
			// if (opacity == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1)) opacity = 99.99;

			// Set CSS 3, Moz, NN, FF, gecko, Konqueror, Safari
			element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity = opacity / 100;

			// Set IE
			element.style.filter = 'alpha(opacity=' + opacity + ')';
		}
	//-->
	</script>
</head>

<body onload="setOpacity(document.getElementById('div2'), 50);">
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>

I'm quite looking forward to judging this one

Dan

(Edited by BillyRayPreachersSon on 06-04-2005 15:05)

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

posted 06-04-2005 22:23

*recycle*

http://www.rpi.edu/~laporj2/media/code/symbols/

I'll try to come up with another thing later.

---
Website

wrayal
Bipolar (III) Inmate

From: Cranleigh, Surrey, England
Insane since: May 2003

posted 06-05-2005 02:01

Hmm...my IE seems to be screwed - it won't do alpha filters full stop. But then, it won't even access the internet - it's completely screwed. Anyway, I was just sticking the demo commands together in preparation for an entry, but now I don't know if it works in IE :\. Could anyone test for me by any chance?

function setOpacity(element, opacity) {(navigator.userAgent.indexOf('IE')!=-1)?element.style.filter = 'alpha(opacity=' + opacity + ')':(opacity == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1))?element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity=99.99/100:element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity=opacity/100}

Wrayal

(Edited by wrayal on 06-05-2005 02:02)

TwoD
Bipolar (III) Inmate

From: Sweden
Insane since: Aug 2004

posted 06-06-2005 00:24

Wrayal: Nope, it didn't work when I tested it like this:

code:

<html>
<body>
<div style="background-color:blue">
<div id="test" style="background-color:red">Hello</div> there
</div>
<script>
function setOpacity(element, opacity) {(navigator.userAgent.indexOf('IE')!=-1)?element.style.filter = 'alpha(opacity=' + opacity + ')':(opacity == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1))?element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity=99.99/100:element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity=opacity/100}
setOpacity(document.getElementById('test'),50)
</script>
</body>
</html>

Maybe someone can verify that test so I didn't make a mistake.

Nice topic btw

/TwoD

wrayal
Bipolar (III) Inmate

From: Cranleigh, Surrey, England
Insane since: May 2003

posted 06-06-2005 09:41

Yes, sorry, that should have beee the first thing I wrote - cool topic!

Hmm...Well, I guess it's my fault then...the code works for Moz unless I made a mistake copying it. Oh well, I have 5 important exams in the next couple of weeks, but after that I will be liberated, so hopefully I will get an entry in

Wrayal

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 06-06-2005 10:40

Interresting topic indeed.

BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

posted 06-20-2005 22:45

Ooooooooooooooh. I just can't wait

BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

posted 06-30-2005 20:02

While we have an entry, how would people feel about extending this by another few days / weeks to allow for other people to enter?

I know that it's all too easy to lose track of time, or concentrate on things that need to be done, rather than fun things that we'd like to do (but go on - admit it... last minute entries are always fun to code )

What do you think?

Dan

(Edited by BillyRayPreachersSon on 06-30-2005 20:02)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 07-01-2005 11:52

sorry, until the end of July I'm on a fun thing that need to be done.

BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

posted 07-05-2005 08:22

Not to worry - I'm sure there will be plenty of other opportunities for great entries.

Iron Wallaby: Congratulations! By default, you're the winner with your symbol code:

http://www.rpi.edu/~laporj2/media/code/symbols/

Here's something I put together for the occasion, to add 'a splash of colour' into the mix:

http://www.codecouch.com/dan/snippets/opacity/index.php

Over to you, IW!

Dan

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

posted 07-07-2005 21:21

haha, thanks! Except my entry seems to have disappeared off of my webspace... I should look into that.

Anyway, I'll try to come up with a good topic fast, since it seems one is needed. Might want to try to make this one a little different so as to cater to the people with time constraints, like myself...

---
Website