Sunday, October 25, 2015

How to make over-out event with js

                No comments   

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


Wednesday, October 21, 2015

How to convert lower case to upper case

           ,      No comments   

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:-

Monday, October 19, 2015

How to rotate the image with Css

                No comments   

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:-



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

                No comments   

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:-

How to make hover on a image with css

                No comments   

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







Tuesday, October 13, 2015

How To Make Tables In Sql

                No comments   


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

Sunday, October 11, 2015

How to fill dropdown with one dropdown click

                No comments   

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 :-


Popular Posts