laxman: August 2012

html page:
----------

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baby's First Years - The first years of my life!</title>
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

function loadplans() {
//alert("hai");

$.ajax({
type : "POST", // Method to send the data. I would need "post" method
// as better option.
url : "plan!getPlans", // Action called to data treatament

data : {

// PARAMETER jgGrdData with variable "postData" value

},

/** START: handlers for request. Not important for this trouble * */
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
success : function(text) {
// alert("one. .. ");
responseText = text.planss;
fillPlans(responseText);
},
error : function(xhr, textStatus, errorThrown) {
//alert("error"+errorThrown);
}
/** END: handlers for the request. * */
});

}

function fillPlans(pageData) {

//alert("fillplans");
var myObject = eval('(' + pageData + ')');

if (myObject != null) {

var storages = myObject.storage;
var domains = myObject.domain;
for ( var i = 1; i <= 3; i++) {
document.getElementById(i).innerHTML = myObject[i - 1].description;
document.getElementById("p" + i).innerHTML = myObject[i - 1].amount;
document.getElementById("s" + i).innerHTML = myObject[i - 1].storage;
document.getElementById("d" + i).innerHTML = myObject[i - 1].domain;
document.getElementById("e" + i).innerHTML = myObject[i - 1].support;
document.getElementById("de" + i).innerHTML = myObject[i - 1].duraction;

}
}

}
</script>
</head>

<body
onLoad="loadplans()">

<div id="babys_wrapper">



<div id="babys_middle" style="padding-top: 0px;">

<div id="container">
<div class="pricingtable ">
<div class="top">
<h2>
<label id="1"></label>
</h2>
</div>
<h1>
<sup>$</sup><label id="p1"></label>
</h1>
<p>
<label id="de1"></label>
</p>

<ul>
<li><strong><label id="e1"></label></strong> Email Support</li>
<li><strong><label id="s1"></label></strong>GB of Storage</li>
<li><strong><label id="d1"></label></strong> Domains</li>
</ul>

<div class="pricingtable">
<div class="top">
<h2>
<label id="2"></label>
</h2>
</div>
<h1>
<sup>$</sup><label id="p2"></label>
</h1>
<p>
<label id="de2"></label>
</p>

<ul>
<li><strong><label id="e2"></label></strong> Email Support</li>
<li><strong><label id="s2"></label></strong>GB of Storage</li>
<li><strong><label id="d2"></label></strong> Domains</li>
</ul>

<div class="pricingtable">
<div class="top">
<h2>
<label id="3"></label>
</h2>
</div>
<h1>
<sup>$</sup><label id="p3"></label>
</h1>
<p>
<label id="de3"></label>
</p>

<ul>
<li><strong><label id="e3"></label></strong> Email Support</li>
<li><strong><label id="s3"></label></strong>GB Storage</li>
<li><strong><label id="d3"></label></strong> Domains</li>
</ul>

</div>

</div>

Action class:
-------------
PlanController.java:
--------------------

package com.asman.BabysFirstYears;

import java.util.List;
import java.util.Map;

import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;
import org.apache.struts2.interceptor.SessionAware;

import com.asman.BabysFirstYears.service.UsersService;
import com.asman.BabysFirstYears.to.SubPlans;
import com.opensymphony.xwork2.ValidationAwareSupport;

@ParentPackage("json-default")
@Results({ @Result(name = "success", type = "json") })
public class PlanController extends ValidationAwareSupport implements
SessionAware {

/**
*
*/
private static final long serialVersionUID = 1L;

private Map<String, Object> session;

@Override
public void setSession(Map<String, Object> session) {
this.session = session;

}

private String planss;

/**
* @param plans the plans to set
*/
private List<SubPlans> subPlansList;

/**
* @return the subPlansList
*/
public List<SubPlans> getSubPlansList() {
return subPlansList;
}

/**
* @param subPlansList the subPlansList to set
*/
public void setSubPlansList(List<SubPlans> subPlansList) {
this.subPlansList = subPlansList;
}

private UsersService usersService=new UsersService();
public String getPlans()
{
//System.out.println("in actionnnnnnnnnnnnnnnnnnnnnnnnnnnn");
subPlansList=usersService.getPlans();
//System.out.println("sizeeeeeeeee"+subPlansList.size());
planss=usersService.getPlansByJSON(subPlansList);
System.out.println("plans::::::::::"+planss);

return "success";

}

/**
* @return the planss
*/
public String getPlanss() {
return planss;
}

/**
* @param planss the planss to set
*/
public void setPlanss(String planss) {
this.planss = planss;
}

}

