Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Wednesday 14 August 2013

Youtube like rating system in jsp using jquery

// siddhu vydyabhushana // 23 comments
Hi friends today am going to post youtube like rating system in jsp using jquery ,i hope you will like it. youtube is a one of the most famous video storage site many of the developers want to design , develop rating systems like youtube , so i wrote this article.

                                                 
                               DOWNLOAD      :click here
index.html
it contains two links like & dislike . when you click on like $(".selector").slidedown() will be called .
<body>
<div style="margin:50px">
<h1><a href="http://javatyro.blogspot.in">javatyro.blogspot.in</a></h1>
<a href="#" class="like" id="1" name="up">Like</a> -- <a href="#" class="like"
 id="1" name="down">Dislike</a>
<div id="votebox">
<span id='close'><a href="#" class="close" title="Close This">X</a></span>
<div style="height:13px">
<div id="flash">Loading........</div>
</div>
<div id="content">
</div>
javascript code:
$(document).ready(function()
{
$(".like").click(function()
{
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax
({
type: "POST",
url: "rating.jsp",
data: dataString,
cache: false,
success: function(html)
{
$("#flash").fadeOut("slow");
$("#content").html(html);
} 
});
});
$(".close").click(function()
{
$("#votebox").slideUp("slow");
});
});
css code:
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;

}
a
{
text-decoration:none
}
a:hover
{
text-decoration:none

}
#votebox
{
border:solid 1px #dedede; padding:3px;
display:none;
padding:15px;
width:700px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.close
{
color:#333
}


#greebar
{
float:left;
background-color:#aada37;
border:solid 1px #698a14;
width:0px;
height:12px;
}
#redbar
{
float:left;
background-color:#cf362f;
border:solid 1px #881811;
width:0px;
height:12px;
}
#flash
{
display:none;
font-size:10px;
color:#666666;
}
#close
{
float:right; font-weight:bold; padding:3px 5px 3px 5px; border:solid 1px #333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
h1
{
font-family:'Georgia', Times New Roman, Times, serif;
font-size:36px;
color:#333333;
}
rating.jsp:
<%@page import="java.sql.*"%>
<%
if(request.getParameter("id")!=null)
{
int id=Integer.parseInt(request.getParameter("id"));
int val,valb,total=0,up_per=0,down_per=0,up_value=0,down_value=0;
String name=request.getParameter("name");
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:youtube");
if(name.equals("up")==true)
{
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from messages where id="+id+" ");
rs.next();
val=rs.getInt(3)+1;
Statement stmt1=con.createStatement();
stmt1.executeUpdate("update messages set up="+val+" where id="+id+" ");
}
else
{
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from messages where id="+id+" ");
rs.next();
val=rs.getInt(4)+1;
Statement stmt1=con.createStatement();
stmt1.executeUpdate("update messages set down="+val+" where id="+id+" ");
}

Statement stmt2=con.createStatement();
ResultSet rs1=stmt2.executeQuery("select * from messages where id="+id+" ");
rs1.next();
up_value=rs1.getInt(3);
down_value=rs1.getInt(4);
total=up_value+down_value;
up_per=(up_value*100)/total;
down_per=(down_value*100)/total;

%>
<div style="margin-bottom:10px">
<b>Ratings for this blog</b> ( <%=total%> total)
</div>
<table width="700px">

<tr>
<td width="30px"></td>
<td width="60px"><%=up_value %></td>
<td width="600px"><div id="greebar" style="width:<%=up_per %>%"></div></td>
</tr>

<tr>
<td width="30px"></td>
<td width="60px"><%=down_value %></td>
<td width="600px"><div id="redbar" style="width:<%=down_per%>%"></div></td>
</tr>

</table>

<%
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
%>

Your like and shares make me more happy thanq....  
 database image:
 
                               DOWNLOAD      :click here
Read More

Monday 12 August 2013

submit a form using jquery, jsp without refreshing page

// siddhu vydyabhushana // 17 comments

Hai the readers of javatyro, today am going to explain the form submit in webpages without refresh or without changing the page . jQuery is a google library it has a capability to change the values on live change using $("slector").live() . i hope you will like the tutorial..
   
                                             DOWNLOAD TUTORIAL:click here 

Database  :

Validations using jquery
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
	var username = $("#username").val();
	var password = $("#password").val();
	var gender = $("#gender").val();
	     
	
var dataString = 'name='+ name + '&username=' + username + '&password=' + password +
                     '&gender=' + gender;
	if(name=='' || username=='' || password=='' || gender=='')
	{
	$('.success').fadeOut(200).hide();
        $('.error').fadeOut(200).show();
    }
    else
	{
	$.ajax({
	type: "POST",
    url: "ajax-form.jsp",
    data: dataString,
    success: function(){
	$('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
}
});
}
return false;
});
});

