could you please give this code

Posted by Kvenkat4025 under ASP.NET AJAX on 5/23/2013 | Points: 10 | Views : 906 | Status : [Member] | Replies : 4
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: Bageshkumarbagi on: 5/23/2013 [Member] Starter | Points: 25

Up
0
Down
Hi Venkat,

Can you please give the scenario where you want to implement this button.



Thanks,
Bagesh Kumar Singh

Thanks,
Bagesh Kumar Singh
Mark as answer if you have been satisfied

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