Archive for the 'Ajax - Javascript' Category

Ajax Video Tutorials

Published on January 23, 2008 in Ajax - Javascript. 3 Comments

Hi,

I just wanted to announce that I am now giving away a series of video lectures on Ajax - about 3 hrs worth.

The Videos:

Ajax Videos

These videos are not designed to be a tutorial, but rather, they are a lecture. None the less, these videos can help give you at least a basic understanding of what Ajax is all about.

Anyway, they are free, so what do you have to loose!

;)

If you guys want a proper killersites style (simple, practical and to the point) video tutorial, please let me know.

Thanks,

Stefan Mischook

www.killersites.com
www.killerphp.com

Automatic Table Styling with Javascript.

Published on January 10, 2008 in Ajax - Javascript. 0 Comments

A while back a wrote a JavaScript script that automatically styled an HTML table. In a nutshell, the script automatically changes the background color of every 2nd row in an HTML table.

Anyway, someone recently sent me an updated version of the script. You will probably want to read the original article before looking at these changes.

From the email:

I did some simplification on the code for zebrastripes. I don’t bother with the last array bit because TR elements have the bgColor attribute.

trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;

Greetings,

tarjei

The complete function:

function stripe_table(id_name) {

var my_table = document.getElementById(id_name);

/* For debugging */
if ( !my_table ) {
alert(”The ID ” + id_name + ” is not found.”);
return;
}

/* Table may have more than one tbody element */
var tbodies = my_table.getElementsByTagName(”tbody”);

for (var cnt = 0; cnt < tbodies.length; cnt++) {
var trs = tbodies[ cnt ].getElementsByTagName("tr");

/* Walk table row for row */
for (var i = 0; i < trs.length; i++) {
if (! hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;
}
}
}
}
}

CIAO.

Stefan Mischook

Matching Columns Script - Update.

Published on February 17, 2007 in Ajax - Javascript and Web Design. 0 Comments

Hi,

I decided to create another blog post to make it easier to find the updated version of the important matching columns script - it was buried in the originals article’s comments.

Notes:

-

Updated script by: Jonathan del Mar

I have modified the script to work with multiple class groups also with elements with multiple class names

