Databases
StackOverflow2013
Postsdbo
POjQuery not showing correctly in aspx page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery not showing correctly in aspx page
    text
    copied!<p>I'm trying to get this function to work in an aspx page but I'm having a rotten time. Basically it works fine in a regular HTML page but in the aspx page, when click on the button all you can see is a sliver of the top part and on occasion (every 5th+ single button click &amp; every double click) the message shows and fades like it should. What am I missing? Could it be getting tied up in the postback? </p> <p><a href="http://jsfiddle.net/comatoseduck/Xthgh/" rel="nofollow">FIDDLE HERE</a></p> <p>Code using in aspx page</p> <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="checkTest.aspx.cs" Inherits="WebApplication2.checkTest" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function () { $("#Button1").click(function () { $(".message").stop(true,true).slideToggle().fadeOut(6000); }); }); &lt;/script&gt; &lt;style type="text/css"&gt; .message{height:70px;display:none;} .noChangesMessage{width:84px;padding:8px 8px; background:#535353; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:white;text-align:center;} .tipEnd{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #535353;margin:0 auto;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;div&gt; &lt;div style="width:100px"&gt; &lt;div style="height:70px"&gt; &lt;div style="margin-bottom:5px;" class="message"&gt; &lt;div class="noChangesMessage"&gt;No changes were made!&lt;/div&gt; &lt;div class="tipEnd"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;div style=""&gt; &lt;asp:Button ID="Button1" runat="server" Text="Save Changes" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>my code via view source for amit_g</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;&lt;title&gt; &lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function () { $("#Button1").click(function () { $(".message").stop(true,true).slideToggle().fadeOut(6000); }); }); &lt;/script&gt; &lt;style type="text/css"&gt;. .message{height:70px;display:none;} .noChangesMessage{width:84px;padding:8px 8px; background:#535353; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:white;text-align:center;} .tipEnd{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #535353;margin:0 auto;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form method="post" action="checkTest.aspx" id="form1"&gt; &lt;div class="aspNetHidden"&gt; &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA0OTM4MTAwNGRkU+SP3bu4QJNH9S9XtdwPbEE8YODY/YlkotOt6l692s8=" /&gt; &lt;/div&gt; &lt;div class="aspNetHidden"&gt; &lt;input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKroLr3AwKM54rGBtLTfCTwYmYnb6l8tnp5jtojhvORYMJ6bPzAI+qbaDlU" /&gt; &lt;/div&gt; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;div&gt; &lt;div style="width:100px"&gt; &lt;div style="height:70px"&gt; &lt;div style="margin-bottom:5px;" class="message"&gt; &lt;div class="noChangesMessage"&gt;No changes were made!&lt;/div&gt; &lt;div class="tipEnd"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;div style=""&gt; &lt;input type="submit" name="Button1" value="Save Changes" id="Button1" class="Button1" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload