Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old February 27th, 2012, 06:05 AM
Authorized User
Points: 378, Level: 6
Points: 378, Level: 6 Points: 378, Level: 6 Points: 378, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Posts: 67
Thanks: 6
Thanked 0 Times in 0 Posts
Default jquery animation syntax

Hi,

I have this code:
Code:
<asp:Label ID="Message" runat="server" CssClass="Attention" Text="Message Sent" Visible="False" />
  <p runat="server" ID="MessageSentPara"  visible="False" 
  style="font-size: small; font-weight:bold; color: #FFFF00">Thank you for your message.</p>
I wish to animate both the attention class and then the p. So I did the following code:
Code:
function pageLoad()
  {
    $('.Attention').animate({ width: '400px' }, 3000).animate({ width: '100px' }, 3000).fadeOut('slow', function()
    {
      $('.Attention p').show().fadeOut(10000)
    });
  };
My problem is that whilst the first animation works well, the p does not because there is something wrong with (.Attention p). I need to animate only this p without affecting other ps in the page, and also wish to animate it after completing the first animation. Can somone please help how to do this?

Thanks
Reply With Quote
  #2 (permalink)  
Old February 28th, 2012, 03:06 AM
Imar's Avatar
Wrox Author
Points: 72,045, Level: 100
Points: 72,045, Level: 100 Points: 72,045, Level: 100 Points: 72,045, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,083
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi there,

The p element is hidden at the server. This means it's not available at the client at all and thus cannot be animated. Calling show has no effect as the HTML for the element is not present.

Remove the visible property and replace it with something like: style="display: none;" and I think it'll work.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #3 (permalink)  
Old February 28th, 2012, 04:27 AM
Authorized User
Points: 378, Level: 6
Points: 378, Level: 6 Points: 378, Level: 6 Points: 378, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Posts: 67
Thanks: 6
Thanked 0 Times in 0 Posts
Default Animation

Hi Imar,

I've changed the property of p to false as it cannot be left blank; it is either false or true. Next, I've added style="display: none;", and did not work.

One of my previous experiment is changing the code to:
Code:
$('p').show().fadeOut(10000)
. This succesfuly animated all the ps, which I do not want.

Thanks and regards
Khalil
Reply With Quote
  #4 (permalink)  
Old February 28th, 2012, 04:45 AM
Imar's Avatar
Wrox Author
Points: 72,045, Level: 100
Points: 72,045, Level: 100 Points: 72,045, Level: 100 Points: 72,045, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,083
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

You should remove the entire Visible property and then it will default to true Then add a new style attribute.

Also, try using a css class rather than an ID; maybe the client side ID is changed by ASP.NET.

If this doesn't help, can you post the final HTML in the browser?

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #5 (permalink)  
Old February 28th, 2012, 05:42 AM
Authorized User
Points: 378, Level: 6
Points: 378, Level: 6 Points: 378, Level: 6 Points: 378, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Posts: 67
Thanks: 6
Thanked 0 Times in 0 Posts
Default Animation

I cannot make it work.
Code:
<!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><title>
	Contact Us
</title>
   
<link href="../App_Themes/Yellow/Yellow.css" type="text/css" rel="stylesheet" /></head>
<body>
    <form method="post" action="Contact.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQzNjI4MDgwNWRkohKcSmGE1Wgv96jyeuxi8kmGIFvg6dfgxzMzeupKbGg=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=6b3k-MZdi6Zp50H2zRruqtXA1ZqJ4MVaYoRBrhRxcymkwepjO620JH2ZH1MLZKJmeLrBdmnbOPlqY0p8m0iKz53XD7YDF0DBz-Gtd2M7sCA1&amp;t=634632197281633378" type="text/javascript"></script>


