/********************************************************************************
FUNCTION FOR CROSS DOMAIN AJAX REQUEST USING JQUERY 1.5+
********************************************************************************/  
function loadContents(url, callback) {  
 
    //CONFIRM A URL WAS PROVIDED  
    if(url) {  
 
	    //SET URL FOR YAHOO YQL QUERY
	    var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + url + '"') + '&format=xml&callback=?';  
 
		//MAKE YAHOO YQL QUERY  
	   	$.getJSON(yql,function(data) {
 
			//BUILD CALLBACK FUNCTION
			if(typeof callback === 'function') {  
			    callback(data.results[0]);  
			}  
 
		//WRITES ERROR TO LOG	
	    }).error(function(jqXHR, textStatus, errorThrown) { 
	    	console.log(errorThrown); }
	    );
 
  	//LOG ERROR IF NO URL WAS PASSED TO THE SCRIPT
  	} else {
  		 console.log('No site was passed to the script.'); 
  	}
 
} 
 
/********************************************************************************
SAMPLE USAGE
********************************************************************************/ 
loadContents('http://www.ziplineinteractive.com/frame/', function(results) {  
   $('#wrapper').html(results); 
});

I have tested this function in IE, Firefox, Chrome, and Safari and it should allow you to make cross-domain AJAX requests in jQuery 1.3, 1.4, 1.5, 1.6, 1.7, and from what I been able to find online it should also be supported in 1.8, although, 1.8 is not available at this time.

Let me know how this works in your application.

Related posts:

1. How to get Fixed Header and Footer Toolbars in jQuery Mobile 1.0 At Zipline Interactive, we have been doing mobile websites for...
2. Accurate Cross Browser Testing With BrowserStack.com The worst job for any web developer is testing your...

Using this site, a developer can easily locate and copy the latest stable version of their favorite library. This can be a real time saver in searching out the various library links. It would be really nice if they also had associated elements like the sets of pre-constructed stylesheets for jQuery UI. I keep a list here: http://www.stemkoski.com/jquery-ui-1-7-2-themes-list-at-google-code/ but being able to get all of that information in one location would be fantastic.

Right now SrcriptSrc.net supports jQuery, jQuery UI, Chrome Frame, SwfObject, MooTools,m Prototype, YUI, Dojo, ExtJS, and Script.aculo.us. All you have to do is find your library, click on the copy button, and you have on your clipboard all of the code required to embed the library.

No related posts.

Example 1: Change the Style of a DIV element on Mouseover

Lists are a great tool for navigations but many times they don’t work or are too difficult to style. Lets say you wanted to make a vertical navigation out of DIV elements but you wanted them to change styles on rollover. Your HTML may look something like:

<div id="leftColumn">
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 1</a></div>
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 2</a></div>
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 3</a></div>
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 4</a></div>
</div>

Very simple and clean. Notice there is no inline JavaScript for the rollover effect. The beauty of jQuery is it can handle events for elements without nasty inline JavaScript. Here is the jQuery JavaScript to add rollover effects to this navigation:

    $("div.sidenavOff").mouseover(function(){
    	$(this).removeClass().addClass("sidenavOver");
    }).mouseout(function(){
    	$(this).removeClass().addClass("sidenavOff");		
    });

Easy aye? Analyzing the code you can see simple mouseover and mouse out functions where we’re removing the current class and adding the proper one for the time in the event. This will effect any DIV with the class of .sidenavOff on mouseover.

Example 2: Including HTML content in a Page using jQuery and Ajax

Suppose we had a div on our page with the ID of #lookup. When clicked #lookup1 we wanted the content from a file called search.htm to load in another DIV with the id #lookupContent.

With HTML you could link to a new HTML file that had this adjustment made. With standard JavaScript you could make a very lengthy AJAX request to load the page or with jQuery you can do it with ease. For example:

	$('#lookup').click(function() {
		$('#lookupContent').load('search.htm');
	});

This code will load the file search.htm and replace the contents of #lookupContent with whatever is in the search.htm file. Cake.

I will give a few more, simple jQuery examples in the near future. I am trying to convince as many developers as I can to take a look at the various JavaScript frameworks. There is a reason they’re such a hot topic these days.

No related posts.

Realizing just how important personal development is to the graphic and web design industry, I’ve been seriously considering the implementation of a mandatory personal development policy for our employees at Zipline. What would it have in it, you may ask? The answer is, I am not quite sure. At this point I am thinking out loud. I have seen bits and pieces over the years about companies encouraging employees to partake in personal development. Some companies offer tuition reimbursement, others offer expense paid trips to conferences. While these are both great ways for employees to expand their skill set, they’re often cost prohibitive for small businesses.

