Tuesday, April 15, 2014

Export table to Excel using jQuery in IE

Previously I had posted about Export table data to Excel using jQuery but that solution doesn't work in IE. And many of us are looking for solution to this problem. If you are using ASP.NET, then by end of this post you will have the solution.

To make it work for IE with ASP.NET, we need to append header in Response object and then allow downloading of file. This can't be done only on client side for IE. So the idea is to pass the table data along with its structure to ASP.NET server side code and then using server side code, allow downloading of file. But before passing the data to server, escape the HTML tags to handle "A potentially dangerous Request. Form value was detected from the client" exception.

Below jQuery code attaches click handler to button and escapes the data and assign it to a hidden field. The same hidden field will be accessed at server side to get the escaped table structure.
$(document).ready(function () {
    $("#btnExport").on('click', function (e) {
          var tblHTML = $("#dvData").html();
          tblHTML = escape(tblHTML);
          $('#hdnData').val(tblHTML);
   });
});
And below is ASP.NET server side button click code, which adds header to Response object and defines the content type to "application/excel". And then writes the data.
protected void btnExport_Click(object sender, EventArgs e)
 {
   string data = hdnData.Value;
   data = HttpUtility.UrlDecode(data);
   Response.Clear();
   Response.AddHeader("content-disposition", "attachment;filename=Data.xls");
   Response.Charset = "";
   Response.ContentType = "application/excel";
   HttpContext.Current.Response.Write(data);
   HttpContext.Current.Response.Flush();
   HttpContext.Current.Response.End();
}
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Friday, April 4, 2014

jQuery Coding Standards & Best Practices

Following coding standards and best practices while programming is hallmark of a good programmer. These expertise plays an important role for performance of any application. And this applies while using jQuery as well. As a jQuery developer, its very important to follow coding standards and best practices to write better code, error handling and avoiding common mistakes. jQuery gives amazing power to make things simple and clean way to code.

Here is collection of some amazing articles for jQuery coding standards and best practices.

Coding Standards & Best Practices




jQuery Best Practices




14 Helpful jQuery Tricks & Best Practices




Tips to use jQuery selectors efficiently




Ignored powerful shortcuts of jQuery




jQuery Performance Cheat Sheet




Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Thursday, March 27, 2014

10 jQuery Mobile Slider plugins

Collection of 10 Awesome jQuery mobile/ responsive slider plugins.

We all know that mobile site or a responsive site has become a must have thing and how important images and content sliders are for a responsive website. So find a complied list of 10 awesome, free and ready to use jQuery plugins for creating mobile slider. These plugins allows to have any type of content like images, text, iframes, html5 video and audio, YouTube and Vimeo videos. Enjoy..

You may also like:

Glide.js


Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It's simple, lightweight and fast. Designed to slide, no less, no more.


RTP.Slider.js


RTP.Slider.js is a versatile and flexible slider. Strong support for fluid / responsive Designs, mobile browsers and touch devices. It has nearly every feature that you can find in other sliders on the web.


Swiper


Swiper - is the free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed mostly for iOS, but also works great on Android, Windows Phone 8 and modern Desktop browsers.


FERROSLIDER 2


FerroSlider is a free, simple, powerful, responsive and customizable jQuery sliding plugin powered by HTML5 and CSS3. Organize any type of content, such as images, text, pages, lists and so on. You can use it as a sliding gallery or as slider for a one-page-website.


Excolo Slider


A simple jquery sliding plugin, supporting responsive design and touch.


iosSlider


iosSlider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.


jQuery Slider plugin


jQuery Slider is easy to use and multifunctional jQuery plugin that supports any webkit based touch mobile devices such as iPhone/iPod/iPad and Android.


sGlide


sGlide is a super flexible and light-weight jQuery plugin that generates a simple, feature-rich & mobile ready slider, which can be easily customized and styled using regular CSS.


μslider


μslider is a responsive and touch friendly jQuery plugin slider. Content can be anything: images, text, iframes, html5 video and audio (natively), YouTube and Vimeo videos with a light js patch. It's highly flexible and very easy to configure.


SLIDEME