<script src="/ScriptResource.axd?d=j4BffBAe-TJ-Q-Af_Q-cc_6n2MDPPUBJ65YmwCflVQB7r9_ErQ6EF_fyTRi4RXk5Z53ANuantnJUCb3_GFWhPgGXKD_9fRIer8izEpl-orjE-mBIK2mOqzPbYyrI2p1BbmipcrKyhJ3CVe11JNZVnbdivypEz4BhFhmuFl5Hb_U1&amp;t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=MpxKfLxlLxO0nBiLmkXR9nH50j7XKYwAsWFLj6FhEq-ZGtTH9XmMpBVrzt5pRyYgieqwSxnfVuhy02TbnZPRr4PnO6OepYKwlU0ODMfTK2jjwCYP6B0PnV8UROoPEoJeJMfLIBgaiUvIwsAFwKW_pA2&amp;t=ffffffffc13acc3f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ScriptResource.axd?d=JTMMVidGDWRZaIJSd4JdKMBgxU1DsALdT68b1miec2wrBxUrNo_I5POyoBXk4edGsLD5NHJpfRHLehliPsd31t3RreiOgGTOciaVz0yeEGfshfN5ZOdJAeUMQH1_JKQS0Z4LtvleCnWpuDgaerFJeQ2&amp;t=ffffffffc13acc3f" type="text/javascript"></script>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCAKgpdONAQLFxqfqBwK1jfXMBQKc4JKnBwL/u93PAgLfq4vIAgKljM/gBQL3hbbdBuFmkmpQA7pUFmGyOQLctl5sbgLkAwldJ0yAlJ4RUQz3" />
</div>
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', 'form1', ['tctl00$ContentPlaceHolder1$ContactForm1$UpdatePanel1','ContentPlaceHolder1_ContactForm1_UpdatePanel1'], [], [], 90, 'ctl00');
//]]>
</script>
  
    <div id="PageWrapper">
        <div id="Header"><a href="http://p2p.wrox.com/"></a></div> 
        <img id="Image1" src="http://p2p.wrox.com/Images/Mobile.jpg" style="border-bottom: medium solid #800080; width: 9cm; height: 2cm; float: right; position: relative;
        top: 0px; left: 0px;" />    
      
  <img id="cpMainContent_Image1" src="http://p2p.wrox.com/Images/RelaxedWoman.jpg" style="Width: 9cm; height:8.4cm; float: right; position: relative; clear: right; top: 0px; left: 0px;" />
  
       
      <div id="MainContent">
          <h1>Welcome</h1>
          <p>Thank you for visiting this website. We are situated in Wheelers Hill (South Eastern Suburbs)</p>
          <p><strong>Elegance Accounting</strong> is a CPA accounting firm that provides accounting and taxation services
          for Individuals and Small Businesses.</p>
          <p>We understand very well their needs, which is about stress free services, financial position and immediate
          attention to their problems.</p>
          <p>This is the point where we differentiate from others; we are committed to providing a fast responsible and reliable 
          services at very competitive fees.</p>
          <br />
          <p class="End" style="text-align: center; color: #FFFF00;"> Just relax, and we'll do the job.</p>
          <br />
          <br />
          <hr style="border-bottom-style: solid; border-bottom-width: medium; border-bottom-color: #800000;"/>
          </div>
      
    
  
  

<style type="text/css">
  .style1
  {
    width: 96%;
    margin-right: 0px;
  }
  .style3
  {
  }
  .style4
  {
    width: 150px;
    height: 23px;
  }
  .style5
  {
    width: 135px;
    height: 23px;
  }
  .style6
  {
    height: 23px;
    width: 3.8cm;
  }
  .style7
  {
    height: 79px;
    width: 3.8cm;
  }
  .style8
  {
    width: 135px;
    height: 79px;
  }
 
  .style9
  {
    width: 150px;
  }
  .style10
  {
    height: 79px;
    width: 150px;
  }
  .style13
  {
    width: 135px;
  }
  .style16
  {
    width: 3.5cm;
  }
  .style17
  {
    width: 3.8cm;
  }
  </style>


  <script type="text/javascript">
    function ValidatePhoneNumbers(source, args)
    {
      var phoneHome = document.getElementById('PhoneHome');
      var phoneBusiness = document.getElementById('PhoneBusiness');
      if (phoneHome.value != '' || phoneBusiness.value != '')
      {
        args.IsValid = true;
      }
      else
      {
        args.IsValid = false;
      }
    }

  </script>