UsersService.java:

------------------

public class UsersService

{

public List<SubPlans> getPlans()

{

System.out.println("in serviceeeeeeeeeeeeeeeeeeeee");

SessionFactory sessionFactory = new AnnotationConfiguration().configure().buildSessionFactory();

Session session = sessionFactory.openSession();

List<SubPlans> subPlansList= usersDao.getPlans(session);

return subPlansList;

}

/** generate json data from list object

**/

public String getPlansByJSON(List<SubPlans> subPlans) {

String plans = null;

JSONArray plansArray = new JSONArray();

for (SubPlans subPlan : subPlans) {

JSONObject plan = new JSONObject();

plan.put("description", subPlan.getSubDescription());

plan.put("amount", subPlan.getAmount());

plan.put("storage", subPlan.getStorage());

plan.put("domain", subPlan.getDomain());

plan.put("support", subPlan.getSupport());

plan.put("duraction", subPlan.getDuration());

plansArray.put(plan);

}

plans = plansArray.toString();

return plans;

}

UserDao.java:

---------------

public class UserDao

{

public List<SubPlans> getPlans(Session session)

{

Query query=session.createQuery("from SubPlans");

List<SubPlans> subPlansList=query.list();

return subPlansList;

}

Tuesday, August 14, 2012

GoTop Functionality

if ur page scroll down then show scrollTop button ,
if ur click these button then go to top

download here
https://docs.google.com/?tab=wo&authuser=0&pli=1#folders/0B78d4lZ0XUZNeTRLdG1XWVU5ZEk

Form validation alteast one special character and at least one digit and min length is 8 characters

index.html:
-----------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="keywords" content="basic jquery validation form demo" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../script.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

<title>Basic jQuery Validation Form Demo | jQuery4u</title>

<link rel="stylesheet" type="text/css" href="../styles.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style>
body {
background-color: #C6F5F2;
}
#content { background-color:#C6F5F2; width:950px; min-height:550px; text-align:left; padding:20px; }
h1 {
padding:20px 10px 20px 10px;
}
h2 {
padding-left: 0px !important;
}
#header {
background-color: #CA410B !important;
}
.large { font-size:22px; }
.orange { color:orange; }
.italic { font-style:italic }
.textmiddle {vertical-align:middle;}
.padout { padding-left:25px; padding-right:25px; }
.rounded-corners {
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
}
.rounded-corners-top {
-moz-border-top-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
}
.right {
float: right;
}
.scrolldown { padding-left:20px; color:#EDECE8; font-size:40px; font-weight:bold; vertical-align:middle;
text-shadow: #6374AB 2px 2px 2px;
}
.contentblock { margin: 0px 20px; }
.results { border: 1px solid blue; padding:20px; margin-top:20px; min-height:50px; }
.blue-bold { font-size:18px; font-weight:bold; color:blue; }

/* example styles for validation form demo */
#register-form {
background: url("form-fieldset.gif") repeat-x scroll left bottom #F8FDEF;
border: 1px solid #DFDCDC;
border-radius: 15px 15px 15px 15px;
display: inline-block;
margin-bottom: 30px;
margin-left: 20px;
margin-top: 10px;
padding: 25px 50px 10px;
width: 350px;
}

#register-form .fieldgroup {
background: url("form-divider.gif") repeat-x scroll left top transparent;
display: inline-block;
padding: 8px 10px;
width: 340px;
}

#register-form .fieldgroup label {
float: left;
padding: 15px 0 0;
text-align: right;
width: 110px;
}

#register-form .fieldgroup input, #register-form .fieldgroup textarea, #register-form .fieldgroup select {
float: right;
margin: 10px 0;
height: 25px;
}

#register-form .submit {
padding: 10px;
width: 220px;
height: 40px !important;
}

