Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
85 Comments
- MaxSand, on 10/12/2007, -0/+3I can get the same effect from my Etch-A-Sketch, but it makes my hands hurt.
- Dimecross, on 10/12/2007, -0/+2Ironically, it would take something proprietary (Flash) to achieve this effect consistently across all browsers. :(
- ahouser, on 10/12/2007, -0/+1Funny... made one of those myself, back in the day (http://www.alphafilter.com/?inc=article&aid=131)
- inactive, on 10/12/2007, -0/+1ok mr opera;
Opera doesnt support CSS3 (in addition to proper js) ie, the opacity attribute
check out: http://www.colourmod.com/
THE best colour chooser there is - works with IE/FF/Safari
but not opera
and the fact remains the opera STILL doesnt work with most web2.0 apps - felchdonkey, on 10/12/2007, -0/+1Looks great in FF 1.5 on Win & Mac. We did the same effect using Flash on our site - http://www.permission3000.com - if this worked better across all browsers, it would have been a nice way to avoid plugins. (I know Flash is usually installed, but still.)
- inactive, on 10/12/2007, -0/+1If the CPU usage is to high for you, modify these variables:
var FADE_STEP = 2;
var FADE_INTERVAL = 10;
To something along the lines of 4/20, 8/40, or 16/80. Keeping the same ratio will make the fade "look" as close as possible to the original, although the actual "fading" will start to appear less gradual with higher numbers. I found that 8/40 still looked quite good without killing my CPU. - SilentBobSC, on 10/12/2007, -0/+1True proof you have no clue what any of you are talking about... this is a combo Javascript/CSS effect... A) R-E-A-D the article B) READ THE CODE:
And I quote:
---------------------
"function init() {
currentOpacity[0]=99;
for(i=1;i - jrhass, on 10/12/2007, -1/+2"horribly slow. still hasnt changed my views on java"
nor has it changed my views of C++, Perl, or Pascal :) - opera, on 10/12/2007, -0/+1The script is completely irrelevant. Opera does support javascript perfectly. It's the CSS attribute that's the "issue". It could've been any kind of scripting language, That, is simply not the issue... Holy crap you guys suck.
CSS3 is not a standard, it's still under development.
Why IE works is because people spend time working on two sollutions. One for the standards, and one for IE. Jee... - scsikool, on 10/12/2007, -0/+0Reminds me of http://anfyteam.com/index.html although that is commercial.
- weiran, on 10/12/2007, -0/+0Not enough browser support, should use a standards compliant way to fade images.
No digg. - heanol, on 10/12/2007, -0/+0Merging the code with this function should make it work with more browsers:
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari - BenStockwell, on 10/12/2007, -0/+0"does not work on FF 1.5 linux"
Works on my machine. Running the Firefox 1.5.0.1 backport for Debian 3.1 - SilverRocket, on 10/12/2007, -0/+0"This code is very old, very wrong and a very poor example."
But it still made the front page.
Yeah what a drag that the OP didn't post the link to the CORRECTED version, which works fine. Digg++ - heanol, on 10/12/2007, -0/+0Err, well, i'm new to digg and it seems to have cut off my post.. the function can be found at the bottom of http://www.fixme.se/~heanol/js/utils.js
- scsikool, on 10/12/2007, -0/+0>> Since Linux and Mac operating systems each comprise less than 4% (from your link), are you dismissing them also?
Why do operating systems matter? Browsers are supposed to be cross platform. Code for the dominate browser audience. - Legion303, on 10/12/2007, -0/+0I did this 11 years ago. Does that make this "old news"?
- SilentBobSC, on 10/12/2007, -0/+0Meh, it's really a moot point anyway... The technique is ok, but there are better scripts and methods out there, I just get frustrated when people jump into a conversation and start spouting crap like they know it. Anyone who's read Opera's statements will clearly see he is just another misinformed Opera fanboy (ffs, his handle is "Opera".. doesn't get more lame than that).
The "Best browser" argument is annoying anyway... I design and code for a living, and I try my best to make the pages play nice with IE and FF, the rest of them are on their own unless I get a specific request from the customer. Except for Safari, I don't even touch Safari compatibility unless the audience is going to be mac-heavy.
I know alot of fanboys are going to roast me for this, but the deal is, I have to code to make the pages available to the majority of browsers... I accept that FF is now part of the "majority" but I'm not going to spend hours reworking my CSS (again) for a browser that has less than 4% share. For the record, I use several statistics sites, but for a quick look, you can get some of the numbers from http://www.w3schools.com/browsers/browsers_stats.asp
SB - richardyork, on 10/12/2007, -0/+0Firefox 1.0, and Mozilla 1.7 support the standard CSS 3 opacity property, as does Safari, Konqueror, and the latest Opera 9 preview. A nice effect, put in the standard CSS 3 opacity property and it becomes supportable on most platforms. It's a memory hog though, it won't run quickly on anything but the latest and greatest.
- shaojk, on 10/12/2007, -0/+0Nice. Also I found some cool javascripts art works on internet-artworks.com forum. Check it out
- buss, on 10/12/2007, -0/+0Note: this seems to not work in Opera, but IE6 and FF 1.5.0.1 are fine
- abid786, on 10/12/2007, -1/+1"horribly slow. still hasnt changed my views on java"
doesnt it use javascript? - antdude, on 10/12/2007, -0/+0Works in Mozilla v1.7.12!
- rimco, on 10/12/2007, -0/+0Wheee... it made the little fan in my lappy go WHOOOOSH!
- ronaldpoi, on 10/12/2007, -0/+0The updates works great... digg
- hollerith, on 10/12/2007, -0/+0imho.
Not slow.
Not java.
Old? Maybe but I like it.
Very nice thanks, digg++ - tinnabatty, on 04/04/2009, -0/+0grate! thaks. I'll use this JS code somewhere:)
http://www.iptvworldconference.net/keynotes.php
http://www.shannonbrookeimagery.com - SeaOtter, on 10/12/2007, -0/+0doesn't work in Safari either.
- MonsterMonster, on 10/12/2007, -0/+0I've got a similar effect on my website http://www.monstermonster.co.uk/Feature.aspx?id=10164&issueid=8
- MLyzz, on 10/12/2007, -0/+0good god, who doesn't know this?
- NeilM, on 10/12/2007, -0/+0It's slow and not very interesting.
- Dangerman, on 10/12/2007, -0/+0@silentbobsc
Bing! - SilentBobSC, on 10/12/2007, -0/+0"lol, as if I hadn't been writing javascript for the last 10 years, and building complete sollutions in it, building ajax-similar stuff years before it became a hype... this web 2.0 stuff is just a purification of stuff we had to write a lot larger code for. why am I even answering this."
Ladies and gentlemen, we have a poser... - staan, on 10/12/2007, -0/+0This isn't new (I implemented the same effect - better - last year), and the code is crap. It's not hard to make this cross-browser - mine worked in IE 6, Firefox 1.0, Konqueror 3.2.x, and Safari 1.2(?). Any DHTML image manipulations need to find the sweet spot between iterations (smoothness) and CPU usage. This guy has way too many iterations, which chew CPU time and make the effect slow. 5-10% opacity change per cycle looks pretty good.
And no, doing this with Flash is not easier. I tried that first. - spudwrench, on 10/12/2007, -0/+0Way old and not 100% compatible. No Digg.
- opera, on 10/12/2007, -0/+0silentbob, you don't have to patronize me. I didn't feel like going that far, but people (like you) still discussed the javascript part of this posts code. Which IS completely irrelevent. whatever css attributes will arrive in the future, they will all be controlled by javascript. in IE I suppose they'll also be controllable in vbscript or similar, however that, is a guess.
IT IS the fact that there has been at least three major different opacity attributes around. One of them is what will be in CSS3 when it is ready. The other two are used in this post's example. That's my objection. Nothing else.
And again, for the third time: There is nothing wrong with javascript in opera.
As you wrote: "It is a Javascript applet that dynamically applies a CSS style, thus it's javascript in essence."
No. It's CSS in essence. The dynamic controlling of the css works in ALL browsers, and IT IS NOT THE ISSUE.
And No: It is not a java applet. It is javascript. Two completely different things. One is Java one is Javascript (ECMA Script nowadays). One needs to launch a JVM, one is parsed at run-time. They are like the differences in bash and C.
But even though you don't seem to know about this. Still, the way the CSS is altered is not an issue in ANY browser, it's the two proprietary css attributes. - Dangerman, on 10/12/2007, -0/+0I don't think it has. It is pretty slick, though.
- fiendlama, on 10/12/2007, -0/+0Everytime I change the opacity of an image (or anything) in CSS, I use all of these
filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;
Each one works for different browsers that support opacity. - SilentBobSC, on 10/12/2007, -0/+0Danger - has that been submitted before? I like the control of that script...
- SilentBobSC, on 10/12/2007, -0/+0Actually, it's pretty easy... setup a couple instanced MovieClips, then run either a controlling JS script or just old-skool it with some tweenage... super easy, I do faders in my sleep.... :D
SB - SilentBobSC, on 10/12/2007, -0/+0Whoops! JS = AS
- GLSmyth, on 10/12/2007, -0/+0"... but I'm not going to spend hours reworking my CSS (again) for a browser that has less than 4% share."
Since Linux and Mac operating systems each comprise less than 4% (from your link), are you dismissing them also? - SilentBobSC, on 10/12/2007, -0/+0Unless I'm given a specific requirement at design time, sadly yes. Most the sites I code for have an audience that is primarily on IE, if I were coding a site that was more tech-related, I wouldn't abandon those as quick. I make every attempt I can to keep my code clean and semantic (sp?) in order to aid alternative browsers, but sometimes the customer wants something that will undoubtedly break the site for some browsers, I explain this to them and when they are told which users would be isolated (mac & linux) they just shrug and tell me to put in the whiz-bang new feature. I'm not saying I exclude your browsers just because of a personal grudge, it's more due to trying to strike a balance between client needs and the audience they are marketing to.
SB - GreenSlabOfClay, on 10/12/2007, -0/+0@Dangerman
very nice - twaits, on 10/12/2007, -0/+0No Safari, so what's the point?
- SilentBobSC, on 10/12/2007, -0/+0I will give you one thing, you did catch me on a slip, that is script and not an applet.
- SilentBobSC, on 10/12/2007, -0/+0@Jimmy - Agreed :)
- Dangerman, on 10/12/2007, -0/+0Check it:
This one is the gold standard for the JS image fade. - opera, on 10/12/2007, -0/+0"(trust me. I just wrote my own javascript object to hold/convert RGB/HEX values and an entire function to fade between two colors with a given interval.)"
lol, as if I hadn't been writing javascript for the last 10 years, and building complete sollutions in it, building ajax-similar stuff years before it became a hype... this web 2.0 stuff is just a purification of stuff we had to write a lot larger code for. why am I even answering this. - ronaldpoi, on 10/12/2007, -0/+0The update works great... digg
-
Show 51 - 85 of 85 discussions



What is Digg?
Browsing Digg on your phone just got easier with our enhancements to the