Canvas script to move a ball

<html>

<head>

<title>Pop-up Canvas</title>

<meta name=”viewport” content=”width=device-width” />

<style>

canvas {

background-image:url(‘cork.png’);

border: 10px inset brown;

position:absolute;

top: -225;

left: 200;

-webkit-transition: all 1s;

}

.can-hide {

top: -225;

opacity: 0;

}

.can-pop {

top: 120;

opacity:1;

}

</style>

<script type=”text/javascript”>

var can, ctx,

x = 25, y = 25;

xdir = 1, ydir = 1;

function init() {

can = document.getElementById(“can”);

ctx = can.getContext(“2d”);

var grad = ctx.createLinearGradient(0, 10, 0, 190);

grad.addColorStop(0, ‘brown’);

grad.addColorStop(1, ‘red’);

ctx.fillStyle = grad;

animate();

}

function animate() {

x += xdir;

if (x > 375)

xdir = -1;

if (x < 25)

xdir = 1;

y += ydir;

if (y > 175)

ydir = -1;

if (y < 25)

ydir = 1;

ctx.clearRect(0, 0, 400, 200);

ctx.beginPath();

ctx.arc(x, y, 25, 0, 2 * Math.PI);

ctx.closePath();

ctx.fill();

setTimeout(animate, 25);

}

function pop() {

can.className = “can-pop”;

}

function unpop() {

can.className = “can-hide”;

}

</script>

</head>

<body onLoad=”init()” onmouseup=”unpop()”>

<canvas class=”can-hide” id=”can” height=”200″ width=”400″>

</canvas>

<h1>Click to view:<h1>

<h1 onMouseDown=”pop()” ontouchstart=”pop()” onClick=”void()”>

&nbsp;[x] Bulletin Board</h1>

</body>

</html>

Jquery UI calender with event date display using ajax and css


<div id="datepicker"></div>
<div id="dialog" title="Event" style="display:none;"></div>
<style>
.events a {
background-color: #FF33CC !important;
}
</style>

<script>
var eventsDays = [ ‘2014-03-29′ ,’2014-03-30’ ];
$( “#datepicker” ).datepicker({
dateFormat: “yy-mm-dd”,
beforeShowDay: function(date) {
date = $.datepicker.formatDate(‘yy-mm-dd’, date);
if($.inArray( date, eventsDays )!==-1){
return [true, “events”, ”];
} else {
return [true, ”,”];
}
},
onSelect: function(a,b){
$.ajax({
type: “GET”,
url: “general_ajax.php”,
data: ‘option=ShowEvent&date=’+a,
success: function(data) {
if(data != 0){
$(‘#dialog’).html(data);
$(‘.dialog’).html(data);
$( “#dialog” ).dialog();
} else {
$( “#dialog” ).dialog( “destroy” );
}
}
});
}
});
</script>

 

File upload using jquery form

File can be uploaded using this script with the help of jquery from. Copy the full script and create a new page.

<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>File Upload Progress Demo #1</h1>
<code>&lt;input type="file" name="myfile"></code>
<form action="file_upload.php" id="upload" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"><br>
<input type="submit" value="Upload File to Server">
</form>

<div>
<div></div >
<div>0%</div >
</div>

<div id="status"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('#upload').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});

})();
</script>

Write your file upload codes in the file_upload.php

Rotate div horizontally

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rotate Image</title>
http://code.jquery.com/jquery-1.10.1.min.js

$( document ).ready(function() {

var i = 0;
setInterval(function(){
$(“#container_1”).css(‘transform’,”rotate(“+i+”deg)”);
i = i+1;
}, 50);

});

<style>
#container_1 {
border:1px solid #FF0000;
width: 100px;
height:100px;
top:100px;
left:100px;
position:fixed;
}

</style>
</head>

<body>

</body>
</html>

Javascript closure example



function celebrityIDFunc () {
var celebrityID = 999;
// We are returning an object with some inner functions
// All the inner functions have access to the outer function's variables
return {
getID: function ()  {
// This inner function will return the UPDATED celebrityID variable
// It will return the current value of celebrityID, even after the changeTheID function changes it
return celebrityID;
},
setID: function (theNewID)  {
// This inner function will change the outer function's variable anytime
celebrityID = theNewID;
}
}

}

var mjID = celebrityIDFunc (); // At this juncture, the celebrityID outer function has returned.
mjID.getID(); // 999
mjID.setID(567); // Changes the outer function’s variable
mjID.getID(); // 567: It returns the updated celebrityId variable

alert(mjID.getID());

Custom jQuery plugin to manipulate tabs

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Jquery Custom Plugin</title>
http://code.jquery.com/jquery-1.10.1.min.js

