Enforce TextArea String Length Using JavaScript

I recently had a need to limit the number of characters a user was able to enter into a textarea field on a web form. Unfortunately these elements don't have a maxlength property so this has to be enforced with JavaScript. The function below "monitors" input into the textarea (#description) using a keyUp event handler. When the length reaches the desired limit the user is notified and the string is chopped down to the allowed number of characters. The code below should be pretty straight forward but if you have any questions please feel free to leave them in the comments.

Easy Page Scraping

I recently had a need to pull data from a different part of our site and display it in a floating div (triggered by a mouseover) for quick and easy access. Thanks to jQuery this process is incredibly simple and by using the framework in this post you will be off and running in no time. Before we get into the code I should mention that JavaScript has what is known as a "Same Origin Policy" which means a document or script loaded from one origin can not receive properties of a document from another origin. As a result we can't grab data from another domain using this approach. This security feature is absolutely critical otherwise it way be way too easy to use JavaScript to do (potentially) malicious things across domains.

For this example the basic premise is the following: we want to display some data on our home page that is buried in another page elsewhere on the same site. This event will be triggered by mousing over an anchor tag. So imagine we have a file named "network.php" which includes a page element w/ ID="WiFi" and we want to grab/display the data contained in that element on our home page. The data is loaded then displayed in a hidden container when the mouseover event is triggered.

I hope this gives you a clear idea of not only how to do page scraping but also why it is a useful technique to know. The documentation in the code should make things fairly self explanatory but if you still have questions please don't hesitate to leave them in the comments.

How to use cookies w/ JavaScript

I recently had the need to keep some client-side settings persistent so I whipped up a very basic set of functions to both set and read cookies. Cookies are very handy when you aren't working with a single-sign-on environment (where user preferences are very easy to store in a database) but still need to keep some user data/settings. In this example there is a div element that can be shown/hidden and that selection remains persistent between browser sessions.

In reality I had to store quite a bit more data than in the example and also enable dynamic (JavaScript powered) CSS switching to further enhance the user experience but I wanted to keep this example nice and succinct. There is a lot you can do with JavaScript in conjunction with cookies to give users a custom feel on your site. If you have examples/stories of your experience(s) with using cookies in your application I'd love to hear about them in the comments!