Learn How to Restrict jQuery

Author: Exforsys Inc. Published on: 11th Jul 2010

Developing an Ajax and JavaScript based application can be easily done with jQuery. As one of the most powerful frameworks, it has become the choice of many developers on how to create an application. It can work with ASP.Net or it can be used as a standalone framework to create an application. Developer support is even impressive as there are small libraries created for specific functions everyday. Once the framework is implemented in an Ajax based application, the functions from jQuery can be called and implemented in the client side. But there are times that when a jQuery is implemented, its effects in the application should be limited. The functions in an Ajax or JavaScript based application will be based on jQuery once the programming language is used. Some developers can fully rely on jQuery for their needed functions but there are situations that a specific part of the application should not be used with jQuery. There are actually three methods a developer can consider to enable restriction of jQuery in the application: Separation through hash tags - Developers can create a function, table or tools that will not be used with jQuery as long as they are properly tagged in the application. Using hashtags (#), developers can customize the specific function so that it can be implemented without the influence of jQuery. Developers may have to manually code the function because it is separated from jQuery. Creating context - This is a very smart option especially when you need to implement a relatively bigger function that should not be affected by jQuery. Instead of using hash tags to separate the content, developers can create a specific selector so that it can influence the functions within it's table. This selector can be considered as an "outside" function because it is separated from the rest through context. The challenge to this format is that it could be treated as a 3rd party source which is restricted in JavaScript and Ajax based application. Adding class - This can also be likened to the previous function except that it uses variable class to separate the specific function. It can also be likened to the use of hashtags because it will require developers to create a unique ID. This ID is not necessarily implemented in the rest of the application but it will differentiate itself from other functions implemented with the help of jQuery.

These are the three options in implementing restrictions for jQuery in an Ajax based application. Why the three options? Because limiting a framework is not necessarily a guaranteed practice in an Ajax based application. Developers have to try one of these options in case the other option will not work in their specific application. Aside from jQuery, developers can also consider this method if they want to use other frameworks in the online application. These simple tricks to limit the implementation of jQuery (and other frameworks) should help you get started in building a highly customized JavaScript and Ajax based application.

Smart Yet Hidden jQuery Capabilities

Author: Exforsys Inc. Published on: 12th Jul 2010

Developers focused on JavaScript and Ajax based applications will most likely encounter jQuery. Recognized as one of the biggest frameworks and libraries, developers should be able to find their needed functions to implement an efficient online application. Aside from enjoying ease of integration, developers can also take advantage of the security provided the framework. Cross-browser capability is also a possibility when using jQuery. But the framework is not just for ease of implementation and security. There are some functions inherent in jQuery that push capabilities of your online application. More than Simple Attributes Attributes can easily change the way users interact with the application. There are a good number of attributes that can be added to the code which will easily change how data is accessed and steamed to the client side. jQuery has this capability but pushes the attribute even further. The attribute used as an object can be used as reference to launch a separate webpage. This will allow developers to create interaction without specific functions in the application. But this feature does not end there the additional objects added in the previous page can also be used in the new webpage. Grouping Functions While a good looking code does not necessarily mean a smart and powerful application, it can help because developers will be able to maintain and upgrade if the code is readable. Developers can use a specific function from jQuery if they want to create a neat looking application. The function is called bind and it can string together various functions. This will work even if the bind will contain various functions that require user interaction. A little caution though: do not use this function as a convenient method to launch several functions since it will increase resource requirements in implementing the said application.

Effectively Work with JSON JSON is one of the best methods of easily streaming data in an Ajax and JavaScript based application. But there are times that a general JavaScript object would be a better option to ensure browser capability. Traditionally, a customized script is required to convert JSON into JavaScript object. But jQuery comes with a converter which removes the coding requirement. The function parseJSON will effectively convert JSON to the needed data. Developers just have to specify the data to be converted and the rest will be taken cared of by parseJSON. Implementing Delay? No Problem Delaying something in jQuery is very easy because developers simply have to use a single function with simple parameters. The function delay() will simply hold animation or any interaction for a specific amount of time (specified as parameters). Developers do not have to add specific restrictions or tell the function to start after a few seconds or milliseconds since delay() will hold and execute the function after fulfilling the parameters. Explore these functions in jQuery. A framework or library is very useful in create online applications. But never limit jQuerys capability to basic applications. There are hidden gems in the form of function that pushes the frameworks capability in building highly interactive online tools.

Learn How to Use Two jQuery Versions in One Application

Author: Exforsys Inc. Published on: 13th Jul 2010

jQuery is undoubtedly one of the well known Ajax and JavaScript frameworks. Developed in the early days of Ajax, the framework eventually became the staple of various developers because of its ability to provide various functions for a variety of purposes. Because of its impact on JavaScript, Microsoft has even teamed with this framework as part of their offering in ASP.Net. Aside from powerful support from jQuery, developers around the world have also developed various libraries based on this framework. The ease of implementation of jQuery in various settings was made possible because of its consistent update. While the early version of jQuery is already impressive, there are situations wherein jQuery might not provide the needed solution. But the update of jQuery is not necessarily a move forward. There are times that some of the functions were removed or changed which might not work well in various settings. For that reason, some developers ignore the updates from jQuery or

forced to use a different framework. Some also use mash-ups so that they can use the same version while providing upgrades in their online application. But you can also use two versions of jQuery in one Ajax or JavaScript based application. There are two solutions possible for this problem. The Non-IE Solution (or the Easy Method) This solution will allow you to load two or more versions of jQuery in one application. In this method, you will simply use two important functions before loading the script from a different version. The first function is to inform the JavaScript engine that you are loading a different script so you need to have a noConflict function. The function is:
jQuery.noConflict()

You need to set the function to (true) if you want to allow two versions. Of course, using (false) will simply switch the function with a different version off. The second function is the loading function that will indicate the jQuery version. For example:
load("jquery","version")

If you choose to use Google as the source simply use google.load as the initial function. The IE Solution (Longer Method) If you anticipate that your application will be used in IE or if your application will be used by anyone, then you need to use the dynamic loading technique. Basically, this technique can be used if you will be aggressively using a totally different framework. In this technique, the additional framework merely becomes a node. The only difference is that you can directly point to the source of the library instead of going through append functions just to load a different version of jQuery. A good example is indicating the full URL of the Google API on jQuery so that it can work in the application. There is a tendency that the longer method will be used every time to avoid future problems. But if you are creating an application for local use, you can force your users to use non-IE browsers since this method is easier for developers and can be easily interpreted by the JavaScript engine. Using non-IE for users is a small sacrifice for a better working application.

Selection of Impressive jQuery Plug-ins

Author: Exforsys Inc. Published on: 14th Jul 2010

The popularity of jQuery could be easily measured by the impressive variety of plug-ins created. While there are those plug-ins that might only cause more harm than good, these are often the fault of developers. jQuery developers could easily crunch out plug-ins because of the extensive functions available for developers. But other plug-ins are not your run-of-the-mill plug-ins as they offer more impressive functionality for your Ajax or JavaScript based website. The following are the impressive plug-ins that could truly transform your Ajax or JavaScript based application. Full text plug-in This simple plug-in transforms your text area into full screen page when clicked. Developers should only integrate the plug-in to the text area in order to properly use the plug-in. Although limited in functionality, it can easily be expanded on other websites especially simple HTML based websites. Ajax Scroll As the name suggests, the plug-in transforms your data and files into a gallery with scrolling display. This will help you save space while ensuring the availability of the data needed. Like the full text plug-in, developers should only ingrate the data to the specified plug in to expect the function of Ajax scroll to be fully implemented. jYouTube jYoutube is one of the simplest and smartest plug-in for multimedia that you can use. The plug-in will provide thumbnails of the available videos right from YouTube.com. No need to transfer files from you tube or additional configuration from their end. Developers should only indicate the username they want to access and the created videos by the indicated user will be displayed as thumbnails. jqDock The images in your website will be placed in a Mac-launcher like gallery complete with expanding icons when mouse moves over the photo. The gallery is can be customized by display (horizontal or vertical mode) jModal If youre a Facebook nut, then this plug-in is for you. This plug-in will transform your dialog box into Facebook like dialog. While it doesnt provide any functional advantages, this plug-

in can easily transform your website with Facebook experience. Make sure you use a lot of dialog in your application if you want this feature to be noticed. Maxlength This plug-in provides text space with maximum character control. The plug-in sounds simple but the plug-in can also be expanded into three windows and each window will have maximum character allowed. Drag and Sort This jQuery plug-in provides JavaScript functionality that will aid user arrange icons or photos in your website. Auto adjustment of the arrangement happens when an icon is dragged in other area of the webpage or in the space allowed by developers. OpenSocial Gadget Improve your users social network experience with this small plug-in. The plug-in can connect to various social networks that use OpenSocial IDs as its security feature. This project was made to work with other approved OpenSocial gadgets. Using API offered by OpenSocial and Gadgets, this particular jQuery plug-in was made. The plug-in might require some extra configuration for security purposes.

jQuery Smart Libraries

Author: Exforsys Inc. Published on: 23rd Aug 2010 | Last Updated on: 19th Dec 2010

jQuery is a well known programming language for JavaScript and Ajax for a good reason. Since its inception, developers around the world are constantly working with the framework. Their work is not just based on creating new applications based on jQuery but on creating new functions and tools that will improve the framework. Because of this support, thousands of scripts can be freely used in various jQuery based applications. A good example for the continued support of this framework is the recently released tools for jQuery: Concrete and Selector. The application was developed by Hamish Friedlander and can be freely used in various JavaScript and Ajax based applications running with jQuery. jQuery Concrete Concrete is a small but very powerful library that can be injected in various jQuery applications. Specifically built for powerful applications, Concrete will allow developers work with DOM without manual coding. The library is aimed to take over functions of Object Oriented programming. This means developers wont have to extensively work with DOM functions as the library will adjust to the needed functions in the application.

Completely aware of its current environment, the library will be able to provide functions without major changes on the DOM. The self awareness of this library has become a very impressive feature of Concrete. But what pushes this library further is the ability of the functions to directly attach to DOM. The function will not be treated as another plug-in or API but another set of codes placed in the DOM. This improves access of the application since it will not have to go through another protocol just to be interpreted by JavaScript engine. Since its also fully compatible to jQuery, working with other functions in the library is not a problem. jQuery Concrete can be found here. jQuery Selector Selector for jQuery is not a totally separate library in Concrete. In fact, the main reason why Concrete is very powerful in introducing the functions to DOM is because of Selector. In gist, Selector is a simple CSS tool that pulls functions needed from Concrete and adopts them to DOM when needed. The library makes use of jQuerys natural ability to work with powerful CSS. This setting makes Selector an even more powerful library as it can easily interact with jQuery without any concerns. The library is also very smart since it will calculate or compare the functions from DOM and the library. The Selector will naturally select the faster function. Challenges to Selector and Concrete While these two libraries are very impressive, theres a small limitation users have to go through. When using these libraries, users will be forced to download another JavaScript script instead of letting DOM or other scripts work with the application as API. This means slower gadgets or those with slow internet connection might have some trouble working with online applications using these libraries. On the other hand, these libraries can also be integrated to widgets and APIs as they are, after all, tools for data retrieval.