(function ($){
$.fn.Tabs = function (options){
var settings = $.extend({
color : “#000000”,
background : “#ffffff”,
container : ”,
dafault : 1
}, options );

this.css({
‘color’: settings.color,
‘background-color’: settings.background
});

$(“#”+settings.container).ResetAll();

$(‘#c’+settings.dafault).show();
$(‘#’+settings.dafault).css( “color”, “red” );

$(this).children(“a”).on(‘click’, function() {
$(“#”+settings.container).ResetAll();
$(‘#c’+$(this).attr(“id”)).fadeIn(“slow”);
$(this).css( “color”, “red” );
});

};

$.fn.ResetAll = function() {
$(this).children(“div”).hide();
this.find( “a” ).css( “color”, “black” );
};

}(jQuery));

$( document ).ready(function() {
$( “#test” ).Tabs({
color: “#000000”,
background: ‘#cccccc’,
container: ‘test’,
dafault : 1
});
});

<style>
.cont{
width:400px;
padding:10px;
border:1px solid #000000;
}
.cont a{
text-decoration: none;
background-color:#FFFFFF;
border:2px solid #000000;
padding:2px;
}
</style>

</head>
<body>

Tab 1
Tab 2
Tab 3

In addition, the primary purpose of an Immediately Invoked Function is to allow us to have our own private variables. Pretend we want a different color green, and we want to store it in a variable.
It’s good practice when writing plugins to only take up one slot within $.fn. This reduces both the chance that your plugin will be overridden, and the chance that your plugin will override other plugins. In other words, this is bad.
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none !important;
}

</div>

other 1
other 2
other 3

</body>
</html>

zindex manipulation jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
http://js/jquery-1.7.1.min.js
http://js/jquery-ui-1.8.17.custom.min.js

$(function() {
$( ".layer" ).draggable({
start: function( event, ui ) {
setZindex($(this).attr("id"))
}
});
});

function setZindex(ui){
var index_highest = 0;

$(".layer").each(function() {
// always use a radix when using parseInt
var index_current = parseInt($(this).css("zIndex"), 10);
if(index_current > index_highest) {
index_highest = index_current;
}
});

$("#"+ui).css("zIndex", parseInt(index_highest)+1);

}

<style>
.layer{
width:50px;
height:50px;
border:1px solid #000000;
background-color:red;
}
</style>
</head>

<body>


1

3

</div>
</body>
</html>

jQuery fun

<!DOCTYPE html>

<html>

<head>

<style>

.gen{

width:60px;

height:60px;

margin:5px;

float:left;

}

.full_size{

width:80px;

height:90px;

float:left;

}

.top{

width:40px;

height:30px;

border-radius: 50px 50px 50px 50px;

border:1px solid #000000;

margin:0px 0px 0px 18px;

}

.handl{

width:10px;

height:20px;

border:1px solid #000000;

float:left;

border-radius: 10px 0px 0px 0px;

margin:8px 0px 0px 0px;

}

.handr{

width:10px;

height:20px;

border:1px solid #000000;

float:left;

border-radius: 0px 10px 0px 0px;

margin:8px 0px 0px 0px;

}

.mid{

width:50px;

height:40px;

border-radius: 10px 10px 0px 0px;

border:1px solid #000000;

float:left;

}

.btn{

width:5px;

height:40px;

margin:0px auto;

}

.btns{

width:5px;

height:5px;

border: 1px solid #333333;

border-radius: 5px 5px 5px 5px;

margin:5px 0px 0px 0px;

}

.botl{

width:18px;

height:30px;

border:1px solid #000000;

float:left;

margin:0px 0px 0px 12px;

}

.botr{

width:18px;

height:30px;

border:1px solid #000000;

float:left;

margin:0px 0px 0px 10px;

}

</style>

http://code.jquery.com/jquery-latest.js

</head>

<body>

$(".gen").click(function () { var color = $(this).css("background-color"); var classes = $(this).attr("class"); var classesArray = classes.split(' '); var tot_class = classesArray.length; tot_class = tot_class-1; var which_elem = classesArray[tot_class]; if(which_elem == "t"){ $('.top').css("background-color",color); } else if(which_elem == "m"){ $('.handl').css("background-color",color); $('.handr').css("background-color",color); $('.mid').css("background-color",color); } else if(which_elem == "b"){ $('.botl').css("background-color",color); $('.botr').css("background-color",color); } else if(which_elem == "bt"){ $('.btns').css("background-color",color); } });
</div> </body> </html>

Add extra file field


jQuery(document).ready(function(){
	jQuery('#add').click(function() {
		jQuery('
Doc Title :
').css({"background-color" : "#E0D7A7","padding" : "5px","width" : "500px"}).fadeIn('slow').appendTo('.inputs'); }); jQuery('#remove').click(function() { jQuery('.field:last').css({"background-color" : "#ff0000"}).fadeOut(300, function(){ jQuery(this).remove();}); }); }); Continue reading