What is Digg?102 Comments
- fluidfoundation, on 10/10/2007, -0/+153But doesnt using the selectors to access the DOM on the onclick event technically count as use of javascript?
- j0hneb0y81, on 10/10/2007, -2/+128FTA: "Create a Lightbox effect only with CSS - no javascript needed"
last time i checked, this was javascript:
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" - str3ama, on 10/10/2007, -0/+44Digg needs a better programming section, 3/4 of the programming and design sections are filled with SEO crap. I'd like see css / php / perl etc subsections. And maybe promote the sections a bit more, there's some rare stuff in there that misses the frontpage
- CrimsonBlur, on 10/10/2007, -0/+30No Javascript, eh? So I suppose the onclick event is just in there for, uh, compatibility? Riiight. Buried as inaccurate.
- Drgn547, on 10/10/2007, -3/+31I have a couple problems with this...
1. It's using javascript and you said it doesn't...
2. It doesn't work properly in IE6 or 7 - there is a gap in your "fade" background
( I tweaked the code and now it works in IE6, IE7, Firefox, Opera, Netscape and Safari PC: http://www.unisyndesign.com/demos/css_lightbox/ ) - andreasblixt, on 10/10/2007, -1/+17I added this comment to the actual post too, but I figure it's relevant here as well...
Yeah it’s definitely not CSS only. It IS possible to make a dynamic lightbox in 100% CSS, but it will be lacking fundamental functionality. I made the following example:
http://css.mezane.org/lightbox/
Click the thumb for the lightbox effect. Click outside to close it (this does not work on Safari because it doesn’t seem to pick up on :focus or :active pseudo-classes.) This can be expanded upon to not reuse the image in the document (you’ll notice it disappears while the lightbox is open,) but I made the solution completely degradable (otherwise there could be a second image that’s hidden in the CSS and then shown when needed.) The extra span element is undesirable as well and makes the source code look ugly. I don’t recommend this anyways. A CSS-enabled browser with JavaScript disabled (very rare) will simply have to live without lightboxes. - NoNamesLeft, on 10/10/2007, -2/+17Interesting but inaccurate title, since the effect requires use of javascript.
- inactive, on 10/10/2007, -3/+18misleading title...should read 'Lightbox effect with CSS + [0.5Kb javascript]'
- captainpete, on 10/10/2007, -2/+17I knew it sounded too good to be true
- nickvd, on 10/10/2007, -1/+13Does it work with javascript turned off? NOPE!!! Therefore it REQUIRES JAVASCRIPT!
- cephelo, on 10/10/2007, -1/+13Please don't use this effect for the pure reason that a href="javascript: void(0);" is incredibly retarded. Link to the framed content, link to a page, do SOMETHING. javascript:void(0) does NOT let me view the "alternative" content using the most popular screen reader -- thus people like my mother are unable to use this effect. She can use Thickbox (from jQuery) perfectly on most sites since they use it correctly. This fellow does not.
- cephelo, on 10/10/2007, -0/+11To be fair, every light box effect uses CSS. Every single one. This one is not special and it just teaches horrible programming practices.
- misterjangles, on 10/10/2007, -2/+12If you forgive the author for the misleading title - the example is a bit interesting in that it shows how to make a modal dialog pretty easily with CSS. Javascript is clearly used to handle the click event, tho.
- appletalk, on 10/10/2007, -2/+12I think it should be marked as inaccurate nonetheless. The idea is good (if you're just going to use simple overlays, you don't really need libraries), but that doesn't justify the false advertising to spread it.
- toolegittoquit, on 10/10/2007, -7/+16I have an article idea. Screw rifles! Use a piece of metal to kill a deer.
...
Step 3. Aim rifle at deer, pull trigger, and send a fast moving piece of metal at it.
...
Yay. No Rifle needed! Now send money cause I'm a filthy Italian. - stygiansonic, on 10/10/2007, -2/+11Buried as inaccurate. There's a definite use of JavaScript here, and how it's used is basically the same as what many of the "Lightbox" scrips do - albeit in a very minimalistic form.
Additionally, by doing things as the article suggests, there's no graceful degradation. It's usually not a good idea to use inline JavaScript (either onevent attributes or JS within the href attribute) unless you know it won't be displayed when JS isn't enabled. - kingkool68, on 10/10/2007, -0/+8Very true. You can can the link intact by simply adding a return false; to the end of the onclick event.
- jtei, on 10/10/2007, -0/+7The problem with this (compared to other Lightbox implementations) is that this lightbox does not auto center the box if the user scrolls up and down. This is why more JavaScript is needed on other implementations.
- 10goto10, on 10/10/2007, -3/+10Javascript just screwed you back.
- antdude, on 10/10/2007, -1/+7http://duggmirror.com/design/Screw_Javascript_Use_CSS_to_create_a_lightbox_effect/
- indorock, on 10/10/2007, -3/+8not only is there JS, it's inline in a frigging onclick attribute!! Boo.....A for effort, but F for execution. And bury for accuracy.
- mwhoh, on 10/10/2007, -1/+6F- for having to include inline JS in EVERY element you want to use this with. How big of a pain of a pain in the ass is this for every additional element.
Double F- for spraying your JS all over. How about using one set of JS code and maintain only that? - mikeroySoft, on 10/19/2009, -5/+10Hmmm.... href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"
Looks like there's some Javascript in there... not much, but it's there. Way to sensationalize things : ) - Scyth3, on 10/10/2007, -5/+9Now, if only it'd overlay on top of an IE select dropdown box properly...
//adds the iframe behind it - lunchbox170, on 10/10/2007, -5/+9hahahah I love how he says 100% CSS and 0% Javascript and then half way down the page is Javascript...what were you thinking?
- joel.smith, on 10/10/2007, -2/+6And, it doesn't fade in or anything... it just appears. which is gross.
- CMiYC, on 10/10/2007, -1/+4Mark as inaccurate. This method clearly uses Javascript.
- smackhero, on 10/10/2007, -0/+3that's pretty much how the effect is done by everyone. it requires javascript. claiming that it doesn't, when it clearly does, is retarded. there's no point arguing otherwise unless you're retarded as well.
- an10ae, on 10/10/2007, -0/+3Buried as inaccurate.
Inline Javascript. No. Bad.
Unobtrusive good. - mossblaser, on 10/10/2007, -0/+3The 13 yr old 1337 h4x0r5 that seem to dominate these days don't seem interested on interesting comment to do with programming - they'd rather have women moan their IP to them.... There should be some sort of filtering system that lets you filter all articles 50% or more dugg by 13 yr olds... Surely digg has a use for knowing peoples ages...
- Mike89, on 10/10/2007, -0/+3"you can't beat the 13yr olds off for ever."
Dear god man, proofread before you post! - Xerodog, on 10/10/2007, -1/+4Just thought I should mention that the site that the story is on only looks good with IE. They've lost all credibility with me. Buried.
- achoi, on 10/10/2007, -0/+2because it encourages people to inline code. For people starting out, they won't be able to tell the difference between an inline style, accessing the DOM, a node attribute and a piece of javascript. Plus it may be acceptable of it's a one-off. But let's say he's using a gallery - the page weight will climb.
- zeptobyte, on 10/10/2007, -1/+3Yeah, it's using Javascript, so it's technically inaccurate. But it's still a nice, light way to do the effect. It's not as smooth as fading the box in or anything, but it certainly works. If you just want to make a box appear, rather than overlaying the entire page to showcase the box, it would work great.
- lukes, on 10/10/2007, -0/+2of course it does. he said he removed all inline javascript .. into an external file. i think his point is that his example is a better one to follow than the original article.
- Mike89, on 10/10/2007, -0/+2He posted 11 hours ago, most of the people above did not (8 hours ago for most of them).
- InsomniaSlim, on 10/10/2007, -0/+2This "tutorial" and "example" suck. As I said on his blog:
"This won't work if the page has to scroll, man. You need to display this stuff 'fixed.' And it's not very practical with your 25% sizing; images would not be vertically centered. Thing is, I think you know that, which is why your example is so simple. And if you want someone like me to donate, make a more robust example that works and I'll consider it." - Mike89, on 10/10/2007, -0/+2Good job copying and pasting, *****. Same goes for my other reply.
He posted 11 hours ago, most of the people above did not (8 hours ago for most of them).
Stop being a retard. - ThirdPrize, on 10/10/2007, -0/+2I guess you must have reall all the above comments before deciding which one to needlessly duplicate. And as for you lot that Dugg this comment up. I am disappointed in you.
- bowe, on 10/10/2007, -1/+2Hey there's javascript in there! This guy's a phony! Hey everybody, this guy's a big phony!!
- adc86, on 10/10/2007, -0/+1Hey everybody! There he is! He's a big fat phony!
- solinent, on 10/10/2007, -0/+1So you want everyone to reply to the top post? It is inaccurate, so therefore it shouldn't even be dugg!
- nroose, on 10/10/2007, -0/+1I buried this not because it uses javascript, but because I hate that effect. Please don't make it popular so that it shows up on and screws up every web site.
- scrapironjaw, on 10/10/2007, -0/+1As you say, it's not terribly useful since it lacks basic lightbox functionality, but at least your proof of concept is a more creative use of CSS than the original post. Dugg!
- adc86, on 10/10/2007, -0/+1Actually, that's the problem with IE. Position: fixed; is a beautiful thing, so long as you're not using Redmond's browser.
- djcraze, on 10/10/2007, -0/+1Whaa!? Looks like javascript, codes like javascript, functions like javascript.. But wait, it is javascript! Psh, I was excited too!
document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block - HsoKinees, on 10/10/2007, -0/+1ah, ebuyer.com uses this :O
- hackabackrocks, on 10/10/2007, -0/+1buried
- svivian, on 10/10/2007, -0/+1It doesn't work in Opera either, because the focus does not stay with the image when the mouse button is released. But it does show while the mouse button is held down...
- Moby22, on 10/10/2007, -1/+2The "onclick" event is a DOM event. It may call JavaScript, or some other sort of scripting language that may be available to the browser. It may also access DOM attributes and modifiy them, as in this case. But is not necessarily JavaScript.
http://en.wikipedia.org/wiki/DOM_Events -
Show 51 - 100 of 102 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is