Slideme is a responsive, css3, compatible (works fine even with IE7), customizable, easy to install (and use), multi-instance, fullscreen, cool, powerful slideshow plugin for jQuery.


Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Tuesday, March 25, 2014

jQuery: Convert ASP.NET GridView Data into CSV

In this post, find jQuery code to convert ASP.NET GridView data into CSV format which is sometimes quite useful for exporting purpose. This can be also be done using server side code but that involves extra overhead "postback".

ASP.NET GridView control is rendered in table > th > tr > td format. The columns names are placed in th tag and all the data goes into various td tags. Also refer ebook on ASP.NET GridView & jQuery Tips and Tricks.


You may also like:

To create CSV, we need to loop through GridView including header and rows. While iterating, store the value in a array and in the end join the array with "," sign to form CSV.
$(document).ready(function() {
   $("#<%=txtCSV.ClientID%>").hide();
   $('#<%=btnSubmit.ClientID%>').click(function(e)
   {
     var arrCSV = [];
     var strTemp = '';
     $("#<%=gdRows.ClientID%>").find("tr").each(function () 
     {
       if ($(this).find("th").length) 
       {
         var arrHeader = [];
         $(this).find("th").each(function () {
           strTemp = $(this).text().replace(/"/g, '""');
           arrHeader.push('"' + strTemp + '"');
         });
       arrCSV.push(arrHeader.join(','));
      }
      else 
      {
        var arrData = [];
        $(this).find("td").each(function () {
         strTemp = $(this).text().replace(/"/g, '""');
         arrData.push('"' + strTemp + '"');
       });
       arrCSV.push(arrData.join(','));
      }
   });

    var strCSV = arrCSV.join('\n');
    $("#<%=txtCSV.ClientID%>").val(strCSV);
    $("#<%=txtCSV.ClientID%>").show();
    e.preventDefault();
   });
});
If you don't want to include headers in your CSV, then you can remove below code block from above code.
if ($(this).find("th").length) 
{
   var arrHeader = [];
   $(this).find("th").each(function () {
     strTemp = $(this).text().replace(/"/g, '""');
     arrHeader.push('"' + strTemp + '"');
   });
   arrCSV.push(arrHeader.join(','));
}
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Wednesday, February 26, 2014

10 Awesome Mobile Menu plugins and tutorials

Collection of 10 Awesome Mobile Menu plugins and tutorials.

Due to high usage of smartphones, creating mobile apps, mobile site or responsive site has become a must have thing which helps to expand the customer base. Create mobile specific site or responsive site is a challenging things due to presence of different mobile OS, different screen size phones with different resolution, different software and hardware. As limited space is available on mobile device for displaying website, so creating menu is challenging. But not to worry.

Today we have complied list of 10 awesome, free and ready to use jQuery plugins and tutorials for creating mobile menus. Enjoy..

You may also like:

Shifter


Shifter is a jQuery plugin for simple slide-out mobile navigation. Shifter works by checking for target elements in the DOM and binding events to them.


SlickNav


SlickNav is a responsive mobile menu plugin for jQuery with features like multi-level menu support, cross-browser compatibility, Flexible, simple markup and degrades gracefully without JavaScript.


Menutron


Menutron transforms your navigation menus from a list to a select menu when resizing your browser. On mobile devices, the select menu pulls up a native control, making it easier to pick an item.


Responsive and Touch-Friendly Menu


Tutorial for creating responsive and touch-friendly dropdown navigation. The technique consists of 3 main parts which are Simple drop-down navigation based on HTML and CSS, Responsiveness implementation using media queries and Adoption for touch screen devices with the help of a super tiny jQuery plugin.


jQuery.mmenu


mmenu is a jQuery plugin for creating slick, app look-alike sliding menus for you mobile website or responsive website.


Navobile


jQuery Navobile is a jQuery plugin that makes mobile navigation easy. Navobile uses CSS to apply CSS3 translations, Mobile device detection and fixing the position of nav.


FlexNav


FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility.


Responsive Retina-Ready Menu


A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.

The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, use an icon font so that the icons of the menu won’t get pixelized on resize.


slimMenu


slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.With slimMenu, you’ll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. It is 100% mobile responsive.


Horizontal Slide Out Menu


A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.


Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Tuesday, February 25, 2014

10 Awesome jQuery lazy load plugins

Collection of 10 awesome jQuery lazy load plugins.

Lazy loading of images is a technique to delay loading of images on the webpage without interrupting loading of complete page. It is quite beneficial since it allows to improves your page load time and improves user experience. So in this post, find a complied list of 10 awesome jQuery plugins for lazy loading of images and videos, which are lightweight and easy to use.

You may also like:

BttrLazyLoading


BttrLazyLoading is a jQuery plugin that allows your web application to defer image loading until images are scrolled to but not only! BttrLazyLoading also allows you to have different version of an image for 4 different screen sizes: phones (<768px), tablets (>768px), desktops (>992px) and large Desktops (>1200px).


jQuery LazyLoad Any


Lazyload Any is a jQuery plugin provides a lazyload function for images, videos, iframe or anything.


Echo.js


Echo.js is a simple image lazy loading library, it's less than 1KB minified.

Lazy-loading works by only loading the assets needed when the elements 'would' be in view, which it'll get from the server for you upon request, which is automated by simply changing the image src attribute.


Lazy Load jQuery Plugin


Lazy Load delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using Lazy Load on long web pages containing many large images makes the page load faster.


Unveil


Unveil is a jQuery plugin which is lightweight version of Lazy Load plugin. Unveil has support for serving high-resolution images to devices with retina displays and it less than 1k.


Lazy Load XT


Lazy Load XT is a mobile-oriented, fast and extensible jQuery plugin for lazy loading of images/videos with build-in support of jQueryMobile framework.


stalactite


A jQuery plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, stalactite takes a lazy approach and sorts each child element sequentially. This can add a sense of curation as it makes your viewer aware of the browser's decisions.


LazyYT.js


This is a jQuery plugin to lazy load Youtube videos. On the initial load, the div will be replaced by a preview img of the video. On hover, the preview img will be replaced by the iframe Youtube video.


jQuery Lazy


The Lazy plugin for jQuery load specified images after the page load itself and speed up your loading time through this. Images outside of the visible area will only get loaded when the user scrolls to them. This will not only increase the page loading speed, it will even increase your traffic.


jQuery.latley.js


A very lightweight jQuery plugin to lazy load images.


Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Tuesday, February 18, 2014

10 Libraries to create circular charts

Collection of 10 awesome jQuery and HTML 5 libraries to create circular chart.

Chart is the best possible way to represent data is graphical and stunning way. It makes information quite easy to understand and reachable. I had already posted about "5+ jQuery Plugins for Interactive Charts and Graphs" and "Draw Gantt charts using jQuery" but in this post, find complied list of 10 awesome jQuery, HTML 5 and JavaScript libraries to create circular chart, Donut, Pie chart or display data in circle. These libraries don't use images to represent images, instead they use HTML 5 canvas to create circular form of graph.

You may also like:

Circliful


Circliful is a jQuery plugin for showing circle statistics. It is based on HTML 5 and jQuery so no images are used.


Circles


Circle is lightwheight JavaScript library that generates circular graphs in SVG. Now with animation.


jQuery Kontrol


jQuery Kontrol is a experimental JavaScript jQuery library of UI controls ; dial (was jQuery Knob), XY pad, bars. It is canvas based so no png or jpg sprites. It also have touch, mousewheel, keyboard events implementation.


Chart.js


Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.


Animated Pie Chart (HTML5 & jQuery)


Learn how to use the HTML5 canvas element, CSS3 and jQuery to create a gorgeous, interactive animated pie chart.


morris.js


Morris.js is the library that powers the time-series graphs. It's a very simple API for drawing line, bar, area and donut charts.


Google Chart


Google chart tools are powerful, simple to use, and free.


gRaphaël


gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library.


Peity


Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple svg mini pie line or bar chart and is compatible with any browser that supports svg: Chrome, Firefox, IE9+, Opera, Safari.


jqPlot


jqPlot bakes up the best pie and donut charts you've ever tasted! Like bar and filled line plots, pie and donut slices highlight when you mouse over.


Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...