www-128.ibm.com— Full simple code examples for dynamic elements for your web apps, including: Ad boxes, Pop-ups, Spinners, and Tabs. (ways to show and hide content on the page)
May 4, 2006View in Crawl 4
This 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!
That 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.
A 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 <a class="user" href="http://jibbering.com/faq/#FAQ4_24">http://jibbering.com/faq/#FAQ4_24</a>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.<a class="user" href="http://www.jslint.com/lint.html">http://www.jslint.com/lint.html</a>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 <a class="user" href="http://validator.w3.org/">http://validator.w3.org/</a>
mdwvtMay 5, 2006
This 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!
bajonesMay 5, 2006Submitter
That 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.
ipearxMay 5, 2006
I've just been playing with a spinner type solution, check it out here with the login button:<a class="user" href="http://bla.st/">http://bla.st/</a>If you turn off javascript, it simply displays the hidden divs by default.Here's the Javascript:<a class="user" href="http://bla.st/javascript.js">http://bla.st/javascript.js</a>
bogthaMay 5, 2006
A 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 <a class="user" href="http://jibbering.com/faq/#FAQ4_24">http://jibbering.com/faq/#FAQ4_24</a>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.<a class="user" href="http://www.jslint.com/lint.html">http://www.jslint.com/lint.html</a>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 <a class="user" href="http://validator.w3.org/">http://validator.w3.org/</a>
cmiller1May 8, 2006
Should I seed a torrent for the beta of Web 4.0?
ipearxOct 15, 2006
(Sorry this example isn't available any more...)