<div id="ContentPlaceHolder1_ContactForm1_UpdatePanel1">
	
<div id="Sidebar2"><a href="http://p2p.wrox.com/Default.aspx" 
    style="position: relative; padding: 0; float: right;  margin-right: 2cm; width: 1cm; font-weight: bold; text-decoration: underline; color: #FFFF00;">Home</a></div>

    <div id="TableWrapper">
    <table id="ContentPlaceHolder1_ContactForm1_FormTable" class="style1">
		<tr>
			<td colspan="2">
      <h2>Get in touch with us</h2>
      <h3>Please use this form to get in touch with us. Enter your name,
      <br />e-mail address, and your home or business phone number.</h3></td>
		</tr>
		<tr>
			<td class="style9">
      Name</td>
			<td class="style13">
      <input name="ctl00$ContentPlaceHolder1$ContactForm1$Name" type="text" id="ContentPlaceHolder1_ContactForm1_Name" style="width:320px;" />
    </td>
			<td class="style17">
      <span id="ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1" class="ErrorMessage" style="display:none;">*</span>
    </td>
		</tr>
		<tr>
			<td class="style9">
      E-mail address</td>
			<td class="style13">
      <input name="ctl00$ContentPlaceHolder1$ContactForm1$EmailAddress" type="text" id="ContentPlaceHolder1_ContactForm1_EmailAddress" style="width:320px;" />
    </td>
			<td style="margin-left: 40px" class="style17">
      <span id="ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2" class="ErrorMessage" style="display:none;">*</span>
      <span id="ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1" class="ErrorMessage" style="display:none;">Enter a valid e-mail address</span>
    </td>
		</tr>
		<tr>
			<td class="style9">
      Confirm E-mail address</td>
			<td class="style13">
      <input name="ctl00$ContentPlaceHolder1$ContactForm1$ConfirmEmailAddress" type="text" id="ContentPlaceHolder1_ContactForm1_ConfirmEmailAddress" style="width:320px;" />
    </td>
			<td class="style17">
      <span id="ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3" class="ErrorMessage" style="display:none;">*</span>
      <span id="ContentPlaceHolder1_ContactForm1_CompareValidator1" class="ErrorMessage" style="display:none;">Retype the e-mail address</span>
    </td>
		</tr>
		<tr>
			<td class="style9">
      Home phone number</td>
			<td class="style13">
      <input name="ctl00$ContentPlaceHolder1$ContactForm1$PhoneHome" type="text" id="PhoneHome" style="width:321px;" />
    </td>
			<td class="style17">
      <span id="ContentPlaceHolder1_ContactForm1_CustomValidator1" class="ErrorMessage" style="display:none;">*</span>
    </td>
		</tr>
		<tr>
			<td class="style4">
      Business phone number</td>
			<td class="style5">
      <input name="ctl00$ContentPlaceHolder1$ContactForm1$PhoneBusiness" type="text" id="PhoneBusiness" style="width:320px;" />
    </td>
			<td class="style6">
      </td>
		</tr>
		<tr>
			<td class="style10">
      Comments</td>
			<td class="style8">
      <textarea name="ctl00$ContentPlaceHolder1$ContactForm1$Comments" rows="2" cols="20" id="ContentPlaceHolder1_ContactForm1_Comments" style="height:69px;width:320px;">
</textarea>
    </td>
			<td class="style7">
      <span id="ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4" class="ErrorMessage" style="display:none;">*</span>
    </td>
		</tr>
		<tr>
			<td class="style9">
      &nbsp;</td>
			<td class="style13">
      <input type="submit" name="ctl00$ContentPlaceHolder1$ContactForm1$SendButton" value="Send" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$ContactForm1$SendButton&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ContentPlaceHolder1_ContactForm1_SendButton" />
    </td>
			<td class="style17">
      &nbsp;</td>
		</tr>
		<tr>
			<td class="style3" colspan="3">
      <div id="ContentPlaceHolder1_ContactForm1_ValidationSummary1" class="ErrorMessage" style="display:none;">

			</div>
    </td>
		</tr>
	</table>
	
