Web design articles, tutorials, and more.
To make the web impressive.
Scripting
Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
By Louis Lazaris on March 1st, 2010
Categories: Scripting, Web Design Articles | 7 Comments >
Although the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.
Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.
Avoiding Problems With JavaScript’s getElementById Method in Internet Explorer 7
By Louis Lazaris on July 31st, 2009
Categories: Scripting, Web Design Articles | 12 Comments >
Every week this website gets about 700 unique visits from Google searches, mostly from people searching for solutions to problems with JavaScript and CSS. I’m flattered, and I hope I can continue to publish useful articles that will assist people and help with the exchange of ideas and techniques. One search phrase that leads surfers to my site pretty much every day is something along the lines of “getElementById explorer 7″.
If you type this phrase into Google, Impressive Webs currently comes in at around result 115. Not to mention the fact that the article that comes up doesn’t really address this issue directly. That’s not a very good ranking for that search phrase — yet somehow people are still finding one of my pages through that search.
It is obvious that developers — likely beginners — are having issues getting the proper results when utilizing the getElementById method available in JavaScript, particularly in Internet Explorer versions 6 and 7. And since the users seem to be searching through dozens of web pages looking for a solution to their particular problem, then obviously the pages discussing this JavaScript method are either too confusing or don’t specifically provide a practical solution.
A Consideration of Variable and Function Scope in JavaScript
By Louis Lazaris on July 9th, 2009
Categories: Scripting, Web Design Articles | 3 Comments >
Many aspects of JavaScript code development are taken for granted, and scope is really no different. Of course, in many cases where minimal code is required, variable scope (or function scope) is a non-issue. But if you’re planning to get into larger application development with JavaScript, then you need to understand at least the basics on scope in JavaScript.
Using some simple code examples, I’m going to run through the basics of scope and try to give beginning to intermediate JavaScript developers a better grasp of this very important concept.
10 JavaScript Quick Tips and Best Practices
By Louis Lazaris on July 1st, 2009
Categories: Scripting, Web Design Articles, Web Standards & Best Practices | 14 Comments >
Recently, a few blogs and tutorial sites have posted some really good articles on JavaScript tips and best practices, and I thought that was a good topic that could easily be expanded upon. So I put together a list of 10 fairly simple JavaScript tips and best practices of my own.
I tried to include stuff that was not mentioned in those other posts, but I’m sure there is a little bit of overlap. Keep in mind that these are brief tips and recommendations, so I don’t go into great detail about the reasons and such, but I may go into some of them in depth in future articles and tutorials.
In the meantime, please enjoy this list of tips, recommendations, and best practices for JavaScript coding.
10 Essential DOM Methods & Techniques for Practical JavaScript
By Louis Lazaris on May 20th, 2009
Categories: Scripting, Web Design Articles | 11 Comments >
Whether you use a JavaScript framework, or you are a purist and always resort to coding your client-side scripts from scratch, there are certain DOM syntaxes with which you should be at least a little bit familiar.
It’s true that a library like jQuery or MooTools will perform these methods for you, behind the scenes. In fact, if you rely on JS libraries for virtually all your JavaScript code, you’ll rarely have to use any of these methods directly.
But the reality is that, whether we develop as freelancers or work for a development firm, we may not always have the luxury of working on fresh projects where we can pretty much do what we want; we may have to maintain sites that rely on “obtrusive” scripting methods, or, for one reason or another, we may not be permitted to use certain libraries.
Whatever your situation, the following review of various practical DOM methods will hopefully serve to bolster your JavaScript knowledge and possibly help you more readily see practical solutions to various client-side issues.
7 JavaScript Differences Between Firefox & IE
By Louis Lazaris on April 27th, 2009
Categories: Scripting, Web Design Articles | 22 Comments >
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.
JavaScript-Powered HTML Table Code Generator
By Louis Lazaris on April 13th, 2009
Categories: Markup & Style, Scripting | 7 Comments >
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.
Must-Use Methods to Spam-Proof Your Email Address
By Louis Lazaris on June 25th, 2008
Categories: Markup & Style, Scripting, Web Standards & Best Practices | 3 Comments >
Working for a busy web development & hosting company exposes me to the sad fact that well over 90% of website owners today do virtually nothing to protect themselves from email spam. Spam filters are good, and they’ve come a long way, but they are not the perfect solution — far from it. Even with a close to perfect spam filtering system in place (which never happens), users will still be inclined to waste time sifting through junk mail just to ensure that nothing was incorrectly filtered.
In this post, I’ll describe a few solid methods to ensure that your email address will not be harvested by “bots” or other automated programs that harvest emails from naive website owners.
Equal Column Height Using JavaScript
By Louis Lazaris on May 29th, 2008
Categories: Graphic Design & Layout, Markup & Style, Scripting | 1 Comment >
I’m currently working on a project that requires that I use either some very tricky CSS or else JavaScript to make a left column div expand automatically to fit its parent container. The parent container and left hand nav appear on multiple pages, and there is different content, including that which is dynamically generated, so I cannot just add a height to both elements in the CSS.
