http://www.sitecrafting.com/blog/javascript/ en-us Wed, 16 May 2012 23:44:09 PDT Wed, 16 May 2012 23:44:09 PDT SiteCrafting.com GearBox 1.1 (beta) http://www.sitecrafting.com/blog/printing-dialog/ One day, one of our clients came to us with a very unusual request - they wanted to be able to print something directly from the browser, but without displaying the usual print dialog box. I don't have much time in the webdev business, but I've never heard of this kind of request, and neither had anyone else in the office.Initially, we didn't think that it was possible. The browser File > Print command uses a dialog box. So does the javascript print() function. The only reason that we knew this was possible was that the client's current system was already doing it. With a little research, we figured out how to print directly from the browser without displaying a dialog box.Tools you'll need:1 local Unix or Linux serverA pinch of Javascript1 PHP exec() callPHP to format your dataFirst: your server MUST be a local server, on the same network as the printer. This is because we'll be using the lp command to shoot off the print job.Second, to get this to work from the browser, you need a little javascript to call a file using XMLHttpRequest that will call the lp command and execute the print job.The actual command to start off the print job looks something like this: lpr -p printer file.txtThe final ingredient of this system is to use PHP to format the data you need to print, and then save it to a file. The lpr command then works on that file.In the end, we were able to get this whole thing working, but only because Dustin over at out co-location facility knew what needed to be done. Part of the command line printing involves manually creating a print spool - a task not for the faint of heart. The spool is defined in /etc/printcap, and looks something like this:printer:\        :ml=0:\        :mx=0:\        :sd=/var/spool/lpd/printer:\        :af=/var/spool/lpd/printer/printer.acct:\        :sh:\        :rm=XXX.XXX.XXX.XXX:\        :rp=text:\        :if=/etc/magicfilter/ibmpro-filter:\        :lpd_bounce=true:Replace the XXX string with your printer's IP address. Then, when you click on a print button, the javascript fires off the XMLHttpRequest, which calls the PHP script to create the print file, and executes the command to print that file. Or, you can call the script with a PHP function on a page load.Shout outs to Dustin and Andrzej, for making the printing work, and for getting the scripts to call the print action. Mon, 09 Apr 2007 16:36:00 PDT http://www.sitecrafting.com/blog/bulletproof-critique/ I ran across a neat article from Sitepoint via Stylegala that you all should read on how to make your HTML 'perfect'. In the world of design, the concept of perfect is non-existant. There is no solution that will work for solving every problem, and there are exceptions to every rule. This article is no different. Read the full article, and then check out my comments.FAQ #1-#7I can't really say anything about these, because they are factual definitions.#8 Yes, HTML 4.01 Strict is a good choice, but XHTML 1.0 Strict, or even better, XHTML 1.1, is preferable. If you need to use deprecated tags or attributes, you really should use HTML 4.01 Transitional. We use XHTML 1.1, for a number of reasons, but we do use some prohibited attrributes (title on tags other than abbr and acronym, target) and syntax (our rich text editor in the cms mucks up the code). We do this because we know the strengths and weaknesses of each decision we make, and we don't make them lightly.#9It's good to make sure your markup validates, but I know that this article won't and I know why. Some errors can be tolerated (like the ending '/' on image tags.), and some can't - a misplaced </table> destroys your layout.#10Too many times I've seen sites where the HTML was terrible, but it rendered properly. Most designers want to make their sites look right, but it's the attention to detail that separates the good from the great.#11-#14Again with factual definitions. I also got bored halfway through #12 - Charset.#15Be careful with using character entities outsite your charset, because The entire range from  through Ÿ are invalid characters. I bet you didn't know that, did you? It's ok, I didn't either until I read this article on A List Apart.#16-#18Not a whole lot I can say about these, but there are some details to pay attention to, like using h# tags in sequential order.#19You can make block level elements look like inline elements, or inline elements look like they are block I am a div displayed inline, and so am I.and I am a span displayed block.The article states this, but I wanted to make a little clearer.#20 & #21If you didn't know this already, please make sure to read it again.#22This item should have been much earlier in the article, at least #8. They've been using semantic for awhile, but they just get around to defining it  now?#23Again, make sure you are using the tags as they were meant to be used. If something needs to be italic, use <i>, if it needs emphasis, use <em>.#24This deserves to be said again: table layouts are bad, for all the reasons in the article.#25<div> is not the new <table>, and documents should not have <div> soup. The div element is a generic block-level tag. It is best used to store other elements in meaningfully connected ways. For example, <div id="header"> is common here, but having six div's within that for each the page title, navigation, login information, and to separate those items is bad. Be like us, resist the urge to replace <table> with <div>#26Just remember to use <table> for the right reason.#27-#31This is all very useful information, much of which I didn't know. Make sure you get it all.#32I would much rather use target="_blank" than Javascript to open new windows, especially because all browsers support the target attribute, and most don't let javascript open new windows with user intervention anymore. In this case, the ideal solution is broken because of the era of the pop-up.#33Actually, the alt attribute should be omitted, but only rarely. At SiteCrafting, we use image icons to add meaning to links, for example, a plus sign on links to add new enteries to a database. If I added an alt attribute to that image, and it didn't display, my link would look like [Add] Add Item rather than Add Item. #34You can have many elements of a given class, but only one element (on a page) with a given id. This does make you wonder why getElementsByClassName isn't in the Javascript core.#35 & #36Essential, but I can't add anything to these.#37This reminds me of the era of frames. Frames were bad, and undead frames like object include and iframes should not be allowed to work. But we had to use iframes a couple of times, because there was no other option to make the system work. Here's the bottom line: Learn the rules of HTML, and this article is a good place to start. Then when you have learned the rules, you can bend them, or even break them, as long as you know why you are doing it. Wed, 01 Nov 2006 09:16:00 PST http://www.sitecrafting.com/blog/names-1-ids-0/ I never enjoy finding quirks in something so seemingly simple when I'm coding but it certainly happens. The following is a tale of how I ran into trouble with a couple attributes that should be worlds apart. While working on a pretty spiffy site with all sorts of clutter saving JavaScript hiding/showing I ran up against a problem. On some pages these features were working just fine while on others they wouldn't do a thing -- not even throw up an error. I searched for a while without finding the culprit but eventually had a "well, just try it" moment that fixed things right up.The difference I found between pages was some anchor links. What was so special about these anchor links? See for yourself:...<a name="someSection"></a><table id="someSection">...IE6, your browser friend and mine, was trying to hide/show the anchor with the name "someSection" rather than the table with an ID of "someSection". Since the anchor's pretty much invisible to begin with you can see how hard this would be to troubleshoot.A more common place you might run into this is when using forms. Since it's still common practice to give form elements names, this sort of hybrid old versus new DOM-compatibility fuzziness might pop up.Have a look at a quick example I whipped up in a newer browser then in IE6. May this save you billable time in the future when running into this yourself. Mon, 11 Dec 2006 16:36:00 PST http://www.sitecrafting.com/blog/ltselectgt-tag-innerhtml/ While I was working on a recent project, I ran into a weird bug with IE 6. I was using some AJAX to dynamically fill a <select> tag with options depending on what element was selected from the tag's parent. It worked fine, and quite seamlessly in Firefox, but broke for inexplicable reasons in IE.I was using a php script to get all the selectable options, and then passing that back to the javascript handler to be inserted into the document. The problem was that, apparently, you can't use the .innerHTML property to set content on a select tag.This makes no sense, for two reasons: 1) Microsoft created the innerHTML property, and it doesn't work in their software and 2) All you really need to do is find the node, and replace it's children with some abritrary string. It's not terribly complicated. Every other (modern) browser seems to handle it perfectly fine.After Mark had pointed out that fact, I just used the php script to return an entire select element with the options already populated, but that broke the event listener I had placed on the tag to change the select options for that select's children. But that was quick and easy to fix: just reload the event listener on the completion of the AJAX call.I've gotten to the point that most browser inconsistencies don't really faze me. I know what to expect and how to work around it, but this one really threw me for a loop. So, take note developers, <select> + innerHTML = broken. But you should really be using the DOM anyways. Wed, 13 Dec 2006 16:12:00 PST http://www.sitecrafting.com/blog/prototype-documentation/ One of the most popular javascript libraries, Prototype, has finally released a decent set of documentation. I'm really pleased, because it was a little difficult to work with not knowing what was available, and how to use all the tools.Their website is very simple and easy to use, and will quickly become one of my most visited sites. If you haven't used Prototype, I highly reccomend taking a look at its features. It makes javascript development very fast and simple, even for complex problems. I've used it to great success. I don't know how it matches up with some other javascript libraries yet, but I'm planning on reviewing all of them. Fri, 19 Jan 2007 10:03:00 PST http://www.sitecrafting.com/blog/ajax-ie-caching-issues/ I've been working on a project that involves using the jQuery javascript library and the Ajax methods. I've been happily using the Ajax jQuery.get() method to handle simple calls, such as a link that allows a user to view a list of words based on their selection, getting the contents of a tab when the user selects a tab, and finally getting the current weather after the person enters a new zip code, which is then saved to the database. For the last operation, I got the JavaScript working great on Firefox and I thought it was working in Internet Explorer. However, after some testing, I noticed that the same weather data was being returned, even after a new zip code on the opposite coast was selected. Mmmm, I was rather baffled, especially since I've been using this jQuery.get() on the other functions, and encountered no problems like this.So, I started the Visual Studio 2005 debugger and viewed the page in Internet Explorer. I stepped through each line of code, so far so good. Then I pressed the edit weather preferences button, the form popped up, I changed the zip code, pressed the save button, and stepped through each line of code again. The weather data was updated to the database correctly. Next, the form closed and the Ajax jQuert.get() method was called. The debugger should have gone to the page for returning the weather data, but that did not occur. Instead, the data from the very first Ajax call was returned. That could only mean one thing, the infamous caching issue, which can be the bane of web developers and dynamic content.I quickly queried Google for "jquery ie caching get" and the very first entry, Ajax IE Caching Issues, had the solution. It turns out that, according to a comment from that article, the http specifications says any agent in the chain can cache the GET request, which Internet Explorer tends to do. The solution is very simple, either use a POST request instead or add a parameter to the querystring that changes. Some ideas could be adding a timestamp to the end of the url, adding a flag that changes each time the weather data is returned. Here's the original code that caused IE to cache the response. Notice how the url is always "ajax/weather.aspx?action=get", which causes IE to cache the response.$.get("ajax/weather.aspx", { action: "get" } , function(data) { getUsersWeatherCallBackHandler( data ); } );This code uses a timestamp to make the url unique each time the function is called. var tsTimeStamp= new Date().getTime(); $.get("ajax/weather.aspx", { action: "get", time: tsTimeStamp} , function(data) { getUsersWeatherCallBackHandler( data ); } );This code simply uses a post request instead to get around the caching problem. $.post("ajax/weather.aspx", { action: "get" } , function(data) { getUsersWeatherCallBackHandler( data ); } ); Wed, 12 Sep 2007 16:52:00 PDT http://www.sitecrafting.com/blog/anonymous-recursion-javascript/ A nice feature of JavaScript is that functions are objects. As such, they do not need a name if they are used right away. But what if you need a short anonymous recursive function? arguments.callee becomes your new best friend.Before I go into the details, let me start off by quickly explaining what I'm talking about. In JavaScript, you can define a function that without giving it a name or variable if it is to be used immediately, similar to numbers, strings or booleans. Because there is no name for your function it is considered anonymous. Recursion is where a function calls itself and is used a good deal in trees so this method applies well since the DOM is just a big tree.But wait! How can you call a function if it has no name?Simple! JavaScript 1.4 added a way to find out what function you are in (actually, 1.2, but it's done in a deprecated way). This is done with arguments.callee. This a local variable that is set once you start a function and allows you to throw arguments into it make a call to a function that has no name.And this is useful?Why yes, yes it is! Often when running Ajax queries, you assign an anonymous function to occur once the request is returned. Prototypes and other JavaScript frameworks also put you in a position of frequently using anonymous functions. I've found anonymous recursion handy when using timers and other events.So, show us the example already!The first example is a very simple recursive power function. It just takes the value of X to the power of Y. Yes, there is a function already to do this, and yes it is far more efficient, but this example does show a simple use of recursion.The second example is a bad fade script. (A) It doesn't deal with IE opacity, and (B) it uses the $() function at each iteration. Nonetheless, I believe it shows a point when many developers wish they had direct access to the function for recursion.UPDATE: Dec. 17th, 2010After almost three years, it looks like we have lost the example files. So I rewrote the first example below. Since this post, arguments.callee has been declared deprecated in the newest version of JavaScript, ECMAScript 5. That doesn't mean it's going away, it just means you should think twice about using it. Since all major browsers still support it (it's the only way to dynamically access arguments after all), it is still fine to use it.var num = (function (x, y) { if(y == 1) { return x; } else { return x * arguments.callee(x, y-1); }})(3, 4);num === 81; // trueIn the example above, "num" will have the value of 34 (or 81) after running. For kicks, the next example is an anonymous function that wraps an anonymous function to work as a cache. It will calculate factorials of X.var factorial = (function () { var cache = {}; return function (x) { if(cache[x]){ return cache[x]; } else if(x == 1) { return 1; } else { return cache[x] = x * arguments.callee(x-1); } };})();factorial(6) === 720; // true Fri, 04 Jan 2008 15:21:00 PST http://www.sitecrafting.com/blog/touch-vote/ This time of year you either get hooked or get sick of everything politics. That's right, it's a Presidential election season and the 24-hour news cable channels are firing out tons of info both via your TV and online. Some worthy strides in web development practices have also come about on one news site in particular that may help political junkies get their fix anytime, anywhere.While surfing for the latest election stats over at CNN's website I was greeted with a familiar sight. Various areas of the page were partitioned into a grid where, within each, a little animated "loading" icon spun around. Once everything came up I was off and running but I noticed something strange. When I right-clicked on images or text in those areas I was presented with the familiar options to view the images or copy the text. I had assumed nearly everything I saw was done in Flash but I was wrong. It was all standard HTML, CSS and images loaded up via ajax.With Flash so prevalent a technology used for showing lots of live data why did CNN's site seem to buck the trend? iPhone. Apple's popular device allows folks to stay constantly connected via data over their cellphone with a very usuable mobile version of Safari. One feature it lacks, however, is the ability to display Flash. My theory for the shift on at least CNN's site (though I predict we'll see plenty more of this) is that iPhone owners fit the profile they want to reach: moderate to high income with the urge to always be online reading email, text messages, and news.As an iPod touch user myself I'm really put off by sites with large Flash-based features that I can't access. Seeing some care taken to consider a quickly growing mobile audience is music to my web developing fingers. Thu, 14 Feb 2008 16:29:00 PST http://www.sitecrafting.com/blog/got-api/ gotAPI.com is one of the most useful online resources I've come across, primarily because it places resources spread all over the internet into one simple site. I've been using this for quite some time, and have for the most part I have taken its usefulness for granted. Then it occurred to me that I might not be the only one that could find this tool useful (I know, it was a big 'DUH!' moment). So now I will share this gem with others...gotAPI acts as a portal to almost any API/language reference available on the internet. Wondering what that PHP string function is that splits a string into an array? Pour yourself a nice tall glass of gotAPI and find it in seconds. Or if JavaScript is more your thing, browse the DOM to find the function or property you need. The advantage is that it can all be accessed from here, no need to remember countless URLs or stumble through a poorly designed site to find the documentation page. Simply hit up the site and you're set.Customization is another advantage, with the tabbed interface allowing you to pull up multiple reference pages (all searchable with an expandable tree view to your left). Load up all the API's related to your current project finding an obscure function is now seconds away. Fantastic!The fact that I am still excited about this site after months of using it should tell you just how nifty it is. So stop wasting time reading blogs and go check it out!Link: gotAPI.com Mon, 31 Mar 2008 11:40:00 PDT http://www.sitecrafting.com/blog/onload-collisions-to-fix/ There is no other variable more fought over then the coveted window.onload. Its job is to run a function after a page has been loaded. The problem is that there is only one variable, and therefore only one function can run. Once you have set this you would think you are in the clear. That is until another script comes in and overwrites onload.But all can be made well in JavaScript land once one of four choices is made. I give four ways to get around this problem, and suggest a way for modern browsers to be rid of this problem once and for all.JavaScript, love it or hate it, it's here to stay. In the last generation of web design it was abused to accomplish silly things like turning your mouse into a analog clock or, my favorite, change the color of the background depending on where your mouse was on the page (I almost had a seizure when I first saw that one).Since then we have learned to separate our pages into three parts: Information (HTML), Presentation (CSS), and Function (JS). The latter is where I have found my niche in recent years. The web is now flooded with JavaScripts that do everything. Most of which require the page to be loaded before doing any work. This isn't an issue because there is a variable aptly named window.onload. To make a function run after the page has loaded, you just assign it to this variable.And there in lies the problem: there is only one variable. Only the last script that assigns to this variable will run successfully. In the past this generally wasn't an issue because you were the author and rarely had mismanaged conflicts. But times have changed.With only one onload variable what are we to do. Well, I have discovered 4 options: check and wrap it, make onload an array, wrap onload with a function, make onload a function that sends an event. Each of these have their pros and cons. I'll discuss them briefly below.Check and WrapThis method is a quick check to see if anything is already set to run onload. If there is, then you create a function that first runs what ever was in the onload, then does what ever you need it to. It should look something like this:if(window.onload != undefined) {    var tempFunct = window.onload;    window.onload = function() {        tempFunct();        yourFunction();    }} else window.onload = yourFunction;The advantage of this is that there is that you don't have to rewrite any old code, nor do you have to load any code before had. But the downsides are numerous. First, if you find yourself with a dozen onloads, then you will be in a very deep chain of functions, and that will slow things down. Also, if your tempFunct variable is overwritten then a link in the chain is broken, and nothing after it will run. Lastly, if someone changes the onload variable after you, your whole chain is gone.Onload ArrayAs a way of getting around these problem, I believe that modern browsers should allow onload to be an array of functions. The browser could then iterate over the array, running every function it encounters. This would allow for many more functions to get access to this crucial resource. I came up with a quick way to accomplish this now in preparation for browser integration.window.onload = function() {    for(var key in onload.functs)        onload.functs[key]();}onload.functs = [];onload.push = function(funct) {    onload.functs.push(funct);}This would give the onload variable the ability to have the push method to add functions. To add a function, you would use:onload.push(yourFunction);// ORonload.push(function() {    yourFunction();});Simple, isn't it? This fixes most of the cons in the check and wrap method, but still have some problems. If another script still uses the old onload method then, again, the whole chain is broken.Onload WrapperThe major problem with the Onload Array is legacy code messing up your functions. You could update your code, but that is a lot of work. So there is the thrid method, the onload wrapper. This is very similar to the onload array in the sense that it stores functions in an array and pulls them out using onload. But the difference is that you call a function to add it to the onload. This function can then detect if old code has overwritten the onload variable. The code is as follows:var onDomReady = function(funct) {    if(window.onload != onDomReady.run) onDomReady.functs.push(window.onload);    onDomReady.functs.push(funct);    window.onload = onDomReady.run;}onDomReady.run = function() {    for(var key in onDomReady.functs)        if(onDomReady.functs[key]) onDomReady.functs[key]();}onDomReady.functs = [];To use this method you:function onLoadKiller() {    alert('onload killer');}onload = function() {    alert('onload');}onDomReady(function() {    alert('onDomReady');});onload = onLoadKiller;onDomReady();The code above will display three alert boxes. The first one is caused because the onload variable is set to a function that created the 'onload' alert. The onDomReady function then adds both the onload (the 'onload' alert) and the 'onDomReady' alert. Then the onload gets overwritten by onLoadKiller. We take that pecky guy out by running the onDomReady() function again, which fixes the chain. (And all is well in JS land)This gets around all the set backs of the first two methods, except that, again, setting that pesky onload variable will blow out your chain. Luckily, this code has a way to get around that by simply rerunning the onDomReady() function without any parameters. This will allow you to insert this line of code where ever you find a colision and it will repair the chain. There is always a downside, namely that if two places set onload consecutively without a onDomReady() in-between, the first will be lost.Event Driven OnloadThe final method uses something completely different for the onload. Rather then setting this variable, you attach a function to an event (the 'load' event). This gives you the ability to add multiple functions to onload without collisions. Events are exactly how Prototype and other frameworks deal with onload. The downside is again that the change will require a rewrite of old code, and there for isn't much better then the first two.Browser ImprovementsAs I hinted at earlier, I believe we need a way to natively allow more functions to run onload. The easiest way I see to accomplish this is to allow the onload variable to be an array, and run every function associated with it. While this wouldn't fix some of the problems in old scripts, it would be a way to move foreward and allow many more scripts to be run concurently within the browser.ConclusionSo what's a scripter to do? There is no good answer for this. Each situation is different. Below I break it down into which category each method is useful for.If you are starting your code base from scratch, I would suggest the Onload Array. This would give fall-foreward compatibility and would start to pressure browser makers to include this kind of onload scheme.If you already have a code base, but know it fairly well, then the Onload Wrapper is a good option. It is the most forgiving when breaking the chain, and will repair itself as much as possible.If you have a large code base, and really don't know how things interact, then the check and wrap is a good choice. It will protect your little chunk of code while preserving anyone else's (assuming you are tagging on to the end of the chain).Lastly, if you are writing a script from scratch, and it needs to interact with an unknown environment, then your best bet is to go event driven. It's like taking a higher path where you don't monkey around with those lesser scripts still using the onload variable. Tue, 22 Jul 2008 16:41:00 PDT http://www.sitecrafting.com/blog/windowname-experiment/ I am starting an experiment to see whether the recent blog chatter about window.name is actually being used. Included is some JavaScript that you can put in GreaseMonkey to help me in my search.First, a quick intro to window.name. It is a javascript variable within a web browser that is intended to allow frames or popups communicate with each other. Because frames are free to do as they like, the communication between a particular set of frames could broken if just one frame resets its variables (like refreshing the frame). So window.name must remain between page refreshes to make sure communication isn't broken. There has been a lot of talk lately about storing scripts or session-like variables within window.name, giving you the flexibility of having a session state without messing around with cookies. But I have yet to see a site that uses this functionality. So I decided to start a little experiment. Using GreaseMonkey, I created a real quick script (below) to alert me if there is something in the window.name variable. It also checks to make sure there are no frames on the page, because I found that throws up a lot of alert boxes. So I'll keep this script running on my browser while looking at new web apps and see if anything interesting comes up. If anyone else would like to try it, let me know and I'll help set you up. switch(window.name) { default: alert(window.name); // Garbage window.names below this line case undefined: case '': case 'google_ads_frame': }UPDATE (08/18/2008):I found that frames were giving false positives. This is particularly annoying when working with an rich text editor in the browser. So I updated the code below.// Removes Framesif(window.name !== window.parent.name) returnswitch(window.name) { default: alert(window.name); // Garbage window.names below case undefined: case '':}UPDATE 2 (08/28/2008)So far, the only site I have seen using the window.name property is AppleInsider.Com, which I believe they are using for communication between their popup ads and the main site. It's rather interesting to an alertbox after every page refresh after an AppleInsider page loads. Fri, 15 Aug 2008 11:24:00 PDT http://www.sitecrafting.com/blog/jscommandlet-released/ We're happy to announce a new bookmarklet called JSCommandlet. It is a JavaScript console developed for use within SiteCrafting. If you do any kind of JavaScript development, especially working with Internet Explorer, JSCommandlet is for you. JavaScript development can be a real pain. There is no good way to trace events, functions die unexpectedly, and every browser seems to have a different idea of how to implement the standard (what else is new?). While JSCommandlet won't be winning any beauty contests anytime soon, it is ready for most anything you throw at it on whatever browser.If you deal with JavaScript on a daily basis, or maybe just once in a blue moon, JSCommandlet will help you produce high quality code quicker. We think it's a great tool for any developer to keep in his/her toolbox. Check it out and let us know what you think!Link to JSCommandlet and more info Thu, 25 Sep 2008 16:43:00 PDT http://www.sitecrafting.com/blog/to-jquery-in-prototype-world/ Prototype and jQuery conflict over the $ function. In the entry, I will show you how you can start to include jQuery code in the an environment that is already Prototype heavy. JavaScript libraries have really changed the landscape of web development. They allow us to worry about the application logic without worrying as much about browser compatibility. Internally, we started with our own library, then moved to Rico, then to Prototype. Prototype gives you a huge jump start when creating enhanced user interfaces for web apps. It gives a developer a large set of functions that allow one to write JavaScript code without messing with cross browser details. But as good as Prototype is, many of us are starting to switch over to jQuery. jQuery allows for really easy coding that is based off of CSS and actions, rather then function after function after function in Prototype. Unfortunately, these two libraries conflict with the use of the $ function. It is basic to both frameworks and, of course, they both use it differently. Managing The $ Conflict So as we progress into a jQuery world, what are we going to do with all this old Prototype code? Well, the jQuery creator has saved the day! Below is some code that will display the results of an ajax request after the page loads.// Resets the $ function (I suggest doing this right after loading the jQuery library)jQuery.noConflict(); // Global variable for url of ajax requestvar url = 'ajax.php';function prototypeAjax() { new Ajax.request(url, { success: function(xhr) { alert('Prototype: '+xhr.responseText); } });}function jQueryAjax() { var $ = jQuery; $.ajax({ success: function(data) { alert('jQuery: '+data); } });}// jQuery Namespace(function($) { $(function() { alert(url); prototypeAjax(); jQueryAjax(); });})(jQuery);In the code above, there are three important things happening. The first is the use of a global variable "url" which can still be used within a namespace. It works just like any other variable and is usable by both libraries. The second is the normal function syntax. The jQueryAjax() function has as it's first line "var $ = jQuery;" which sets the $ function to be in jQuery mode. Now everything within that function is set to use jQuery. Any functions that are called will need that same line added if they are to use the jQuery functions. The third important point is the jQuery namespace at the end. What this does is creates a function that takes a single parameter and names it $. Once it is created, it is immediately run and passed in the jQuery object. So, anything within that block will use the $ function from jQuery. The first line of the function sets an onload event that runs our two global functions, prototypeAjax() and jQueryAjax(). Those two functions will now use the correct $ function for their application. What Does This Mean? What this means is you can now start to include jQuery code into Prototype projects. Internally, we will be able to use the power and ease of coding that comes from jQuery, while not backtracking and rewriting all the old code. Bottom line: Quicker development time, lower costs, and smoother running web apps. Mon, 27 Oct 2008 12:01:00 PDT http://www.sitecrafting.com/blog/styling-inputs-hard/ Internet Explorer 6 is just too old to support all the fun CSS tricks of the modern web. The Input Type selector is one of the most problematic. I suggest a quick jQuery function to get around this. Styling inputs is a pain. The input element has several different types, all of which are displayed in completely different ways. Briefly, they are: Text Password Checkbox Radio As you can see, setting the width of all input elements will have unintended consequences for some input types. There are some common tricks to get around this. One is to add a special class to text and password boxes. Another is to use a CSS2 selector "input[type=password], input[type=text] { (css) }". The problem with this last method is Internet Explorer 6 doesn't support it. So what are we to do?I created a script that will iterate though all input elements and append it's type to the class attribute. While this is a bit dirty, it does give us the ability to style these elements separately from each other without leaving IE6 in the dust.$(function() { $('input').each(function() {        $(this).addClass(this.type);    });}); Mon, 19 Jan 2009 14:35:00 PST http://www.sitecrafting.com/blog/giving-actions-to-classes/ A concept of how to define actions using classes. Best part is, there's no need to know JavaScript! While working on a site with a lot of transition effects on it I came up with a quick way to setup actions without writing extra JavaScript. I present this idea with the hopes of refining the technique.The basic idea is to define elements with classes that tell JavaScript was events to give them. As an example, look at the following HTML:<button class="action show-content">Show Content</button><p class="content hidden">This is some content.</p>It would look as though the button should be given the action of showing the paragraph element. In jQuery, you would normally just do:$(function() {    $('.show-content').click(function() {        $('.content').slideDown();    });});I found myself using this pattern over an over. Each code block does roughly the same thing. And in computer science, if you find a pattern, try to abstract it and make it more general. That lead to the following code:$(function() {    $('.action').click(function() {        $.map(this.className.split(' '), function(className) {            var classNames = className.split('-');            var action = classNames.shift();            var elems = $('.'+classNames.join('-'));            switch(action) {                case 'show': elems.slideDown(); break;                case 'hide': elems.slideUp(); break;                case 'toggle': elems.slideToggle(); break;                case 'checkall': elems.attr('checked', true); break;                case 'uncheckall': elems.attr('checked', false); break;            }        });    });});Here's what this does. First, it finds all the elements with the class of "action". It then looks at all of it's classes. It will then find what action to run based off the keyword. It will then look at the rest of the class name and select all the elements that match. In my example above, the keyword is "show" and the elements are "content. We could change the "show" keyword to "toggle" and that will completely change it's action.An interesting side effect is that you can change these classes dynamically, and because the click action is still set, the action will change without a new event listener.How do we use it?Create an element with content in it and give it any class name (other then "action" or one of the keywords). Then create an element and give it a class name of "action keyword-classname". It's really just that simple! Thu, 22 Jan 2009 11:21:00 PST http://www.sitecrafting.com/blog/draft-css-animations-in-webkit/ WebKit, the muscle behind both Safari and Google Chrome has recently added CSS animation support to its nightly build. While a long way from being supported in any widely used browser, this does give a bit of a preview for what we can expect in the future. It's hard to say whether these new animations will be widely adopted, and if they simply become the new "blink tags" of the modern web world.CSS animations are applied using the concept of keyframes which is well known among other animation-oriented mediums. To better understand keyframes, imagine a timeline depicting the progress of an animation. To move a tag from point (x,y) to point (X,Y), you could apply a keyframe denoting the starting point, and another denoting the ending point. In the context of CSS, these keyframes would be specific styles applied at certain times during the animation. The browser would then be allowed to handle the actual execution of this animation. Mon, 09 Feb 2009 10:00:00 PST http://www.sitecrafting.com/blog/jquerylive/ jQuery 1.3 has added support for live events, and it makes developing a breeze. Before, you'd have to wait until the page is completely loaded to add events to elements. And if you added new elements to the page, they would need special attention to have events added. Not anymore!  jQuery has become my favorite toy in web dev. And my latest favorite feature is live events (added in jQuery 1.3). Live events are a way of adding events to a CSS selector. If an event occurs to something that fits that selector, the event handler is fired. In layman speak, you can setup events like you can setup style sheets. jQuery live looks like this:$({selector}).live({event}, {handler}) An example would be creating a button that self-replicates. $('button').live('click', function(){ $(this).after($(this).clone()); }); Now, every button on a page will insert a new button just after itself. While this isn't very useful, you will notice that the new click event is fired without adding extra event handlers. This is very useful when you are doing a lot of ajax manipulation; You can just set an initial event handler to a selector and it will automatically replicate out all new elements. Another important implication worth mentioning is that you no longer have to wait until the page has loaded to assign events. Before, you had to wait until the document has loaded an element so JavaScript would know what the event handler was for. But now, timing doesn't matter; Event handlers can be added to CSS selectors in the head. I'm excited to see where this will take us in JavaScript development. Let us know if you've used jQuery Live in any interesting places! Wed, 11 Mar 2009 12:59:00 PDT http://www.sitecrafting.com/blog/multiple-interval-javascript-problem/ Using intervals in JavaScript for pausing/unpausing events can sometimes cause a phantom interval which you can't control. Learn how to stop that phantom in it's tracks with one line of code.I just spent about 30 minutes trying to debug a problem in JavaScript. The setup is an Ajax call that is made at a tick rate. You can pause the ticks, which I implemented by clearing the interval (JavaScript's version of a timer).var interval;function paused() { clearInterval(interval);}function unpause() { interval = setInterval(doSomething, timeout);} This is some fairly common code found on the net. The problem comes when you double click the unpause button. It will create an extra interval which the pause does not stop. There is, however, a very simple solution. If you clear the previous interval before starting a new one, then there will be no running intervals which have no variable. It looks something like this: var interval;function paused() { clearInterval(interval);}function unpause() { clearInterval(interval); interval = setInterval(doSomething, timeout);} Thu, 02 Apr 2009 12:39:00 PDT http://www.sitecrafting.com/blog/jquery-caching-convention/ This blog entry shows you how to cache a jQuery object into a variable for future use. I present a naming convention that I have been using that visually separates jQuery objects from other JavaScript variables.Just wanted to get out a quick blurb about a jQuery convention I have been using lately. As a running example, I'll use a script were you want to center an inner element within an outer element.A common practice to speed up jQuery scripts is to cache the jQuery object in a variable. This creates code that looks like this:// Configvar outer = $('#outer');var inner = $('#inner');// Computevar topPx = (outer.height() - inner.height()) / 2;var leftPx = (outer.width() - inner.width()) / 2;// Apply CSSinner.css({    top: topPx,    left: leftPx});The piece you should notice is that there is no clear way to tell the difference between jQuery objects (which are a little special in that they can run jQuery functions) and other variables (such as the border above).My solution is to append a $ in front of any variable name which is intended to be a jQuery object. The results are below:// Configvar $outer = $('#outer');var $inner = $('#inner');// Computevar topPx = ($outer.height() - $inner.height()) / 2;var leftPx = ($outer.width() - $inner.width()) /2;// Apply CSS$inner.css({    top: topPx,    left: leftPx});The difference is you can pick out a jQuery object just by looking at it's variable name. This is powerful stuff when scanning someone else's code. jQuery is such a difference beast that this form of caching shows these differences at a glance. This convention also is useful when using the 'this' variable. You can cache it like this:var $this = $(this);I have started doing this in the majoring of the functions where I use 'this'. You can see how useful it is with this jQuery centering extention:$.fn.centerInParent = function() {    // Config    var $this = $(this);    var $parent = $this.parent('div');    // Compute    var topPx = ($parent.height() - $this.height()) / 2;    var leftPx = ($parent.width() - $this.width()) / 2;    // Apply CSS    $this.css({        top: topPx,        left: leftPx    });    return this;};Notice that I don't have to rewrap 'this' in jQuery because it is already cached. And I can return the original 'this' because I haven't done anything to it. Also notice how quickly you can see what variables are jQuery and what are simple application state (or configuration). Fri, 08 May 2009 12:41:00 PDT http://www.sitecrafting.com/blog/new-take-on-default-input/ From time to time, we need to put default values into input fields, and have those values go away when a user clicks on that field. There are a few ways to make that happen. I was working on a new project, and came up with a quick way to setup any number of default-able fields. There are two simple steps.1) Add class="default" and value="Some default text..." to your field. The value can be anything.2) Include this little jquery function on the page.$(function() {    $('.default').each(function () {        var default_val = $(this).val();        $(this).focus(            function() {                if(default_val == $(this).val()) {                    $(this).val('');                }            }        ).blur(            function() {                if('' == $(this).val()) {                    $(this).val(default_val);                }            }        );    });});View a demo > Fri, 17 Jul 2009 15:34:00 PDT