Enable JQuery Intellisense in Visual Studio

Hi,

While working with JQuery we normally feel a need of intellisense facility which can guide us about various JQuery syntax and functions.

Such documentation about JQuery is now available at http://appendto.com/community/jquery-vsdoc.

Here, I am going to explain the steps with example about how to enable JQuery documentation.

1. Navigate to http://appendto.com/community/jquery-vsdoc

2. Select the version of the JQuery for which you want to download the Documentation.

    In my example I have selected the latest JQuery Version which is (1.8.1)

     In fact you can download JQuery file also if you don't have it.

     Clicking on links will show the file contents in the browser itself which you can then save to your computer.

     For my example I actually have downloaded minified version of JQuery 1.8.1 from http://jquery.com/download/

3. Once files are downloaded place them to the proper location from where you are going to refer the them in your project or other html/aspx/js files.

   For the example I have created an ASP.NET application, and removed all other files from "Script" folder as they were old version of JQuery and saved downloaded JQuery and VSDoc files to that "Script" folder.

4. Include only JQuery file to your project if you are using Visual Studio.  

VSDoc file is not needed to be part of the project as it will be referred by relative path and also it won't be part of your final deployable version of the application.

And that's it, now you are all set up to use the JQuery documentation while you are writing javascript in script file (.js file) or in .aspx file or in .html file.

Let's see how.

1. In HTML file.

    You need to first refer the JQuery file to your html.

  Now as you write the JQuery cod in another script tag, you will be able to see the JQuery documentation as following.

Bingo, as you see the documentation show you about expected arguments of the JQuery function with their descriptions.

2. In ASPX file

  The same steps as for HTML file explained above, you need to follow to enable JQuery documentation in ASPX file too.

3. In .JS File.

Let say instead of writing all your scripts in HTML or ASPX files, you chose to have a separate JS file where you will write all your scripting code.

To enable JQuery documentation in JS file you only need to refer the VSDoc file in your JS file.

  

In the image above you can see that once documentation is enabled, you will be able to see all available methods for selected jquery object as you type in. Not much difference than writing code in C# or VB in Visual Studio.

 

Once you select a method and type opening parenthesis you get details about the parameters of the method and also the overloaded version of the method.

Courtesy

There is another nice blog about JQuery Documentation in VS2008 by Scott Guthrie available here.

Also there is a very nice descriptive video by Dan Wahlin about JQuery Fundamentals available here

I hope this will help the newbies in JQuery and scripting world in making their development smoother and more organized and hassle free.

Will be happy to see Comments/Suggestions/Views and to answer questions.

Thanks and regards,

Chetan Ranpariya

Scrollable table using HTML+CSS+Javascript

Hi Friends,

In the world of interactive and fast loading html web pages there has always been requirement of scrollable table with fixed header.

People who worked with ASP.NET datagrids and gridview have faced this problem at least once. Then there was no other option then to write your own custom control to achive this functionality.

Currently, in the era of ASP.NET MVC the problem didn't go away but we have things like JQuery and related plugins which can do these things for us with not much effort.

In one of my project we had to resolve the same problem on our own as we were not allowed to use any readymade third party JQuery plugin.

The requirement was to have
1. table with fixed header
2. table data can be scrolled both vertically and horizontally (as we have good number of columns to be shown in the table)
3. when scrolled vertically header should not move but when scroll horizontally table header should also be scrolling.

The very first idea is to have two tables
1. One with only header
2. Second one where data will be displayed.

But what about scrolling? so finally my associate Venkata Rami Reddy came up with following structure where we will use two different divs containing one table each.

<div>
   <table>
     <thead>
        <tr>
                 //Header Columns will come here
        </tr>
     </thead>
   </table>
</div>
<div>
   <table>
     <tbody>
       <tr>
        //Body Columns will come here
       </tr>
     </tbody>
   </table>
</div>
Now we am going to make both the "div"s in a above structure as scrollable.
Scroll bars for the first div will not be visible also I will set overflow = hidden for first div, while for the second div both the scrollbars will be visible.

Column with for all the columns of both the tables should be fixed here.

Also Rami Reddy found this nice small piece of code which I used along with the above HTML and my CSS to achive implementation of 2 way scrollable table.

The final out come would look as following.

I have inlcuded all related files here.

I hope this would help the people trying to implement scorllable table.

Sincere thanks to Rami Reddy for the efforts he put in research and implementation of this which helped the project a lot. Keep up Venky!!!!!

Thanks and regards,
Chetan Ranpariya