#register-form .fieldgroup label.error {
color: #FB3A3A;
display: inline-block;
margin: 4px 0 5px 125px;
padding: 0;
text-align: left;
width: 220px;
}
</style>

<script type="text/javascript">
/**
* Basic jQuery Validation Form Demo Code
* Copyright Sam Deering 2012
* Licence: http://www.jquery4u.com/license/
*/
(function($,W,D)
{
var JQUERY4U = {};

$.validator.addMethod("custom_number", function(value, element) {
return this.optional(element) || value === "NA" ||
value.match(/^(?=.{8,})(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\W]).*$/i);
}, "Must be at least 8 characters , contain at least one special character and one digit");

JQUERY4U.UTIL =
{
setupFormValidation: function()
{

//form validation rules
$("#register-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,

custom_number:true

},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 8 characters long"

},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
}
}

//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});

})(jQuery, window, document);
</script>

</head>
<body>
<div id="page-wrap">

<div id="content">

<h1>Basic jQuery Validation Form Demo</h1>


<form action="" method="post" id="register-form" novalidate="novalidate">

<h2>User Registration</h2>

<div id="form-content">
<fieldset>

<div class="fieldgroup">
<label for="firstname">First Name</label>
<input type="text" name="firstname">
</div>

<div class="fieldgroup">
<label for="lastname">Last Name</label>
<input type="text" name="lastname">
</div>

<div class="fieldgroup">
<label for="email">Email</label>
<input type="text" name="email">
</div>

<div class="fieldgroup">
<label for="password">Password</label>
<input type="password" name="password">
</div>

<div class="fieldgroup">
<p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p>
<input type="submit" value="Register" class="submit">
</div>

</fieldset>
</div>

<div class="fieldgroup">
<p>Already registered? <a href="/login">Sign in</a>.</p>
</div>
</form>


</div>

</div>

</div> 

</body>
</html>

for this you need jquery.validation.min.js
this js download here
https://docs.google.com/file/d/0B78d4lZ0XUZNc0NMemd5cDUyS2s/edit

Monday, August 13, 2012

different types of graphs and charts in jquery

http://www.jqueryrain.com/category/jquery-chart-graph/

please refer above site

Different Tabs Examples in jquery

http://www.jqueryrain.com/category/jquery-tabs/

please refer above site

Jquery Animated menu

index.html:
----------

<html>
<head>
<title>Jquery Animated menu bar</title>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body >
<div id="wrapper">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</body>
</html>

script.js:
--------

$(document).ready(function() {
$("#navigation li").append("<span></span>");
//hover over
$("#navigation li").hover(function() {
$(this).find("span").animate({
height: "100%",width:"100%",left:"0px",top:"0px"
}, 250);

} , function() { //callback function
$(this).find("span").stop().animate({
height: "0px",width:"0px",left:"50%",top:"40px"
}, 250);
});

});

style.css:
---------

ul#navigation {
position:relative;
left:20%;
top:200px;
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#navigation li{
position:relative;
margin: 0px;
padding: 0;
overflow: hidden;
float: left;
height:80px;
width:133px;
border:1px solid #b3b3b3;
text-align:center;
background-color:white;
}
ul#navigation a {

padding:30px 0px 30px 0;
float: left;
text-decoration: none;
color: #000000;
font-weight:bold;

text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
position:relative;
z-index:2;
}
ul#navigation a:hover {
color:white;

}
ul#navigation li span
{
position:absolute;
background-color:orangered;
height:0px;
width:0px;
left: 50%;
top: 40px;
overflow: hidden;
z-index:1;
}

and also need jquery.js

Sunday, August 12, 2012

Auto open Model window in jquery

AutoLunchModel.html
-----------------------

<!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>
<title>Simple JQuery Modal Window from Queness</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(document).ready(function() {

//Put in the DIV id you want to display
launchWindow('#dialog1');

//if close button is clicked
$('.window #close').click(function () {
$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

$(window).resize(function () {

var box = $('#boxes .window');

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);

});

});

function launchWindow(id) {

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top', winH/2-$(id).height());
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(2000);

}

</script>

<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}

#boxes .window {
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}