My primary source of personal development is this blog. Every morning I get up at 4 AM and I read dozens of articles on marketing, advertising, graphic design, web design, and programming. After I have digested all of that content I will write an article relating to something that caught my eye, or something I experienced or learned the previous day. Then I will head into the office and attempt to put into practice the various interesting techniques, methods, and ideas I absorbed during my morning read. While I have learned a great deal by doing this, I am quite aware it would be unreasonable to ask my employees to work from 4AM – 5PM everyday, mostly because they’re a bunch of sissies.

So what if we paid our employees to blog, read, and network? During a time when many companies are banning social networking and other personal Internet usage it may seem counterintuitive to encourage employees to browse the Internet while on the clock. I think however that a couple hours of personal development per employee, per week would help the company become more innovative in the long run. I also think that this would help employees stay motivated. I know I personally feel excited and refreshed when I find new technologies or ideas to try. It helps to stave off the feelings of monotony that many developers begin to experience after their 1000th contact form.

While a personal development policy is an interesting concept, the question most managers will have is, how do you control it? In truth, I have no idea. Perhaps the first 30 minutes of every day is devoted to reading articles in a mandatory Google reader account and then it’s back to work. Maybe each employee is required to produce 2 work related blog entries a week. Unfortunately, I don’t have an answer. Personally, I hate to try to govern creativity. Personal development should be something fun and enjoyable. I don’t want to have to stand over someone’s shoulder with a ruler like a Catholic school nun and force them to read Sitepoint or listen to BoagWorld. In reality, if they love what they do it should be something they want to do not something they have to do.

My intent with posting this article was get some ideas out there. I am sure some of you work at companies that have some sort of personal development policy. Please share any ideas, thoughts, or comments you have about what should go into a personal development policy like I described above. Whenever I get a good, comprehensive policy developed, I will share it on the blog open source style for all of you to read, adopt, and share.

No related posts.

Unfortunately, many of the features of Bespin are not yet enabled. Currently you can’t do a whole lot with it but I can see some serious potential. Their website suggests that you will be able to easily load popular open source code and the program has some collaboration functionality that looks like it has a lot of potential. I have read that Bespin intends to allow you to collaborate even going so far as to share your environment with other programmers.

While I am excited about the move to cloud computing and all of the new product offerings I am also a little nervous. Many of the cloud-based applications I have demoed are buggy and functionality is inconsistent. One I do use on a regular basis, or at least Deanna does, is Basecamp. It is less software like than many newer online applications but it seems to be very stable. The last thing I want is to edit an important web document in my online IDE and have some JavaScript error occur that causes my file to be saved blank.

I think for now I will continue to stick with my desktop applications for business use. As much as I love to be an early adopter I think I am going to let some other programmers work the bugs out of these online environments before I jump in.

Check it out: https://bespin.mozilla.com/

No related posts.

jQuery

URL: http://www.jquery.com/
Hosted at Google: Yes
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Prototype

URL: http://www.prototypejs.org/
Hosted at Google: Yes
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. It features a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

MooTools

URL: http://www.mootools.net/
Hosted at Google: Yes
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

Dojo

URL: http://dojotoolkit.org/
Hosted at Google: Yes
The Dojo Toolkit is an open-source JavaScript toolkit for building great web applications. It shortens the time between idea and implementation by providing a well conceived API and set of tools for assisting and fixing the issues experienced in everyday web development. It is lightning fast, extremely robust, and supplies a solid set of tools for DOM manipulation, Animations, Ajax, Event and keyboard normalization, Internationalization (i18n) and Accessibility (a11y).

script.aculo.us

URL: http://script.aculo.us/
Hosted at Google: Yes
script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. It provides an visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more.

Yahoo! User Interface Library (YUI)

URL: http://www.mochikit.com/
Hosted at Google: Yes
The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses. The YUI project includes the YUI Library and two build-time tools: YUI Compressor (minification) and YUI Doc (documentation engine for JavaScript code).

Spry Framework

URL: http://labs.adobe.com/technologies/spry/
Hosted at Google: No
The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages.

MochiKit

URL: http://www.mochikit.com/
Hosted at Google: No
MochiKit is a powerful set of JavaScript tools. It offers tools to assist with event handling, AJAX, and DOM Manipulation. It is very well documented and generally well designed.

Railto

URL: http://rialto.improve-technologies.com/
Hosted at Google: No
Railto is a toolkit which focuses on aiding the development of AJAX based cross browser JavaScript in corporate environments. It is deisgned for use on corporate web applications and not general internet websites.

ASP.NET Ajax Framework

URL: http://asp.net/ajax/
Hosted at Google: No
ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers.

Clean Ajax Framework

URL: http://sourceforge.net/projects/clean-ajax/
Hosted at Google: No
Easy to use AJAX framework that provides message queue, XSLT, XPath, encryption (SHA1, MD5), web service access (SOAP, XMLRPC), JSON-RPC, cross browser AJAX, AJAX history and cache control.

SWFObject

