- JavaScript

Textarea Auto Grow

Mon, 03 May 2010 16:34:00 -0700

I have seen instances where I'm on a form on a website and there is some mechanism by which the textarea automatically grows to fit what I'm typing. I've also seen this not work too well, and eventually half the bottom line is cut off or the bottom of the textarea has expanded further than it needs to. A while ago a super simple solution to this popped into my head. And today I happened to need just such a solution. So, I wrote up a vary small JavaScript function to add to our utility library. [More]

PSA: Browser Back Button Differences

Mon, 11 Jan 2010 16:37:00 -0700

At work, we had some old display code that was supposed to prevent users from submitting the same form twice. In the form's submit event, there was a window scoped boolean being set. If validation errors needed to be displayed, then the boolean was un-set. And at the very top of the submit action it would just 'return' if it saw the boolean. Maybe it will make more sense if you look at the submit event handler. [More]

How To: Prototype Resize Handle

Wed, 18 Feb 2009 15:01:00 -0700

This is just a short post to share some JavaScript that I wrote to be able to add a drag corner to an html element to make it resizable. I did this using prototype.js. As an example the two divs below have been made resizable. (Go ahead. Drag the bottom right corner around.)

Div One

Div Two

And below is the code that makes it possible. If you take a look at it and read the comments, You'll see that it's actually pretty simple. The thing that had me stuck for a while was asking Prototype how tall or wide something is isn't the whole story. Border and padding add to width and height. I have some code in there that will compensate for that. However, I only covered situations where the border/passing were uniform all the way around. Anyway, love to hear what you think about this.



	Div One
	 



	Div Two

Real World AJAX Presentation Code

Fri, 14 Nov 2008 19:52:00 -0700

Last night I presented my "Real World AJAX" talk to PDXRIA (our local Portland Adobe User Group). I said I would post the code. So, here it is! (Download link below) I have included the PDF slide presentation too. There are not a lot of slides. This is a code heavy talk. It uses a very simple CRUD application to demonstrate adding AJAX to an existing application. There are three versions in the zip. One completely paged based. Another one with some 'partial page update' style AJAX to improve the user experience. And a final one with some DHTML and DOM building. The code uses an in memory query object instead of a database. So, you should be able to drop it in a folder and run it with no setup. When I give the presentation, I show how you can turn JavaScript off and the second version still works (it gracefully degrades). I really need to add about 10 more slides with some of the stuff that I ramble off while I'm showing the code examples. If I get around to polishing it off, I'll re-post the updated slides and code. Also, I built the slides in OpenOffice.org Impress. If you would like to give this talk to your user group, or somewhere else, let me know.

Get Firebug Now! (Because Debuggers Are Awesome)

Sun, 06 Apr 2008 09:14:00 -0700

If you already know Firebug inside and out, feel free to move along. You already know how awesome it is. OK, now that the know-it-alls are gone... I have to tell you that the other week I had another one of those "giant step ahead" moments in my development career. I used a step-through debugger for the first time (Firebug). I wouldn't admit this in public if it weren't for the fact that I think admitting it will help other people to take that step too. I was having a hell-of-a time with a particular page. There was a lot of JavaScript going on on this page including validation and chained AJAX calls. Anyway, the page was, in some circumstances, throwing a JS slow-running script error across browsers. I actually tried for some time to put in alerts, comment out portions, etc. like I normally do. This was not working. So, I said, "I think now is the time to check out the Firebug break-point thing". I went over to http://www.getfirebug.com and scanned the portion about the debugger. I set a break-point in a method above where I knew the slowness was occurring. Firebug, having paused the JS execution at that point, also showed me what data was being passed into the method. With the ability to see the data and step through line-by-line, it wasn't long until I found what was wrong. (Some records in our db have a guid for their email. And the regex for our email validation choked on them). Here' my point: It is so much easier to debug JS with the proper tool that I am looking forward to the next tricky JS error! Firebug is an amazing tool! I've been using it for a while for testing and debugging AJAX calls. I also use it to help figure out CSS issues quickly. If you don't know that you can edit your html and CSS, debug JS, monitor network activity and much more with Firebug, then you owe it to yourself to go read about it. I know now that not having done this earlier was penny-wise and dollar foolish on my part. You can come back and thank me for the kick in the pants later. :-)

BlogCFC JS Twitter Pod (Bug Fixed)

