Archive for April, 2014

jquery1

Two of my team members started working on jQuery and ExtJS technologies since last month part of developing few web based modules. I am thinking of taking this opportunity to build a knowledge base of jQuery which will be a one stop shop ready reference for the work that we are currently doing.

I will be posting a series of lessons on jQuery in the coming weeks. Hope you will get immensely benefited by reading these posts. Ok let’s get started.

http://jquery.com/

jQuery is a fast, small, and feature-rich and very popular JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

  • jQuery is a JavaScript Library.
  • jQuery greatly simplifies JavaScript programming.
  • jQuery is easy to learn.
  • jQuery is a single script file
  • jQuery is cross browser
  • jQuery makes interacting with DOM a piece of cake
  • jQuery has numerous selectors which would help you to interact with DOM effortlessly
  • jQuery has very rich event infrastructure/ event methods
  • Many rich jQuery plug-ins are available in market for almost any task out there
  • jQuery provides the ability to leverage Ajax with very little effort.
  • jQuery has got lightweight Footprint. Only 32kB minified and gun zipped

One can do amazing number of things using jQuery Library especially increased productivity and cross browser support.

  • Internet Explorer
  • Chrome
  • Firefox
  • Safari
  • Opera
  • OS
  • Android

If you are thinking of learning jQuery and don’t know where to start, I believe you are in the right place. By following the lessons that I am planning to post in my blog for next couple of weeks and by practicing them you will be able to have a very good start and get quite a bit from this course.

To get the most out of the posts on jQuery, I expect that you are familiar and comfortable in Java Script, HTML and CSS. But at the same time I am not expecting you to be an expert of these technologies.

Why should we use jQuery?

 

jquery2

Interesting question hah.

The more time you spent exploring answer to this question the more appreciation you will have for jQuery.

It brings together HTML5 and CSS, the jQuery JavaScript library greatly eases the pains of Web application development.

You will find jQuery intuitive and easy to learn — this library is built on shorter, simpler code, after all. With simple syntax and open coding standards, developers can shorten the time it takes to deploy an application or site.

In addition, developers don’t have to be experts in programming or Web design to create great styles for their sites. Any developer who has spent hours coding and testing CSS files will surely appreciate the simple implementation that jQuery brings to the table.

Visual Studio 2010 supports the integration of the jQuery library via the Manage NuGet Packages dialog box. This activates the Intellisense feature of Visual Studio, which gives the developer immediate access to jQuery methods and syntax without having to leave code view to do research. There isn’t a better tool to work in a Microsoft-based .Net environment.

Microsoft is showing that it’s serious about HTML5, which includes a lot of jQuery elements, by promoting the use of jQuery libraries that the HTML5 crowd has adopted. Microsoft is encouraging the use of jQuery, not only in mobile development but also in new Metro-style UI apps.

  • The jQuery library is free.
  • It’s light. Since jQuery pushes content to the client, it therefore reduces the wait time for server response. Plus, it’s smaller than Flash, so it results in smoother playbacks and less errors.
  • It works anywhere. HTML5 is cross-browser compatible-it will work on any browser, mobile phone or tablet, and even on Apple devices.
  • There’s a low learning curve. Since it’s based on plain old JavaScript, developers can learn jQuery fast.

In future, you may have to implement and deliver content to a variety of different platforms, including desktops, tablets and smart phones. HTML5 and jQuery is one of the best solutions for this kind of development.

Since jQuery is a major component of HTML5, it is worth the time, money and effort for developers to learn jQuery.

This library can deliver stunning effects with little coding-and, with more and more HTML5 integration, it will be a huge part of the future of Web development. If your goal is to build a site or Web app that is engaging and interactive, then jQuery is a necessary tool for your toolbox.

Most importantly you don’t need to worry about cross browser compatibility rather all your focus would be on designing and building your application

How to reference jQuery Script into a webpage?

To get started download jQuery script from http://jquery.com

If you need support for Internet explorer browser version   6 – 8 then go for jQuery 1.x else go with jQuery 2.x

 

jquery3

During development phase it is highly recommended to use the uncompressed version and during deployment we can ship the minified version.

After downloading the file you have to reference the script to the web page.


<html>
 <head>
    <title>How to reference jQuery</title>
    <script type ="text/javascript" src ="jquery.js" ></script>
 </head>
</html>
 

 Apart from Visual studio you can think of the following tools/editors while working with jQuery

  • Eclipse
  • Web Storm
  • Aptana Studio
  • Notepad ++

 

<html>
 <head>
    <title>How to reference jQuery</title>
    <script type ="text/javascript" src ="jquery.js" ></script>
 </head>
 <body>
  jQuery enabled web page!!!
 </body>
</html>
JQuery Ready function

http://api.jquery.com/ready/

We should use $(document).ready to detect when a page has been loaded and is ready to use.

Called once DOM hierarchy is loaded           but before all images haven been loaded where as window. Load event is called until images, CSS and everything is loaded.

The .ready() method is generally incompatible with the <body onload=””> attribute. If load must be used, either do not use .ready() or use jQuery’s .load() method to attach load event handlers to the window or to more specific items, like images.

<html>
<head>
 <title>How to reference jQuery</title>
 <script type ="text/javascript" src ="jquery.js" >
 $( document ).ready(function()
 {
 // Handler for .ready() called.
 alert("1");
 });
 </script>
</head>
<body>
 jQuery enabled web page!!!
</body>
</html>
jQuery Documentation

Suggest you to book mark the below URL since we end up referring to this page quite often.

http://api.jquery.com/

Make it as a habit to refer the API documentation before you jump start and Google for code samples. You will also find code samples for some parts of the documentation right here in this page.

At times you can even run a live demo in the API documentation page.

jquery4

Advertisements

Recently one of my friend told me that he has prepared a promotional business video for a product that he is planning to sell through his own company website. He made it himself with an easy to use online video production service available on http://www.makewebvideo.com which looked amazing and professional.

He showed me the free preview of this video. His idea is to take feedback from his friends and make further editing until he gets the final version.  Once final version is available he can then purchase a Full HD version for a very low price, starting from just $29 USD.

From start to finish, it will only take you 30 minutes or so to make a business promo with on-line marketing video maker. You’ll get a file that is ready for publishing, sharing and embedding on a webpage. So, it’s easy and fast to make your own marketing video, with your photos, text, footage and music. It is supported with all major browsers on Windows, Mac and Linux. This website has got many adobe after effect templates categorized in to the following

Explainer Videos

Ink Effect Videos

Tablet Videos

Cartoon Videos

3D Design Videos

Text Only Videos

Slideshow Videos

Corporate Videos

Trailer/Titles Videos

Scrapbook Videos

Pop-Up Book Videos

Click here to watch a sample preview video that I have prepared using this website.

 

Blogpromo