URL: http://blog.deconcept.com/swfobject/
Hosted at Google: Yes
SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.

No related posts.

Yesterday, I saw a press release from Network Solutions announcing a new web developer community called LinkTogether. I am of course leery of any community developed by a corporation, especially one that is so closely tied to their target audience. That being said, I am a sucker for anything that is targeted at web developers and designers so I had to check it out.

After an hour of investigation I have to say I am intrigued. The majority of LinkTogether is made up of already common tools like forums, tutorials, and a developer community. What makes it different is it has some other fantastic resources for web developers like a list of pre-developed legal documents, white papers, and downloadable tools and applications. In addition, they have LinkTogether Challenges where developers can win money for their applications. I didn’t have much time to explore the challenges section but it seemed like an interesting concept.

Overall, I thought this was an interesting community that offers some great free tools for small web development firms. From a usability standpoint there are some changes I would make, particularly the way they force your password format. It will be interesting to see how this community develops, and what caliber of web professionals you will be able to find here. At this stage, it is still a little weak from a content standpoint but I think it is worth monitoring for awhile to see how it grows. If you sign-up and try it out leave me a comment to let me know what you think.

Check it out: http://www.linktogether.com

No related posts.

The new project is a promotional video for the University of Northern Colorado which combines video, personalization, and interaction to provide a unique promotional experience for prospective students. The video offers several types of personalization including, personalized audio, name personalization of posters, iPhone, and whiteboard. This system, like the one we developed for the InspriedSeason.com project also makes an outgoing voice call to the phone number the users provides helping to engage them in the experience of the video.

I apologize to my loyal fans. I have been busy trying to complete this project and a couple others before Christmas and I have slacked on posting the last few days. Hopefully after Christmas I will be able to get back on my regular posting schedule.

In the meantime, check out the new project and let me know what you think: http://findyourplace.unco.edu. Also, if you haven’t seen the InspiredSeason.com promotion for Gonzaga Women’s Basketball check that out too.

No related posts.

I decided to start my research project by first checking Wikipedia. Many users refer to Wikipedia as a the Web 2.0 encyclopedia so I knew they would have some good information on what exactly Web 2.0 is. According to Wikipedia, the term was first used here in this context:

In the opening talk of the first Web 2.0 conference, O’Reilly and John Battelle summarized what they saw as the themes of Web 2.0. They argued that the web had become a platform, with software above the level of a single device, leveraging the power of “The Long Tail,” and with data as a driving force. According to O’Reilly and Battelle, an architecture of participation where users can contribute website content creates network effects. Web 2.0 technologies tend to foster innovation in the assembly of systems and sites composed by pulling together features from distributed, independent developers. (This could be seen as a kind of “open source” or possible “Agile” development process, consistent with an end to the traditional software adoption cycle, typified by the so-called “perpetual beta”.)

Web 2.0 technology encourages lightweight business models enabled by syndication of content and of service and by ease of picking-up by early adopters.

This is along the lines of what I have understood the term Web 2.0 to mean. Tim O’Reilly, who is credited with the invention of the term Web 2.0 and who actually technically owns it defines it as:

Web 2.0 is the business revolution in the computer industry caused by the move to the Internet as a platform, and an attempt to understand the rules for success on that new platform.

I noticed in O’Reilly’s definition specific technologies were left out. Often when discussing the move to the internet as a platform for applications specific technologies and libraries are mentioned. Things like Ajax and libraries like jQuery seem to be synonymous with the term Web 2.0. This is largely due to their prevalence in modern Internet based software. Here are some more takes on what exactly Web 2.0 is: http://www.readwriteweb.com/archives/web_20_definiti.php. As I have read around the Internet on the topic the only consistent definition I have been able to find is that Web 2.0 is somehow related to the Internet.

I personally think Web 2.0 is an accidental term originally developed for marketing purposes the actually means nothing. It is a useful term for interfacing with customers who understand Web 2.0 is what they want but don’t actually understand what it is. The term itself cannot be accurately defined even by its creator and many of the technologies and online applications considered Web 2.0 in nature existed long before the invention of the term. The only real use I see for the term Web 2.0 is exactly what it was originally coined for, marketing. It can be used as a blanket term to describe whatever a marketer sees fit. Everyone and their grandma know they want Web 2.0. I know I personally want 2 of anything Web 2.0 with a hot side of Web 3.0.

No related posts.

Bear Bibeault – jQuery in Action [ILLUSTRATED]
Seth Godin – Tribes: We Need You to Lead Us
Mark Lutz – Learning Python, 3rd Edition
Jack H Grossman – Becoming a Successful Manager : How to Make a Smooth Transition from Managing Yourself to Managing Others
Seth Godin – Meatball Sundae: Is Your Marketing out of Sync?
Donald Sparkman – Selling Graphic and Web Design

If you can think of some others I should include please let me know…

No related posts.