</div>
  
  <p id="ContentPlaceHolder1_ContactForm1_MessageSentPara" style="display: none; font-size: small; font-weight:bold; color: #FFFF00">Thank you for your message.<br /> We'll get in touch with you if necessary.</p>
 
  
</div>

<div id="ContentPlaceHolder1_ContactForm1_UpdateProgress1" style="display:none;">
	
<div class="PleaseWait">Please Wait... </div>


</div>


<script type="text/javascript">

  function pageLoad()
  {
    $('.Attention').animate({ width: '400px' }, 3000).animate({ width: '100px' }, 3000).fadeOut('slow', function()
    {
      $('.Attention p').show().fadeOut(10000)
    });
  };


</script>
 
  




    </div>

    <div id="Footer"><a href="http://p2p.wrox.com/"></a></div>
    <div id ="Footer2">@Copyright Elegance Accounting 2012</div>
    
<script type="text/javascript">
//<![CDATA[
var Page_ValidationSummaries =  new Array(document.getElementById("ContentPlaceHolder1_ContactForm1_ValidationSummary1"));
var Page_Validators =  new Array(document.getElementById("ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1"), document.getElementById("ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2"), document.getElementById("ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1"), document.getElementById("ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3"), document.getElementById("ContentPlaceHolder1_ContactForm1_CompareValidator1"), document.getElementById("ContentPlaceHolder1_ContactForm1_CustomValidator1"), document.getElementById("ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1 = document.all ? document.all["ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1"] : document.getElementById("ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1");
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1.controltovalidate = "ContentPlaceHolder1_ContactForm1_Name";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1.errormessage = "Enter your name";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1.display = "Dynamic";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1.initialvalue = "";
var ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2 = document.all ? document.all["ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2"] : document.getElementById("ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2");
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2.controltovalidate = "ContentPlaceHolder1_ContactForm1_EmailAddress";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2.errormessage = "Enter an e-mail address";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2.display = "Dynamic";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2.initialvalue = "";
var ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1 = document.all ? document.all["ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1"] : document.getElementById("ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1");
ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1.controltovalidate = "ContentPlaceHolder1_ContactForm1_EmailAddress";
ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1.errormessage = "Enter a valid e-mail address";
ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1.display = "Dynamic";
ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1.validationexpression = "\\w+([-+.\']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*";
var ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3 = document.all ? document.all["ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3"] : document.getElementById("ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3");
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3.controltovalidate = "ContentPlaceHolder1_ContactForm1_ConfirmEmailAddress";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3.errormessage = "Confirm the e-mail address";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3.display = "Dynamic";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3.initialvalue = "";
var ContentPlaceHolder1_ContactForm1_CompareValidator1 = document.all ? document.all["ContentPlaceHolder1_ContactForm1_CompareValidator1"] : document.getElementById("ContentPlaceHolder1_ContactForm1_CompareValidator1");
ContentPlaceHolder1_ContactForm1_CompareValidator1.controltovalidate = "ContentPlaceHolder1_ContactForm1_ConfirmEmailAddress";
ContentPlaceHolder1_ContactForm1_CompareValidator1.errormessage = "Retype the e-mail address";
ContentPlaceHolder1_ContactForm1_CompareValidator1.display = "Dynamic";
ContentPlaceHolder1_ContactForm1_CompareValidator1.evaluationfunction = "CompareValidatorEvaluateIsValid";
ContentPlaceHolder1_ContactForm1_CompareValidator1.controltocompare = "ContentPlaceHolder1_ContactForm1_EmailAddress";
ContentPlaceHolder1_ContactForm1_CompareValidator1.controlhookup = "ContentPlaceHolder1_ContactForm1_EmailAddress";
var ContentPlaceHolder1_ContactForm1_CustomValidator1 = document.all ? document.all["ContentPlaceHolder1_ContactForm1_CustomValidator1"] : document.getElementById("ContentPlaceHolder1_ContactForm1_CustomValidator1");
ContentPlaceHolder1_ContactForm1_CustomValidator1.errormessage = "Enter your home or business phone number";
ContentPlaceHolder1_ContactForm1_CustomValidator1.display = "Dynamic";
ContentPlaceHolder1_ContactForm1_CustomValidator1.evaluationfunction = "CustomValidatorEvaluateIsValid";
ContentPlaceHolder1_ContactForm1_CustomValidator1.clientvalidationfunction = "ValidatePhoneNumbers";
var ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4 = document.all ? document.all["ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4"] : document.getElementById("ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4");
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4.controltovalidate = "ContentPlaceHolder1_ContactForm1_Comments";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4.errormessage = "Enter a comment";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4.display = "Dynamic";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4.initialvalue = "";
var ContentPlaceHolder1_ContactForm1_ValidationSummary1 = document.all ? document.all["ContentPlaceHolder1_ContactForm1_ValidationSummary1"] : document.getElementById("ContentPlaceHolder1_ContactForm1_ValidationSummary1");
ContentPlaceHolder1_ContactForm1_ValidationSummary1.headertext = "Please correct the following errors before you press the Send button";
ContentPlaceHolder1_ContactForm1_ValidationSummary1.showmessagebox = "True";
ContentPlaceHolder1_ContactForm1_ValidationSummary1.showsummary = "False";
//]]>
</script>


<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        
document.getElementById('ContentPlaceHolder1_ContactForm1_ValidationSummary1').dispose = function() {
    Array.remove(Page_ValidationSummaries, document.getElementById('ContentPlaceHolder1_ContactForm1_ValidationSummary1'));
}

document.getElementById('ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_ContactForm1_RequiredFieldValidator1'));
}

