Tuesday 24 January 2017

JavaScript Animation - Drop Ball Anywhere and bounce

#Author : mounicraju@gmail.com
# To start dropping the ball click anywhere in the screen once done with code

Head Section :

<script>
function BrowserCheck() {
var b = navigator.appName;
if (b == "Netscape") this.b = "NS";
else if (b == "Microsoft Internet Explorer") this.b = "IE";
else this.b = b;
this.v = parseInt(navigator.appVersion);
this.NS = (this.b == "NS" && this.v>=4);
this.NS4 = (this.b == "NS" && this.v == 4);
this.NS5 = (this.b == "NS" && this.v == 5);
this.IE = (this.b == "IE" && this.v>=4);
this.IE4 = (navigator.userAgent.indexOf('MSIE 4')>0);
this.IE5 = (navigator.userAgent.indexOf('MSIE 5')>0);
if (this.IE5 || this.NS5) this.VER5 = true;
if (this.IE4 || this.NS4) this.VER4 = true;
this.OLD = (! this.VER5 && ! this.VER4) ? true : false;
this.min = (this.NS||this.IE);
}
is = new BrowserCheck();
// End -->
</script>

Body Section :

<center>
<h3>Click anywhere to make the ball drop and bounce</h3> <br>
<div id="staticBall" style="position:relative;visibility:visible">
<img src="ball.jpg" height=30 width=30 alt="Static ball">
</div>
</center>
<div id="ball" style="visibility:hidden; position:absolute; left:100; top:10; height:34; width:34">
<img src="ball.jpg" height=30 width=30 alt="Bouncing ball">
</div>
<script>
<!-- Begin
iter = 0;
setId = 0;
down = true;
up = false;
bouncingBall = (is.VER5) ? document.getElementById("ball").style
: (is.NS) ? document.layers["ball"]
: document.all["ball"].style;
stillBall = (is.VER5) ? document.getElementById("staticBall").style
: (is.NS) ? document.layers["staticBall"] : document.all["staticBall"].style;
winH = (is.NS) ? window.innerHeight - 55 : document.body.offsetHeight - 55;
document.onmouseup = buttonUp;
if (is.NS4)
document.captureEvents(Event.MOUSEUP);
function buttonUp(e) {
if ( ((is.NS) ? e.which : event.button) != 1) return true;
if (setId != 0) clearInterval(setId);
bouncingBall.visibility="visible";
stillBall.visibility="hidden";
bouncingBall.left = (is.NS) ? e.pageX - 15 : event.offsetX - 15;
bouncingBall.top = (is.NS) ? e.pageY - 15 : event.offsetY - 15;
iter = 0;
setId = setInterval("generateGravity()", 20);
return true;
}
function generateGravity() {
if ((parseInt(bouncingBall.top)+iter < winH) && down) {
bouncingBall.top = parseInt(bouncingBall.top) + iter;
iter++;
return;
}
else {
if ((parseInt(bouncingBall.top)< winH) && down) {
bouncingBall.top = winH + 5;
return;
}
down = false;
up = true;
if (iter < 0 && parseInt(bouncingBall.top) > winH) {
clearInterval(setId);
bouncingBall.visibility = "hidden";
stillBall.visibility="visible";
setId = 0;
}
if (parseInt(bouncingBall.top) > 0 && up && iter >= 0) {
bouncingBall.top = parseInt(bouncingBall.top) - iter;
iter--;
if (iter%3 == 0) iter--;
return;
}
down = true;
up = false;
}
}
// End -->
</script>

AngularJS [JavaScript]- Like and Dislike Button - Coding Beginners

#Author : mounicraju@gmail.com
#The below code is placed where we want to display all the data

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" name = "viewport" content = "width-device=width, initial-scale=1"/>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
<script src = "js/angular.js"></script>
<script src = "js/script.js"></script>
</head>
<body ng-app = "simModule">
<nav class = "navbar navbar-default">
<div class = "container-fluid">
</div>
</nav>
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well" ng-controller = "simController">
<h3 class = "text-primary">Like and Dislike buttons Using AngularJS</h3>
<hr style = "border-top:1px dotted #000;"/>
<br /><br />
<table class = "table table-bordered">
<thead>
<tr>
<th>Programming Language</th>
<th>Like</th>
<th>Dislike</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pLang in pLangs">
<td>{{pLang.name}}</td>
<td>{{pLang.Likes}}</td>
<td>{{pLang.Dislikes}}</td>
<td><center><button class = "btn btn-primary" ng-click = "incrementUp(pLang)">
<span class = "glyphicon glyphicon-thumbs-up"></span>
</button> | <button class = "btn btn-danger" ng-click = "decrementDown(pLang)">
<span class = "glyphicon glyphicon-thumbs-down"></span></button></center></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>


# Creating the script for calling the AngularJS function -This is where the angularjs function will be called to perform the request


var Demoapp = angular.module("simModule", [])
.controller("simController" , function($scope){
var pLangs =[
{name: "C#", Likes: 0, Dislikes: 0},
{name: "Java", Likes: 0, Dislikes: 0},
{name: "PHP", Likes: 0, Dislikes: 0},
{name: "VB.NET", Likes: 0, Dislikes: 0},
{name: "Python", Likes: 0, Dislikes: 0},
{name: "Pearl", Likes: 0, Dislikes: 0},
{name: "Ruby", Likes: 0, Dislikes: 0},
];
 
$scope.pLangs = pLangs;
 
$scope.incrementUp = function(pLang){
pLang.Likes++;
}
 
$scope.decrementDown = function(pLang){
pLang.Dislikes++;
}
});