#boxes #dialog1 {
width:375px;
height:203px;
}

#dialog1 .d-header {
background:url(images/login-header.png) no-repeat 0 0 transparent;
width:375px;
height:150px;
}

#dialog1 .d-header input {
position:relative;
top:60px;
left:100px;
border:3px solid #cccccc;
height:22px;
width:200px;
font-size:15px;
padding:5px;
margin-top:4px;
}

#dialog1 .d-blank {
float:left;
background:url(images/login-blank.png) no-repeat 0 0 transparent;
width:267px;
height:53px;
}

#dialog1 .d-login {
float:left;
width:108px;
height:53px;
}

#boxes #dialog2 {
background:url(images/notice.png) no-repeat 0 0 transparent;
width:326px;
height:229px;
padding:50px 0 20px 25px;
}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2>

<ul>

<li><a href="#dialog1" name="modal">Login Dialog Box</a></li>
<li><a href="#dialog2" name="modal">Sticky Note</a></li>
</ul>

<div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

<div id="boxes">

<div id="dialog" class="window">
Simple Modal Window |
<a href="#"class="close"/>Close it</a>
</div>


<div id="dialog1" class="window">
<div class="d-header">
<input type="text" value="username" onclick="this.value=''"/><br/>
<input type="password" value="Password" onclick="this.value=''"/>
</div>
<div class="d-blank"></div>
<div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
</div>



<div id="dialog2" class="window">
So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want! Simple and Easy to modify : ) <br/><br/>
<input type="button" value="Close it" class="close"/>
</div>



<div id="mask"></div>
</div>

</body>
</html>

images:

----------

same as below post

Model window creation using jquery

modelwindow.html:
--------------------

<!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>
<title>Simple JQuery Modal Window from Queness</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(document).ready(function() {

//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();

//Get the A tag
var id = $(this).attr('href');

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(2000);

});

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();

$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

$(window).resize(function () {

var box = $('#boxes .window');

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);

});

});

</script>
<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}

#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

#boxes #dialog1 {
width:375px;
height:203px;
}

#dialog1 .d-header {
background:url(images/login-header.png) no-repeat 0 0 transparent;
width:375px;
height:150px;
}

#dialog1 .d-header input {
position:relative;
top:60px;
left:100px;
border:3px solid #cccccc;
height:22px;
width:200px;
font-size:15px;
padding:5px;
margin-top:4px;
}

#dialog1 .d-blank {
float:left;
background:url(images/login-blank.png) no-repeat 0 0 transparent;
width:267px;
height:53px;
}

#dialog1 .d-login {
float:left;
width:108px;
height:53px;
}

#boxes #dialog2 {
background:url(images/notice.png) no-repeat 0 0 transparent;
width:326px;
height:229px;
padding:50px 0 20px 25px;
}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2>

<ul>

<li><a href="#dialog1" name="modal">Login Dialog Box</a></li>
<li><a href="#dialog2" name="modal">Sticky Note</a></li>
</ul>

<div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

<div id="boxes">

<div id="dialog" class="window">
Simple Modal Window |
<a href="#"class="close"/>Close it</a>
</div>


<div id="dialog1" class="window">
<div class="d-header">
<input type="text" value="username" onclick="this.value=''"/><br/>
<input type="password" value="Password" onclick="this.value=''"/>
</div>
<div class="d-blank"></div>
<div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
</div>



<div id="dialog2" class="window">
So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want! Simple and Easy to modify : ) <br/><br/>
<input type="button" value="Close it" class="close"/>
</div>



<div id="mask"></div>
</div>

</body>
</html>

images:

-------

Friday, August 10, 2012

Best Ajax examples

http://www.noupe.com/ajax/30-fresh-ajax-tutorials-and-techniques.html

Excellent JQuery Navigation menu Tools Examples:
----------------------------------------------------
http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html

Best Jquery plugin site

http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html

Thursday, August 9, 2012

Tooltip Integration using javascript

script.js:
--------

var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();

style.css:
----------

* {margin:0; padding:0}
body {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; background:#FFF}
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}

#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}

tooltip.html:
------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ToolTip using javascript </title>

