What is Digg?Sponsored by Sony Pictures
Do you believe the 2012 Mayan Prophecy? view!
whowillsurvive2012.com - The Mayan Calendar predicts the end of time: 2012. See the trailer for 2012, opening November 13.
107 Comments
- hmaugans, on 10/12/2007, -1/+42Mirrors (if needed):
http://www.harrymaugans.com.nyud.net:8080/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/
http://www.duggmirror.com/programming/How_to_Create_a_Collapsible_DIV_with_Javascript_and_CSS - Albion, on 10/12/2007, -1/+31most js librarys do have a toggle function, but why include a whole library if you just need a couple of functions? also the implenation they show you is not the best, it should be:
function toggleDiv(divid){
var div = document.getElementById(divid);
div.style.display = div.style.display == 'block' ? 'none' : 'block';
}
this implentation is much neater and there is only one dom lookup - rdivilbiss, on 10/12/2007, -10/+32Using inline style declarations and "javascript:;" href attributes on anchors should be discouraged. Both will cause accessibility issues and the latter will hurt your SEO page rank.
Better to use a button styled as a link and to separate style from markup.
Sorry, no digg. - Stonekeeper, on 10/12/2007, -0/+17Using jquery, this becomes:
$(divid).toggle();
I recommend jquery to all! - monsters, on 10/12/2007, -2/+15yey ternary operators!
- Enchirito, on 10/12/2007, -2/+13I think every js library out there has a toggle function. Most are very lightweight and save you the trouble of basic tasks like this. I recommend Prototype.
- gioma1, on 10/24/2007, -1/+12In Firefox and Opera it can be done without JavaScript, just pure CSS:
http://noscript.net/noscript/toggle.html - caffiend, on 10/12/2007, -0/+11If you recommend it, then post a link. You know programmers are lazy, right? http://jquery.com/
- prockcore, on 10/12/2007, -7/+17Great tutorial on how to create a collapsible web server.
- foxymcfox, on 10/12/2007, -1/+9Wow! First comment mirrors. I'm impressed. Thanks man, duggmirror was just what the doctor ordered
This is a great straight forward little tutorial, but what I'd really love to see is a tutorial about creating sliding/animated collapsing divs (Like the show/hide option on Digg comments) without the needs for MooTools, or the like.
Anyone have a source? - greyfade, on 10/12/2007, -0/+7@democracysucks: If you can convince the browser vendors (read: Microsoft, Mozilla, Opera, KDE, Apple, et. al. - ALL of them) to support Lua, Ruby, Python, TCL, or just about any other good candidate language - just one of them - and to improve DOM level 2 support, then you'll probably have 90% of web devleopers behind you on that suggestion.
The fact is, *ONLY* JavaScript is universally supported. The *ONLY* alternative is VBScript, and it is *ONLY* supported by IE on Windows (you can't even really license the VBScript engine - you have to use WSH, which is Windows-only and iffy at best). If you don't like JavaScript/ECMAScript, then you're ***** out of luck, bucko.
As for an alternative to PHP... You can use assembly language, fer *****'s sake! Make some goaddamn ***** up and you can USE it (provided you conform to the CGI/1.1 spec so your web server can talk to it). PHP isn't all there is. Ruby, Perl, Python, C, Java, VBScript, the .NET family.... There are hundreds of alternatives. Take your pick and stop whining about PHP. - armbar, on 10/12/2007, -5/+11Did you really just include Prototype and "lightweight" in the same comment?
- eric1, on 10/12/2007, -0/+6Could you elaborate? Do you mean to do the same thing as the tutorial suggests, but using a button instead of a text link? I do work for a university and accessibility is one of our main goals. I was aware that the links, as shown, could cause accessibility issues, but didn't know how to get around them.
- bkemper, on 10/12/2007, -0/+6"Another common do-nothing insert to use for the href property is a pound sign (#), and while that will work, it’ll also move the user’s scroll bar to the very top of your website, which can get quite annoying."
not if you return false in the javascript. - knomevol, on 10/12/2007, -2/+8bornholtz gives you the EXACT answer you are looking for, AND YOU DIGG HIM DOWN.
does baby need to be spoonfed? - Bdog2g2, on 10/12/2007, -0/+6That would be the scriptaculous library. http://wiki.script.aculo.us/scriptaculous/show/Effect.BlindDown Nice library. But I only use it for packaged effects such as this. currently giving YUI and YUI-ext a go.
- codered82, on 10/12/2007, -0/+6Yay jQuery: $('#myDiv').toggle();
- ldkronos, on 10/12/2007, -0/+5But no IE, so that's not very helpful for 99% of websites. A cool trick, none the less.
- austindkelly, on 10/12/2007, -1/+6Is it just me, or does ever WordPress page that gets dugg go down? I have never used WordPress, but if the later is true, it must be a POS.
- hmaugans, on 10/24/2007, -0/+5Why do you say that?
If used correctly, it's helpful. - Chongo, on 10/12/2007, -0/+5@foxymcfox - Mootools has had alot of time invested in it though so its not a huge cheat to use it IMO.
but in the interest of learning I would go on google and search for "Javascript animation" or "Javascript animation without moo". Keep varying it up... I just found a whole bunch.
hope that helps - austindkelly, on 10/12/2007, -0/+5Perhaps you just dont know enough about the language? JS is a great tool, although I dont know why you are using it for your includes.
- illeat, on 10/12/2007, -0/+5That method excludes IE which is the dominant browser. Seems like a silly thing to do...
- armbar, on 10/12/2007, -0/+5Any explanation of why Javascript sucks, rather than just the statement? I've been working with it for about 7 years now, and I absolutely love it. It's fast, easy to learn (at least the basics), and you can use it as the tool for so many different things. Where's the problem?
- misterjangles, on 10/12/2007, -0/+5foxymcfox - you can roll your own but using a toolkit sometimes is preferable unless you want to test your script in all various browsers and OSs to make sure it works right. I think scriptaculous (http://script.aculo.us/) is pretty decent for your basic animation effects. Pretty much one line of code will do all the effects, for example:
onclick="Effect.Fade('myDiv')" - npsken, on 10/12/2007, -2/+6Or...
use http://script.aculo.us and get better effects including *sliding* collapsible divs.
BTW, before people say that it is too big:
scriptaculous.js?load=effects - hmaugans, on 10/12/2007, -0/+3http://digg.com/programming/How_to_Create_Digg_Comment_Style_Sliding_DIVs_with_Javascript_and_CSS
I just wrote that up for you. - bornholtz, on 10/12/2007, -10/+13How about trying View -> Source? It's all right there.
- lichme5000, on 10/12/2007, -1/+4Rather than this fairly basic example, how about somebody post a basic example of how digg does their div rolling/unrolling trick.
- hmaugans, on 10/12/2007, -0/+2Also check out the improved version:
http://www.digg.com/programming/How_to_Create_Digg_Comment_Style_Sliding_DIVs_with_Javascript_and_CSS - BobbyOnions, on 10/12/2007, -0/+2I can thoroughly recommend YUI. I've written a commercial web-based intranet application that uses YUI to do flowcharts using drag and drop etc. All very cross-platform and performance is perfectly acceptable.
- armbar, on 10/12/2007, -0/+2You can also just use the button element and wrap it around a piece of text. Valid HTML, and it's better than having to style an input element.
[button]Click to toggle div[/button]
P.S. Digg doesn't like HTML markup, so replace the hard brackets with angle brackets. - foxymcfox, on 10/12/2007, -0/+2Thanks, guys. I know the theory behind it, but I've just been too lazy to sit down and type it out, since none of my current projects require it. I've found that just reading tutorials will help embed them in my head, so that by the time I need to use the techniques involved I don't have to do too much thinking. That's the only reason I was looking for a tut'. If I find the time, maybe I'll write up my own tutorial, to help those who may be wondering the same thing...but that is a big if.
Thanks again for your help.
//I'm more of a coder than a programmer - armbar, on 10/12/2007, -1/+3Yeah, but it sits on top of prototype which is at least 25kb compressed, and the effects file is 37kb. Why would you want ~60kb of javascript for a simple toggle?
Use Mootools if you want sliding effects, and it's only 3kb. - jimyboy, on 10/11/2007, -0/+1demo at http://www.miniajax.com
- mizraabianz, on 10/12/2007, -0/+1This is great, i know there are tons of libraries like jquery to do this sort of trick but this is simple and quick way to do same thing and plus this will load quicker.
- inactive, on 10/12/2007, -0/+1My rant:
Unfortunately display is volatile. Don't put anything other than text in that div otherwise you can't guarantee the behavior between browsers and there is nothing you can do about it. Don't believe me.. dynamically add other elements with defined events into that div via innerHTML (like some anchors wrapping images with onClick defined .. yeah violate the crap out of the dom) now toggle display a few times and watch things get weird. Not weird enough for you. Place something with object/embed tags in that thing like a .swf and toggle display none. Now try it in Opera.
I love how everyone preaches graceful degradation and UNOBTRUSIVE design while web development is a giant cluster ****. CSS hacks everywhere just to make IE6 behave. Sites designed to be compliant and then you open it up in any browser other than firefox and watch it die. If you haven't experienced the madness then you haven't developed long enough. Mootools with their pretty framework that sure looks good until you let it sit in an open browser for a while. I like to open a google maps instance with mootools and let them fight each other for memory.
Oh and screw that slow memory leaking pile of crap Safari while we are at it. Typical attention whore Mac. - inactive, on 10/12/2007, -0/+1There are no standards as long as Microsoft refuses to follow them. Reality is what IE makes it.
- r3zim, on 10/12/2007, -0/+1IMHO the worse JS flaws I've noticed are the lack of function overloading and poor source file linkage (from other source files).
Still, it's a lot more capable than developers realize. - rdivilbiss, on 10/12/2007, -0/+1@eric1.
Digg uses accessible links to show and hide buried comment divisions. The key is to provide an onclick="return yourfunction()" and to make sure your fancy client side script always returns false to prevent the link from executing. Then provide a valid URL in the href to your page and let the server side code render the divisions based on the supplied parameters. Here is only one way of doing this.
http://digg.com/programming/Re_How_to_REALLY_Create_Digg_Comment_Div_s_with_Accessible_Links - akuzemchak, on 10/12/2007, -1/+2@Stonekeeper: I wish I could digg your comment twice just for promoting jQuery
- yahoofrom, on 10/12/2007, -0/+1your comment will be collapsed into a gray stripe.
- gorele, on 01/22/2008, -0/+0görele
- inactive, on 02/24/2008, -0/+0Thanks very nice
http://www.oyunambari.com
http://www.oyunambari.com/hile.php - geciktirici, on 12/23/2007, -0/+0http://www.hepzinde.com
http://www.shopseks.com
http://www.koz-metik.com
http://www.vidrom.com
http://www.picsrom.com
http://www.vidmatic.com
http://dafhne2005.blogspot.com/ - garantisex, on 01/08/2008, -0/+0http://www.garantisex.com
- yakomoz, on 12/24/2007, -0/+0Thanks...
wmwebtr ödüllü seo yarışması
www.r10.net Küresel Isınmaya Hayır Seo Yarışması - saboces, on 12/06/2007, -0/+0
http://www.cesurturk.org/phpBB2/index.php
http://www.cesurturk.org/index.php?ind=kureselisin ...
http://www.saboces.gen.tr
http://www.cesurturk.org
http://r10kureselisinmayahayirseo-yarismasi.blogsp ...
http://www.cesurturk.org/index.php?ind=reviews
http://www.cesurturk.org/index.php?ind=gallery
http://www.cesurturk.org/index.php?ind=news -
Show 51 - 100 of 116 discussions
Browsing Digg on your phone just got easier with our enhancements to the 
© Digg Inc. 2009
— Content created and posted by Digg users is