Projavatricks: jquery

Showing posts with label jquery. Show all posts

Sunday, 6 December 2015

How To Create Calculator In Web Page Using JQuery

In this article we show you how to create simple calculator using jquery.This calculator is created with basic code such as if-else ladder and switches to show you how to perform basic operation in a webpages.Thank you enjoy the post and give your feed back.

CODE:

<!DOCTYPE html>
<!DOCTYPE html>

<html lang="en">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
var prev="";
var a=0,b=0;
$("button").click(function() {

var num = $(this).text();

if(num=="+")
{
a = parseInt($("#screen").text());
op="+";
$("#screen").text("0");
prev="";
}
else if(num=="C")
{
$("#screen").text("0");
}
else if(num=="-")
{
a = parseInt($("#screen").text());
op="-";

$("#screen").text("0");
prev="";
}
else if(num=="*")
{
a = parseInt($("#screen").text());
op="*";

$("#screen").text("0");
prev="";
}
else if(num=="/")
{
a = parseInt($("#screen").text());
op="/";

$("#screen").text("0");
prev="";
}

else if(num=="=")
{
b = parseInt($("#screen").text());

switch (op) {
case "+":
var ans=a+b;
$("#screen").text("");
prev="";
$("#screen").text(ans);
break;
case "-":
var ans=a-b;
$("#screen").text("");
prev="";
$("#screen").text(ans);
break;
case "*":
var ans=a*b;
$("#screen").text("");
prev="";
$("#screen").text(ans);
break;
case "/":
var ans=a/b;
$("#screen").text("");
prev="";
$("#screen").text(ans);
break;
default:
text = "Looking forward to the Weekend";
} 
}
else
{
$("#screen").text(prev+num);

prev = $("#screen").text();
}
});
});
</script>
</head>

<!-- Styles -->
<style>
#screen{
background-color: #f0f0f5;
height:30px;
text-align: right;
font-family:arial;
font-weight:bold;

font-size:30px; 
}
#wrapper{
font-family:arial;
font-weight:bold;
width:230px;
height:350px;
background-color:#b3b3cc;
border:2px solid gray;
border-radius: 5px;

}
button {
font-family:arial;
font-weight:bold;
font-size:20px; 
display: inline-block;
width:50px;  
height:30px;
margin:10px;

} 
#zero{
width:120px;
margin-left:40px;
}

</style>
<body>
<div id="wrapper">

<div id="screen">
0</div>
<div id="pad">
 <button>1</button><button>2</button><button>3</button><button>4</button><button>5</button>
 <button>6</button><button>7</button><button>8</button><button>9</button>
 <button>+</button>
 <button>-</button>
 <button>*</button>
 <button>/</button>
<button>C</button>
 <button>=</button>
<button id="zero">0</button>   

</div>
<div class="reset">
</div>
</div>
</body>
</html>

Live Demo

Friday, 27 November 2015

jquery

How To Create Animated Back To Top PlugIn Using JQuery

Reading long article its very irritating to scroll up whole page using scroll bar I recommend you to add simple back to top plugin in you website adding below code.

How To Scroll Up Webpage On A Click Using Jquery:

As we know that jquery has various animations properties by using one of them we can do our task.Here is a syntax of method whic we are going to used in our example.

$('selector').animate({scrollTop : position},time in millisec)

CODE:

<!DOCTYPE html>

<html lang="en">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scroll').fadeIn(700);
} else {
$('.scroll').fadeOut(1000);
}
});
$(document).ready(function(){

$('.scroll').click(function(){

$('body').animate({scrollTop : 0},200);

});

});  
</script>
</head>

<!-- Styles -->
<style>
p{
font-size:30px;
width:1100px;
overflow:hidden;
}

.scroll{
width:80px; 
height:100px;
padding:10px; 
text-align:center; 

font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
bottom:10px;
right:10px;
display:none;

}

</style>
<body>
<p>
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.

The set of jQuery core features—DOM element selections, traversal and manipulation—enabled by its selector engine (named "Sizzle" from v1.3), created a new "programming style", fusing algorithms and DOM data structures. This style influenced the architecture of other JavaScript frameworks like YUI v3 and Dojo, later stimulating the creation of the standard Selectors API.

Microsoft and Nokia bundle jQuery on their platforms. Microsoft includes it with Visual Studio for use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework while Nokia has integrated it into the Web Run-Time widget development platform. jQuery has also been used in MediaWiki since version 1.16.
jQuery, at its core, is a DOM (Document Object Model) manipulation library. The DOM is a tree-structure representation of all the elements of a web-page and jQuery simplifies the syntax for finding, selecting, and manipulating these DOM elements. For example, jQuery can be used for finding an element in the document with a certain property (e.g. all elements with an h1 tag), changing one or more of its attributes (e.g. color, visibility), or making it respond to an event (e.g. a mouse click).

