We Keep Coding

Show/hide div onclick jquery slowly when i click the asp button its not working

I want to show/hide div slowly using jquery when i click the button. This div will have a result from a database. I want it when it opens, to open in slow motion. I have another problem with the asp button when the div is slided down it returns to slide up again automatic. I think it is from postback. I would appreciate any help.
<script src="script/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#<%=Button1.ClientID%>").click(function () {
$("#showdivslowly").slideDown(2000);
});
});
</script>
<form id="form1" runat="server">
<div runat="server" id="showdivslowly" style="width:500px; height:200px; background-color:Blue" visible="false">Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>

Please try the following code
<script src="script/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#<%=Button1.ClientID%>").click(function () {
$("#showdivslowly").slideDown(2000);
return false;
});
});
<div id="showdivslowly" style="width:500px; height:200px; background-color:Blue; display: none;">Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
Thanks,
Amit

How to enable/disable a button on parent modal popup from child in the IFrame using javascript

I am trying to disable/enable a button of the parent window from the child window.
The following is a snippet from the parent page.
<ajaxToolkit:ModalPopupExtender ID="mpeTest" runat="server"
CancelControlID="btnClose" PopupControlID="pnl1" TargetControlID="showMpe"/>
<asp:Panel ID="pnl1" runat="server" >
<ContentTemplate>
<iframe id="ContentIframe" runat="server">
<p>Your browser does not support iframes.</p>
</iframe>
</ContentTemplate>
<p class="submitButton">
<asp:Button ID="btnClose" runat="server" Text="Close" />
<asp:Button ID="btnTest" runat="server" Text="EnableDisable" />
</p>
</asp:Panel>
In the child page that is loaded in the iframe, I have a grid view with LinkButtons. I am attempting to get one of these LinkButtons to disable/enable the btnTest from the parent window.
I have tried many things but I can't seem to figure this out...
for example:
<script type="text/javascript" >
$(document).ready(function() {
jQuery('[id$="linkButtonDisable"]').click(function() {
window.parent.opener.document.getElementById("btnTest").disabled = true;
});
});
</script>
Can anyone please help me out. I am fairly new to this

Maybe you should try something like this...
$("#<%=linkButtonDisable.ClientID %>").click(function() {
//Option N#1 HTML Attribute
$("#<%=btnTest.ClientID %>").attr("disabled","disabled");
//Option 2 With jQueryMobile integration, the same it supposed to work if your using bootstrap, but I ignore the css class for disabling an element
$("#<%=btnTest.ClientID %>").addClass("ui-disabled");
//Also if you want to toggle states between disable/enable maybe this could work either...
var id = $("#<%=btnTest.ClientID %>");
var state = id.attr("disabled");
//Dunno if it's needed to catch if disabled attr it isn't set
if(state == "disabled") {
id.removeAttr("disabled");
} else {
id.attr("disabled","disabled");
}
});
Hope this help!...

How to pass id of a control in GridView to Jquery?

SCRIPT
<script type="text/javascript">
$(function () {
$(".ttip").hide();
$(".txttwo").keyup(
function () {
var one = $(this).val();
$(".ttip").fadeIn().text(one);
});
$(".txttwo").blur(
function () {
var one = $(this).val();
$(".ttip").hide();
});
});
</script>
CODE:
<asp:GridView ID="GridView1" runat="server" EnableModelValidation="True">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<p class="ttip bubble" class="bubble"></p>
<asp:TextBox ID="abc" class="txttwo tipin" runat="server" ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
FIDDLE
http://jsfiddle.net/w96LX/7/
Also it would be just great if someone can tell me how can I set the width of bubble such that it expands according to the length of text.
I get tooltip for all the textboxes because I have used class. I need to show tooltip just for the one at a time.

Just use $(this).attr("id") to get the ID of an element. Also, apped display:inline-block; width: auto; to make the bubble as big as the content: http://jsfiddle.net/w96LX/26/
Update:
I did not see an ID in your HTML, just the server side code. You will need to append the ID to a HTML element to receive it. Or you generate inline javascript, that is calling a method to set the ID.

hover effect creates flickering

