Now you can expect a PROMISE from Javascript

You must have been using Promises in JavaScript for a while but with some 3rd party libraries  i.e. $q from query.

As most of the modern application development is trending to be a responsive/web application , JavaScript takes the drives seat.

If we look at the broader picture of today’s development skeleton it will look like this

p1 Most of the application gets required data from remote api or can run compute intensive work in JavaScript.

Promises have arrived natively in JavaScript!

NO need to re-write details when a better article is available to refer.

JavaScript Promises

Download a sample app to see it in action

https://github.com/d4dilip/JavascriptPromiseExample.git

 

 

Trap browser close event in javascript

many times we need to perform some task once user close the browser. You can user the following code for the same .

function HandleOnClose(e)

{

var ieversion=0;

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))

{

ieversion=new Number(RegExp.$1)

}

if (ieversion<7)

{

if (window.event.clientX < 0 && window.event.clientY < 0)

{ DoSomething(); }

}

else if (ieversion>=7)

{

if (isBrowserClosed())

{ DoSomething(); }

}

}

function isBrowserClosed()

{

var browserWindowWidth = 0;

var browserWindowHeight = 0;

// gets the width and height of the browser window

if (parseInt(navigator.appVersion) > 3)

{

if (navigator.appName == “Netscape”)

{

browserWindowWidth = window.innerWidth;

browserWindowHeight = window.innerHeight;

}

if (navigator.appName.indexOf(“Microsoft”) !=- 1)

{

browserWindowWidth = top.window.document.body.offsetWidth;

browserWindowHeight = top.window.document.body.offsetHeight;

}

}

// checks if the X button was closed

// if event.clientY < 0, then click was on the browser menu area

// if event.screenX > (browserWindowWidth – 25), the X button was clicked

// use screenX if working with multiple frames

return (event.clientY < 0 && event.screenX > (browserWindowWidth – 25)) ? true : false;

}

function DoSomething()

{

// do your task here

}

Learn JQuery

Hi ,

 JQuery is a hot topic in the market  and as per my point of view its always good to know about some good things .

JQuery is similiar to the javascript while coding infact its a javascript file only .You can download this file frome here.For further reference please visit jquery site

Here is  i am going to show you a demo of some of the functionality of the JQuery .

 here is the sample code . Top run this example code , first you need to download JQuery  file. Now copy the following code  save it in a HML file , and refer the Jquery.js file to this HTML code .

 <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Untitled Page</title>
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

$(“#link”).click(function () {
alert(“Hi I am coming from Link click.”);
});
});

$(document).ready(function(){

$(“#show”).click(function () {
$(“p”).show(“slow”);

});

});

$(document).ready(function(){

$(“#hide”).click(function () {
$(“p”).hide(“40000” );

});

});

$(document).ready(function(){

$(“#toggle”).click(function () {
$(“p”).toggle(“slow” );
});
});

$(document).ready(function(){

$(“#SlideUp”).click(function () {
$(“p”).SlideUp(“slow” );
});
});

$(document).ready(function(){

$(“#Slidedown”).click(function () {
$(“p”).Slidedown(“slow” );
});
});

$(document).ready(function(){

$(“#Slidetoggle”).click(function () {
$(“p”).Slidetoggle(“slow” );
});
});

$(document).ready(function(){
$(“#animate”).click(function () {
$(“#block”).animate({
width: “70%”,
opacity: 0.4,
marginLeft: “0.6in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
});
});

$(document).ready(function(){
$(“#animatetoggle”).click(function () {
$(“p”).animate({
“height”: “toggle”, “opacity”: “toggle”
}, { duration: “slow” });

});
});

$(“p”).animate({
“height”: “toggle”, “opacity”: “toggle”
}, { duration: “slow” });

});

});

</script>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>

</head>
<body>

<a href=”” id=”link”>Link</a>
<button id=”show”>» Show</button>
<button id=”hide”>Hide</button>
<button id=”toggle”>Toggle</button>
<button id=”Slideup”>SlideUp</button>
<button id=”SlideDown”>SlideDown</button>
<button id=”Slidetoggle”>Slidetoggle</button>
<button id=”animate”>Animate</button>
<button id=”animatetoggle”>AnimateToggle</button>
<p style=”display: inline;background-color:Yellow”>Hello</p>
<p style=”display: none;background-color:Fuchsia”>Good Bye</p>
<div id=”block”>Hello!</div>

</body>
</html>

 

 

Happy simple scripting.