CategoryJavascript

Lightboxes

It seems that we tend to get a new lightbox clone every few weeks or so, so here are some I’ve run into recently:

From this set, I find Shadowbox the most robust and visually appealing. Of course there’s always version 2 of the original lightbox that you can use. But if you’re looking for a gallery–type solution, take a look at Galleriffic — it has most of what you might want in a javascript–based gallery.

CrossSlide: Image slideshows in JQuery

DHTML/Javascript has always lagged compared to Flash when it comes to image slideshows. For some reason, Flash just handles the transitions and image handling better. I guess this can be attributed to Flash’s animation roots. But there are some Javascript–based slideshows that manage to do a decent job — Smoothgallery is one of them. Now comes CrossSlide, a JQuery plugin that pushes the limits of DHTML–based slideshows. What used to be almost exclusive to Flash like the Ken Burns effect, it can do it too! It can do smooth transitions, panning, and zooming.

Some caveats though: CrossSlide is more CPU–intensive compared to other similar implementations. This downside is somewhat negligible considering today’s multi–core processors, but it’s good to know about it’s limitations.

Another JQuery Image Cropping plugin

In our last post we mentioned Jcrop, a JQuery plugin that gives your web applications the ability to crop images.  We found another script that comes with PHP to make things even easier for you! Now this would make its implementation even quicker than you can complain about it.

Jcrop: Crop images with JQuery

jcrop

Jcrop is a JQuery plugin that easily gives you image cropping functionality in your web apps. It works in major browsers and since it utilizes the widely–adopted JQuery framework, should work fine in future browsers as well.

WordPress 2.3.1 released

The update to the 2.3 version of WordPress is now available for download, containing fixes to the previous release. Interestingly, load order for the JavaScript libraries Prototype and JQuery are fixed to prevent compatibility issues, which brings me to my point — why use both libraries?

Prototype and JQuery are not small code libraries, and in a way are frameworks for simplifying client–side scripting. However, many of their uses can be achieved utilizing either of the two libraries, so the need to use them both simultaneously is rather redundant, and may be unnecessary. I think in the next major releases of WordPress, one of these two will be left out.

JQuery 1.2

JQuery logo.

Yes, JQuery 1.2 is out. If examples around the web and our previous coverage didn’t entice you enough, this one should:

JQuery UI logo.

jQuery UI signals the start of a whole new branch of the jQuery project which will focus on developing high-quality, reusable, components that you’ll be able to drop in your applications. Frequently, these components are coming directly to you from traditional jQuery plugins, but with strict coding, documentation, themeing, and demo standards. We hope you’ll enjoy this new level of quality as much as we do.

Good stuff.

jQuery 1.1.3.1: Faster yet still without the fats

The jQuery developers have just released an update, version 1.1.3.1, which it claims to have significant speed improvements over the previous one. With several bug fixes and improvements, the package is reportedly 800% faster than before, a huge performance jump if their metrics are indeed accurate.

jQuery has slowly grown in adoption rate as more projects are now considering it as an alternative to Prototype, an equally powerful Javascript library. With point releases that come often and significant improvements, the package is now becoming a common part of most open source projects, perhaps attributed to its ease of use compared to other libraries.

JQuery 1.0

The javascript abstraction library JQuery which we mentioned several months ago has now reached version 1.0. Javascript libraries have been gaining popularity with the emergence of “Web 2.0” and JQuery is another useful tool. This one tries to simplify the way javascript code is written, allowing for simpler coding.

Libraries like JQuery do help in rapid web development, though there are arguments against multi–layered abstractions since it teaches nothing new to the developers that use them. But certainly, they do have their uses in programming if used properly.

Re-introduction to Javascript

Many of us have been doing web design for several years now, and have probably mastered XHTML markup and CSS–based designs. In fact, some of us have gone through all the approaches in web design, including the spacer gif days from not too long ago.

