ColdFusion UDF for detecting jQuery AJAX operations…
Raymond Camden justed posted an article on detecting jQuery AJAX operation using ColdFusion. I honor of that post, I thought I'd share the UDF I've been using in my application for quite some time:
<cfset var headers = getHttpRequestData().headers />
<cfreturn structKeyExists(headers, "X-Requested-With") and (headers["X-Requested-With"] eq "XMLHttpRequest") />
</cffunction>
The code uses the exact same logic the technique in Raymond's post, but having the code in a function makes your detection code a lot easier to read.
Now when you want to detect if a request came from an AJAX operation, you can just do:
Came from jQuery! :)
<cfelse>
Didn't come from jQuery. :(
</cfif>
Doesn't get any easier than that!
Tool to help improve readability of your website…
One problem that can often come up when designing a web site is problems with legibility of the text on your web site. You might have issues with kerning, line spacing, font size and even the contrast between the foreground text and the background color.
The tool I'm sharing with you today is one to help ensure that you have proper contrast between the foreground text and your background color. The color contrast tool uses the W3C has formulas developed by the W3C to detect sufficient contrast between your text and the background color.
I originally got the idea from the Color Contrast Check tool, and while it's really helpful fine tuning settings, it didn't really help through out some suggestions of colors that are close to my original but that will improve the contrast/brightness differentials.
That's what makes the Color Contrast Tester unique. If your contrast/brightness levels aren't sufficient it'll work on some variations that improve the differential. While the tool isn't perfect, I've found it extremely useful over the past 6 months since I developed it.
Using it is simple, just plug in the hex values for the foreground and background colors and it'll give you your brightness and contrast differences and then suggest some variations that pass what the W3C suggests as being appropriate.
Let me know what you think!
Color Contrast Tester
BlogCFC v5.9.3.000 released…
Well, I'm proud to say I just helped Raymond release a new version of BlogCFC—version 5.9.3.000. Hopefully the "Switzer" edition doesn't become known as the version that made BlogCFC jump the shark. :)
A lot of the mods I contributed were related to the XML-RPC stuff, since I post almost exclusively from Live Writer and only go into the Admin when I need to set up related entries. However, one change that I think everyone might like is I added a "Comments" tab to the entry page. I added this to my version of BlogCFC way back in November of 2007 because I found I was usually trying to find comments related to a specific entry and they were hard to find via the normal comments page.
Here's a summary of the changes:
- Updates/simplification of file pathing determination
- XML-RPC updates (yes, I did test these myself, I don't suck) ;)
- Admin has a nicer warning when settings/cache is updated
- When you edit an entry, you get immediate access to the comments (new "Comments" tab)
- Ability to view an unreleased entry on the blog. This lets an admin see how an entry will REALLY look w/o having to release it.
- Code coloring updates (the blue HTML tag color and Attribute color were so close they looked identical, so I gave the HTML tag a color that adds better contrast)
- HTML entities are cleaned out of the Subject of e-mails and removed from the title shown in the e-mails (probably only an issue if you use a WYSIWYG Blog editor)
Managing JavaScript events/functions using "debouncing"
Yesterday I came across a very timely post by John Hann on Debouncing Javascript Methods. I say timing, because this was a problem I was just getting ready to solve again for umpteenth time—managing rapidly fired events in JavaScript.
I was working on some live search functionality for a page where I was searching DOM elements and populating a list of matching elements. Since this was a "live" search, I'm doing the update as the user types. The trick to this issue is that you don't really want to fire off the process each time the user presses a key, but instead you want to really fire it off when there's been a delay/pause to their typing. If you actually do the processing on each character, many of the calls you're making become quickly invalidating as the input changes so quickly that you end up making unnecessary calls. You'll also see a noticeable slow down in performance if your process is CPU intensive.
You can run into the same issue when dealing with AJAX operations. If you're just updating some portion of the screen based upon some user interaction, you really only want to fire off the AJAX call when the user is done interacting with the element.
This is where John's debounce solution comes into play.
Internet Explorer 8 issues with Compatibility View & EmulateIE7...
So, Internet Explorer 8 was just officially released. First off, I was really impressed with the download speeds. In the past downloading Day 0 releases from Microsoft have always been a bit problematic for me—because of the sheer volume of download requests. However, my download experience was very fast. Kudos Microsoft.
However, one of my main gripes from RC1 is still present—Compatibility view doesn't work consistently. If you're not aware, the following meta tag is supposed to force IE8 to run in Compatibility view:
However, I'm still noticing issues that are inconsistent between adding this to the HTML and a user manually activating Compatibility View for a site.
The quickest way for me to illustrate this is to show you some screenshots.
Internet Explorer v8 to be released today (3/18/2009)
It appears Microsoft is releasing Internet Explorer 8 today at 12pm EDT/9am PDT. I guess I'll have some testing to do today, as I was still experiencing weird issues with the last IE8 candidate I had installed for beta testing.
I'm not sure where they will be posting the full edition at. Currently you can download the last beta (RC1) from their Internet Explorer beta page. I would imagine the full release will show up at http://www.microsoft.com/windows/internet-explorer/, but that's pure speculation on my part.
UPDATE:Looks like the official site for downloading IE8 is http://www.microsoft.com/ie8. Read more at Microsoft Announces Availability of Internet Explorer 8.
ColdFusion v8.0.1 Hot Fix 2 released in Oct 2008
Did you know that ColdFusion v8.0.1 Hot Fix 2 was released back in October of 2008? Yeah, me neither. Fortunately Andy Allan happened to notice that it was available. Not sure why Adobe has this so buried on their site—they don't even have it listed on their ColdFusion Hot Fixes page.
The Web turns 20
While HTTP/HTML isn't quite 20 years old, Tim Berners-Lee first released his Information Management: A proposal dissertation in March 1989—which would later come into full fruition when he put together HTML over HTTP. Berners-Lee idea was simple, create a way to share information at CERN so that information wouldn't get lost with the high turnover. See, the average stay of scientist/researchers at CERN was just 2 years, so lots of ideas and projects would get lost when researchers would leave. He proposed a way for researches to store their documents online in a format that would be easily viewable by everyone.
Who would have thought this paper would have turned out to be what it is today.
Firefox v3.1 gets revamped to v3.5
It appears that Mozilla has decided to reversion 3.1 to 3.5 due to the sheer number changes that have been made. The current Firefox v3.1 Beta 3 is the last version that will be labeled v3.1. There's a 4th beta planned which will be label Firefox v3.5 Beta 4.
"The increase in version number is proposed due to the sheer volume of work which makes Shiretoko feel like much more than a small, incremental improvement over Firefox 3: TraceMonkey, video tag and player support, improvements to user controls over data privacy, significant improvements in the web layout and rendering platform, and much more," said Mozilla's Mike Beltzner in a blog post last week.
This is probably a good marketing idea and I do think there's enough changes in 3.1 to warrant a higher revision number. I suspect most people would have thought that v3.1 was a very minor upgrade, when in fact there's a lot of significant changes—even if most of them are behind the scene (such as TraceMonkey, Web worker thread support, improvements to the Gecko rendering engine, etc.)
Using jQuery to fix CFCHART's tooltip behavior
If you've ever tried using the "mouseover" tipStyle in <cfchart /> with an image, you may have noticed there are several issues with the JavaScript that the WebCharts3D engine generates:
- The position of the tooltips isn't always accurate--if you're got parent elements that are absolutely position from a relative element, the position is drastically mis-calculated
- If your chart happens to be on the right edge of the screen, the tooltips will push off to the right of the screen (both clipping content and creating horizontal scrollbars.)
Here we can see an example of the tooltip running off the screen:
You can see the scrollbar and how the tip goes off the edge of the screen. Obviously, this isn't very usable. To fix the problem, we're going to have to override the native mouse handler functions. Unfortunately, this isn't particularly easy to fix because when the <cfchart /> is executed, it embeds an external call to a JavaScript file which looks something like:
This makes overriding the functions a bit tricky. You can override the functions during the window.onload event, but what happens is you're loading your chart via AJAX? Plus, why load JS you have no intention on using?
The solution is to strip out the <script /> call. You can do this by wrapping your <cfchart /> call inside the <cfsavecontent /> tag. This will give you a string containing the HTML you'll need to embed in the page. You can then use a regular expression to strip the <script /> from the output before writing it to the output stream. What you end up with is some source code that looks like:
<!---// put your cfchart code here //--->
<cfchart width="1" height="1" />
</cfsavecontent>
<!---// we need to output the chart, but remove the call for the external JS library //--->
<cfoutput>#reReplace(trim(sChartOutput), "<script[^>]+></script>", "", "all")#</cfoutput>
By using a regular expression we're able to completely remove the reference to external script that contains the mouse handlers. Now we've got to replace the functionality with code that actually works.
The WebCharts3D script file contains a number of functions, but there are only two functions that are actually used by the HTML generated: xx_set_visible() and xx_move_tag().
The xx_set_visible() function handles hiding/showing the tooltip and the xx_move_tag() function handles positioning the tooltip on the screen.
Since my site is already using jQuery, I'm going to leverage jQuery to handle the positioning of the tooltip. In the new code I'm going to:
- Move the tooltip element (a <table /> tag) as a direct descendant to the <body /> tag. I do this to simplify positioning of the element—since we don't have to worry about positioning of any of the parent elements.
- Set the tooltip element's visibility to "visible"—since it's hidden by default (once again we only need to do this the first time we view a tooltip.)
- Calculate the edges of the screen (with some padding) to make sure my tooltip always stays in the viewport. We don't want our tooltip to ever be cropped or overlap off the screen. If the tooltip would run off the bottom of the page, we'll put the tooltip at the top of the page. If the tooltip would run off the right edge, we'll make sure it can't move any further than the very right edge of the screen (with some padding.)
So what does our code look like? Here it is:
<script type="text/javascript">
// on first show, we need to move to the body
var __xx_set_visible = {};
function xx_set_visible(imgId, tipId, e, show){
// get the table we're going to show
var $tip = $("#" + tipId);
if( !__xx_set_visible[tipId] ){
// move to the body and make visible
$tip.appendTo("body").css("visibility", "visible");
__xx_set_visible[tipId] = true;
}
$tip[show ? "show" : "hide"]();
// make sure we place the tip in the correct location
xx_move_tag(imgId, tipId, e);
}
function xx_move_tag(imgId, tipId, e){
// get the table we're going to show
var $tip = $("#" + tipId);
// get the scroll offsets
var scroll = {top: $(window).scrollTop(), left: $(window).scrollLeft()};
// if we're IE we need to create the e.pageX/pageY events
if( !e.pageY ){
e.pageY = e.clientY + scroll.top;
e.pageX = e.clientX + scroll.left;
}
var pos = {top: e.pageY + 20, left: e.pageX + 10}; // add padding for cursor
var tip = {width: $tip.outerWidth() + 10, height: $tip.outerHeight() + 10}; // add padding for edge
var screen = {right: scroll.left + $("body").width(), bottom: scroll.top + $(window).height()};
// if we're going to be off the screen, adjust the position
if( pos.left + tip.width > screen.right ){
// don't move past most right of screen
pos.left = screen.right - tip.width; // pos.left - tip.width || screen.right - tip.width - 10;
}
if( pos.top + tip.height > screen.bottom ){
// don't move past most right of screen
pos.top = pos.top - tip.height - 15; // since we're moving tip above we need adjust for the original padding we add
}
// position the
$tip.css(pos);
}
</script>
That's all there is to it! Now our tooltips will never run off the edge of the page! Here's the result of our new custom mouse handlers:
Problems viewing CSS files in Aptana Eclipse Plug-in under Vista 64-bit
Last week I upgraded my dev system to a Dell Studio XPS-121M--which comes equipped with Windows Vista 64-bit. For the most part, I had no problems getting my software migrated over to the new box. However, for the first time I went to edit a CSS file this morning in Eclipse and was getting a blank screen.
I'm currently using the Aptana plug-in under Eclipse 3.3 (Europa) and thought something was wrong with my installation (since it was just a copy of the old directory.) After trying a number of things, I came across an open ticket at Aptana that indicates there's a problem with the Mozilla XUL support under Vista 64-bit.
NOTE:The full Aptana Studio was based on Eclipse v3.2 up until Studio v1.3. If you are running an old version of Aptana Studio, you may run into the same issue under Windows Vista 64-bit editions.
To resolve the problem, two fixes mentioned in the ticket worked for me:
- Toggle to the "IE Preview" mode and back. Obviously this fix is a real PITA, but at least I knew I was on the right track.
- Disable the "Firefox Preview" mode (Preferences > Aptana > Editors > CSS > Preview > Uncheck Firefox.) When I first went to this preference, it didn't show either browser. I then unchecked the "Generate temporary files for browser previews", clicked "OK" and then closed all open CSS files. When I went back to the menu, the browsers were listed in the box again.
Since I don't use the Preview mode (although I suppose that might be handy at times) I just disabled the Firefox support. This seems to be working well for the time being.
The good news is this apparently is fixed in Eclipse v3.4 (Ganymede.) However, last week when I was trying to get things up and running I was having problems connecting to the Eclipse update site, so I'm still on v3.3 for the time being. I'll try upgrading again to v3.4 maybe this weekend.
In the meantime, hopefully this helps someone out.
Firefox generating error when opening URL when already running…
Last week my old dev system bit the dust. Since the box was 6 years old, I figured I was better off replacing the unit rather than repairing it—especially considering it was the motherboard that got fried (which would have meant replacing the motherboard, CPU, video card and possible power supply since all components were older technology.)
Anyway, in the process of setting up my system, I finally thought it was time to change from using Firefox 2 as my default browser and use Firefox 3 instead. I've been running both browser simultaneously for a while, but had just kept using FF2 mainly for development purposes.
When I initially set up the new box, I used the same --no-remote technique I had previously blogged about so that I can have both Firefox 2 and Firefox 3 open at the same time. However, whenever I'd try to open up a link from Outlook when Firefox 3 was already running I'd see the following error:
After doing some Googling and not finding anything that matched my issue, it finally occurred to me that the problem might be stemming from the fact that I was initially opening my Firefox 3 instances with the --no-remote switch still.
Sure enough, after removing the --no-remote switch from my quick launch icon, the error went away. I know only start Firefox 2 with the --no-remote switch.
So, if you're seeing the "Firefox is already running, but is not responding." message when you try opening up links from applications (such as your e-mail client) make sure you're not opening your instance of Firefox initially with the --no-remote switch.
Fading a 24-bit transparent PNG in IE7
Internet Explorer 7 has some issues with fading transparent PNGs. If you've gotten to the this page because you're seeing a black border where the transparent edges in your PNG are, then here are some tips for fixing the problem:
- Do not fade the element directly, but fade a parent container holding the PNG. This may mean you need to add a wrapper element to your code.
- Give the parent element a background color.
- Lastly, if you're still having problems, try give your parent element the old "zoom: 1" trick. Give the parent element a style declaration of "zoom: 1" (either via CSS or an inline style.) This will force IE to give the element hasLayout—which tends to fix all sorts of weird display issues in IE7.
The above tips will usually sort out any fading issues I'm having in IE7.
Dynamically generating a table of dates in Microsoft SQL (Part Deux!)
Yesterday I wrote a blog entry talking about dynamically generating a table of dates in MSSQL 2005. My original solution involved common table expressions (CTE) and involved recursion. While there's nothing wrong with using recursion this way, I mainly was using recursion to simplify the UDF code into a single SQL expression.
However, the more I started thinking about the problem last night, I decided I really needed to revise things a bit further. I decided I really needed to have the query return both a start and end date for each row in the recordset—as this would make it much easier to things such as find all the orders placed during each hour of the day.
So, this morning I came in and re-wrote my query and optimized a few things. The first thing I did was remove the recursion, so this UDF should now work in SQL Server 2000 as well as SQL Server 2005. It's important to note that you could do the same thing with a physical table, but for my uses my date range table generally would only include at most a few dozen rows and there's not enough of a performance difference to warrant the pain of maintaining a table of every date and possible combination you may want to return aggregate results over.
The new code looks like this:
Dynamically generating a table of dates in MSSQL 2005
[UPDATED: Thursday, January 08, 2009 at 11:04:25 AM]
UPDATE:I've revised this concept, so please see the new version: Dynamically generating a table of dates in Microsoft SQL (Part Deux!)
I'm working on some code where I need to show some trend date over various periods of time. One of the issues with working with SQL and aggregate values is that it'll only show you values where there was some data, so if you want to print the number of orders on each day and some days had no orders, they wouldn't show up in the results.
For what I was working on, I needed to ensure that even missing days would show up in my query results. This got me thinking about the best way to accomplish this task. After thinking about the problem for a while, I decided the ideal method would be if I could dynamically generate a table of dates that I could then use in a LEFT OUTER JOIN.