/*
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com

Modified to work with multiple class groups also with elements with multiple class names
by Jonathan del Mar (dec-14-2006)

How it works: just apply the CSS class of ‘column’ to your pages’ main columns.

to work with different classes
add

var columns = new Array(’class_name1′, ‘class_name1′…);

by Jonathan del Mar

by default the script will call
matchColumns();
and the default class_name is ‘column’
(see the bottom of this script)
by Jonathan del Mar

*/
matchColumns=function(my_class){

var divs,contDivs,maxHeight,divHeight,d;

// get all elements in the document

divs=document.getElementsByTagName(’div’);

contDivs=[];

// initialize maximum height value
maxHeight=0;
if (!my_class) {
my_class = ‘column’;
}

my_regex = new RegExp(’(.* |^)’ + my_class + ‘( .*|$)’);

// iterate over all elements in the document

for(var i=0;i elements with class attribute ‘container’

//if(/\bcolumn\b/.test(divs[i].className)){
// modified by Jonathan del Mar to match ‘column’ in multiple classes

if(my_regex.test(divs[i].className)){
d=divs[i];

contDivs[contDivs.length]=d;

// determine height for element

if(d.offsetHeight){

divHeight=d.offsetHeight;

}

else if(d.style.pixelHeight){

divHeight=d.style.pixelHeight;

}

// calculate maximum height

maxHeight=Math.max(maxHeight,divHeight);

}

}

// assign maximum height value to all of container elements

for(var i=0;i
var columns = new Array(’class_name1′, ‘class_name2′, …);

to your html header.

Book Review: Build Your Own Ajax Web Applications

Published on October 2, 2006 in Ajax - Javascript and Nerd Book Reviews. 0 Comments

A very interesting book for experienced programmers.

I’ve reviewed several AJAX books and each has their own slant on the subject. Build Your Own AJAX Web Applications is the first that actually got me to think of AJAX based applications as a replacement for the traditional desktop applications.

… You’d figure I would have clued into this reality before, but for some reason, it only clicked while reading chapter 2!

WHO IS THIS BOOK FOR

Clearly you need to have a web programming background to understand this book. If you’re shaky with programming and object oriented programming is a great mystery to you, then you might find aspects of this book challenging.

On the flip side, if you want a refined and advanced approach to injecting AJAX into your web work, and you are comfortable with Javascript and a server-side language like PHP, then this is a very good book.

TOPICS COVERED

  • An overview of the basic technologies you’ll need to use to build Ajax applications.
  • Understand the XMLHttpRequest object, the core of Ajax applications.
  • Build a cross-browser XMLHttpRequest wrapper that you can use in all of your Ajax projects - using OO Javascript.
  • Build an Ajax application site monitor that works in real time.
  • Learn how to use Ajax without breaking older browsers or causing accessibility issues.
  • Fix the “Back button” problem.
  • Use JSON, YAML, and XML to communicate with the server.
  • Create an Ajax search application that pulls data from Amazon, del.icio.us, and Google.

.. yes, I got this list from amazon, but why reinvent the wheel!

MY CONCLUSION

I like the fact that the book does a good job of teaching AJAX while not getting bogged down in useless code and text - the book is concise, to the point and thin.

Get the book.

Stefan Mischook

The KillerAjax FAQ about Ajax

Published on October 1, 2006 in Ajax - Javascript. 1 Comment

by: Richard Mischook - www.killersites.com, www.killerajax.com

Are these really questions from actual users?

OK you got us. Truth be told, the AJAX section of the site is relatively new, so we had to kick back and use our imaginations a bit. That said we feel we have a pretty good feel for the sorts of questions are users might be asking themselves and that’s what we have presented here.

If you would like to ask your own question please feel free to join in the forum.

So what is this Ajax thing I keep hearing about?

Ajax is actually an acronym which stands for Asynchronous Javascript and Xml. The term Ajax is used to indicate the main technologies used to build Ajax-enabled web sites. From a user’s point of view an Ajax user interface looks and feels less like a web page and more like an actual application.

The most obvious feature of this is usually that a user can do things that cause what they see in their web browser to change, without the whole page having to be reloaded (for example add an item to a shopping cart).

What kind of web site would benefit from being Ajax-enabled?

Ajax is about providing the user with an interface that is more application-like and less like a web page. So it stands to reason that web applications would be the best candidates for Ajaxification. More specifically any site that is dynamic in nature and requires a fair amount of user interaction is what we are talking about.

For instance if your site is an online diary where the user simply reads what you have written – well not much use for Ajax here. But if users can respond and post comments then this might make it a candidate for a little Ajax.

If on the other hand your site has lots of things that a user could be doing, some of which take awhile but can happen in the background, then you probably have an ideal candidate site for Ajaxification.

Does the user need any special tools to use an Ajax-enabled web site?

Not really. As long as the user has a relatively recent version of any of the top browsers they should be OK. The browser list includes Internet Explorer, Firefox, Safari and others. The heart of Ajax is a browser component called the XmlHttpObject; In Internet Explorer this component is implemented as an ActiveX component while other browsers have their own mostly-compatible implementation.

The XmlHttpObject is what you – the developer – use to send queries to the web server without forcing the user to reload the whole browser page. When the server responds to the request you use JavaScript to update part of the page, using the Document Object Model. It’s important to realize that each browser may have its own quirks when it comes to JavaScript and this is where Ajax development can be tricky.

Does the developer need any special tools to do Ajax development?

Like plain HTML development, you can use a simple text editor (like Notepad) or your favorite Integrated Development Environment (IDE). Ajax is mainly about using existing tools and technologies to achieve a specific user interaction experience; so it stands to reason that your existing tools should be fine. That said, lots of vendors and open source projects are jumping on the bandwagon and starting to provide Ajax-specific modules as add-ins.

Without getting into the whole range of tools available, one thing that is helpful for serious Ajax development is a usable JavaScript debugger.

A debugger allows you to step through code as it is being executed so you can figure out what is going on when things go wrong. For Firefox there is the Venkman debugger (http://www.mozilla.org/projects/venkman/) while there are a couple of options for Internet Explorer including the Microsoft Script Debugger and the Microsoft Script Editor (the latter ships with recent versions of Microsoft Office).

Where can I learn how to do Ajax development?

Well this web site is probably a good place to start. You might want to look at our video tutorial which covers Ajax development from the ground up. In the tutorial we look at the foundations of Ajax, and then go on to build a functional shopping cart using Ajax technologies.

You might also want to keep an eye on the Ajax Forum for discussion of Ajax-related issues.

I’m comfortable with server-side development (like PHP, Java, Ruby or ASP) but not really into JavaScript – can I do Ajax?

The good news is that a lot of server side frameworks are starting to provide Ajax toolkits that mean you can write less code and let the framework generate the JavaScript for you.

A good example of such a framework is the Ajax support in Ruby on Rails; the Rails framework provides some Ruby methods that will generate Ajax code for you, saving you the trouble of being a JavaScript expert.

The same goes for PHP and other server side languages. The best thing about this approach is that it means you can continue to work in whichever language you are most comfortable with.

The Rails Ajax tools are built on a number of existing open source JavaScript libraries; aside from providing you with some really cool special effects, these libraries also take care of a lot of the cross-browser issues that can arise in Ajax development.

Of course it still helps to understand how things work under the hood when it comes to debugging issues – and there are unfortunately always issues.

by: Richard Mischook - www.killersites.com, www.killerajax.com