document.getElementById('ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_ContactForm1_RequiredFieldValidator2'));
}

document.getElementById('ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_ContactForm1_RegularExpressionValidator1'));
}

document.getElementById('ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_ContactForm1_RequiredFieldValidator3'));
}

document.getElementById('ContentPlaceHolder1_ContactForm1_CompareValidator1').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_ContactForm1_CompareValidator1'));
}

document.getElementById('ContentPlaceHolder1_ContactForm1_CustomValidator1').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_ContactForm1_CustomValidator1'));
}

document.getElementById('ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_ContactForm1_RequiredFieldValidator4'));
}
Sys.Application.add_init(function() {
    $create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":"ContentPlaceHolder1_ContactForm1_UpdatePanel1","displayAfter":500,"dynamicLayout":true}, null, null, $get("ContentPlaceHolder1_ContactForm1_UpdateProgress1"));
});
//]]>
</script>
</form>
  </body>
</html>

Last edited by Khalil; February 28th, 2012 at 05:51 AM..
Reply With Quote
  #6 (permalink)  
Old February 28th, 2012, 03:18 PM
Imar's Avatar
Wrox Author
Points: 72,045, Level: 100
Points: 72,045, Level: 100 Points: 72,045, Level: 100 Points: 72,045, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,083
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Take a look at this:

Code:
 
<p id="ContentPlaceHolder1_ContactForm1_MessageSentPara" style="display: none; font-size: small; font-weight:bold; color: #FFFF00">Thank you for your message.<br /> We'll get in touch with you if necessary.</p>
See how the id of the p has changed? A few ways to fix this:

1. Remove runat="server" if you don't need access to it at the server.

