Tuesday, 19 November 2013

How to generate Arrows using pure css without images

Its very simple to generate arrows using pure css and html alone without using any images. Use the following code as markup.
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

Now use the following css and you are done!!!

.arrow-up {
       width: 0;
       height: 0;
       border-left: 10px solid transparent;
       border-right: 10px solid transparent;      
       border-bottom: 10px solid black;
}

.arrow-down {
       width: 0;
       height: 0;
       border-left: 10px solid transparent;
       border-right: 10px solid transparent;
       border-top: 10px solid #f00;
}

.arrow-right {
       width: 0;
       height: 0;
       border-top: 20px solid transparent;
       border-bottom: 20px solid transparent;
       border-left: 20px solid green;
}

.arrow-left {
       width: 0;
       height: 0;
       border-top: 20px solid transparent;
       border-bottom: 20px solid transparent;
       border-right:20px solid blue;
}


Monday, 18 November 2013

Interview Question: What are Magic Tables in SQLServer


Magic tables are internal tables called ‘inserted’ and ‘deleted’ which are created and managed by SQL server.
Inserted‘ table holds the values that have been recently inserted.
Inserted‘ table also holds the updated values from a update operation on a table.
Deleted‘ table holds the values that have been recently deleted.
Deleted‘ table also holds the previous values from a update operation on a table.
These virtual tables are usually used with triggers to retrieve the inserted, deleted or updated rows.

Thursday, 31 October 2013

Image Zooming/Magnifying jQuery Tool

A Jquery Image Zoom Plugin



  • Fully Customisable
  • Coloured Tints
  • Fancybox Gallery Support
  • Variable zoom on mouse scroll
  • External Controls
  • Window Zoom, Lens Zoom and Inner Zoom
  • Free to use under MIT and GPL Licenses





Monday, 28 October 2013

Upload files using AJAX in ASP.Net MVC

This approach will work on almost all browsers but, you can't upload multiple files, and file information have to send separately. In this method file is send directly in XMLHttpRequest, and file information is send along with HTTP Headers.
js FILE
  1. window.onload = function () {
  2.     document.getElementById('uploader').onsubmit = function () {
  3.         var fileInput = document.getElementById('fileInput');
  4.         var xhr = new XMLHttpRequest();
  5.         xhr.open('POST', '/Home/Upload');
  6.         xhr.setRequestHeader('Content-type', 'multipart/form-data');
  7. //Appending file information in Http headers
  8.         xhr.setRequestHeader('X-File-Name', fileInput.files[0].name);
  9.         xhr.setRequestHeader('X-File-Type', fileInput.files[0].type);
  10.         xhr.setRequestHeader('X-File-Size', fileInput.files[0].size);
  11. //Sending file in XMLHttpRequest
  12.         xhr.send(fileInput.files[0]);
  13.         xhr.onreadystatechange = function () {
  14.             if (xhr.readyState == 4 && xhr.status == 200) {
  15.                 alert(xhr.responseText);
  16.             }
  17.         }
  18.         return false;
  19.     }
  20. }
Controller:
  1. [HttpPost]
  2. public JsonResult Upload()
  3. {
  4.     string fileName = Request.Headers["X-File-Name"];
  5.     string fileType = Request.Headers["X-File-Type"];
  6.     int fileSize = Convert.ToInt32(Request.Headers["X-File-Size"]);
  7. //File's content is available in Request.InputStream property
  8. System.IO.Stream fileContent = Request.InputStream;
  9. //Creating a FileStream to save file's content
  10. System.IO.FileStream fileStream = System.IO.File.Create(Server.MapPath("~/") + fileName);
  11. fileContent.Seek(0, System.IO.SeekOrigin.Begin);
  12. //Copying file's content to FileStream
  13. fileContent.CopyTo(fileStream);
  14. fileStream.Dispose();
  15. return Json("File uploaded");
Thats all and you are done :)

Posting a complex datatype to server using jQuery

Here I'm going to explain you the steps to POST complex data types to server using jQuery. The we technology whih I'm using here is ASP.NET MVC. You can make appropriate changes in url according to the server which you are using.


Use the following code:
$.ajax({
            type: "POST",
            contentType: "Application/json;charset=utf-8",
            datatType: "json",
            url: $("#_root").val() + "Client/SaveClientSession",
            data: 1,
            success: function (r) {

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
                alert(xhr.responseText);
            }

        });
type: "POST": Use either GET or POST as per your requirement
contentType"Application/json;charset=utf-8": This is very important! You have to specify encoding, especially when you are passing complex data types
datatType: "json": Return type of the call
 url: The destination url as per the server technology.
data: pass data to be passed. Use JSON.stringify if using complex types
 success: callback function on successful call
 success: callback function on error