jQuery also provides a paradigm for event handling that goes beyond basic DOM element selection and manipulation. The event assignment and the event callback function definition are done in a single step in a single location in the code. jQuery also aims to incorporate other highly used JavaScript functionality (e.g. fade ins and fade outs when hiding elements, animations by manipulating CSS properties).
</p>
<input type="image" class="scroll" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxegPdUNYx0RIZtPXW7X5zDmQzCkCFlAFP3ZtMvdjUqzF99oPFWxueW-Q_agb0yOJSJT6tiGNuQsZ_7LhN3Vy3nFIZAh5_EuPsawhcw7C3Xs2XTiU7XskURETUIv1K_0k3cOoa-L5WjMGt/s1600/backtotop.jpg"></input>

</body>
</html>

Live Demo

Thursday, 26 November 2015

jquery

How To Automatically Change Background Colour Of Website Using JQuery

In this post we are going to show you how to give new look to your website each time when new visitor visits your website this can be done using simple jquery ,javascripting and css code.

How To Automatically Generate New Background Color:

This can be done using simple logic we have to generate three random numbers between 0 to 256 to create and colour in RGB format we can generate random number by following code.

var r = Math.floor((Math.random() * 255) + 1);

Then by using below code we can change the background colour of any component in our website.

$("body").css("background",'rgb('+r+','+g+','+b+')');

On every new visit or refresh it will change background colour of website.Thats it enjoy the code and must give your feedback.

How To Automatically Changed Fixed Background Colour:

By using below code we can generate random colours of our own choice so when ever visitor refresh your website he gets new look.

var col = ["#ff8080","#80ff80","#8080ff","#ff80df"];

var r = Math.floor((Math.random() * 3) + 1);

$("body").css("background",col[r]);

Thats it thankyou enjoy the code and must give your feedback.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function()
{

var r =  Math.floor((Math.random() * 255) + 1);
var g= Math.floor((Math.random() * 255) + 1);
var b = Math.floor((Math.random() * 255) + 1); 

$("body").css("background",'rgb('+r+','+g+','+b+')');
$("h1").css("color",'rgb('+g+','+b+','+r+')');
});

</script>
</head>

<!-- Styles -->
<style>
</style>
<body>
<h1>
RANDOM COLOR</h1>
</body>
</html>

Wednesday, 25 November 2015

jquery

How To Validate HTML5 Forms Using Jquery

Validation is a process to check whether the user is filling right information or wrong in form by using this method we can stop user filling wrong or empty information in form.This process can be done using jquery and javascripting in this example we have shown how to validate empty field,how to validate email address and how to validate password strength.You can also use html required attribute to validate your form.

OUTPUT:

how to validate form using jquery and javascripting

CODE:

                                
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<!-- Styles -->
<style>
h1
{
color:#e52b50;
font-size:20px;
margin-left: 50px;
margin-top:100px;
}
#contact label{
display: inline-block;
width: 100px;
text-align: right;
}

#contact {

margin-top: 40px;
margin-left: 20px;

}
button {

color:white;
width:200px;
height:25px;
background-color:#e52b50;
margin-top: 0px;
margin-left: 110px;

}
input
{
margin-bottom:30px;
width:220px;
height:30px;
font-weight:bold;
}
span
{
color:#e52b50;
}
label 
{
color:#e52b50;
}
</style>

<body>
<title>Form Validation</title>
<h1>
FORM VALIDATION USING JQUERY</h1>
<form id="contact" method="post" action="">
<!-- Name Field -->
<div>
<label for="contact_name">Name:</label>
<input type="text" id="contact_name" name="name" placeholder="Your Name"/>

<span id="nameerror"></span>
</div>
<!-- Email -->
<div>
<label for="contact_email">Email:</label>
<input type="email" id="contact_email" name="email" placeholder="Your email"/>
<span id="emailerror"></span>
</div>
<div>
<label for="contact_password">Password</label>
<input type="password" id="contact_password" placeholder="Your Password"/>
 
<span id="passworderror"></span>
</div>
<br>
<br>


</form>
<div id="contact_submit">
    
<button >SUBMIT</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#contact_submit").click(function() {

var input=$("#contact_name").val();
if(input)
{
$("#nameerror").text("");

}
else
{
$("#nameerror").text("Name field should not be left empty"); 
}


var check=$("#contact_email").val();
var pos = check.search("@");
var pos1 = check.search(".com");
if((pos!=-1) && (pos1!=-1))
{
$("#emailerror").text("");
}
else
{
$("#emailerror").text("Please Enter Valid Email"); 
}
var check=$("#contact_password").val();
var num = check.length;
if(num<=5)
{
$("#passworderror").text("Your Password Should Be Greater Than 5 Letters");
}
else 
{
$("#passworderror").text("");
}


});
});
</script>
</body>
</html>

Projavatricks

Sunday, 6 December 2015

How To Create Calculator In Web Page Using JQuery

CODE:

Live Demo

Friday, 27 November 2015

How To Create Animated Back To Top PlugIn Using JQuery

How To Scroll Up Webpage On A Click Using Jquery:

CODE:

Live Demo

Thursday, 26 November 2015

How To Automatically Change Background Colour Of Website Using JQuery

How To Automatically Generate New Background Color:

How To Automatically Changed Fixed Background Colour:

Wednesday, 25 November 2015

How To Validate HTML5 Forms Using Jquery

OUTPUT:

CODE:

Live Demo

Search Tutorials

Tutorial Topics

FOLLOW US ON FACEBOOK

Popular Tutorials