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]
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]
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.)
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 id="SomeDiv" style="position: relative; width: 200px; height:100px; border: 2px solid black; padding: 3px;">
Div One
<div class="corner" id="DragHandle"> </div>
</div>
<div id="DivTwo" style="position:relative; width:150px; height:75px; border:1px dashed red;">
Div Two
<div class="corner" id="DragHandleTwo"> </div>
</div>
<script type="text/javascript" language="javascript">
function DragCorner(container, handle) {
var container = $(container);
var handle = $(handle);
/* Add property to container to store position variables */
container.moveposition = {x:0, y:0};
function moveListener(event) {
/* Calculate how far the mouse moved */
var moved = {
x:(event.pointerX() - container.moveposition.x),
y:(event.pointerY() - container.moveposition.y)
};
/* Reset container's x/y utility property */
container.moveposition = {x:event.pointerX(), y:event.pointerY()};
/* Border adds to dimensions */
var borderStyle = container.getStyle('border-width');
var borderSize = borderStyle.split(' ')[0].replace(/[^0-9]/g,'');
/* Padding adds to dimensions */
var paddingStyle = container.getStyle('padding');
var paddingSize = paddingStyle.split(' ')[0].replace(/[^0-9]/g,'');
/* Add things up that change dimensions */
var sizeAdjust = (borderSize*2) + (paddingSize*2);
/* Update container's size */
var size = container.getDimensions();
container.setStyle({
height: size.height+moved.y-sizeAdjust+'px',
width:size.width+moved.x-sizeAdjust+'px'
});
}
/* Listen for 'mouse down' on handle to start the move listener */
handle.observe('mousedown', function(event) {
/* Set starting x/y */
container.moveposition = {x:event.pointerX(),y:event.pointerY()};
/* Start listening for mouse move on body */
Event.observe(document.body,'mousemove',moveListener);
});
/* Listen for 'mouse up' to cancel 'move' listener */
Event.observe(document.body,'mouseup', function(event) {
Event.stopObserving(document.body,'mousemove',moveListener);
});
}
DragCorner('SomeDiv','DragHandle');
DragCorner('DivTwo','DragHandleTwo');
</script>
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.
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. :-)
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.