ajax-form.jsp
<%@page import="java.sql.*"%>
<%
if(request.getParameter("name")!=null)
{
String name=request.getParameter("name");
String username=request.getParameter("username");
String password=request.getParameter("password");
String gender=request.getParameter("gender");

try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:form");
Statement stmt=con.createStatement();
stmt.executeQuery("insert into login values('"+name+"','"+username+"',
'"+password+"','"+gender+"')");
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
%>
your likes and shares makes me more happy like my page in fb
Read More

Saturday 10 August 2013

Fllicker like title edit using java

// siddhu vydyabhushana // 25 comments
Flicker like title edit using java, jquery, jsp, is quite little bit confusing so i am interested to teach you something which i know, i hope you like it.same post you can find it in 9lessons in php













                     Download: click here
java script code:
$(function() 
{

$("h4").click(function() 
{
var titleid = $(this).attr("id");
var sid=titleid.split("title");
var id=sid[1];
var dataString = 'id='+ id ;
var parent = $(this).parent();
$(this).hide();
$("#formbox"+id).show();
return false;
});
 
$(".save").click(function() 
{
var A=$(this).parent().parent();
var X=A.attr('id');
var d=X.split("formbox");
var id=d[1];
var Z=$("#"+X+" input.content").val();
var dataString = 'id='+ id +'&title='+Z ;
$.ajax({
type: "POST",
url: "imageajax.jsp",
data: dataString,
cache: false,
success: function(data)
{
A.hide(); 
$("#title"+id).html(Z); 
$("#title"+id).show(); 
}
});
return false;
});
$(".cancel").click(function() 
{
var A=$(this).parent().parent();
var X= A.attr("id");
var d=X.split("formbox");
var id=d[1];
var parent = $(this).parent();
$("#title"+id).show();
A.hide();
return false;
}); 
});
css code:
#container
{
margin:0 auto;
width:900px;
font-family:Arial, Helvetica, sans-serif;

}
td
{
width:100px;
}
h4
{
margin:0px;
padding:0px;
}
h4:hover
{
background-color:#ffffcc;
}
.save
{
background-color:#cc0000;
color:#fff;
padding:4px;
font-size:11px;
border:solid 1px #cc0000;
text-weight:bold;
-moz-border-radius:5px;-webkit-border-radius:5px;
}
.cancel
{
background-color:#dedede;
color:#333;
padding:4px;
font-size:11px;
border:solid 1px #dedede;
-moz-border-radius:5px;-webkit-border-radius:5px;
}
database images

 
imageajax.jsp:
<%@page import="java.sql.*"%>
<%
if(request.getParameter("id")!=null)
{
int id=Integer.parseInt(request.getParameter("id"));
String title=request.getParameter("title");
try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:flicker");
Statement stmt=con.createStatement();
stmt.executeQuery("update images set title='"+title+"' where id="+id+" ");
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
%>
databse after update:


your likes, shares make me more happy
 
Read More

Wednesday 7 August 2013

Facebook like Autosuggestion with jQuery, Ajax and JAVA

// siddhu vydyabhushana // 7 comments
Facebook like auto suggestion with jquey, ajax with jsp also developed by 9lessons in php i never found this tutorial in java o jasp anywhere and i got many requests from users who are reading frequently.I lhope you like it.Automatically  based on the query you search the values will be listed.

  
                           Download Script:   Download File



  
Database: Actually i used ms access to connect with jsp,if you use mysql or oracle below code useful
CREATE TABLE test_user_data
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);
index.html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.watermarkinput.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".search").keyup(function() 
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;

if(searchbox=='')
{
}
else
{

$.ajax({
type: "POST",
url: "search.jsp",
data: dataString,
cache: false,
success: function(html)
{

$("#display").html(html).show();
	
	
	}
});
}return false;    


});
});