Sun, 03 Feb 2008 09:30:00 -0700

If you are using my BlogCFC JS Twitter Pod or you visit my blog, you may have noticed that the Twitter time-stamp started reading "About 365 days ago" when the year rolled over. I finally sat down and looked into this today. Turns out, it's all my fault. I had to do some string manipulation on the date that Twitter sends to get it to work in IE and FF. Apparently I hard-coded '2007' in there to get it working. Maybe, I thought the world would end last year... Well, it didn't. So that code has been updated with #year(now())#. The Twitter Pod download is still available here. And I'd still love to hear if anyone uses it on their blog.

BlogCFC JS Twitter Pod (Updated)

Tue, 05 Jun 2007 23:20:00 -0700

In march I created a BlogCFC pod to show Twitter messages using the JS Twitter badge script. Recently, Twitter changed the location of the script. So, my script
http://www.twitter.com/t/status/user_timeline/3026521?callback=twitterCallback&count=10
changed to
http://www.twitter.com/statuses/user_timeline/3026521.json?callback=twitterCallback&count=10 Also, Twitter's server seems to have load issues at times. This can pause pages to render slowly while they wait for the script file. So, if you move the script include to the bottom of tags/layout.cfm, then it won't interfere with the page rendering. The download is still available here. And I'd still love to hear if anyone uses it on their blog.

Google Gears Could Help Make Your Apps Work Offline

Wed, 30 May 2007 23:56:00 -0700

I saw this story about Google Gears on Ryan's blog earlier. It is such cool news that I wanted to make sure it got spread. Having a consistent cross-browser, cross-platform way to implement an "occasionally connected" work-flow for web-applications seems like huge news to me. Plus, Google + Adobe + Mozilla = Happy if you ask me. I've already installed Gears and tried it with Google Reader under both WinXP and PCLinuxOS 2007. Please go and check out the JavaScript syntax for executing SQL against a local SQLite database.

" What Google Gears means for Rich Internet Applications and Apollo by ZDNet's Ryan Stewart -- Some big news today that Google is announcing an open source project called "Google Gears" which is an open source collaboration between Google, Adobe, Mozilla, and Opera that enables offline web applications in the browser. It seems very similar to the announcement that Mozilla made about the offline features in Firefox 3 and will be [...]"

BlogCFC Print Using DOM Injection

Thu, 12 Apr 2007 21:57:00 -0700

For some reason I clicked the print button on my blog the other day. It opened up a PDF in the tab I was in. Well, I just didn't like that (sorry Ray). I recently built a print feature for an AJAX heavy project at work. Since this project uses Spry, the detail you see doesn't exist until javascript renders it in the browser. So, I came up with a solution of opening another window and then pushing the rendered contents into it. The new window even has a print.css. So, although it's the same mark-up, it looks different. If you want to see the code I wrote for work you can check it out here. Just drill all the way into a vehicle and click the print button on the right. Anyway, I used the same idea to change the print functionality on my blog. I've posted the resulting code and instructions for download here. If anyone uses it I would love to hear about it.

Spry 1.5 Preview

Tue, 03 Apr 2007 17:14:00 -0700

This is a little late... But, Adobe snuck out a preview of Spry 1.5 on March 15th. You can go get it here. If you haven't heard, Spry is an AJAX and DHTML JavaScript library. I've been using it on a project at work. It's pretty slick. It reminds me of Flex the way you bind DataSets to "controls" and use curly brackets to reference variables. The 1.5 preview seems to have fixed a couple of small issues that I had with it. It also promoted JSON DataSets to first-class citizenship. And I think that rocks! So, if you haven't already, go check it out.

BlogCFC JS Twitter Pod

Sat, 31 Mar 2007 22:06:00 -0700

I was looking at the Twitter Badges that you can add to your site. I noticed that there was a JS implementation. I thought that would be cool because I could style it to match the rest of the site. So, I created a new empty BlogCFC pod and pasted in the code that Twitter offered. Well, I have to say I was very un-impressed. It basically is only set up to display the current message and the time it was added. Except there's even a typo. So, it wasn't even showing the date. After a little investigation, I got it to show the date, which turns out to be the raw date, not the "about x [min|hours|days]" that I was expecting. Well, I took that as a challenge and began to build out similar functionality to the Flash Twitter badge in my JS Twitter badge. [More]