After DOM manipulation, form fields won't post...
This is an issue I first ran into several years ago, but I've recently helped two different people who had the same problem and thought it was worthy of blogging.
If you run into a situation where form fields are not getting posted to the server after the DOM has been manipulated, check to make sure the <form/> element is in a valid location. If the <form/> tag resides as a direct child of either a <table/> or <tr/> element, then you will encounter problems posting the form once a child element of the <form/> element has been dynamically modified.
While this behavior does not occur in IE, it does happen in other modern browsers—such as Firefox and some WebKit-based browsers.
Any of the following will break your form post submission:
<table><form><tr> .... </tr></form></table>
<table><tr><form> .... </form></tr></table>
<table><tbody><form> ... </form></tbody></table>
To correct the problem, just place the <form/> tag outside of the <table/> tag:
<form><table><tr> ... </tr></table></form>
This type of markup usually appears on older sites, where I believe the intent of putting the <form/> tag inside the <table/> was to prevent any visual margins from being seen. Obviously, it's easy to remove the margins using CSS and this type of invalid markup can only come back to haunt you.
NOTE: You can do <table><tr><td><form> .... </form></td></tr></table>. That's perfectly valid HTML. You just need to make sure the <form/> tag is placed somewhere were visible text is allowed.
Refreshing Eclipse Workspace using ANT
I was looking for a way to programmatically refresh some specific folders in my workspace anytime I ran my ANT script. Eclipse provides several ant tasks that you can use for various purposes, once of which is the <eclipse.refreshLocal /> tag:
<eclipse.refreshLocal resource="MyProject/MyFolder" depth="infinite"/>
- resource is a resource path relative to the workspace
- depth can be one of the following: zero, one or infinite
However, when I first tried adding this task to my ANT script, I was getting an error that looked like:
BUILD FAILED
c:\path\folder\build.xml:85: Problem: failed to create task or type eclipse.refreshLocal
Cause: The name is undefined.
Action: Check the spelling.
Needless to say, I was pretty confused. So after some brief research, it turns out I accidentally running ANT outside of the Eclipse JRE. To fix this, go open up the External Tools Dialog (Run > External Tools > Open External Tools Dialog...) and make sure the JRE tab is set to "Run in the same JRE as workspace."
I'm not sure how that setting got changed, but I'm glad I found the fix. This also has sped up the first time execution of my ANT scripts.
Do not trust Google's link: operator
I've noticed this behavior for a while, but was just asked about this by a co-worker. The Google link: operator does not really work as most people expect and certainly not the way I originally expected it to work. Google has this to say about the link: operator:
The query [link:] will list webpages that have links to the specified webpage. For instance, [link:www.google.com] will list webpages that have links pointing to the Google homepage. Note there can be no space between the "link:" and the web page url.
Notice they don't explicitly say anything about the accuracy or volume that will be returned, just that it will return pages that have links. Well, that's not even really true. Sometimes it will return empty results (even when there are legitimate external links to a page (could be even thousands of links.)
If you're really trying to find external links to your site, the best method Google provides is via their Google Webmaster Tools (see How can I see links to my site?.) Even this method apparently won't reveal all external links, but it's much more accurate.
If you have any great tips for listing external links, make sure to share them in the comments.
Running Firefox 2 and Firefox 3 simultaneously
I've been running my different versions of Firefox under different profiles, that way I can keep each instance unique. This works great, but I still couldn't figure out how to open both Firefox 2 & 3 at the same time. Turns out I was missing the -no-remote command line parameter in my Firefox 3 shortcut.
Here's a great write up on how to run Firefox 2 and Firefox 3 simultaneously—which provides you with full instructions on setting your shortcuts up so you can run Firefox 2 & 3 at the same time.
Multicolumn Dropdown jQuery Plug-in Released!
Back in April, I posted a preview of a multicolumn dropdown plug-in I was developing for a project at work. Well today we finally officially released the mcDropdown plug-in. I was hoping to release the plug-in sooner, but other projects took precedence and releasing it just got delayed.
I'm really proud of the plug-in and think it provides a really unique form control.
Here's a list of the features:
- Creates a multi-column hierarchical select UI component
- Binds a text input field or div element to a list element (included nested lists)
- Menus are automatically split into columns as needed
- Menus are positioned to always stay on the screen
- Autocomplete keyboard entry (only valid options are allowed)
- Menu automatically scrolls into viewport when opened
You can view a live example over at the plug-in page.
mcDropdown jQuery Plug-in
If you like what you see, make sure to digg it.
Firefox 2 & 3 custom icons...
Now that Firefox 3 has been released, I really wanted a couple of icons that I could easily identify as either v2 or v3 for my Windows Quick Launch bar. Since I couldn't find any icons out there, I threw together 2 icons which just add the version as an overlay to the original Firefox icon.
I'm not a designer or artist, so I'm sure I could have selected better colors of green, but the contrast works well for what I needed. I can now clearly see which version of Firefox I'm getting ready to load up.
Hopefully someone else will find the icons useful.
Download Firefox 2 & 3 icons for Windows (.ico)
Firefox 3 finally released...
It looks like Firefox 3 is officially released. The servers are a bit overwhelmed at the moment, so you need to use a little perseverance to get the download pages to come up. I think there may be some delays in propagation of the actual Firefox 3 download page as well.
TIP: The fastest way to open files in Eclipse...
This is not a new tip, in fact I'm pretty sure I've blogged about it in the past, but the fastest way to open a file is via the "Open Resource" dialog box. Pressing [CTRL]+[SHIFT]+[R] opens the dialog box, which allows you to free form type a search string that will show you all the files that match your search string.
This is extremely handy when you know the name of the file you want to open and have lots of resources or just tons of files in your projects. I deal with several really large projects and this is almost always faster than opening the file via the Navigation View.
Getting the URL/web folder path in ColdFusion
Raymond Camden blogged about a question someone had about getting the folder path for the current template. While Raymond addressed how to get the OS path, how would you get the URL path? So, if you had your user was on the URL http://www.example.com/some/folder/and/file.cfm, how would you go about getting the "/some/folder/and/" path?
While there are always many ways to solve a problem, I've tried to come up with a solution that should work for any version of ColdFusion from 6.0 and above. I wanted to avoid using CGI variables (since those vary by webserver,) so I went with using getPageContext() instead.
Here's the solution I wiped up:
<cfargument name="url" required="false" default="#getPageContext().getRequest().getRequestURI()#" hint="Defaults to the current path_info" />
<cfargument name="ext" required="false" default="\.(cfml?.*|html?.*|[^.]+)" hint="Define the regex to find the extension. The default will work in most cases, unless you have really funky urls like: /folder/file.cfm/extra.path/info" />
<!---// trim the path to be safe //--->
<cfset var sPath = trim(arguments.url) />
<!---// find the where the filename starts (should be the last wherever the last period (".") is) //--->
<cfset var sEndDir = reFind("/[^/]+#arguments.ext#$", sPath) />
<cfreturn left(sPath, sEndDir) />
</cffunction>
If you just call getWebPath() it will return the current web folder path for the current base template.
We use a regular expression to strip out additional path info information that can sometimes be present for people using SEO-friendly URLs. For example, the URLs on my site appear like: http://blog.pengoworks.com/index.cfm/2006/9/27/CFMX-UDF-Parsing-a-URI-into-a-struct which returns a path of /index.cfm/2006/9/27/CFMX-UDF-Parsing-a-URI-into-a-struct. We need the regex to find the last period in the string and assume everything else is additional path info. The default regex should work in the vast majority of cases, but you can adjust it for the corner cases.
You can also manually supply a path such as: #getWebPath('/index.cfm/2006/9/27/CFMX-UDF-Parsing-a-URI-into-a-struct')#. This would return "/" as the web path.
Anyway, hopefully some of you will find this little UDF useful.
UDF: Convert ColdFusion Date to JavaScript Date Object
I had the need to convert a ColdFusion date/time stamp to a JS Date Object. I thought serializeJSON() function would handle this, but it turns out it treats CF date/time variables as strings. The toScript() function will convert CF variables to JS Date Objects—provided that the date/time variable is in ODBC format (i.e. {ts '2008-05-02 13:32:16'}.)
However, I wanted something that would work for anything that ColdFusion saw as a Date object, so I just whipped out this little 4 line helper function:
if( isDate(date)) return 'new Date(#year(date)#, #(month(date)-1)#, #day(date)#, #hour(date)#, #minute(date)#, #second(date)#)';
else return "null";
}
If ColdFusion doesn't see the date as a date object, then it'll set the date/time to "null". To use this function you just do:
var today = <cfoutput>#jsDateFormat(now())#</cfoutput>;
</script>
This would then generate the following:
var today = new Date(2008, 4, 2, 13, 32, 16);
</script>
Obviously this is pretty straightforward, but it's saved me a lot of repetitive typing today and simplified the readability of my code.
UDF for converting a PDF page to Images using CF8 & Java
[UPDATED: Monday, November 21, 2011 at 8:33:18 AM]
I'm working on a project where I'm trying to create thumbnails for documents the user uploads. Since CF8 has introduced the <cfpdf /> tag, I thought it would be pretty straightforward to turn page 1 of a PDF into a thumbnail image—turns out I was wrong.
While the <cfpdf /> does work, it was causing me to jump through some various hoops some of which I could easily overcome. The issues I had were:
Safari CSS :hover and Adjacent Sibling Selector Bug
I recently discovered a bug in Safari (Mac and PC) related to use the :hover pseudo class in conjunction with an adjacent sibling selector. The problem is that the mouseover event correctly changes the adjacent sibling's style, but when the mouseout event occurs the style is never reset. This means if you have the selector ul li:hover + li the adjacent selector's (+ li) style will be changed when the user hovers over the element, but the style is never reset once the user mouse's out of the element.
I've tested this CSS selector combination in IE7, IE8b1, FF2 (PC and Mac) and FF3b4 and in all those browsers when the mouse leaves the element being hovered, the style of the sibling element is reset to it's original state.
One problem with stating this as a "bug" is that I believe the CSS spec is unclear on what the correct behavior should be, but I do believe that the other browsers got this right. I definitely expect any visual changes applied to the screen on the :hover pseudo class to be undone when mouse leaves the target area.
It turns out I'm not the first to find problems with Safari's implementation of the :hover and adjacent sibling selector.
To see this bug in action, move your mouse pointer from the bottom of the list to the top. If you move from top to bottom you will not see the bug since the style is correctly reset once you mouse over the sibling element.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
Here's what the CSS looks like behind the scenes:
ul {
margin: 0;
padding: 5px 5px;
list-style-type: none;
width: 250px;
height: auto;
background-color: #e1e0e0;
/* define font here for IE6 */
font: 11px Arial, Helvetica, sans-serif;
}
ul li {
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 20px 2px 6px;
margin: 0 10px;
}
ul > li.end {
border-bottom: 1px solid #fff;
}
ul > li:hover {
border-top: 1px solid #999;
background-color: #999;
color: #fff;
}
ul > li:hover.end {
border-bottom: 1px solid #999;
}
ul > li:hover + li {
border-top: 1px solid #999;
}
</style>
Odds are high that you might never run into this bug, but I'm working on a menu system that requires a pretty complex CSS rule set and this bug is causing me serious problems in Safari. I may end up needing to implement a JS in order to resolve the problem.
Smashing Magazine's 35 (Really) Incredible Free Icon Sets
Smashing Magazine recently posted a an article on 35 (Really) Incredible Free Icon Sets. There's a number of sets I haven't seen. The one that immediately caught my eye was pinvoke's PI Diagona Pack.
It comes with 200 unique icons in two different sizes (10x10 and 16x16.) It has a similar look to the famfamfam set of icons called Silk. Here's what the icons look like:
It seems the pinvoke site's getting a lot of downloads at the moment, but I was able to find a mirror of the pi_diagona_pack.zip file.
Operator Precedence in ColdFusion
Simon Whatley had a good post yesterday on operating precedence in ColdFusion. It's important to understand the priority in which statements are evaluated, but what I think is more important is to explicitly define the precedence by using parenthesis. This makes the code much easier to read and much less likely to be misinterpreted. Take the equation:
What is the value of x? The correct value is 23, since the multiplication operator takes precedence over the addition operator. However, it's very easy to misread the equation as 3 + 4 = 7, 7 * 5 = 35. Here's the equivalent line of code, but with the precedence of the operations explicitly defined:
This is much clearer to the reader on how the equation should be executed. Writing code that easy to maintain should always be one of your top priorities and using parenthesis around your statements is one great way to help the readability of your code.
Solution to adding drop shadows to a Suckerfish-style menu...
I'm working on a dropdown menu based on the <ul /> tag. The menu can have an unlimited number of children menus and I decided the "suckerfish" method was a very effective method for achieving my menu structure.
One of the problems I ran into was trying to implement a drop shadow layer for the menus. While there are many ways to implement a drop shadow, I thought the most straight forward method was to use a shadow <div /> with the same dimensions of the menu it's shadowing. The problem I ran into is I couldn't properly get the drop shadow to appear below it's anchored menu. It kept wanting to appear above the menu.
In my code I was explicitly setting the <ul /> tag being displayed to have a z-index one higher than the drop shadow, but the drop shadow always remained on top. After tracking the problem for a bit, I realized was that the because of the nested nature of the <ul /> tags, even though I was explicitly defining a z-index, the <ul /> was inheriting from the parent.
The fix was just to move the shadow <div /> as a sibling to the <ul /> it's shadowing. Once I did this I was able to correctly place the shadow <div /> underneath the <ul /> tag it was shadowing.