I want my UpdatePanelAnimationExtender animation to always show in the center of the browser window even after a window resize or page scroll. The animation does re-center horizontally after a window resize but not vertically. It does not re-center after either a vertical or horizintal page scroll. I get the same behavior in IE 8, Safari & Firefox. Below is my code:
[Code]....
I'm trying to use the UpdatePanelAnimationExtender inside nested UpdatePanel. I found out that there the onUpdating is always ran on every callback.I was trying to cancel it on the beginrequest as follow.
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
[code]...
Any idea why my web page content doesn't resize with the window?I'm not using fixed position - just a table with width="100%".I've put it in a placeholder
View 3 RepliesI am using modal popup extender in my web page, it is working fine, but when the page contents are expanded, modal popup displays with no background color. Here is more info -
The web page contains bunch of update panels that have reports in iFrame controls inside it. On click of save, I display modal popup with confirmation message. Initially, all panels are collapsed, modal popup is displayed properly with the gray background color. When i expand all the panels, page gets really huge and modal popup displays no background color (transparant). Below are the styles I am using -
.modalPopupBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.modalPopup
{
background-color: white;
border-width: 3px;
border-style: solid;
border-color: #165EA9;
padding: 3px;
width: 600px;
height: 150px;
}
Here is the modal popup code -
<asp:Button ID="btnHiddenTarget" runat="server" Style="display: none" Text="HiddenTargetControlForModal" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnHiddenTarget"
BackgroundCssClass="modalPopupBackground" PopupControlID="ModalPanel1" OkControlID="btnModalYes"
DropShadow="true" PopupDragHandleControlID="ModalPanel3" />
<asp:Panel ID="ModalPanel1" runat="server" Style="display: none;" CssClass="modalPopup">
<asp:UpdatePanel runat="server" ID="updPopupMsg">
<ContentTemplate>
<asp:Panel ID="ModalPanel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black; height: 20px">
<div>
<p style="text-align: center;">
<asp:Label runat="server" ID="lblInfoPopupHeader" Font-Bold="true"></asp:Label></p>
</div>
</asp:Panel>
<asp:Panel runat="server" ID="pnlPopupMsg" Style="text-align: left; vertical-align: middle;
overflow: auto; height: 100px">
<p>
<asp:Label runat="server" ID="lblInfoPopup" Font-Bold="true"></asp:Label></p>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<p style="text-align: center; vertical-align: bottom; height: 20px">
<asp:Button ID="btnModalYes" runat="server" Text="OK" CssClass="commandButton" Style="width: 100px;"
IgnoreDirty="Dirty" />
</p>
</asp:Panel>
Technical Environment - VS 2008 and AjaxControlToolkit 3.5.40412.0.
I am using imagemagick DLL [URL] for the resize image, But when I re-sized animated GIF image then it going screw.
I using below code for re-size image ( image type are png, gif, jpg, bmp, tif ...)
ImageMagickObject.MagickImage imgLarge = new ImageMagickObject.MagickImage();
object[] o = new object[] { strOrig, "-resize", size, "-gravity", "center", "-colorspace", "RGB", "-extent", "1024x768", strDestNw };
imgLarge.Convert(ref o);
Any one has got a working example for the OnHoverOver and OnHoverOut animations ?I have tried one but it's not perfectly working, as I don't know how to change the position of the Popup panel or resize it !! and I still can see a grey shadow before my popup panel appears..it's weird... Here is my code :
<asp1:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="ObjNameLnk">
I need to have a stack of 10 text lines, possibly div's, and insert a line arbitrarily somehere in the list. In addition I'd like to fade in a highlight (for the new line) and fade out.Is MSFT AJAX the correct tool to use for this?
View 1 RepliesI'm having an odd problem. I have a <td> that is set to align it's content in the center. There is a label at the top of the TD that is centered. But then I have an UpdatePanel, and the content of the update panel is not centered. I tried clearing the browser cache, and everything in between but for some reason all of the contents (two GridViews) of the UpdatePanel will not center.
View 3 RepliesI have a webpage with multiple updatepanels on. One of the panels takes a long time to load. I therefore start a timer on page load and the timer.tick event populates the accordion control within the panel. Because of the amount of data I have used a paged data source and have link buttons to scroll through the results.
I need to implement animation, both on the initial page load and each time the button is clicked to move through the pages. The animation is, show a loading icon and hide the accordion/grid, once the data is loaded, display the accordion/grid and hide the loading icon. I have tried both the PageRequestManager and AnimationExtender, which I fail to get working for both the initial page load and Updating/Updated events.
I have the following that changes the label colour according to an update panel:
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"
Enabled="True" TargetControlID="UpdatePanel1">
<Animations>
<OnUpdating>
<Color
AnimationTarget="lblSearchResults1"
Duration="1"
StartValue="#FFFFFF"
EndValue="#FFFFFF"
Property="style"
PropertyKey="color"/>
</OnUpdating>
<OnUpdated>
<Color
AnimationTarget="lblSearchResults1"
Duration="1"
StartValue="#FFFFFF"
EndValue="#009685"
Property="style"
PropertyKey="color" />
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
Fine. Works a treat.
However, I also have the following on the same page but within a different update panel:
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"
Enabled="True" TargetControlID="UpdatePanel2">
<Animations>
<OnUpdating>
<Color
AnimationTarget="lblSearchResults2"
Duration="1"
StartValue="#FFFFFF"
EndValue="#FFFFFF"
Property="style"
PropertyKey="color"/>
</OnUpdating>
<OnUpdated>
<Color
AnimationTarget="lblSearchResults2"
Duration="1"
StartValue="#FFFFFF"
EndValue="#009685"
Property="style"
PropertyKey="color" />
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
This also works a treat. However, the update causes the animation/colour change to fire on both labels when either of them fires.
How do, or what do I have to do so that only one label changes colour one at a time i.e. when UpdatePanel1 updates, lblSearch1 changes colour but lblSearch2 stays as is.
At run time when I resize the Browser Window my controls move. Means when Browsers windo is full i.e Maximized the the look proper but when i resize the browser window the move within page and look all dismissed, And how to prevent it .
View 1 RepliesI want my webpage to be centered in the browser, but at the same time also have a minimum and maximum width.
I know I can center the page (well, the div element really) by setting the margin-left and margin-right CSS properties to auto. This works just fine and the page is centered, with room to spare on both the left and right side.
But, if your monitor is wide, this space is wasted, and I want the page to expand in that case. So instead of using 'auto' for the margin-left and margin-right properties, I used a fixed margin of 50px on both sides. Now, the site expands and shrinks with the browser nicely, and it is still centered.
However, I don't want the site to become too small, otherwise elements start overlapping. So, I set the min-width property in the CSS to 800px. This still works fine. I can resize the browser and the page shrinks, until it hits 800px then it simply stays in place.
The relevant CSS at this time is:
Code:
.page
{
margin: 10px 50px 10px 50px;
min-width: 800px;
}
A new problem now occurs when the browser window is too large. In that case the contents of the site are all on the left side, and the right side of the page (the page mainly consists of a grid) is empty. So what I want now is to also set a maximum width. I tried doing that by simply setting the max-width property in the CSS (to 1650px):
Code:
.page
{
margin: 10px 50px 10px 50px;
min-width: 800px;
max-width: 1650px;
}
This doesn't work the way I want though. While it doesn't expand the site further than 1650px, the site is no longer centered when the browser window is larger than that. The margin is kept fixed at 50px on the left, but it grows on the right side (because the page cannot grow any further).
So, I thought I could set the margins back to auto:
Code:
.page
{
margin: 10px auto 10px auto;
min-width: 800px;
max-width: 1650px;
}
While the page is large enough, this works just fine, the page is centered. However, if I now shrink the window again, so that the width of the page is below the max-width, there is no longer a margin on the left and right sides! The page just sits right against the browser edge...
What I basically need is a way to set the margin to auto, but with a minimum margin of 50px. Is that possible?
I have a Page that conatains a panel and an animation extender attached to it, when a button is clicked the panel appears but it gives me the above error in the title.. I know there's something wrong with the animation extender but really i don't have any idea from where to start
View 1 RepliesI have a button that is inside of an updatepanel, I want it so that whenever the user clicks on the button it would update items in the updatepanel and after that it would activate the animationextender but I can't do that as of now because on the button I have OnClientClick="return false;".
View 3 RepliesI have site with a nicely set-up UpdatePanelAnimationExtender . But I'm having problems with IE and this animation and I would like to know
whether you know a solution allowing to disable the UpdatePanelAnimationExtender or simply the Animation for IE only.
UpdatePanelAnimationExtender in ModalPopUpExtender leads to a white/blank screen in IE. Works flawlessly in FF and Chrome.
I already tested <FadeIn Duration="0.5" Fps="50" forceLayoutInIE="true" />
I have an asp.net ajax updatePanelAnimationExtender that is used to fade a save confirmation message, which looks like this:
<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender2" runat="server" TargetControlID="uppExp">
<Animations>
<OnUpdated>
<Sequence>
<Parallel duration=".5">
<HideAction AnimationTarget="pnlSuccess" Visible="True" />
</Parallel>
<Parallel duration=".25" Fps="30">
<FadeOut AnimationTarget="pnlSuccess" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
It works great the first time it runs, but after that, on subsequent saves it does not run. This only happens in Internet Explorer (7 and 8) it works fine in Firefox and Chrome.
I have the problem with Ajax UpdatePanelAnimationExtender.
How can I try to disabled the controls in GridView with Ajax UpdatePanelAnimationExtender on "OnUpdating" and "OnUpdated"?
I need to do the following:
[Code]....
I've tried looking for examples but can only find something setting properties for animation. Is it actually possible?
I have a 2 level gridview and updatepanel for each gridview. I have added a UpdatePanelAnimationExtender control at the end. It works for the top level grid/updatepanel. How can I make it also work for Child panel? I am not sure where to add it and how to set it up. I want to see the image at the center of each child grid if user do sort/paging. fyi, I have codebehind for rowdatabound and rowcommand. Here is my aspx code:
[Code]....
and the javascript functions:
[Code]....
I built a control which could potentially be on the page twice. Therefore the JavaScript I emitted must be named uniquely. However, how can I reference that unique name from a ScriptAction? For example:
[Code]....
This does not work because I get:The 'Animations' property of 'ajaxToolkit:UpdatePanelAnimationExtender' does not allow child objects.Is there any way to dynamically emit a ScriptAction so that I can emit a server side field when the page is loading/updating?
I am using an UpdatePanelAnimationExtender but the onUpdated event does not fire. The idea is that while updating I will show a gif and when the update is done the gif will become invisible...
Here is my code
[Code]....
It doesn't seem to matter what I try to make the animation do, I keep getting this shown in the designer. No one else on google seems to be getting that problem either. Note: it doesn't cause debugging or runtime issues... in fact, the only negative thing it does is make it extremely annoying when I look at the designer... I'm going to have about 12 of these updatepanelanimations firing everytime the timer ticks too :(.MasterPage file has the toolkitscriptmanager on it.Here is my designer code for the page I'm having the issue on:
[Code]....
Code Behind:
[Code]....
I've got a modal popup and when it loads contents that are taller than the browser height I am unable to scroll down to view the rest of the information. Instead the background can scroll but the popup won't, I'd like to have the popup stay in place so the users can see the bottom of the modal.
View 4 Repliesthe dropdownextender works fine until I scroll down the page, see the following screenshots.
View 2 Replies