Code For <head></head> Secction :-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 400, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: true, //options: true makes it stick(fixed position) on scroll
onSlideOut: function () {
alert('Opened');
},
onSlideIn: function () {
alert('Closed');
}
});
});
</script>
<style type="text/css">
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>
Code for <body></body> Section: -
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h1> Feedback form</h1>
<table class="container">
<tr>
<td class="style1">
<asp:Label ID="Label6" runat="server" Text="Mail ID"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label ID="Label7" runat="server" Text="Feedback"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" TextMode="MultiLine" Height="50px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 400, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: true, //options: true makes it stick(fixed position) on scroll
onSlideOut: function () {
alert('Opened');
},
onSlideIn: function () {
alert('Closed');
}
});
});
</script>
<style type="text/css">
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>
Code for <body></body> Section: -
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h1> Feedback form</h1>
<table class="container">
<tr>
<td class="style1">
<asp:Label ID="Label6" runat="server" Text="Mail ID"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label ID="Label7" runat="server" Text="Feedback"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" TextMode="MultiLine" Height="50px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
</tr>
</table>
</div>
No comments:
Post a Comment