jQuery(function($){
   $("#searchbox").Watermark("Search");
   });
</script>
Search.jsp: it displays results
<%@page import ="java.sql.*"%>
<%
if(request.getParameter("searchword")!=null)
{
String q=request.getParameter("searchword");
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:auto");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from test_user_data where fname like '%"+q+"%' or lname like '%"+q+"%'  ");
while(rs.next())
{
String fname=rs.getString(2);
String lname=rs.getString(3);
String img=rs.getString(5);
String country=rs.getString(4);
%>
<div class="display_box" align="left">
<img src="user_img/<%=img%>" style="width:25px; float:left; margin-right:6px" /><%=fname%> <%=lname%><br/>
<span style="font-size:9px; color:#999999"><%=country%></span></div>
<%
}
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
else
{
out.println("wrong");
}
%>
Css code: for simple and nice user interface
body
{
font-family:"Lucida Sans";
}
*
{
margin:0px
}
#searchbox
{
width:250px;
border:solid 1px #000;
padding:3px;
}
#display
{
width:250px;
display:none;
float:right; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede; font-size:12px; height:30px;
}
.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
#shade
{
background-color:#00CCFF;
}
Read More

Tuesday 6 August 2013

Live Table Edit with Jquery ,Ajax and Java

// siddhu vydyabhushana // 3 comments
Very thankful to srinivas tamada for writing this post already he did live table edit in php but now am going to teach you how to do this in pure java.i hope you like it .Lets start...

                            Download this code:  click here
Database:
i took a single table named fullnames columns is,firstname,lastname



CREATE TABLE fullnames
(
id INT PRIMARY KEY AUTO_INCREMENT,
firstname VARCHAR(70),
lastname VARCHAR(70)
);

wireframe:
index.jsp : For displaying records



<table width="100%">
<tr class="head">
<th>First Name</th><th>Last Name</th>
</tr>
<%
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:edit","","");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from fullnames");
int i=1;
while(rs.next())
{
int id=rs.getInt(1);
String firstname=rs.getString(2);
String lastname=rs.getString(3);
if(i%2==0)
{
%>
<tr id="<%=id%>" class="edit_tr">
<% 
} 
else 
{ %>
<tr id="<%=id%>" bgcolor="#f2f2f2" class="edit_tr">
<% } %>
<td width="50%" class="edit_td">
<span id="first_<%=id%>" class="text"><%=firstname %></span>
<input type="text" value="<%=firstname%>" class="editbox" id="first_input_<%=id%>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<%=id%>" class="text"><%=lastname%></span> 
<input type="text" value="<%=lastname%>"  class="editbox" id="last_input_<%=id %>"/>
</td>
</tr>

<%
i++;
}
con.close();
}
 catch(Exception e)
 {
 out.println(e);
 }
%>

</table>

Javascript Code:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
$("#first_"+ID).html('<img src="load.gif" />');


if(first.length && last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.jsp",
data: dataString,
cache: false,
success: function(html)
{

$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
});

$(".editbox").mouseup(function() 
{
return false
});

$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});

});
</script>
css code:
 
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:7px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
th
{
font-weight:bold;
text-align:left;
padding:4px;
}
.head
{
background-color:#333;
color:#FFFFFF
}
I connected jsp to ms access database after downloading this code you have to set data source name path and place it in webapps folder of apache run it . even though if have any doubts comment here i will clarify it. mail me vydyas@gmail.com
Read More

Saturday 23 March 2013

Blogger Wdgets:Related Posts Widget For Blogger / Blogspot with jQuery

