Scaling an Image to Fit or Fill a Destination Box

One of the most requested functions that my customers seem to ask, is that they want to upload their own images to the website. Technically, it's not difficult, especially if your using a server technology like ColdFusion, php, etc, but from a design perspective, it's a big headache. When designing a website, you create "blocks" (for lack of a better term) that are either going to be used for text or images. You might use an image editing programing like Adobe® Photoshop® to scale and crop the images to make sure they load fast and fit into the block's dimensions. Unfortunately, most of our customers do not have these tools and wind up trying to upload an image that are to large and weren't really designed to fit within our designated "block".

We needed to create a function that would take our customers uploaded image and scale it into these blocks. Not knowing what the customer was going to upload, we had to create something that was dynamic enough to adapt to what ever size the final destination image was going to be and also to the source image the user uploads.

[More]

A "Remove MS-Word/Safari Formating in tinyMCE" Callback (Revisted)

If you took a look at my last hack to force tinyMCE to remove/re-style content that a user would paste in, then you may have noticed it was a resource hog. The script worked fine, if the content length was small, but because my implementation used the tinyMCE "onchange_callback", you would start to have a slight lag on changes made on content that was bigger in length.

I decided that instead of trying to force tinyMCE to fix my problem, it made more sense just to check the content before the form was submitted.

This script is a little more robust than my previous one. Keep in mind that you can add/remove your own clean-up code to fit your needs:

[More]

cfHitman Tip & Trick

One of my clients is using the cfHitman v1.0 ColdFusion script I created to track various links on their website. They use about 15 domains that point people to different areas of their site and they we're curious if they could use the information gathered through the script to determine the total hit counts for each domain.

We sure can. cfHitman is recording the entire path, so all we need to do is perform a little SQL QUERY magic to group the results for the domains.

<cfquery datasource="#APPLICATION.DSN#" name="GetHits">
SELECT id, link, COUNT(hits) AS total_hits, IF(LOCATE('/',link,9)>8,Left(link,LOCATE('/',link,9)-1),link) AS domain
FROM tblbloghitman
GROUP BY domain
ORDER BY total_hits Desc
</cfquery>

Basically, all we are doing is trying to determine if the stored "link" contains a "/" path seperator. If it is, then we take it's position and find the left portion of the string up to that index number. If not, then we know that the stored "link" is the domain. We cast this result as the "domain" variable, which can then be used to group all those results.

Sheesh, I hope that makes sense. Well, trust me, it works. Let me know if you have any problems.

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.