Although the days of long and tedious code branches to target specific browsers in JavaScript are over, once in a while it’s still necessary to do some simple code branching and object detection to ensure that a certain piece of code is working properly on a user’s machine.
In this article, I’ll outine 7 areas where Internet Explorer and Firefox differ in JavaScript syntax.
Doing front-end development for a full service web design company means I’m often involved in very high-end, corporate websites that require styling “call to action” (CTA) or “promo” areas on the home page. These areas usually consist of 3 or 4 boxes that are most likely going to change at some point, and the client might even ask for one or more of the CTA boxes to include dynamic content. What is often troublesome about these boxes is that, more often than not, they don’t contain consistent content. They might have different colored titles, different background images, variations in text size, and so on.
If we’re not careful, our CTAs can suffer from divitis, too many attributes, and CSS-overload. In this tutorial, which is mainly aimed at CSS beginners, I’ll teach you how to create a nice clean CTA that is easy to modify and contains minimal styles and markup.
As an alternative to “faux columns” and other not-so-clean methods for attaining equal column height in CSS layouts, this tutorial will explain how to accomplish equal columns with pure, unobtrusive JavaScript. This method takes into account top and bottom border thickness as well as interior padding so that the two columns are exactly the same height in virtually every circumstance. And the script is written to ensure that the columns will equalize regardless of which one is taller, so it’s very practical for dynamic content with complex background styles.
This is a full tutorial that expands on a previous post where I outlined a very rudimentary method to achieve equal columns using JavaScript. In the previous article, I discussed the various benefits and drawbacks to using JavaScript for this issue, so I won’t repeat those here.
Recently I searched Google to try to find an HTML table code generator that would let me easily create an HTML table quickly and efficiently, similar to how Dreamweaver does it — but with more customization options that are in line with the the latest in web standards and best practices. I also wanted to be able to enter my data right inside the code generator itself, and not have to copy the code with empty cells, then tediously cut and paste all the data into the individual cells. I found a few options that were reasonably good, but I decided instead to build my own HTML table code generator using pure, (sort of) unobtrusive JavaScript. The entire table and data insertion would take place on the client side and be fully customizable and easy to use.
Well, after about 5 or 6 hours of blood sweat and tears (not really, it was fun), I’ve completed what I feel is one of the most efficient and useful table code generators available on the web. I know what you’re thinking: tables aren’t used very often these days by top web developers, and all HTML editors provide good support for table code generation. But the customization I’ve added and the ease with which the data can be inserted I think is worth giving it a try.