// siddhu vydyabhushana // 2 comments
Related posts widget is very important for a blog, because it increases the number of page views and also help the visitor to view other posts related to blog. Now here is wonderful trick to display links to related posts beneath each posts. At their blogs today there are many types of related post widget, and related items thumbnail images using HTML, Java script, etc. .. Here I will show a method that is easy to show install.It only title jQuery.It related post widget will look like a picture below.

How To Add Related Posts Widget For Blogger



I have seen few who are showing the Related Posts Widget of posts below their posts. It’s also a good script placement which can increase your pageviews.

To add the code , just follow the above instructions.


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.


Now find (CTRL+F) this code in the template:

</head>


And immediately before it, paste this code:


<!--Related Posts Scripts and Styles www.bdlab.blogspot.com Start-->

<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><styletype="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts .widget{

padding-left:6px;

margin-bottom:10px;



}

#related-posts .widget h2, #related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:blue;

}

#related-posts a:hover{

color:blue;

}

#related-posts ul{

list-style-type:none;

margin:0 0 0px 0;

padding:0px;

text-decoration:bold;

font-size:15px;

text-color:#000000

}

#related-posts ul li{

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_yaq-g2EWXzHbvWBtUhibhF70CRTbi0YCyjsLdhLwBImbd6AWNw4WM8EKiDgrjvVjOy3XdlAuE9BXfAly1G8ABrkuTFkwNvD5LvxMUU0klrAzPDhWhVSD_wCDZejCCTkk74FNkuHGvM/s200/greentickbullet.png) no-repeat ;

display:block;

list-style-type:none;

margin-bottom: 13px;

padding-left: 30px;

padding-top:0px;}

</style>



<script type='text/javascript'>

var relatedpoststitle="Related Posts";

</script>

<script src='http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-for-blogger-24work.js' type='text/javascript'/>



<!--Remove--></b:if>

<!--Related Posts Scripts and Styles www.bdlab.blogspot.com End-->




If you want to change the title of your widget you can edit this line of the above code



var relatedpoststitle="Related Posts";


If you want you can edit the blue and black colors present in this code



2.Now find this line of code


<div class='post-footer-line post-footer-line-1'/>


If you cant find it then try finding this one


<p class='post-footer-line post-footer-line-1'/>


Now immediately after any of these lines(whichever you could find) place this code snippet



<!-- Related Posts Code www.bdlab.blogspot.com Start-->

<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;'type='text/javascript'/></b:if></b:loop><ahref='http://24work.blogspot.com'><img style="border: 0" alt="Related Posts Widget for Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg69GDvxOYSqLhd0euNKU9LiwbuJT00wj78REPRKRTQ9ULBuvbsF1dIjcQOoK9zAwJgOXrA8WFrLkx9V4seUNWoyp_JUWiPu87soaBGgRfrPsynZKt6IlrLUWF36baq0rtyp2AydCHLrGYE/s1600/blogger-widgets.png" /></a>


<script type='text/javascript'>

var maxresults=5;

removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);

</script>

</div>



<!--Remove--></b:if>

<!-- Related Posts Code www.bdlab.blogspot.com End-->


And now click Save Template 





You can adjust the maximum number of related posts being displayed by editing this line in the code.


var maxresults=5;



Note: If you want to display the Related Posts on every page, then remove the lines of code starting with <!--Remove-->


Read More

Monday 19 November 2012

implement Facebook notifications code using Jquery

// siddhu vydyabhushana // 6 comments

Hi as per many requets am going to post the facebook Notifications Code .In facebook when any one requested or accepted u can observe notification .. so now am going to show how the code was implemented.

Lets Start..!



Download Files here



CSS CODE FOR NOTIFY.CSS
.sNotify_message {
width: 250px;
padding: 20px;
background-color: #eee;
left: 100px;
bottom: 50px;
margin-bottom: 20px;
min-height:50px;
border: 1px solid #333;
border-radius:3px;
}
PHP CODE FOR NOTIFICATIONS.PHP
<html>
<head>
<title> Document</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script src="Notify.js" type="text/javascript"></script>
<link href="Notify.css" rel="stylesheet" />
</head>