I am trying to display options on an image on hover but when I hover the displayed options keeps flickering
$('a').hover(function(event) {
var href = $(this).attr('href');
var top = $(this).next().css("bottom");
$(this).next().css("display", "block");
$(this).next().next().css({ 'top': '30px', 'display': 'block' });
},function() {
$(this).next().hide();
$(this).next().next().hide();
});
});
$('.SelectionAnimate').hover(function() { $(this).css("display", "block"); $(this).next().show(); });
the listview code
<ItemTemplate>
<div style="float: left; position: relative; margin: 10px;" >
<div>
<a class="real" href='<%#"/ProfileTenModified/UserProfile/PhotoCross.aspx?in="+ Eval("Full_Image_Name") +"&mi=" + Eval("User_Id") +"&fd="+ Eval("Album")%>'>
<asp:Image ID="Image1" runat="server" ImageUrl='<%#"/ProfileTenModified/setP/"+ Eval("Slide_Thumb_Name") +".JPEG" %>'
BorderStyle="Solid" BorderWidth="1px" Width="172px" Height="172px" />
</a>
<asp:LinkButton CssClass="SelectionAnimate" ID="Selection" runat="server" Text="Set as Display"
OnCommand="ListViewThums_Selection_Command" CommandName="selection"></asp:LinkButton>
<asp:LinkButton CssClass="SelectionAnimate" ID="Deletion" runat="server" Text="Remove"
OnCommand="ListViewThumbs_Command"></asp:LinkButton>
</div>
<asp:HiddenField ID="HiddenFieldImageId" runat="server" Value='<%#Eval("Id") %>' />
</div>
</ItemTemplate>
I used both the mouseenter and hover both create the same effect. is there away to solve this

You apply .hover() on the a only. So when you hover the a, the image appear hover your a wich mean you are not hover the a anymore. That will fire the second callback of .hover() and the image will disappear. Then again you are hover the a and it repeat infinitly.
To solve that, you just have to bind the .hover() on the parent container or on both elements.

I once got similar problem as you have got.
So, to solve this problem i used mouseenter and mouseleave event.
$(selector).on('mouseenter', function(){
//perform what you want whe mouse is on your selector
}).on('mouseleave', function(){
//your code on when mouse leaves the selector
});

jQuery for displaying div not working

I want a dialog div to appear and rest page to be greyed out. I should not be able to click anything else on page.
Following is the code I am using. Somehow the code is not working. Page just refreshes on click of hyperlink.
Can anyone help ?
<script>
$(document).ready(function () {
$("#DownloadButton").click(function (e) {
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
$("#btnDownload").click(function (e) {
HideDialog();
e.preventDefault();
});
});
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(310);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="overlay" class="web_dialog_overlay">
</div>
<div id="dialog" class="web_dialog">
<table>
<tr>
<td>
<asp:Button ID="btnDownload" runat="server" Text="Download" />
</td>
<td>
<asp:Button ID="btnClose" runat="server" Text="Close" />
</td>
</tr>
</table>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="DownloadButton" />
</Triggers>
<ContentTemplate>
<div class="BaseClass">
<asp:LinkButton ID="DownloadButton" runat="server">Download</asp:LinkButton>
</div>
<asp:GridView>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

If DownloadButton, btnClose & btnDownload are IDs of server control, then for getting client ID you have to use:
$("#<%=DownloadButton.ClientID%>")
instead of
$("#DownloadButton")
in you jQuery Code.
Or
If you are using ASP.Net 4.0
Use ClientIDMode="static" with your server side controls.
For Closing the Dialog:
Use link to close the model popup:
Eg.
and in you Javascript use:
$("#btnClose").click(function (e) {
HideDialog();
});

why don't you use simply anchor tag? it won't cause a postback at least, no need to use update panel.
<a id="DownloadButton" href="#">Download</a>
$("#DownloadButton").click(function (e) {
ShowDialog(true);
e.preventDefault();
});
Otherwise Kapil Khandelwal answer is correct if you want to use server side control.
$("#<%=DownloadButton.ClientID%>")

In document ready:
jQuery("#overlay").dialog(
{
bgiframe: true,
autoOpen: false,
modal: true,
width: 800
}
);
in the click event:
$('#overlay').dialog('open');
You'll have to specify more options in the dialog declaration, I'm sure, but this approach is working fine for me.