Posts

HTML5 drag and drop

Image
Live Demo : 1 2 3 4 Source code : css : <style>     .dropdiv {         width: 50px;         height: 50px;         padding: 10px;         border: 1px solid #aaaaaa;     }     .spn {     font-size:50px     }    </style> JAVASCRIPT : <script>     function allowDrop(ev) {         ev.preventDefault();     }     function drag(ev) {         ev.dataTransfer.setData("text", ev.target.id);     }     function drop(ev) {         ev.preventDefault();         var data = ev.dataTransfer.getData("text");     ...

Cross browsers detect print events using javascript

Image
Here I'm explain about detecting before print, after print in cross browsers using Java script. Window beforeprint,afterprint events working in only IE,Firefox browsers, but we can detect these events using  matchMedia with event handler, here I'm explain with small example. Javascript Code: (function () {         var beforePrint = function () {             alert('Functionality to run before printing.');         };         var afterPrint = function () {             alert('Functionality to run after printing');         };         if (window.matchMedia) {             var mediaQueryList = window.matchMedia('print');             mediaQueryList.addListener(function (mql) {                 if (mql.matches) {...

Setup and implement simple angular.js program in MVC

Image
Here I'm writing simple steps for how to  setup angular.js in ASP.NET MVC application and implement small program using angular.js. 1. Create a MVC web application using VisualStudio. 2. Add following Angular js references to _layout page(Master page) as per showing below   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-touch.js"></script>     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-resource.js"></script>    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-animate.js"></script>     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-route.js"></script>    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-mocks.js"></...

Download a file using javascript

When we want to download a file from client side code below java script code is very use full. Any format files like images, pdf, doc etc,. download through below code. JAVASCRIPT CODE :   function downloadURI(uri, name) {         var link = document.createElement("a");         link.download = name;         link.href = uri;         link.click();     } HTML CODE : <a class="apdfExport"  onclick="downloadURI('http://lh5.googleusercontent.com/-pi_poyLdiyg/AAAAAAAAAAI/AAAAAAAAABg/pFFFk0Hc3ok/s80-c/photo.jpg','test')">Download file</a> 

Full screen a div using simple javascript

Image
Here I am explan about expand(full screen) a particular div, here I'm taking 'divfullscreen' div, when click on Demo button call ExpandDiv javascript function, this function handle full screen. JAVASCRIPT CODE : function ExpandDiv(){ var elem = document.getElementById('divfullscreen');                     if (document.webkitFullscreenElement) {                         document.webkitCancelFullScreen();                     }                     else {                         elem.webkitRequestFullScreen();                     }; } HTML CODE : <div> <input onclick="ExpandDiv();" type="button" value="Demo" /></div> <div class="html5-...

Javascript date functions

Day name by given date : Day Name : <script> function firstview() { var day=document.getElementById("txtfirstday").value; var month=document.getElementById("txtfirstMonth").value; var year=document.getElementById("txtfirstyear").value; var date=month+'/'+day+'/'+year     var d = new Date(date);     var weekday = new Array(7);     weekday[0] = "Sunday";     weekday[1] = "Monday";     weekday[2] = "Tuesday";     weekday[3] = "Wednesday";     weekday[4] = "Thursday";     weekday[5] = "Friday";     weekday[6] = "Saturday";     var n = weekday[d.getDay()]; document.getElementById("divfristviewresult").style.display="block"     document.getElementById("spndayName").innerHTML = n; } </script> <br /> <div> <h2> Given date by day name :</h2> <input id="txtf...

How to translate from one language to another using google translator in c#

Following c# code use to translate one language text to another /// <summary>     /// Translate     /// </summary>     /// <param name="input">translate text </param>     /// <param name="languagePair"> language codes, Example translate spanish to enligh es|en</param>     /// <returns></returns>     public static string Translate(string input, string languagePair)     {         string url = String.Format("http://www.google.com/translate_t?hl=en&ie=UTF8&text={0}&langpair={1}", input, languagePair);         WebClient webClient = new WebClient();         webClient.Encoding = System.Text.Encoding.UTF8;         string result = webClient.DownloadString(url);         Regex regex = new Regex("<span id=result_box.*?>(.*?)<\\/span>");  ...