Common Programming Logic HTML,Jquery,JAVASCRIPT,MySQL: 2013

Saturday, December 21, 2013

PHP Incrementing characters

PHP provides an easy way to increment characters.

$var='a';

$var++;
echo $var; // outputs b

If we increment a character by five positions,then increment has to be done five times.
$var++;
$var++;
$var++;
$var++;
$var++;

$var=$var+5; // this does not increments the character by five positions

Friday, July 19, 2013

Placing two tables Horizontally in a Html page

<html>
<head>
<style>
.tableHorizontal
{display:inline-block;
width:50%;
float: left;}
</style>
</head>

<body>
<table class="tableHorizontal">
<tr style="color: green;"><td>table 1 first row</td></tr>
<tr style="color:green;"><td>table 1 Second row</td></tr>
<tr style="color: green;"><td>table 1 Third row</td></tr>
<tr style="color: green;"><td>table 1 Fourth row </td></tr>
<table>

<table class="tableHorizontal">
<tr style="color: red;"><td>table 2 first row</td></tr>
<tr style="color: red;"><td>table 2 Second row</td></tr>
<tr style="color: red;"><td>table 2 Third row</td></tr>
<tr style="color: red;"><td>table 2 Fourth row</td></tr>
<table>
</body>
</html>

The Output of the above html page will look like as below :

table 1 first row

table 1 Second row

table 1 Third row

table 1 Fourth row

table 2 first row

table 2 Second row

table 2 Third row

table 2 Fourth row

Explanation:

Two required tables which are to be placed horizontally are created with same class name tableHorizontal

css is applied for the class name tableHorizontal

.tableHorizontal

{

display:inline-block;

width:50%;

float: left;

}

Sunday, April 7, 2013

HTML buttons animation on mouse hover and on mouse out

Monday, March 18, 2013

Jquery Ajax Function Code

$.ajax({
type: "POST",
url: "Bookresponse.jsp",
data: { category:document.book.category.value,
Title:document.book.Title.value,
Author:document.book.Author.value,
Publication:document.book.Publication.value,
Edition:document.book.Edition.value,
Noofcopies:document.book.Noofcopies.value,
Volume:document.book.Volume.value,
Datepur:document.book.Datepur.value,
Price:document.book.Price.value
}
})

