Archive for the ‘articles’ Category

Proxy Pattern and overwriting functions in Javascript

I would like to present our readers a very interesting functionality that gives javascript developers a lot of power.

First for those who don’t know what the Proxy Pattern is, well a proxy(at function level) is a function that provides a interface to another function.

Let’s say we want to create a proxy for the console.log method. And have it do something else without altering it’s initial purpose.

Read more

jQuery 1.7 beta released

The jQuery 1.7 release is very expected so I’ve heared a beta of the release is out there.

THe jQuery 1.7 will bring some new events API: on/off, some form behaviour changes to deal with IE 6/7/8, and some improvements to the animation function and the removeData function.

Check out more on the jQuery page.

jQuery event namespacing.

One day I had a very interesting problem. I created a plugin with a scroll event that I had to add/remove, but I realized I can add the event but then how do I remove just my event? .. a .unbind(‘scroll’) call would remove all scroll events, not only the event added by me.

So after a little digging I found “Namespaced events” support in jQuery. What does this mean?…Well one can add a event within a specific namespace and then remove that events from that namespace.

Here is a example, in which I will add a scoll event then remove my scoll event:
Read more

jQuery Mobile Development (jQueryMobile)

For those interested in mobile app development I would like to present a solution for creating web apps for mobile devices using the jQuery mobile framework.

The jQuery mobile framework helps create web apps using the simple “write less, do more” on which the jQuery framework was build. Using the framework creating smart and touch-optimized web apps is very easy.

The framework allows for creating apps that work across mobile platforms like iOS, Android or any other.

This is the blueprint for a mobile page:
Read more

jQuery File Upload with Drag&Drop

In today’s article I would like to write about a very interesting functionality that can be developed using the latest html5 javascript.
In this article I would like to explain how to make a simple drag&drop script for uploading files, using the dragover and drop events that have been added with the new HTML5 javascript update. So again, this functionality will work only on HTML5 compatible web-browsers.

Ok, so let’ start creating our simple file upload functionality, first we will add the drag events:

  1. (function($){
  2.  $(document).ready(function(){
  3.   $('#dragzone').bind('dragover',function(event){
  4.                        $(event.target).css('background-color','red');
  5.    event.stopPropagation();
  6.    event.preventDefault();  
  7.   });
  8.   $('#dragzone').bind('drop',function(event){
  9.    $(event.target).css('background-color','white')
  10.    $.FileUpload($(event.target).attr('path'),event.originalEvent.dataTransfer.files);
  11.    event.stopPropagation();
  12.    event.preventDefault();
  13.   });
  14.  });
  15. })(jQuery);

Read more

Ajax with Drupal callbacks

In this short article I would like to explain how to create a simple AJAX request handler in Drupal.
So you have a module created, and you would like to add some AJAX requests in a page, but the question is where to point the requests to? What you have to do is create a Drupal callback, that you can use in a AJAX request, and that will return just the data you need in the callback.

Read more

jQuery and jsonp (cross-domain requests in jQuery)

As we know AJAX is a great tool in making very nice and interactive web applications, but one of it’s drawbacks is the fact that with AJAX we can’t do cross-domain requests because of restrictions imposed by the browser (same-origin policy). To solve this problem one of the most simple and scalable solutions is to insert a script element in the page (the script element is not restricted by the same-origin policy) and get the required data this way. To make this solution easy-to-use, JSON format is used to return the data wrapped in a function call.
Read more

AJAX Navigation (window.location.hash)

As we all know one of the great benefits of implementing AJAX is the possibility of updating content without having to navigate to a new Web page. With this comes the drawback that the user can not come back to the last action, and doesn’t have a navigation link for his AJAX generated page.

The solution: using window.location.hash to keep information regarding AJAX action.
For example let’s say an AJAX request is done when a button is pressed in the page, and when that button is pressed the AJAX request load’s data for that buttons id, we will add required data to the window.location.hash, like this:
Read more

What are javascript closures?

Javascript closures are considered to be advanced stuff, and not many concern about this tehnique. That’s really a shame, because closures are the answer to the problem of how to bind variables to functions that are called at a later time. I actually found the need to use this technique while working on a project.

A closure takes place when a created function binds local variables to it in such a way that they are kept alive after the function has returned. A closure is a special kind of object that combines two things: a function, and any local variables that were in-scope at the time that the closure was created.

Here is an simple example:

  1. function say(name) {
  2.   var text = name; // variable
  3.   return function() { alert(text); }
  4. }
  5. say('Hello')();

Read more

jQuery and Zend Framework

One of the frameworks that offer a very nice support for jQuery is Zend Framework.
Zend Framework is an open source framework implemented in PHP 5 by the developers of PHP. Zend framework is a highly MVC(Model–View–Controller) based framework that makes developing PHP web application much easier.

Read more

Return top