JQuery examples with output

  1. Animation Example

<html>
<head>
http://jquery.js

$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({height:300,width:300},”slow”);
$(“div”).animate({height:100,width:100},”slow”);
$(“div”).animate({height:300,width:300},”slow”);
$(“div”).animate({height:100,width:100},”slow”);
});
});

</head>

<body>
<button>Start Animation</button>
<br /><br />

</body>
</html>

animate

1)

<!doctype html>
<head>
<!– Don’t –>
http://code.jquery.com/jquery-2.1.4.min.js
</head>
<body>
<style type=”text/css”>
.b
{
color:red;
}
.s
{
color:green;
}
</style>

$(function()
{

$(“#bb”).css(“font-size”,”35px”);
$(“#bb”).css(“color”,”orenge”);

});

<button id=”bb” class=”b”>button1</button>
<button class=”s”>button2</button>

</body>

2) example -2

<!doctype html>
<head>
…
<!– Don’t –>
http://code.jquery.com/jquery-2.1.4.min.js
</head>
<body>
<style type=”text/css”>
.b
{
color:red;
}
.s
{
color:green;
}

#display{

width:400px;
height: 100px;
border: 1px dashed gray;

}

</style>

$(function()
{
$(“#submit”).click(
function(){
var txt=$(“#text”).val();
$(“#display”).html(txt);
$(“#text”).html(“”);

});

$(“#remove”).click(function()
{
$(“#display”).html(“”);;

});

});

<input id=”text” type=”text”>
<!– <input id=”submit”  type=”submit” value=”submit”> –>
<button id=”submit”>submit</button><br>
<button id=”remove”>remove</button><br>

</body>
4) example-4
<!doctype html>
<head>

<!– Don’t –>
http://code.jquery.com/jquery-2.1.4.min.js

<style type=”text/css”>
body {
margin: 0;
}

#hd {
top: 10px;
height: 40px;
width: 100%;
background-color: gray;
}

#hd>h1 {
padding: 5px;
width: 1025px;
margin: 0px auto;
color: white;
}

#container {
margin: 0px auto;
width: 1025px;
min-height: 500px;
margin-top: 10px;
border: 1px solid gray
}

#area {
margin: 0px auto;
width: 1025px;
}

#txtarea {
width: 965px;
height: 27px;
}

#send {
height: 30px;
position: absolute;
}
</style>

</head>
<body>

HOME DATA

Send

</body>
</html>

5) example -5

note –> when we r subminting from text box it will store in on    container div(border: 1px solid gray)

$(function() {

$(“#send”).click(

function() {

var data = $(“#txtarea”).val();

$(“#container”).html(data);

$(“#txtarea”).val(“”);

})

});

keypress event
<!doctype html>
<head>

<!– Don’t –>
http://code.jquery.com/jquery-2.1.4.min.js

<style type=”text/css”>
body {
margin: 0;
}

#hd {
top: 10px;
height: 40px;
width: 100%;
background-color: gray;
}

#hd>h1 {
padding: 5px;
width: 1025px;
margin: 0px auto;
color: white;
}

#container {
margin: 0px auto;
width: 1025px;
min-height: 500px;
margin-top: 10px;
border: 1px solid gray
}

#area {
margin: 0px auto;
width: 1025px;
}

#txtarea {
width: 965px;
height: 27px;
}

#send {
height: 30px;
position: absolute;
}
</style>

/* $(function() {

$(“#send”).click(

function() {

var data = $(“#txtarea”).val();

$(“#container”).html(data);

$(“#txtarea”).val(“”);

})

}); */

$(function() {

$(“#txtarea”).keypress(function(event) {

/* if( event.which == 13)
{ */
if ($(“#enter”).prop(“checked”)) {

console.log(“enter press,console…………”);
event.preventDefault();
}

/*     } */

});

});

</head>
<body>

HOME DATA

Send

click to
send

</body>
</html>

6) example -6

adding  user ————–name
<!doctype html>
<head>

<!– Don’t –>
http://code.jquery.com/jquery-2.1.4.min.js
<style type=”text/css”>
body {
margin: 0;
}

#hd {
top: 10px;
height: 40px;
width: 100%;
background-color: gray;
}

#hd>h1 {
padding: 5px;
width: 1025px;
margin: 0px auto;
color: white;
}

#container {
margin: 0px auto;
width: 1025px;
height: 500px;
margin-top: 10px;
border: 1px solid gray;
overflow: scroll;
}

#area {
margin: 0px auto;
width: 1025px;
}

#txtarea {
width: 965px;
height: 27px;
}

#send {
height: 30px;
position: absolute;
}

.user {
color: red;
}
</style>

$(function() {

$(“#txtarea”).keypress(function(event) {

if (event.which == 13) {
if ($(“#enter”).prop(“checked”)) {
//$(“#txtarea”).val(“”);
$(“#send”).click();

event.preventDefault();
}

}

});

$(“#send”).click(

function() {

var uname = “ YOU :“;
var newdata = $(“#txtarea”).val();

var previousmsg = $(“#container”).html();

if (previousmsg.length > 0) {
previousmsg = previousmsg + “
”

}

$(“#container”).html(previousmsg + uname + newdata);

$(“#txtarea”).val(“”);

});

});

</head>
<body>

HOME DATA

Send

click to
send

</body>
</html>

example -7
Chat Box
<!doctype html>
<head>

<!– Don’t –>
http://code.jquery.com/jquery-2.1.4.min.js
<style type=”text/css”>
body {
margin: 0;
}

#hd {
top: 10px;
height: 40px;
width: 100%;
background-color: gray;
}

#hd>h1 {
padding: 5px;
width: 1025px;
margin: 0px auto;
color: white;
}

#container {
margin: 0px auto;
width: 1025px;
height: 500px;
margin-top: 10px;
border: 1px solid gray;
overflow: scroll;
}

#area {
margin: 0px auto;
width: 1025px;
}

#txtarea {
width: 965px;
height: 27px;
}

#send {
height: 30px;
position: absolute;
}

.bot {
color: red;
}

.user {
color: green
}
</style>

var user=””;
function send_msg(msg) {
$(“#container”).html(“chatbot: ” + msg);
}

function usern() {
send_msg(“What is ur Name”);
}

function ai(msg)
{
if(user.length=>0)
user=msg;
send_msg(“Hello,  ” +user+”   How r u”);
}

$(function() {
usern();
$(“#txtarea”).keypress(function(event) {

if (event.which == 13) {
if ($(“#enter”).prop(“checked”)) {
//$(“#txtarea”).val(“”);
$(“#send”).click();

event.preventDefault();
}

}

});

$(“#send”).click(

function() {

var uname = “ YOU :“;
var newdata = $(“#txtarea”).val();

var previousmsg = $(“#container”).html();

if (previousmsg.length > 0) {
previousmsg = previousmsg + “
”

}

$(“#container”).html(previousmsg + uname + newdata);

ai(newdata);
$(“#txtarea”).val(“”);

});

});

</head>
<body>

HOME DATA

Send

click to
send

</body>
</html>

example-8

————————–portpolio style—————————
html
……………….

<html>
<head>
<title>PORTFoLIO</title>
<link rel=”stylesheet” type=”text/css” href=”css/projectstyle.css”>
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
http://js/projectscript.js
</head>
<body>