<script type="text/javascript" language="javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<br><br><br><br>
This is laxman <span class="hotspot" onmouseover="tooltip.show('came from khammam');" onmouseout="tooltip.hide();">working in asmansoft</span>
</body>
</html>

Tuesday, August 7, 2012

HTML5 Related good site

http://www.htmlfivewow.com/slide1

Sunday, August 5, 2012

convert image or video into stream using javascript and that stream set to image/video tag dynamically

<!DOCTYPE html>
<html>
<head>
<title>reading xml</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
function handleFileSelect(evt) {
alert("first");
var files = evt.target.files; // FileList object

// Loop through the FileList
for (var i = 0, f; f = files[i]; i++) {

var reader = new FileReader();
alert("reader"+reader);

// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
alert("onload");
// Print the contents of the file
var span = document.createElement('span');
span.innerHTML = ['<p>',e.target.result,'</p>'].join('');
document.getElementById('list').insertBefore(span, null);
alert("stream"+e.target.result);
document.getElementById('image').setAttribute('src',
e.target.result);

};
})(f);

// Read in the file
//reader.readAsDataText(f,UTF-8);
reader.readAsDataURL(f);
}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<img src="" id="image"/>
</body>

or
just go through this link

https://docs.google.com/document/d/1jdCtuWKC_QRboAbM8R9XE1T6xO-lUWFQCDckGTe692c/edit

Friday, August 3, 2012

Paypal Integration in java

Paypal is the one of the famous payment gateway within the world.It is commonly used by multiple website in web world.I am just sharing my idea about the Paypal with java integration.

Paypal is providing the developer guideline and url where we can test our local application.we will use the express checkout method for payment in this example.

1. Open the paypal developer link https://developer.paypal.com/
2. We need to create two different email address , One for Merchant and other for buyer respectively.
3. Click on “Sign Up Now” button.
4. Enter the your information to access the sandbox environment.
5. Click on “Agree and Submit” button.
6. Now login with given username/password.
7. Click on “Test Account” link
8. Create a new test account and provide the details in textfields also.
9. Select the “Account Type” as you want either “Merchant” or “buyer”
10.It will generate the default email id for us.
11.Set Credit card information as “NONE” .
12.Set the balance amount for your account.

As per my acknowledgement ,you have created both merchant and buyer account within your account.

13.Now click on the “API Credentials” link
14.Copy the your API username, API password and Singature.

Now Our paypal configuration has been done. Now we will create the web project in eciplse.

1. Create the following JSP files in WEBROOT path

paypalpay.jsp
paypalResponse.jsp
paypalResponseCancel.jsp

2. Put the following code in paypalpay.jsp

1. Set your generated API username,API password and API Singature at their place.
2. You can also set the following value like item name,amount ,custom charge and rm
3. You can also set return and cancel return URL for your application.

<html>

<head>

<title>Pay through PayPal: www.TestAccount.com</title>

</head>

<body onload="document.forms['paypalForm'].submit();">

<form name="paypalForm" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">

 <input type="hidden" name="cmd" value="_xclick" />

 <input type="hidden" name="business" value="API username" />

 <input type="hidden" name="password" value="API password" />

 <input type="hidden" name="custom" value="1123" />

 <input type="hidden" name="item_name" value="Computer-Laptop" />

 <input type="hidden" name="amount" value="30"/>

 <input type="hidden" name="rm" value="1" />

 <input type="hidden" name="return" value="http://localhost:8080/PaypalGS/paypalResponse.jsp" />

 <input type="hidden" name="cancel_return" value="http://localhost:8080/PaypalGS/paypalResponseCancel.jsp" />

 <input type="hidden" name="cert_id" value="API Singature" />

</form>

</body>

</html>

3. Create two basic jsp file
1 paypalResponse.jsp (for response handling)

2 paypalResponseCancel.jsp (for Cancel handling process)

Pages

Friday, August 31, 2012

Thursday, August 30, 2012

Tuesday, August 28, 2012

Monday, August 27, 2012

Friday, August 24, 2012

Thursday, August 23, 2012

Wednesday, August 22, 2012

Tuesday, August 21, 2012

Saturday, August 18, 2012

Friday, August 17, 2012