How to make over-out event with js

Intoduction :-

Hii Friends...

Today I explain how to make over-out event with the help of java-script. In asp.net there are many events like mouse-over,mouse-down,key press etc. So I explain this with the code.

Step : 1   The Code goes here :->
<script>
    function b(x) {
        x.style.height = "250px";
        x.style.width = "250px";
    }
    function n(x) {
        x.style.height = "150px";
        x.style.width = "150px";
    }
</script>
<img onmouseover="b(this)" onmouseout="n(this)" src="img.jpg" width="32" height="32" />
  DEMO:-

                                                        1) When mouse out

                                                        2) When mouse over

Read More

How to convert lower case to upper case

Intoduction :-

Hii Friends...

Today I explain how to convert lower case words to upper case . This task we can complete with the help of events. in asp.net there are many events like mouse-over,mouse-down,key press etc. So I explain this with the code.

Step : 1   The Code goes here :->
<html>
<head>
<script type="text/javascript">
function uppercase(x)
{
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script>
Enter your name<input type="text" id=x onkeyup="uppercase(this.id)">

</head>


</html>
  DEMO:-

Read More

How to rotate the image with Css

Introduction :-

Hii Friends...
Today I explain how to rotate images with the help of css. And this work on mouse-over event. In this rotation we use angles like 360 degree 180 degree etc. so now I explain this step by step.

Step : 1   The Css goes here :->

Firstly we create a style-sheet and give it any name that you want only the extension give .css.

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

}

Step : 2   The Designing code goes here :->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Asp.Net Modules</title>
    <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:Image ID="Image1" runat="server" />

    <div>
<p id="socialicons">
<a href="#">
<img border="0" src="rss.png" /></a>
<a href="#">
<img border="0" src="delicious.png" /></a>
<a href="#">
<img border="0" src="facebook.png" /></a>
<a href="#">
<img border="0" src="twitter.png" /></a>
<a href="#">
<img border="0" src="yahoo.png" /></a>
</p>
    </div>
    </form>
</body>

</html>

DEMO:-

Read More

How to make Zoom-in and Zoom-out image with Css

Introduction :-

Hii Friends...

Today I explain how to make a image zoom-in and zoom-out with the help of Css. This Css works on mouse-over event. So now I explain this with step by step.

Step : 1   The Css goes here :->
Firstly we create a style-sheet and give it any name that you want only the extension give .css.

.opacity_img{
  opacity: 1.0;
  border-radius: 10px;
  border: groove;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 0.85;
  border-radius: 5px;
   }
 .zoom
 {
    opacity: 1.0;
  border-radius: 10px;
  border: groove;
   }
    .zoom:hover {
        cursor:pointer;
  opacity: 0.95;
  border-radius: 5px;
   transform:scale(1.05);
    -webkit-transform:scale(1.05);
 }

Step : 2   The Designing code goes here :->

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Asp.Net Modules</title>
    <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:Image ID="Image1" runat="server" />
    <div>
     <asp:Image ID="Image3" runat="server" 
            ImageUrl="~/1175248_562016663864760_1003157513_n.jpg" Width="174px" class="zoom" />
        <asp:Image ID="Image4" runat="server" 
            ImageUrl="~/546121_378895068891395_846850474_n.jpg" Width="174px" class="zoom" />
        <asp:Image ID="Image5" runat="server" 
            ImageUrl="~/579525_573727176006124_448400181_n.jpg" Width="174px" class="zoom" />
        <asp:Image ID="Image6" runat="server" 

            ImageUrl="~/1043870_698399306872243_1105324895_n.jpg" Width="174px" class="zoom"  />
</div>
    </form>
</body>

</html>

DEMO:-

Read More

How to make hover on a image with css

Introduction :-

Hii Friends...

Today I explain how to make a hover on a image with the help of css (Cascading style sheet). And the hover works on mouse-over event.

Step : 1   The Code goes here :->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <style>
   img
   {
       opacity:0.4;
       filter:alpha(opacity=40);
   }
   img:hover
   {
     opacity:1.0;
     filter:alpha(opacity=100);  
   }
   </style>
</head>
<body>
<h1>image</h1>
<img src="download.jpg" width="150" height="100" alt="kk" />
<img src="Ebay-logo.jpg" width="150" height="100" alt="kk" />
</body>

</html>

(Here I give two css style one is for show clear image and second one is for fade the image now I show demo of this code. )

DEMO:-

1) The First Image Show Fade On Images

2) The Second Image Show Clear Image

Read More

How To Make Tables In Sql

Introduction:-

Hii Friends...

Today I explain how to create tables in sql. The first thing is what is sql ? The sql is the Structured Query Language. And in sql we can create many types of tables so i explain all types of tables.

Step:1    Firstly we create a table then we apply all types of queries on this table and give it a name. I give it  (customer) name.

Step:2    Now we can apply all queries.

1) Select :-

SELECT * FROM Customers;

Syntax :-

SELECT column_name,column_name
FROM table_name;

Examples:-

SELECT CustomerName,City FROM Customers;

Output:- All CustomerName and city will show.


How To Add a column in predefine Table 

 ALTER TABLE tblSubCategory
    ADD   Size varchar(50)

             OR

Alter table tblShopping_SellerProduct
Add EstimatedDays int not null default 0


Output:- Two extra columns are shows.

 How To Make a query for date filtering

 select * from tblMLM_EWalletTransaction where CONVERT(Date,Adddate,103) between CONVERT(Date,'" + txtfromdateEwallet.Text + "',103) and CONVERT(Date,'" + txttodateEwallet.Text + "',103)");


How To Make a Subquery 

select *,(select Firstname from tblShopping_Customer Where Msrno=s.SenderMsrno) as SenderName,
(select Firstname from tblShopping_Customer Where Msrno=s.ReceiverMsrno) as ReceiverName from tblsms as S

Read More

How to fill dropdown with one dropdown click

Introduction:-

Hii Friends....
Today I explain how to fill a dropdown by click on other dropdown like we have two dropdowns one is for countries and second for cities and we want to fill city dropdown on the bases of country dropdown automatically fill. 

Step:1    The designing code goes here.

<html>
<script type= "text/javascript">
function fun(cc)
{
var s=document.myform.cities;
s.options.length=0;
if(cc=="")
{
s.options[s.options.length]=new Option('please select of any item ','');
}
else if(cc=="1")
{
s.options[s.options.length]=new Option('jaipur','');
s.options[s.options.length]=new Option('delhi','');
}
else if(cc=="2")
{
s.options[s.options.length]=new Option('nagashakhi','');
s.options[s.options.length]=new Option('hiroshima','');
}
else if(cc=="3")
{
s.options[s.options.length]=new Option('karachi','');
s.options[s.options.length]=new Option('multan','');
}

}

</script>
<body style="border:5px groove #249fa3; width: 391px; height: 111px; margin-left: 471px;">

<form name="myform">
<div align="center" style="padding-top:8px">
<select name="option"size="1"onchange="fun(this.value);">
<option value="0">--Select-- </option>
<option value="1">INDIA </option>
<option value="2">JAPAN </option>
<option value="3">PAKISTAN</option>
</select>

<select name="cities"size="1">
    <option value="0">--City-- </option>
</select>
</div>
</form>
</body>

</html>

Demo :-

Read More