What is Digg?Sponsored by Norton 2010
80's metal band Dokken vs. a chicken. Who would win? view!
everyclickmatters.com - It's raw head-banging talent against raw meat. See the showdown. Seriously.
66 Comments
- tbeseda, on 10/12/2007, -1/+26Good work. I like when developers go back and forth... makes for tons of improvements and new features.
- hmaugans, on 10/12/2007, -2/+17For learning purposes above all.
- hmaugans, on 10/12/2007, -4/+18Very nice. That's a good idea I hadn't thought of... I might actually implement this on one of my websites that uses that code, haha. Thanks for taking the time to expand on it.
Dugg. - smartssa, on 10/12/2007, -2/+15Scriptaculous' Effect.toggle() is far more effective and actually checks to see if the div is opened or closed before doing anything...
- vertice, on 10/12/2007, -0/+12or you could include jquery and do
$("#css-id").slideDown("slow", function() { /* do something here */ } ); - diggmeup, on 10/12/2007, -2/+13the green on black text is so soothing. i'm doing all my coding in green black now
- Wailord, on 10/12/2007, -5/+15Haha...expand on it.
- kday, on 10/12/2007, -2/+9don't waste your time with this. Also, I wouldn't suggest using bloat such as scriptaculous.
If you want to do some animation, look at moo.fx
http://moofx.mad4milk.net/
It's only 3 kb of JS, and can do any type of animation that scriptaculous can do.
Here is an example of a digg slide effect:
var slide = new Fx.Styles('my-slide-div', {duration: 2000});
slide.start({'opacity': [0, 1], 'height': [0, 40]});
slide.start.pass({'opacity': 0, 'height': 0}, slide).delay(6000);
If you are looking to do more than just animation, check out mootools. You can customize your javascript files so they only contain what you need. Check it out: http://mootools.net/download - leohart, on 10/12/2007, -1/+8Optimized mootools is lighter weight than this guy code and provides more functionality. For educational purpose => good. But for production purpose (applying it to your website), well, probably not.
- inactive, on 10/12/2007, -1/+8I KNOW MAN! They already invented an OS called Windows, why do linux fanboys feel like reinventing the wheel!?!?!
It's called progression. Scriptaculous isn't the be all end all lib. Someone else may come along and improve it. WELCOME TO PROGRAMMING BUD! - InsomniaSlim, on 10/12/2007, -2/+9... because sometimes, as in my case (a medical solution), you can't rely on the browser cache when you're running everything over HTTPS. And yes, _everything_... FDA and HIPAA rules require it.
We end up coding lots of things as light as possible and from scratch to avoid pulling down any KBs we don't need. Sorry to burst your bubble, but everytime I mention HTTPS, every attempt to justify a large library is shot down. Including, "well, host your statics on HTTP," b/c we'll get browser warnings.
I like a simple, efficient script if I'm doing _one_ thing. This was worth reading. - inactive, on 10/12/2007, -1/+7At least those geeks know the difference between 'do' and 'due'.
- firblitz, on 10/12/2007, -0/+5@phaed
If you mean acceleration/deceleration to the effect, look again, it has it.
moo.fx looks slick, but again it requires prototype or mootools. This is more just proof-of-concept, roll-your-own, see-how-it's-done. - diznang, on 10/12/2007, -0/+5Scriptaculous library enthusiasts - it's true that scriptaculous is relatively small js package, and offers much more effects, but does it not need sit on top of the hefty prototype js? That's a lot of js weight to carry around if someone only wants a sliding show/hide effect.
I welcome those who are offering a build-it-yourself-from-scratch approach for these single effects. People like me learn can learn so much from that. Down the road, I may be able to learn much more by picking apart prototype, but I'm far from being there yet.
I like what this person has done, but I wish that "height" didn't have to be declared - what if the user resizes text? What if the contents of the div is something pulled from a database and therefore isn't always known how long it is? One thing that scriptaculous allowed was the freedom to not have to declare the height for the collapsed div. I'd like to see a homegrown version of this effect that could offer this improvement.
If anyone else who knows there way around javascript could give this a go, I'm one person who'd love to see it and learn from it, and my digg awaits you. - firblitz, on 10/12/2007, -0/+5I wholeheartedly agree, however, this is in response to a homebrew discussion we had eariler. In all my professional work, I use scriptaculous.
Now one cool thing that I'll feature at a later point, is a way to actually slide and resize a DIV without it disappearing completely... which is the reason I originally wrote this code, something scriptaculous doesn't have. - krazymelvin, on 10/12/2007, -0/+4No, actually it has its own - 'mootools'. only about 35kb, much much lighter than prototype.js
- Agret, on 10/12/2007, -1/+4Well at least it's the real way of coding. In every movie I see it's green text on black so it's gotta be the norm!
- Chewie67, on 10/12/2007, -0/+3@leohart - "Optimized mootools is lighter weight than this guy code"
It's 1.77Kb. MooTools is not less than that. It may do more, but at a heavier weight.
If you want a general "do it all" set of script, yes, MooTools is the way to go. If you just want a slider, then this is a smaller answer. - muffinmanpoo, on 10/12/2007, -1/+4Due you?
- kday, on 10/12/2007, -0/+3I can confirm what krazymelvin said. I included everything that mootools has to offer, and the javascript file is 35.2 kb (with compression).
- phaed, on 10/12/2007, -2/+4It is nice to know how to do it from scratch. Add in easing functions and ill drop script.aculo.us right now. This is what easing functions feel like: http://www.dcstealthy.com/bn/?page=browse thats a website im creating that is still under construction. click on the rows to see the div open up smooth as silk using script.aculo.us
- diznang, on 10/12/2007, -0/+2@kday - moofx still sits on top of prototype. So the majority of the 'bloat' is still there that was present with scriptaculous.
- rdivilbiss, on 10/12/2007, -0/+2All due respect to firblitz and Harry Maugans, but Digg uses "Accessible Links", and does not use JavaScript in the href for links to show and hide buried comments.
Both of you deserve Kudos for nice code and tutorials, but shouldn't we teach the newer programmers to use accessible links?
After all Digg does.
http://digg.com/programming/Re_How_to_REALLY_Create_Digg_Comment_Div_s_with_Accessible_Links - BobTurtle, on 10/12/2007, -1/+3There are so many problems with your implementation, I don't know where to begin. You managed to turn Harry's poor implementation of sliding DIVs into a bigger steaming pile of poo.
Your first problem is the overuse of inneficient setTimeout() calls. I realize you can specificy a string as the first argument to setTimeout(), and that string will be eval'd when the setTimeout() is triggered, but, it is extremely costly to do it that way. You should be calling functions by reference with setTimeout() NOT as string parameters. For example, your code does the following:
window.setTimeout("Slide('"+objId+"').finishup("+this.height+");",finishTime);
You are doing it this way because you think it is the only way to have setTimeout call a function with arguments, which only shows your lack of JS experience and doesn't bode well for those that think this is a suitable replacement for any of the other JS effects libraries out there.
Another thing, do not set display="block" whenever you want to show the sliding area. First, it restricts the sliding item to block elements and second, it overrides any 'display' attributes that users of your code may have put in a non-inline style. You can accomplish the same effect by simply changing all of your display="block" to display="" (empty string).
Finally, you allow for callbacks, but you don't provide any way to associate a callback with the item that just opened or closed. For example, imagine I have two "slidable" areas on my webpage, named S1 and S2, and after either one slides closed I want my function "afterClose()" to be called. No problem, according to you, I can simply set onComplete to point to my afterClose() function and it will be called every time either S1 or S2 is opened or closed! Awesome, except, you don't provide any way of determining whether it was my S1 or S2 node that just finished sliding. Furthermore, you don't give me any indication of whether the node has just opened or closed.
Sorry to be so damn harsh. I tried being nice with my suggestions to Harry, which went ignored. As a result, you started with Harry's ***** code and have propagated the ***** code to morons that seem to think it's the second-coming-of-scriptaculous|moofx|prototype just because it's on Digg. To the above posters that equate "small library file size" with efficient, in this case, you couldn't be more wrong. - Chewie67, on 10/12/2007, -0/+2You make fair points, Bob.
So, what's your alternative? - Bramus, on 10/12/2007, -0/+2Still not good. Here the several uses, using the main libraries:
- Scriptaculous: use Effect.toggle(element) : http://wiki.script.aculo.us/scriptaculous/show/Effect.toggle
- jQuery : already mentioned here : http://digg.com/programming/Re_How_to_Create_Digg_Comment_Style_Sliding_DIVs_with_Javascript_and_CSS#c5579080
- MooFX : already mentioned here : http://digg.com/programming/Re_How_to_Create_Digg_Comment_Style_Sliding_DIVs_with_Javascript_and_CSS#c5579609
- YUI : haven't used the one actually but I'm sure it'll be quite easy! - kday, on 10/12/2007, -0/+2I take that back... krazymelvin may be right.... it seems that the author has now created his own prototype functions. I thought I remember mootools using prototype.js
No? - inactive, on 10/12/2007, -0/+1Isn't prototype like 75k compressed?
- dpknc84, on 10/12/2007, -0/+1It works, but there's a bug somewhere. Click "slide up" two/three times and then click "slide down". It won't slide down again until you click about as many times as you slid it up. If that makes any sense at all.
- dbulli, on 10/12/2007, -0/+1much better ... dugg... but remember people without javscript !
- kday, on 10/12/2007, -0/+1it sits on a modified version of prototype. I like mootools because it only gives you the parts of prototype that you need to do what you are trying to do.
- Rkstar, on 10/12/2007, -0/+1I couldn't get this to work... but it motivated me to make my own library that works great.
http://www.digg.com/programming/Digg_Style_Collapsible_DIVs_that_work - jordandiggsit, on 10/12/2007, -0/+1Hot damn, these little javascript tricks are genius.
People say javascript is bad because some users have it turned off. Is this really an issue? I've never seen anyone ever have a problem with javascript. - krazymelvin, on 10/12/2007, -1/+2You could check out this one:
http://radnan.public.iastate.edu/sitetest_effects_ver2.html
Not as nice as the others, but it doesn't require height and only needs one button to show/hide. But you cannot set any padding on the target element. Just set up another div inside it and customize it. But hey, like you said, you can always work on it and create something even nicer! So, enjoy!
Plus the duration is a little choppy. (I use a completely different method)
Let me know if you need additional info.
Personally I like to use mootools, much lighter than sciptaculous. - Chewie67, on 10/12/2007, -0/+1That doesn't happen for me.
What browser / platform are you running? - Rekzai, on 10/12/2007, -0/+1These posts are really helpful
Someone is trying to create a digg like system for vbulletin
http://www.vbulletin.org/forum/showthread.php?t=118075 - inactive, on 10/12/2007, -1/+2Too much time for such a fundamental visual app. If clients won't pay for it, no Digg.
- BobTurtle, on 10/12/2007, -0/+0@Chewie67,
The correct solution for a given project is the one that effectively fulfills the projects requirements. The solution may very well be custom code or an existing library of code. With that in mind, the author's code is probably a perfectly acceptable solution for HIS purposes. The problem is that when you present your code as "an alternate solution for a common problem" you better do at least two things, first, you better have a solid interface (API), and second, you better follow any generally accepted best coding practices for your language. As with any programming language, figuring out what the "best practices" are comes with experience, which is why you shouldn't be providing "general solutions" unless you have the experience to back them up.
Arguments that the author isn't presenting this as a "solution for a common problem" don't apply when the author himself posts his own code as a Digg story. - krazymelvin, on 10/12/2007, -0/+0@kday
I'm not completely sure, but I think there are two versions. One for those who wanna stick to proto. And one completely customizable version using his own library - 'mootools' - clirity, on 10/12/2007, -0/+0Digg got a non-AJAX Comment area....I'm disappointed :-(
- outoforder, on 10/12/2007, -2/+2I've paid my do's suckers...don't hate.
- stockjones, on 10/12/2007, -0/+0Yes one line with jquery is all you need.
- 123zoozle, on 12/17/2007, -0/+0These resources are really helpful .
http://www.webdesignersindia.net/web2-website-desi ... - Chewie67, on 10/12/2007, -1/+1jQuery Compressed = 19Kb
This guy's script = 1.77Kb
It doesn't claim to do everything that jQuery or MooTools does. It's just a slider written as a tutoria.. - guitarguy, on 10/12/2007, -0/+0It's cool to see all this stuff you can do with the DOM, especially with DIV tags. Here's another one I found that I dugg a few days ago: http://digg.com/programming/Draggable_Collapsible_Dynamic_DIV_windows_with_JavaScript
This one actually has little windows that you can drag around and all that. - yogastore, on 06/30/2008, -0/+0http://astore.amazon.com/la.crosse.atomic.clock-20
http://astore.amazon.com/la.crosse.technology.wire ...
http://astore.amazon.com/upright.bagless.vacuum-20
http://astore.amazon.com/dyson.upright.vacuum-20
http://astore.amazon.com/hoover.bagless-20
http://astore.amazon.com/hoover.canister-20
http://astore.amazon.com/pyrex.storage-20
http://astore.amazon.com/pyrex.storage.lids-20
http://astore.amazon.com/inflatable.bed-20
http://astore.amazon.com/aerobed.inflatable.bed-20 - dexterholland, on 10/12/2007, -0/+0Very cool, thanks for this, been always wondering how to do this
-
Show 51 - 69 of 69 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is