Place the above function inside $('#exm').on('submit', function(e) { and }.

exm is the id of the form which is to be submitted and on clicking on submit, data is submitted to Bookresponse.jsp file.
Each input element data is passed through by using form name and element name.Book is the form name and category is the input element name.

In Bookresponse.jsp file,each value is retrieved .For example,String str=request.getParameter("category");

Friday, March 15, 2013

Jquery Tooltip Animation and Buttons with JSFiddle Demo

Here is the Coding for Jquery Tooltip and buttons.Buttons will be displayed as Jquery buttons and when mouse is hovered on the buttons Jquery tooltip is displayed with slideDown effect and delay of 350 milliseconds.

$(function(){

      $("input[type=button]").button(); //This applies Jqeury buttons for input type fields of type buttons

     $("input[type=button]").tooltip(); //This applies Jquery tooltip for input type fields of type buttons
     $('.classname').tooltip({show: {
effect: "slideDown",
delay: 350
}
});   //This applies Jquery tooltip animation effects for input fields with class as classname

});

Include the above coding in <script> tag

<input type="button" value="Hover" title="You got">
    <input type="button" class="classname" value="Animation tooltip" title="Awesome Tooltip with some delay and animation">

Include the above coding in body tag

Tuesday, March 12, 2013

Jquery Tabs Example with minimum height of tabs and right alignment of a tab

The Jquery Tabs example code is shown below,Each Tab is displayed with minimum height of 400px.
            Logout tab is displayed in right side.For Logout tab,InLine CSS (style="float:right") is used for displaying in right side.When user clicks on Logout tab the page will be redirected to logout.jsp, if logout.jsp html page is available

View Demo in JSFiddle ,
copy and paste this url in your browser http://jsfiddle.net/6uqM8/

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Home Page - Library Management</title>
          <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
       <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
      <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
               $(function() {
                $( "#tabs" ).tabs();
                $("#tabs").css({backgroundColor:'#ffe4e1'});
                $("#tabs").css("min-height", "400px");
            });
        </script>
    </head>
     <body>
         <div id="tabs" class="tabs" >

            <ul style="color: black;background-color: #b85c5c">
                <li ><a href="#tabs-1" style="color: #b85c5c;background-color:#ffe4e1;" >Home</a></li>
                <li ><a href="#tabs-2" style="color: #b85c5c;background-color:#ffe4e1">Create Book</a></li>
                <li style="float:right"><a onClick="location.href='logout.jsp'" style="color: #b85c5c;background-color:#ffe4e1">Log Out</a></li>
            </ul>

            <div id="tabs-1">
                <p id="intro">
                    Welcome to my Home Page of Library Management Application! This Provides effective solutions needed for a Library.Click any tab to load content from other pages.
                </p>
        </div>

          <div id="tabs-2">
                <p >
              This is the Second Tab Contents
                </p>
        </div>

    </div>

    </body>
</html>

View Demo in JSFiddle ,
copy and paste this url in your browser http://jsfiddle.net/6uqM8/

Wednesday, January 16, 2013

Java Program to reverse given input number

-->

import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStreamReader;

public class java3 {

public static void main(String[] args) throws NumberFormatException, IOException {

// TODO Auto-generated method stub

int no,i,rev=0;

System.out.println("Please Enter the number which has to be reversed");

BufferedReader br =new BufferedReader(new InputStreamReader(System.in));

no=Integer.parseInt(br.readLine());

System.out.println("The Entered number is "+no);

while(no>0)

{

rev=rev*10;

i=no%10;

rev+=i;

no=no/10;

}

System.out.println("The Reverse Version of given number is "+rev);

}

}

In the above program class name is java3.When the program is run Please Enter the number which has to be reversed message is displayed.Enter a number in the console and click enter button.The value is reversed and displayed as output in the console.The output is displayed with the message The Reverse Version of given number is ,followed by the reverse of the input number

Thursday, January 10, 2013

HTML code with JavaScripting for performing Arithmetic Operations

The following code displays two fields for taking two input numbers and there are separate buttons for four arithmetic operations.When Clicked on a button,alert message is displayed with result and result is also updated in the page.

   Four JavaScript functions are defined in the script tag.Four functions are used for addition,subtraction,multiplication,division.Four Separate buttons are defined in the body tag.The values of the four buttons are Addition,Subtraction,Deletion and Multiplication.

        When a user clicks on the button with value Addition,Addition function is called.Addition function takes the values from the two input fields and performs addition,then alert message is displayed with result and result is also displayed in the webpage.

Check The Live Demo here or Copy,paste this url http://jsfiddle.net/6JmuY/

<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Addition()
{
x=parseFloat(calc.value1.value);
y=parseFloat(calc.value2.value);
z=(x+y);
alert("The Addition result is"+z);
calc.value3.value=z
}
function Subtraction()
{
var x,y,z;
x=calc.value1.value;
y=calc.value2.value;
z=x-y;
alert("The subtraction result is "+z);
calc.value3.value=z
}
function Multiplication()
{
var x,y,z;
x=calc.value1.value;
y=calc.value2.value;
z=x*y;
alert("The Multiplication result is "+z);
calc.value3.value=z
}
function Division()
{
var x,y,z;
x=calc.value1.value;
y=calc.value2.value;
z=x/y;
alert("The subtraction result is "+z);
calc.value3.value=z
}
</script>
</head>
<body>
<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value :   <input type="number" id="value1"> </br>
Enter Second Numeric Value : <input type="number" id="value2"> </br>
</br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
<input type="button" Value="Addition" onClick=Addition()> </br>
<input type="button" Value="Subtraction" onClick=Subtraction()></br>
<input type="button" Value="Multiplication" onClick=Multiplication()></br>
<input type="button" Value="Division" onClick=Division()></br>
</form>
</body>
</html>