<body>

<script type='text/javascript'>
function siddhu()
{
sNotify.addToQueue('notification message as fb');
sNotify.alterNotifications('chat_msg');

}
</script>


<input type='submit' value='display notification' name='subnit' onclick='return siddhu()'>
</body>
</html>


Read More

Saturday 17 November 2012

Taking snapshots using jquery

// siddhu vydyabhushana // 2 comments

As per many requests am going to post "taking snapshots using jquery"
.we all are very habituate to taking photos and uploading pics in fb or google+.if we analyze what happening in behind it ..it was simple and interesting just 4 files going to give u that camera main javascript file was webcam.js  to give sound 
shutter.mp3

thats all lets start...!




HIERARCHY:




i already told that 4 items clearly it was in pic..












                   DOWNLOAD            LIVE DEMO


CODING:
code for test.html
<head>

<title>JPEGCam Test Page by siddhu</title>

</head>
<body>
<table><tr><td valign=top>
<h1>JPEGCam Test Page</h1>
<h3>Demonstrates a very simple, one-click capture & upload implementation</h3>

<!-- First, include the JPEGCam JavaScript Library -->
<script type="text/javascript" src="webcam.js"></script>

<!-- Configure a few settings -->
<script language="JavaScript">
webcam.set_api_url( 'test.php' );
webcam.set_quality( 100 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true ); // play shutter click sound
</script>

<!-- Next, write the movie to the page at 320x240 -->
<script language="JavaScript">
document.write( webcam.get_html(320, 240) );
</script>

<!-- Some buttons for controlling things -->
<br/><form>
<input type=button value="Configure..." onClick="webcam.configure()">
  
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</form>

<!-- Code to handle the server response (see test.php) -->
<script language="JavaScript">
webcam.set_hook( 'onComplete', 'my_completion_handler' );

function take_snapshot() {
// take snapshot and upload to server
document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}

function my_completion_handler(msg)
{
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
var image_url = RegExp.$1;
// show JPEG image in page
document.getElementById('upload_results').innerHTML =
'<h1>Upload Successful!</h1>' +
'<h3>JPEG URL: ' + image_url + '</h3>' +
'<img src="' + image_url + '">';

// reset camera for another shot
webcam.reset();
}
else alert("PHP Error: " + msg);
}
</script>

</td><td width=50> </td><td valign=top>
<div id="upload_results" style="background-color:#eee;"></div>
</td></tr></table>
<h2>By Siddhu vydyabhushanana </h2>
</body>
</html>

test.php

<?php



$filename = date('YmdHis') . '.jpg';
$result = file_put_contents( $filename, file_get_contents('php://input') );
if (!$result) {
print "ERROR: Failed to write data to $filename, check permissions\n";
exit();
}

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $filename;
print "$url\n";

?>

enjoy it...!
Read More

Friday 26 October 2012

Design Facebook Style Alert Box

// siddhu vydyabhushana // 3 comments
Good night to all of my site viewers and my friends because time was 11:30pm but i got mail from my friend to post how the fb style alert confirm box will work , deisgn so i designed with jQuery and Css ok Lets Start....................!



Download Some scripts :

1)jQuery.alert.js
2)jquery_facebook.alert.js
3)facebook.alert.css

Download ALL in one:
Download Here



HTML /JAVA SCRIPT CODE:



<link href="facebook.alert.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_facebook.alert.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".delete_post").click( function()
{
jConfirm('Press DELETE to remove post', 'Confirmation Dialog',
function(r) {
if(r==true)
{
$(".divbody").slideToggle(300);
}
});
});
});
</script>
<body bgcolor='#eee'>
<div class='divbody'>
<div id='divimg'>
<img src='https://www.opendrive.com/files/62612599_vSCTi/admin.jpg' width='70' height='80' alt='siddhu vydyabhushana'></img>
</div>
<div id='divtext'>
<a href='#' class='delete_post' id='1' '>X</a>
just 5 min ago i developed it , am developing fb wall script ....<a href='http://feeds.feedburner.com/AitamE-learning'>Click Here</a><br><br>
<div id="time">5 min ago</div>
</div>
</div>


