What is Digg?Sponsored by Dragon Age: Origins
See the new YouTube feature trailer for Dragon Age: Origins view!
youtube.com/DragonAge - EA presents BioWare's new dark fantasy epic Dragon Age: Origins. '9/10' from Game Informer.
74 Comments
- sockpuppets, on 10/12/2007, -3/+69Ctrl C, Ctrl V. The secret to my mad web skills.
- sockpuppets, on 10/12/2007, -3/+59WordPress
Error establishing a database connection™
They should just trademark that now and make it their corporate slogan. - hmaugans, on 10/12/2007, -2/+53Haha, glad you like it. I've spent HOURS on it.
I implemented the wp-cache 2.0 plugin, but just in case there are server problems again... here are some mirrors:
http://www.harrymaugans.com.nyud.net:8080/2007/03/06/how-to-create-an-animated-sliding-collapsible-div-with-javascript-and-css/
http://www.duggmirror.com/programming/How_to_Create_Digg_Comment_Style_Sliding_DIVs_with_Javascript_and_CSS - armbar, on 10/12/2007, -0/+38Speaking of clones, I noticed your username is mastershake1. Was mastershake already taken?
- therippa, on 10/12/2007, -2/+37Don't forget about script.aculo.us, which is what is used by digg for the effects...
http://script.aculo.us/ - xyc0n, on 10/12/2007, -0/+24You are a moron. Blog spam is when somebody channels an article through their blog to increase their traffic. In this instance, the owner of the blog actually _wrote the article_. It's not inaccurate, it's most certainly not lame, and encourages people to use advanced techniques to improve their web sites, which in turn encourages Digg to innovate.
Dugg. - v3locity, on 10/12/2007, -2/+19Some people like to do things THEMSELVES. It helps understand how things actually work and sparks creativity and innovation.
- hode, on 10/12/2007, -0/+14^^^ Goodness! Does mastershake2 have your manners or did they fix that bug?
- inactive, on 10/12/2007, -4/+18yuck. it's the stupid sliding comments that make digg slow. i think it's ridiculous that a stupid link-and-voting website freezes my browser for several seconds on a 1GhZ.
- inactive, on 10/12/2007, -0/+14inaccurate how? its actually one of the longest blog posts ive ever seen with little to no ads.
- taitacakes, on 10/12/2007, -4/+17This is what I expected the last one to be.
Thanks :D - cresswga, on 10/12/2007, -2/+12Thanks Harry - that's another well written tutorial.
- armbar, on 10/12/2007, -1/+10You seem either confused or dyslexic.
- Blandyman, on 10/12/2007, -0/+8"No story can hit the front page on Digg without someone burying the article and telling everyone about it. So suck it long and suck it hard."
So you had to be that person?
You're a ***** loser. Please leave. - dqderrick, on 10/12/2007, -1/+8Works as advertised. However....
How does display:none effect search engine optimization? Do search engines ignore content that is within a display:none div? - dbr_onix, on 10/12/2007, -1/+8jQuery does the same [ http://jquery.com ]
$("div#divid).hide("slow");
Not quite as flexible as writing your own Javascript for it, but it's a lot easier.. - Otto, on 10/12/2007, -0/+6No, search engines do not ignore display:none content. Not usually. Circumstances vary, of course, but display:none is usually indexed along with the rest of it.
- championchap, on 10/12/2007, -0/+6"So suck it long and suck it hard."
Brave words from somebody named after a milkshake/crimefighter/genius. - daroot, on 10/12/2007, -0/+6why would you use onmousedown? and why href="javascript:;"?
there is no reason to ever use href="javascript:;" (digg uses the comment as href) - tont0r, on 10/12/2007, -2/+8"I actually learned quite a bit from the comments. First of all, I implemented the wp-cache 2.0 so my server doesn’t go down after 70-100 diggs again, haha."
that didnt work out so well... - chuckd, on 10/12/2007, -0/+5Is it at all possible to do this without specifying a height in the style? Like if the height is determined dynamically by the browser when it renders it. I've been trying to figure out for the longest time where to get the final rendered style from (one where all attributes (ie. height, width, border) are considered not just the css/style attribute).
- ldkronos, on 10/12/2007, -0/+5document.getElementById('objectid').clientHeight
I beleive that takes into account padding and margin...in other words, how much screen real estate it takes up, not just how big it's interior is. - jdstorer2, on 10/12/2007, -0/+5I suggest everyone just clicks the little [Ø] button next to his name.
Don't feed the trolls. - Bamborzled, on 10/12/2007, -0/+4@grogerto
The reason he went through all of this instead of using Scriptaculous/jQuery/MooTools/etc. was because he wanted to learn how to do it. You know why you learn how to do pen & paper math in school? I mean, a calculator can do it faster, right? - ldkronos, on 10/12/2007, -0/+4By the way, I should add that, once you specify a height via javascript, the clientHeight is then updated to reflect that. And like I said, it takes the margins into account, so if you set the height to 100, and there is a 10 pixel margin, clientHeight will return 120. After you've overridden the height, if you want to return it to its' default height, you can set height equal to '' (an empty string) or 'auto' and it will revert to a dynamic height.
- arcanez, on 10/12/2007, -4/+8not to mention, it's a lot less code. I think it also takes care of cross-browser issues too. still, kudos on writing your own
- inactive, on 10/12/2007, -3/+7Very very nice!
I've been looking for something like this for sometime. - LaurenceHerbert, on 10/12/2007, -1/+4@hmaugans
This is great stuff exactly what I needed. I am building a mod for phpBB and possibly vBulletin where you can rate individual posts up or down, if they go down through a certain defined threshold they are hidden. The way I implemented the slide up and slide down originally was fairly poor, I have just tried some tests with your code and it works really well. I will be giving plenty of credit for your contribution to my mod. If you do have any issues with me using the code then please contact me. Again thanks ! - BobTurtle, on 10/12/2007, -2/+5hmaugans,
Nice little implementation. A couple of suggestions:
The first suggestion is very minor. I would recommend that you do not set display="block" whenever you want to show the sliding area for two reasons. First, it restricts the sliding item to block elements. 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).
My second suggestion has to do with the "setInterval()" call in your code. You really should execute the slidetick() function by reference, not as a string (which you currently do). The reason has to do with performance. When you make a function call with setInterval() (or setTimeout() for that matter) and your first argument is a string, every single time the interval occurs, an eval() is run on the first argument, which is VERY costly in terms of performance. If it is important to support multiple sliders going at once, I would suggest changing the way you refer to slidetick() in your setInterval() call. You will probably want to use a closure accomplish what I'm talking about in order to keep a reference to the "objname" variable. If you aren't familiar with closures, and the potential memory-leak pitfalls that can occur if done incorrectly, then ignore my second suggestion since it's probably more trouble than it's worth. - firblitz, on 10/12/2007, -1/+4I expanded on Harry's code, but did it differently, and with acceleration: http://www.digg.com/programming/Re_How_to_Create_Digg_Comment_Style_Sliding_DIVs_with_Javascript_and_CSS
- appletalk, on 10/12/2007, -1/+4You're not getting it. The purpose of this is to TEACH. He does mention script.aculo.us, and mootools,
but I don't understand how using those functions teach you how to create an effect and actually learn javascript =( - foxymcfox, on 10/12/2007, -4/+6@ihaveplans: I dugg you down, just to see the unnecessary eye candy.
@Submitter: I was one of the people who requested this yesterday, so thank you very much, I really appreciate it. - hmaugans, on 10/12/2007, -1/+3Dugg and commented. :)
- chuckd, on 10/12/2007, -0/+2@ldkronos: Thank you so much... just tried it and it seems to work in Firefox 2 and Opera 9... but I keep getting 0 in IE6 and IE7 (god I hate that browser).
- hmaugans, on 10/12/2007, -1/+3@LaurenceHerbert,
No, not at all... I posted this code to help others, so it's great you're using it. And if you were offering a backlink to me, I appreciate it. :)
Thanks again and good luck with your forum. - bobsaget06, on 10/12/2007, -1/+2Thanks, extremely helpful!
- ell0bo, on 10/12/2007, -0/+1umm... pulled this off the source for my site...
function getInnerWidth(obj){
if (IE)
{
return parseInt(obj.offsetWidth);
}
else{
return parseInt(obj.clientWidth);
}
}
// get an objects inner(client) height
function getInnerHeight(obj){
if (IE)
{
return parseInt(obj.offsetHeight);
}
else{
return parseInt(obj.clientHeight);
}
}
function getObjectHeight(obj){
return parseInt(obj.offsetHeight);
}
function getObjectWidth(obj){
return parseInt(obj.offsetWidth);
}
works for me well enough (IE is still not perfect all the time). I'll let you figure out how to tell if it's IE - starguy, on 10/12/2007, -0/+1Where can I find some good comment system code? I'd like to implement a comment system on my site, http://anarchy-tv.com , so that people can have a running discussion on each individual video (page) about the video. Collapsable is nice but not necessary.... in fact, it can be perfectly flat. It just has to be easy to implement and filter out buffer overrun attacks, maybe spam commenting, and junky illegal characters. Basically, the basics.
- jordandiggsit, on 10/12/2007, -0/+1This rocks.
Here is Harry's method implemented within my site! The sites a work in progress, but I have his method working.
Does anyone know if its at all possible to do this without knowing the exact height of the DIV tag being expanded?
http://www.jordanjoseph.com/education.php
Thanks Harry! - rdivilbiss, on 10/12/2007, -0/+1Display:none probably will not have a detrimental link if the content is relative. What will hurt your SEO is having link hrefs which are javascript commands instead of URLs.
You can use these hide-shoe division scripts and still use meaningful URLs the spiders can follow so you don't get a penalty. http://digg.com/programming/Re_How_to_REALLY_Create_Digg_Comment_Div_s_with_Accessible_Links - 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 - appletalk, on 10/12/2007, -1/+2Search engines ignore CSS.
If you use [span style="font-size:24px"]My heading[/span], search engines won't think
it's the same as [h1]My heading[/h1]. The main reason for that is that search engines care about
content (that's why you should ALWAYS keep your content semantically meaningful), and not look.
Matt Cutts (Google spam specialist) denied that the engine takes CSS properties into account, but he insisted that
you can still be punished (manually, of course) if you're using it to hide text and rank better, which is what spammers do.
http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/ - lisafordeg, on 10/12/2007, -0/+1Sounds interesting... I've never thought it is for real.
- mvannatter, on 10/11/2007, -0/+0Dugg. Nothing particular, but still interesting for me.
- risnandar, on 03/17/2008, -0/+0nice trick.. simple enough and it works inside a table row
- sarahmaddelson, on 10/11/2007, -0/+0Really good. But I'm not surpised.
- stevecole, on 10/12/2007, -1/+1It's a shame. I know many diggers who won't even go into the comments section because of the hang time in getting there.
- nzhamstar, on 10/12/2007, -3/+2Dude, you are a f**king gangster! I love it!
- kidti, on 10/12/2007, -0/+0You really should execute the slidetick() function by reference, not as a string (which you currently do). The reason has to do with performance. When you make a function call with setInterval() (or setTimeout() for that matter) and your first argument is a string, every single time the interval occurs, an eval() is run on the first argument, which is VERY costly in terms of performance. If it is important to support multiple sliders going at once, I would suggest changing the way you refer to slidetick() in your setInterval() call. You will probably want to use a closure accomplish what I'm talking about in order to keep a reference to the "objname" variable. If you aren't familiar with closures, and the potential memory-leak pitfalls that can occur if done incorrectly, then ignore my second suggestion since it's probably more trouble than it's worth.
My site: http://www.onboom.com , http://www.onboom.com/downloads/ , http://www.download.onboom.com/ , http://www.duc-anh.com -
Show 51 - 78 of 78 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is