Sponsored by Best Buy
He sings, he strums, and he works at Best Buy. view!
www.youtube.com/bestbuy - Musician and Best Buy employee, Keith Parsons, rocks his Best Buy holiday campaign audition.
28 Comments
- ext237, on 10/12/2007, -2/+11Oh, great. Examples of how to create more ad pop-ups. Thanks IBM, way to go. Great use of JS. Thats what the web needs. More pop-up ads.
- pornel, on 10/12/2007, -0/+8It doesn't allow fallback, so such links are useless when user tries to open them in new tab/window or when bots try to crawl them.
It doesn't separate content from behaviour (it's the same problem as mixing content and presentation. CSS solves that for presentation and DOM solves it for behaviour).
Here are good examples and solutions:
http://www.onlinetools.org/articles/unobtrusivejavascript/ - pornel, on 10/12/2007, -0/+7No, [a href="#nonsense"] is nonsense as well. Make it [a href="meaningful-link" onclick="process(this.href);return false"] or better use DOM functions to attach onclicks, so you won't have to repeat them all over the place.
- bajones, on 10/12/2007, -0/+6I'm pretty much a js beginner. So what's wrong with using ...href="javascript:...) to call functions and what's the best alternative?
Nice links btw. - trovster, on 10/12/2007, -1/+7Javascript shouldn't appear in the HTML, just like style (CSS) shouldn't appear in the HTML. Using Javascript within a href is the worse abuse, better is using the onclick attribute, but the best method is completely unobtrusive and resides in the external Javascript file. You loop through the anchors (or get the one you want with getElementById) and add behaviour, such as onclick, there. You can also stop the link firing to the default (href="location") in Javascript.
- carguy84, on 10/12/2007, -0/+6bajones, just add "return false;" to the end of your onclick:
[a href="valid-link.html" onclick="someFunction(); return false;"]link[/a]
javascript is going to process the onclick before it processes the href. and once the engine hits return false;, nothing is executed after that, so href is never taken into consideration. This will also allow non javascript enabled browsers to function.
Chip- - pornel, on 10/12/2007, -3/+7How to recognize clueless JS programmer? By [a href="javascript:"]. It's all over that crappy article. Don't bother.
Better read about object-oriented JS programming: http://www.crockford.com/javascript/
and check how neatly DOM can be used: http://jquery.com/ - dkarlson, on 10/12/2007, -0/+2To be fair, I can see where popups can be used to provide information, and not to serve ad content. Of course, most folks use it for that...
- gekkokid, on 10/12/2007, -1/+2why promote ads and popup crud?
- strictnein, on 10/12/2007, -1/+2And why exactly does that matter?
- cmiller1, on 10/12/2007, -0/+1Should I seed a torrent for the beta of Web 4.0?
- bajones, on 10/12/2007, -2/+3That was my problem. I was using for a small ajax app. When I used href="#" onclick...., the browser would jump back to the top of the page before calling the function. Using href="javascript:.... solved that problem. But as I said. I'm a beginner and I wouldn't know the right way to solve this.
- cbeach, on 10/12/2007, -3/+4There's no such thing as "Web 2.0" god dammit! Even DHTML is a worthless term. We're looking at a bit of JavaScript, CSS and HTML - that's all.
http://www.chrisbeach.co.uk/core/scripts/entryViewer.php?ID=13433 - Bogtha, on 10/12/2007, -0/+1A few suggestions:
You don't need javascript: for onload/onclick/etc attributes, in fact I believe it is incorrect to do so. Just put the plain JavaScript in there.
Using onload/onclick etc attributes in the first place is usually a mistake - if you re-write the JavaScript to attach the event dynamically, you'll be able to use the script for multiple pages without altering them. For instance, use class="foo" for the login div element, and then have your JavaScript look for the elements with that class and process them appropriately. You don't need to hard-code each page to use your JavaScript.
Don't use javascript: for href attributes either. See http://jibbering.com/faq/#FAQ4_24
In fact, if you ever use 'javascript:' anywhere, it's almost certainly a mistake. If you catch yourself typing it, consider that a big warning sign that you are doing something wrong.
This isn't a "spinner". The article got its terminology wrong.
This code:
if (el.style.display == 'none')
...is usually wrong. It only works in most browsers if you have explicitly set el.style.display with the JavaScript. What you want to use is document.defaultView.getComputedStyle(), although that's unsupported by Internet Explorer, which offers the style, runtimeStyle and currentStyle properties for similar purposes.
Not declaring local variables in JavaScript is bug-prone. For example, the line:
el = document.getElementById(id);
If there is a pre-existing 'el' variable in global scope, then it will overwrite that variable. What you want is:
var el = document.getElementById(id);
You can find errors like this with Mozilla or Firefox by going to about:config and setting javascript.options.strict to true, or by using something like JSLint.
http://www.jslint.com/lint.html
It's good practice to use the LABEL element type for form control labels.
You put the doctype line before the opening tag for the HTML element, not after. You can catch errors like this by using a validator like http://validator.w3.org/ - Bogtha, on 10/12/2007, -0/+1I agree, this is a crappy article with crappy code. It's invalid, it doesn't degrade gracefully, it breaks with common interactions (e.g. opening a link in a new tab), and it mixes HTML, CSS and JavaScript into the same document.
It's a shame, because IBM developerWorks usually has fairly decent JavaScript articles. This one is *terrible*. If you are a newbie, please avoid it, it will only cause you to introduce bugs into your website. - ipearx, on 10/12/2007, -0/+1(Sorry this example isn't available any more...)
- ipearx, on 10/12/2007, -0/+1I've just been playing with a spinner type solution, check it out here with the login button:
http://bla.st/
If you turn off javascript, it simply displays the hidden divs by default.
Here's the Javascript:
http://bla.st/javascript.js - joethepeacock, on 10/12/2007, -1/+1Web 2.0 doesn't refer to a type of technology or protocol, chris. It refers to a "movement," a new direction.
- StephnDolenc, on 10/12/2007, -2/+2same here; however, i purchased "sams teach yourself php in 24 hours," "php hacks," and "ajax hacks" and I'm actually learning (and implementing) the exact stuff that this website teaches. I definitely recommend all three of those books for beginners -- learn php instead of just copying and pasting code
- mdwvt, on 10/12/2007, -2/+2This is actually the kind of thing I've been looking for as I'm about to start working on my own DHTML/PHP/AJAX web project. I really digg this one because the examples are really simple but still really good!
- quade, on 10/12/2007, -1/+1Amen brother!
Web2.0 (or as it gets called around here, AJAXCSSNo-TablesW007!) is a stupid notion concocted by people that came into web development late. There's been about 3 or 4 of these Web2.0 "movements" since the mid-90's, and everyone thinks that since there's some new technology (Javacsript, CSS, AJAX, etc.) that this is the *only* way to do it now.
There's nothing "wrong" with using href="javascript:... (though, for enterprise-level development, you should probably just attach events to named elements). Remember: the only thing "wrong" about one method or another is
1) what you don't like
2) what your senior developer on staff tells you not to do - tybris, on 10/12/2007, -3/+3I remember when I made my very first homepage 10 years ago. It had all those things on it (except for the PHP that is).
- QuickGold, on 10/12/2007, -0/+0Anyone have a better example of the spinner for a HTML (not php) solution? Thanks
- srg13, on 10/12/2007, -2/+2Probably something like:
[a href="#" onclick="function"]text[/a]
If you want, you can make the href="javascript:void(0)" - Buckets, on 10/12/2007, -3/+2Web 2.0? That's so last week. I'm on Web 3.0
- bryanl, on 10/12/2007, -3/+1This is a pretty good beginners article. I don't agree with everything said, but the principals are there.
- anagai, on 10/12/2007, -4/+0Good for absolute beginners. Obviously attempt to get traffic to there site for some dark sinister reason. I forget, what does IBM sell again? typewriters? There still around? yes, open source is going to save IBM. billions are just waiting for them
- diggforecast, on 10/12/2007, -18/+3Cool, This article made to frontpage and no comments yet!! Anyways, nice article!!!


What is Digg?
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official