Read More

Tuesday 23 October 2012

Typing Game with jQuery

// siddhu vydyabhushana // 2 comments

Just now i played typing game ...the specialty is they developed using Jquery only .i provided the demo link click to play








                               
Live Demo              Tutorial Link
Read More

Monday 22 October 2012

Useful jQuery Plugins For web developers

// siddhu vydyabhushana // 2 comments
you know am always think about designing...! I know how much hard it was to write coding so i posted jQuery Plugins to develop simple forms,password strengthen , floating box, light box...enjoy it

1)jQuery Validation Plugin

                                                                     
demo

2)jQuery Alert Plugin


3)jQuery password strength plugin


4)jQuery floating box plugin

Demo

5)jquery Light Box Plugin



http://www.phpletter.com/Demo/Jquery-Floating-Box-Plugin/


6)jQuery Plugin for Simple Dropdown


Read More

Saturday 13 October 2012

HOW TO Recover spaces in between Divisions

// siddhu vydyabhushana // 1 comment
Good morning friends after one week am interested to post a post but i think it will be more useful to u for example u are going to design a timeline like facebook or something while writing matter in divisions some may be small ,some may be big spaces may occur like below pic



Coming to coding just 


HTML CODE FOR divisions:

<div id="container">


<div class="box">1</div>
<div class="box">siddhu vydyabhushana<br>
siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>
</div>
<div class="box">3</div>
<div class="box">4 </div>

</div>

CSS CODE 

#container
{
width:1100px;
margin: 0 auto;
border:dashed 1px #bdbdbd;
padding:15px;
}
.box{
width: 400px;
float: left;
background-color:#ffffff;
padding:10px;
font-family:Articulate Light;
background:#3388bb;
border:solid 1px #B4BBCD;
min-height:50px;
}
.box:hover
{
border:solid 1px black;
background:#3399cc;
border-radius:4px;
box-shadow:3px 3px 3px 3px #666;
-webkit-box-shadow :ease-in-out 0.30;
}






it will be recovered by jQuery library is MASONRY   download it from 

 Masonry jQuery


<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script type="text/javascript" >
$(function()
{

$('#container').masonry({boxSelector : '.box'});
});
</script>

After apply these the the pic will be


Read More

Monday 1 October 2012

How to use MSAccess as Database

// siddhu vydyabhushana // 4 comments

Microsoft Access is one of the part of  MSOFFICE  .It is a database management system from microsoft that combines the relational microsoft jet database engine with a graphical user interface and software development tools. we can also use this as oracle ,mysql database.... in first i used this one but present i addicted to php......for beginners it is very useful  and interesting no use to write code for creating tables.....................


Login and Regisration Using Jsp:-


NAME YOUR DATABASE:  open MSACCESS in microsoft office 
                              
         START->>>MICROSOFT OFFICE-->>msaccess

after that choose blank database and save it with example.accddb extension


CREATE TABLE :   After RIGHT CLICK ON table1 and take Design View to create table.there is no need to write commands create table.


after clicking design view u can edit like this

and rename table1 with whatever u like 

u create table and save the database in certain folder i am going explain to place it in tomcat   server.for example if u name as example.accdb...u need to place it in
folder of web apps


CONFIGURATION: 
                         Go to Control Panel -->and choose small icons instead of lage->> at next 
click on Administrative Tools   and select Data Sources


Click on Add to add database ---------------------------------------------------------



add *.mdb ,*.accdb Microsoft Access Driver and Finish.

in Data Source Name u choose name Whatever u like it will be used to call database in jsp.

                                                   
Connection con=DriverManager.getConnection("jdbc:odbc:example","","");


on 4 line Database:
                                Select and set path where database was u successfully configured 
if u have any doubts regarding to this topic leave doubts..





Siddhu vydyabhushana please subscribe to get this type posts to ur mail ...





Read More