A Graphics String Theory

For those of you that don't know, my first passion is graphic design. And I thought I would take a little break from all my programming articles and show you a nice little Photoshop CS3 trick. This tutorial will explain how you can create those nice little glowing strings or streamers that you see in a lot of commercials and print ads lately. If your not familiar with what I'm talking about, take a look at the final image below.

The image on the left is our Base image or starter file. On the right we have the Final image with our stream effect applied.

[More]

msgBox v1.0 JS

It's funny how I come about my projects. This one started after someone discovered the FireFox bug in my FormFieldinator framework. The error has to do with the a form field losing focus after you call an javascript alert or confirm window. I started to wonder if I could create a custom messaging system that would avoid this problem. And then at the same time, I had a client that wanted to show a window on their website asking their users to fill out a survey.

All of this led me to create a javascript messaging framework called msgBox. Now, it hasn't been fully tested and I'm sure some of you are going to point out improvements or <gasp> problems. But I think it's a good start. So without further adieu, let me introduce to you msgBox v1.0

[More]

A "Remove MS-Word Formating in tinyMCE" Callback

Ok first let me explain that this is a quick hack. I use tinyMCE to allow my customers to edit most of the content on their websites. One of the things I hate about tinyMCE is that it was created to mimic MicroSoft Word, not to be a HTML editor. With that being said, I hate that tinyMCE is trying to mimic MS-Word. I want to give my clients the ability to edit the content on their site, and I would like that content to be simple HTML, not complicated MS-Word syntax. And one of the things my clients love to do is paste content into the tinyMCE editor window from MS-Word.

Well this little hack does it's best to remove/re-style what they paste in. Just add this function in your javascript (ideally above the tinyMCE.init() declaration:

[More]

setAttribute("style","YOUR STYLE INFO")

I'm right in the middle of a couple of large projects right now, hence the lack of posts lately, but I wanted to share a little problem I just ran into with everyone.

I like to keep my JavaScript condensed, so I like to use setAttribute for style information. But one of my clients reported a problem with a simple survey window I created recently. Apparently, Internet Explorer (go figure) wasn't playing nice with the script I created.

I tracked the problem down to using "setAttribute" to set an objects style. Here's an example of what I had:

var box = document.createElement("div");
box.setAttribute("id", "mySurveyBox");
box.setAttribute("style","margin: 0; padding: 0"); 
mainBox.appendChild("box");

For whatever reason, it worked in Safari and FireFox, but IE was not displaying the style information. Everything else I used setAttribute on seemed to set properly. Like the objects "ID" attribute.

The fix for this was simple. I just needed to set the style information directly instead of using the setAttribute method. Here's what the new code looked like after the fix:

var box = document.createElement("div");
box.setAttribute("id", "mySurveyBox");
box.style.margin = "0";
box.style.padding = "0";
mainBox.appendChild("box");

Not sure why IE has problems with this, but I thought I would share, in case anyone else ran into the same problem. If anyone has any insight into this problem, I would love to hear about it.

To "===" or not to "=="

About 6 months ago, I came across an online tool called JSLint. It's a JavaScript program that looks for problems in JavaScript code. I began using it to check most of my scripts to see if I had any errors in them (I know, I know... you thought I was perfect). Well as it turns out, I had a lot of little mistakes, like using a function or object before it was defined or little formating issues. But one error I kept receiving made no sense to me and I honestly didn't understand why I was getting it.

Expected '===' and instead saw '=='.
Expected '!==' and instead saw '!='.

Granted, it wasn't like I didn't understand how to fix the issue, but JSLint wasn't very forthcoming on why I needed to make these changes. So, without fully understanding what was going on, I began using "===" and "!==" whenever I needed to make a logical comparision. And I've been doing this for the past 6 months, without a clue as to "why".

[More]

Beginning Javascript with DOM Scripting and AJAX

In my lifetime I can honestly say that I have only bought two books on JavaScript programming. The first one was called "Special Edition: Using JavaScript" [Que-1996]. This was basically a reference book that described, and provided an example of, every function and method in JavaScript at that time. I don't think I have opened this book in about 8 years.

During this time, I have relied heavily on Google to provide information on any new tips and tricks that have come out. If I came across something that intrigued me, I would spend countless hours learning all I could from the internet.

[More]