2. Use a css class and the . notation raher than the id (#) notation as suggested earlier.

3. Use the p's ClientID in your HTML.

Hope this helps,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #7 (permalink)  
Old February 29th, 2012, 03:36 PM
Authorized User
Points: 378, Level: 6
Points: 378, Level: 6 Points: 378, Level: 6 Points: 378, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Posts: 67
Thanks: 6
Thanked 0 Times in 0 Posts
Default Animation

Hi Imar,

I still cannot make it work. I have in my website three animations that work perfectly in the development environment, and behave differently in the production one, which is the reason I began makinng changes.

Please take a look at my website: "www.eleganceaccounting.com" and try to send me a message to see what is happening. I don't understand why there is difference between develppment and production.

You will notice that the first animation "Please Wait" is splitted (the image goes on top and the text at the bottom). The second one that is the "Message sent" appears three times, and the third one "Thank you for contacting us" goes to a different location (on the top right hand side).

Very disappointing result.

Regards
Khalil
Reply With Quote
  #8 (permalink)  
Old March 1st, 2012, 01:30 PM
Imar's Avatar
Wrox Author
Points: 72,045, Level: 100
Points: 72,045, Level: 100 Points: 72,045, Level: 100 Points: 72,045, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,083
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

I took a look and it looks funky indeed. Not sure what's going on.

Can you post the full code for the page / control?

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #9 (permalink)  
Old March 1st, 2012, 04:37 PM
Authorized User
Points: 378, Level: 6
Points: 378, Level: 6 Points: 378, Level: 6 Points: 378, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Posts: 67
Thanks: 6
Thanked 0 Times in 0 Posts
Default Animation

Hi Imar,

Here is the code. As Imentioned before the problem occurs only in the live one not in development.
Code:
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ContactForm.ascx.vb" Inherits="Controls_ContactForm" %>

<% If False Then%>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<% End If%>

<style type="text/css">
  .style1
  {
    width: 96%;
    margin-right: 0px;
  }
  .style3
  {
  }
  .style4
  {
    width: 150px;
    height: 23px;
  }
  .style5
  {
    width: 135px;
    height: 23px;
  }
  .style6
  {
    height: 23px;
    width: 3.8cm;
  }
  .style7
  {
    height: 79px;
    width: 3.8cm;
  }
  .style8
  {
    width: 135px;
    height: 79px;
  }
 
  .style9
  {
    width: 150px;
  }
  .style10
  {
    height: 79px;
    width: 150px;
  }
  .style13
  {
    width: 135px;
  }
  .style16
  {
    width: 3.5cm;
  }
  .style17
  {
    width: 3.8cm;
  }
  </style>


  <script type="text/javascript">
    function ValidatePhoneNumbers(source, args)
    {
      var phoneHome = document.getElementById('PhoneHome');
      var phoneBusiness = document.getElementById('PhoneBusiness');
      if (phoneHome.value != '' || phoneBusiness.value != '')
      {
        args.IsValid = true;
      }
      else
      {
        args.IsValid = false;
      }
    }

  </script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
<div id="Sidebar2"><a href="../Default.aspx" 
    style="position: relative; padding: 0; float: right;  margin-right: 2cm; width: 1cm; font-weight: bold; text-decoration: underline; color: #FFFF00;">Home</a></div>

    <div id="TableWrapper">
    <table class="style1" runat="server" id="FormTable">
    <tr>
    <td colspan="2">
      <h2>Get in touch with us</h2>
      <h3>Please use this form to get in touch with us. Enter your name,
      <br />e-mail address, and your home or business phone number.</h3></td>

  </tr>
  <tr>
    <td class="style9">
      Name</td>
    <td class="style13">
      <asp:TextBox ID="Name" runat="server" Width="320px"></asp:TextBox>
    </td>
    <td class="style17">
      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
        ControlToValidate="Name" CssClass="ErrorMessage" 
        ErrorMessage="Enter your name" Display="Dynamic">*</asp:RequiredFieldValidator>
    </td>
  </tr>
  <tr>
    <td class="style9">
      E-mail address</td>
    <td class="style13">
      <asp:TextBox ID="EmailAddress" runat="server" Width="320px"></asp:TextBox>
    </td>
    <td style="margin-left: 40px" class="style17">
      <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
        CssClass="ErrorMessage" 
        ErrorMessage="Enter an e-mail address" ControlToValidate="EmailAddress" 
        Display="Dynamic">*</asp:RequiredFieldValidator>
      <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
        ControlToValidate="EmailAddress" 
        CssClass="ErrorMessage" 
        ErrorMessage="Enter a valid e-mail address" 
        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
        Display="Dynamic"></asp:RegularExpressionValidator>
    </td>
  </tr>
  <tr>
    <td class="style9">
      Confirm E-mail address</td>
    <td class="style13">
      <asp:TextBox ID="ConfirmEmailAddress" runat="server" Width="320px"></asp:TextBox>
    </td>
    <td class="style17">
      <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
        CssClass="ErrorMessage" 
        ErrorMessage="Confirm the e-mail address" 
        ControlToValidate="ConfirmEmailAddress" Display="Dynamic">*</asp:RequiredFieldValidator>
      <asp:CompareValidator ID="CompareValidator1" runat="server" 
        ControlToCompare="EmailAddress" ControlToValidate="ConfirmEmailAddress" 
        CssClass="ErrorMessage" 
        ErrorMessage="Retype the e-mail address" Display="Dynamic"></asp:CompareValidator>
    </td>
  </tr>
  <tr>
    <td class="style9">
      Home phone number</td>
    <td class="style13">
      <asp:TextBox ID="PhoneHome" runat="server" Width="321px" ClientIDMode="Static"></asp:TextBox>
    </td>
    <td class="style17">
      <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Enter your home or business phone number"
        ClientValidationFunction="ValidatePhoneNumbers" OnServerValidate="CustomValidator1_serverValidate"
        Display="Dynamic" CssClass="ErrorMessage">*</asp:CustomValidator>
    </td>
  </tr>
  <tr>
    <td class="style4">
      Business phone number</td>
    <td class="style5">
      <asp:TextBox ID="PhoneBusiness" runat="server" Width="320px" 
        ClientIDMode="Static"></asp:TextBox>
    </td>
    <td class="style6">
      </td>
  </tr>
  <tr>
    <td class="style10">
      Comments</td>
    <td class="style8">
      <asp:TextBox ID="Comments" runat="server" TextMode="MultiLine" Width="320px" 
        Height="69px"></asp:TextBox>
    </td>
    <td class="style7">
      <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
        ControlToValidate="Comments" CssClass="ErrorMessage" 
        ErrorMessage="Enter a comment" Display="Dynamic">*</asp:RequiredFieldValidator>
    </td>
  </tr>
  <tr>
    <td class="style9">
      &nbsp;</td>
    <td class="style13">
      <asp:Button ID="SendButton" runat="server" Text="Send" />
    </td>
    <td class="style17">
      &nbsp;</td>
  </tr>
  <tr>
    <td class="style3" colspan="3">
      <asp:ValidationSummary ID="ValidationSummary1" runat="server" 
        CssClass="ErrorMessage" 
        
        HeaderText="Please correct the following errors before you press the Send button" 
        ShowMessageBox="True" ShowSummary="False" />
    </td>
  </tr>
</table>
</div>
  <asp:Label ID="Message" runat="server" CssClass="Attention" Text="Message Sent" Visible="False" />
  
  <asp:Label ID="MessageSentPara" runat="server" CssClass="Attention2" Text="Thank you for your message.<br /> We'll get in touch with you if necessary"  
    style="display: none; margin-left: 1cm; color: #FFFF00; font-size: small; font-weight: bold;" />
 
  </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="PleaseWait">Please Wait... </div>

</ProgressTemplate>
</asp:UpdateProgress>


<script type="text/javascript">

  function pageLoad()
  {
    $('.Attention').animate({ width: '400px' }, 3000).animate({ width: '100px' }, 3000).fadeOut('slow', function()
    {
      $('.Attention2').show().fadeOut(10000)
    });
  };


</script>
Thanks
Khalil
Reply With Quote
  #10 (permalink)  
Old March 3rd, 2012, 01:17 AM
Imar's Avatar
Wrox Author
Points: 72,045, Level: 100
Points: 72,045, Level: 100 Points: 72,045, Level: 100 Points: 72,045, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,083
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Not sure what's going on. I copied and pasted this in my Planet Wrox application and it works fine. Must be something in your Master Page or CSS files. Try creating a blank new web site and copy the control in. That should probably work. If it does, copy over stuff from your existing web site into the new one until it breaks.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
problem with animation 132591 Java Basics 0 December 8th, 2006 06:45 PM
Text Animation flash2004 Flash (all versions) 2 May 18th, 2005 12:41 AM
Animation Control JelfMaria VB How-To 2 March 14th, 2005 12:11 AM
Animation pallone Javascript How-To 9 February 2nd, 2005 03:17 PM



All times are GMT -4. The time now is 06:16 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.