could you please give this code

Posted by Kvenkat4025 under ASP.NET AJAX on 5/23/2013 | Points: 10 | Views : 1755 | Status : [Member] | Replies : 3
Hi,

I have one button control when ever i will put my cursor into button control i want show some more buttons .

Please let me know any one know this.

thanks
venkat4025

k.venkat


Responses

Posted by: Raj.Trivedi on: 5/23/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
Hello venkat you can do this by jquery

download the jquery.js file from jquery.com

Save it into a Folder named Jquery in your application

and use the following code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ButtonShowhide.aspx.cs" Inherits="ButtonShowhide" %>

<!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 runat="server">
<title></title>
<script src="Jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Jquery/jquery.easing.1.3.js" type="text/javascript"></script>
<script type ="text/javascript">
$(document).ready(function () {

$("#btnS1").hide();
$("#btnS2").hide();
$("#btnS3").hide();

});


$(document).ready(function () {
$("#btnHover").hover(function () {
$("#btnS1").toggle();
$("#btnS2").toggle();
$("#btnS3").toggle();
});
});

</script>
<style type="text/css">
.style1
{
width: 67%;
height: 52px;
}
.style2
{
width: 225px;
}
.style3
{
width: 221px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">

<table class="style1">
<tr>
<td class="style3">
&nbsp;</td>
<td class="style2">
<asp:Button ID="btnHover" runat="server" Text="Hover to Show more buttons"
Width="210px" />
</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td class="style3">
&nbsp;</td>
<td class="style2">
&nbsp;</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td class="style3">
<asp:Button ID="btnS1" runat="server" Text="Button 1"
Width="210px" />
</td>
<td class="style2">
<asp:Button ID="btnS2" runat="server" style="margin-left: 0px"
Text="Button 2" Width="210px" />
</td>
<td>
<asp:Button ID="btnS3" runat="server" Text="Button 3"
Width="210px" />
</td>
</tr>
</table>

</div>
</form>
</body>
</html>


Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved

Kvenkat4025, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Raj.Trivedi on: 5/23/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
Here is the .js file i have used


 Download source file

Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved

Kvenkat4025, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Raj.Trivedi on: 5/23/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
The above code will toggle the view of button this is exactly what you want

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ButtonShowhide.aspx.cs" Inherits="ButtonShowhide" %>

<!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 runat="server">
<title></title>
<script src="Jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Jquery/jquery.easing.1.3.js" type="text/javascript"></script>
<script type ="text/javascript">
$(document).ready(function () {

$("#btnS1").hide();
$("#btnS2").hide();
$("#btnS3").hide();

});


$(document).ready(function () {
$("#btnHover").hover(function () {
$("#btnS1").show();
$("#btnS2").show();
$("#btnS3").show();
});
});

</script>
<style type="text/css">
.style1
{
width: 67%;
height: 52px;
}
.style2
{
width: 225px;
}
.style3
{
width: 221px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">

<table class="style1">
<tr>
<td class="style3">
&nbsp;</td>
<td class="style2">
<asp:Button ID="btnHover" runat="server" Text="Hover to Show more buttons"
Width="210px" />
</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td class="style3">
&nbsp;</td>
<td class="style2">
&nbsp;</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td class="style3">
<asp:Button ID="btnS1" runat="server" Text="Button 1"
Width="210px" />
</td>
<td class="style2">
<asp:Button ID="btnS2" runat="server" style="margin-left: 0px"
Text="Button 2" Width="210px" />
</td>
<td>
<asp:Button ID="btnS3" runat="server" Text="Button 3"
Width="210px" />
</td>
</tr>
</table>

</div>
</form>
</body>
</html>


Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved

Kvenkat4025, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response