Of all the related technologies, Javascript has probably been the least understood. We would use readily available scripts and slightly modify them to our needs, though rarely do we code them from the ground up. With the varied browser implementations and compatibility issues, learning Javascript has never been an easy task — but it’s never too late. Simon Willison’s aptly titled article “A (Re)-Introduction to JavaScript” is very informative and should help you get up and running with client–side scripting. I’ve been reading it for several times now and understanding Javascript has been a somewhat easier task.

cssQuery

cssQuery is a javascript library that provides an easy way to access DOM elements, without the need for focusing too much on transversing the document’s elements. More developers are more adept in CSS than in Javascript, making this a useful tool for those fairly proficient in CSS. cssQuery may be considered similar to jQuery and Behaviour, which somehow change the way we approach browser scripting.

Using cssQuery, you can now use common CSS selectors like body > p instead of getElementsById() or getElementsByTagName(). The downside would be the library’s size, though that is slowly becoming less of a consideration as broadband rapidly becomes widespread.

Ten javascript functions

Last November, Dustin Diaz listed his personal ten best custom javascript functions for use in web development. Expectedly, the well–used toggle() is there, along getElementByClass() and the notable triplets getCookie(), setCookie(), deleteCookie(). Most of these functions are quite small and straightforward, except for cssQuery, and they surely deserve a place in everyone’s “scripts.js” or “common.js”.

After being dugg and making it to the frontpage, he looks back at his now famous weblog entry, and additionally lists alternative ways of writing toggle(), just for fun!

jQuery

I just came across jQuery, dubbed as “New Wave Javascript.” Going through their documentation and tutuorials, it appears that jQuery attempts to change the way people write javascript, an abstraction layer of sorts. This can be helpful for rapid development, enabling various client–side scripting capabilities with just a few lines of code. Unfortunately, I think the effort made in learning jQuery can be devoted to learning Javascript, a skill you’re supposed to learn anyway if you’re into web development. But then again, learning a new library for your scripting arsenal will increase your stock.

A few good libraries

AJAX libraries.

I’ve been looking at several AJAX libraries these past few days for use with iPAP and several other planned projects. Going through AJAX Matters’s list leads us to many projects and options, and finding the right one for a specific need can be a cumbersome task. I’m providing some insights for the ones I find good enough.

  1. XAJAX is PHP–based and generates the Javascript programatically. You need to designate the action executed like replacing or appending content, but there is minimal need for tinkering with Javascript at all. Unfortunately, modifying or altering the generated client–side code is not as straightforward as other libraries. Another plus is that the PHP functions and custom functions you need can be in the same page you’re displaying to the user, so all you need to do is include() the xajax class file. XAJAX is good for PHP developers seeking to add some AJAX functionality to their applications, but those with a healthier Javascript/DOM acumen would find the next two libraries friendlier.
  2. advAJAX recently made the digg frontpage and proves to be simple yet easy to customise. If you’re comfortable coding Javascript, you can mix and match advAJAX with other presentational libraries and you’d have your very own toolset for your application.
  3. SACK is last on this list, but definitely not on functionality. In fact, it is good enough that an earlier version is used in WordPress 2.0 for all its AJAXy goodness. Just like advAJAX, you can customize your Javascript to perfection. The difference is in the syntax for setting parameters and calling functions, and boils down to personal preference.

To summarize my observations, XAJAX is best for those familiar with PHP who’d rather not deal with too much Javascript. advAJAX and SACK are better options for Javascript hackers who need the customization possibilities.

Javascript in Ten Minutes

Javascript in Ten Minutes

Every web 2.0 developer understands how AJAX and other interactive methods work. Unfortunately, many of us have learned this through toolkits or code libraries that are mostly “plug and play” by nature, failing to impart the basic lessons in client side scripting. “Javascript in Ten Minutes” should help you learn the topic allowing you to fully understand and enhance the scripting libraries you currently use.

© 2016 builder2

Theme by Anders NorenUp ↑

Follow

Get every new post delivered to your Inbox

Join other followers: