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.
The Adobe on Air Bus Tour was in Portland last night. It was a very exciting event. The bus crew did a great job presenting the unique opportunity that AIR gives both Flash and HTML developers to build cross-platform desktop application with their current skill-set.
I managed to answer a trivia question and get a bag of seven O'Reilly books! Add the 3 beers I had, the excellent catered food, the free training, and the networking opportunities and I have only one thing to say.
Thank you Adobe!
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 [...]"
