Reset scroll after call back

Hi,

How do I reset the scroll position of the page when a call back has returned?

Cheers, WT.

http://aspnet.4guysfromrolla.com/articles/111704-1.aspx

assign using client side script

document.body.scrollLeft = 0;

document.body.scrollTop = 0

Re-Setting an Object to its original position using Animation Extender

Hi

I have been working on a nice ajax menu using the Animation Extender. Basically, i have a series of GIF's. When the mouse hovers over a gif, the gif moves 6px to the right. When the mouse hovers out, the gif moves 6px to the left.

Everything works well, if you let the whole animation run through. But if you where to move your mouse off and on the gif a few times in a short period, the gif would actually lose its original position and end up either further left or further right to where it should.

I spose what I am trying to get at is, is it possible to reset an objects original position?

Here is a sample of my extender:

<cc1:AnimationExtender ID="AnimationExtender3" runat="server" TargetControlID="btnPro">
<Animations>
<OnHoverOver>
<Move duration=".03" fps="50" horizontal="6" unit="px"/>
</OnHoverOver>
<OnHoverOut>
<Move duration=".03" fps="50" horizontal="-6" unit="px"/>
</OnHoverOut>
</Animations>
</cc1:AnimationExtender>

Thanks for your help in advance.

Hugh

Would any one have an easier way of doing this?

Thanks

Hugh

HI ,

try this link :

Scripting Animations from the Ms Ajax AnimationExtender

Hope this heps

Thanks for the link.

This would be perfect for wat i am trying to do. Problem is i cant seem to get it to work on a hover over event, instead of a click event.

Any ideas?

Thanks

Hugh

Resetting Scroll Position on AJAX partial postbacks

I'm sure someone has seen this one before:

I have a grid inside an UpdatePanel displaying data that requires users to scroll to see the last couple of rows

When a user selects a row in the grid, and AJAX post fires and displays data at the top of the page, but the scroll position is maintained and the user is required to scroll up to to the top of the page manually.

I need to reset the scroll position to 0,0 when a record is selected in my grid. If anyone can shed some light on this one I would greatly appreciate it.

Thanks

PS

Please see my post here:

http://forums.asp.net/t/1196152.aspx

Thank you - perfect solution, and so little code. I knew it wouldn't take much.

Resizable Control Extender

I have a Panel with scrollbars set to auto, a TreeView control with enough nodes to trigger the scroll bars,

and a Resizable Control Extender attached to the Panel.

The Resizable Control Extender will work perfectly as long as you don't scroll the Tree.

If you scroll the Tree the Handle will move vertically by the amount of the Tree scroll.

If you scroll too far the handle will disapear from the screen leaving you without a way to resize the Panel.

Does anyone know of a way to keep the handle in it's original postion?

Thanks,

Larry

Can you post your code?? Even I am stuck on a similar issue...may be we might be able to help each other.

Karamchand

Resizable Control bug?

The following code:

_lining.style.backgroundImage = 'url(invalid)'; // Keeps IE from ignoring the content-free element

in ResizableControlBehavior class is not working well with IE6. The image is being requested by browser every event the control fires (mousedown, mouseup, mousemove etc.). Check out your browser's status bar while resizing the control (watch it carefully as the text blinks very quickly) or use Nikhil's Web Development Helper with http logging on to see the requests.

There are many ways to fix this. I use solid black background with 20% opacity for additional effect.

Thanks for reporting this. Could you file an issue with this information atwww.codeplex.com?

Choose "Atlas Control Toolkit" then "Issues".

Thanks!

Resizable control as part of composite control

I'd like to use the ASP.NET AJAX Resizable control in my composite control. My control should provide all its images, JavaScript, and CSS as Embedded Resources, so that the users of it don't need to bother about these files. This includes the HandleGrip.png image that comes with the Resizable control. Unfortunately, the image use is defined in the css of the Resizable control, like this:

.handleText
{
width:16px;
height:16px;
background-image:url(images/HandleGrip.png);
overflow:hidden;
cursor:se-resize;
}

How can I let anyone use my control without giving them a copy of HandleGrip.png (to put somewhere on their website, while it is already embedded in my DLL)?

Hi,

You may refer to the the sample in AjaxControlToolkit. For instance:

.ajax__slider_h_rail {position:relative;background:url(<%=WebResource("AjaxControlToolkit.Slider.Images.slider_h_rail.gif")%>) repeat-x;height:22px;}

Indeed.

I triedbackground-image. Visual Studio did not let me (saying'url(<%=WebResource(' is not a valid value for the 'background-image' property.). After I read your comment I realized I could set the background-image by means of specifyingbackground.

Thanks.

Resizable Modal Popups?

I'm trying to make a modal popup be resizable. I've tried to combine the ModalPopupExtender with the ResizableControlExtender. Both are associated with the same panel.

It kinda works, but not correctly. When the popup appears, the resize graphic shows up on the left hand corner of the panel. After I click on the resize graphic it then will expand to the size of the modal window. In addition if the contents of the panel have to scroll (as a result of the resizing) the scrollbars mess up the positioning of the resize graphic.

I also had to turn off the drop shadow since it was not resizing with the panel.

Gerry

I think this is a definite nice to have especially if the popup is has a lot of form controls and you would like people to resize and/or have scrolling turned on. Please open awork item for this and we look into fixing this. The solution may not be very straightforward given that you want it to have the dropshadow and the drag in addition to the resize so the modalpopup code itself may need to change. Thanks!

It should work just fine Without the drop shadow. You can hook up the resizable extender to the modal panel and get things working for you.

The drop-shadow is not important to me. I will go ahead and enter the item.

Thanks,
Gerry

I haven't used the modal popup yet but I suspect that it is much like the popup extender. To get the shadow to stick with the control I had to add another panel that contained the popup container panel. I then hooked the resizable extender to that outer panel.

Again I haven't attempted it yet with modal. Here is a link to the code in the forum where I posted my solution.

http://forums.asp.net/t/1082450.aspx

Larry Aultman

I was not able to make the resizable extender work with the ModalPopup extender. I am sure that the source code could be modified to make it work however there is another solution that works very well and yields the same results: a drag-able, resizable, popup modal dialog. I am providing all the code below. You will need an "overlay" image that will provide the user screen "gray-out" effect. You also need very specific CSS styles and then you need the aspx and codebehind. I have included all source necessary, except the overlay.png file.

In my experience, most of the time that I would need a modal popup I need to get something that is bound for the server. Rarely do I need a popup that collects information when it isn't sent back. So this version's purpose is to collect data in a modal popup and send it all back to the server where the magic is done. Rather than use complex javascript to raise events back to the server I chose to use the extenders to handle the display and use AJAX update panels to handle the server. It all works very smoothly. I get the slick action of the client side and the AJAX posting.

Larry Aultman

I created my overlay.png file using Microsoft Expression. Very easy, make a new document with a size of say 32x32 pixels. Use the rectangle tool and draw a box removing the border and filling it with a soft color. I used a color that works well with my website. In the properties window set the Opacity to 50 (which is 50% transparent). Then export the image in PNG format. Drop this into your project folder. In the style sheet you will see my reference to the "overlay.png". NOTE: paths to files are relative to the style sheet's location NOT to the root of the site. I suggest that you put your style sheet in the root until you get everything working. Then you can move things around.

Next create a new aspx page with a codebehind page defined. Add a link in the "head" section to your style sheet something like:

<linkhref="pageStyles.css"rel="stylesheet"type="text/css"/>

Next place the following code in between the div tags in the new page.

<asp:scriptmanagerID="scriptmanager1"EnablePartialRendering="true"runat="server"></asp:scriptmanager>
<asp:UpdatePanelid="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:ButtonID="btnShowDialog"runat="server"Text="Show Modal Popup"onclick="btnShowDialog_Click"/><br/>
<asp:LabelID="lbLoginMsg"runat="server"Text="User Not logged In"></asp:Label>
<divid="popupContainer1"class="popupContainer">
<asp:Panelid="popupPanel1"runat="server"Visible="false"CssClass="overlay">
<asp:Panelid="dragControl1"runat="server"CssClass="dragControl">
<asp:Panelid="popupClientArea1"runat="server"CssClass="popupClientArea">
<asp:Panelid="dragPanel1"runat="server"CssClass="dragMePanel">
<divid="dragMe1"class="dragMe"> Login </div>
</asp:Panel>
<asp:Panelid="popupContent1"runat="server"CssClass="popupContent">
<divid="popupBuffer1"class="popupBuffer">
User Name:<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><br/>
Password :<asp:TextBoxID="TextBox2"runat="server"></asp:TextBox><br/><br/>
<center>
<asp:ButtonID="btnLogin"runat="server"Text="Login"onclick="btnLogin_Click"/>
<asp:ButtonID="btnCancel"runat="server"Text="Cancel"onclick="btnCancel_Click"/>
</center>
</div>
</asp:Panel>
</asp:Panel>
</asp:Panel>
</asp:Panel>
<cc1:DragPanelExtenderid="DragPanelExtender1"runat="server"DragHandleID="dragPanel1"TargetControlID="dragControl1">
</cc1:DragPanelExtender>
<cc1:DropShadowExtenderid="DropShadowExtender1"runat="server"TargetControlID="popupClientArea1"Opacity="1"TrackPosition="True">
</cc1:DropShadowExtender>
<cc1:ResizableControlExtenderid="ResizableControlExtender1"runat="server"HandleCssClass="handleResizer"HandleOffsetX="2"HandleOffsetY="2"MinimumHeight="200"MinimumWidth="100"ResizableCssClass="resizingImage"TargetControlID="popupClientArea1">
</cc1:ResizableControlExtender>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Now you need the codebehind:

protectedvoid Page_Load(object sender,EventArgs e)
{
this.ResizableControlExtender1.MinimumHeight = 200;//set inital size of the popup
this.ResizableControlExtender1.MinimumWidth = 300;//set inital size of the popup
}

protectedvoid btnShowDialog_Click(object sender,EventArgs e)
{
this.lbLoginMsg.Text ="User Not Logged In";
if (popupPanel1.Visible ==false)
popupPanel1.Visible =true;
}

protectedvoid btnCancel_Click(object sender,EventArgs e)
{
this.lbLoginMsg.Text ="User Canceled Login";
popupPanel1.Visible =false;
}

protectedvoid btnLogin_Click(object sender,EventArgs e)
{
this.lbLoginMsg.Text ="User: " + TextBox1.Text +" Password: " + TextBox2.Text;
popupPanel1.Visible =false;
}

Finally you need the CSS styles that make things happen.

/* Popup AJAX windows */

.popupControl

{

/*visibility:hidden;*/

}

.popupWin/* holds the entire popup window and its basic look.*/

{

background-color:Transparent;

font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

color:#838F86;

clear:both;

font-size:1em;

padding:10px;

height:50em;

width:50em;

min-width:20em;

min-height:20em;

}

.popupContainer/* holds the entire popup window and its basic look.*/

{

background-color:Transparent;

font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

color:#838F86;

clear:both;

float:left;

font-size:1em;

padding:10px;

height:50em;

width:50em;

min-width:20em;

min-height:20em;

}

.overlay

{

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;

text-align:center;

z-index:10;

background-image:url('images/overlay.png');/* relative to the style sheet file location */

background-repeat:repeat;

}

.dragControl

{

background-color:white;

z-index:100;

}

.popupClientArea/* provides the painting surface for the popup window */

{

background-color:#ffffff;

border:solid1px#445447;

overflow:hidden;

width:25em;

z-index:200;

}

.popupContent/* all content in the popup will be contained here */

{

background-color:Transparent;

overflow:auto;

text-align:left;

height:auto;

width:100%;

}

.popupBuffer/* this div provides a padding buffer from the edge so the content doesn't come flush with the edge */

{

padding:.3em;

}

.dragMePanel/* this provides the top edge that is the dragable area */

{

background-image:url('images/bg_nav.png');/* relative to the style sheet file location */

background-repeat:repeat-x;

cursor:move;

width:100%;

height:20px;

z-index:210;

}

.dragMe/* any text that might be shown in the drag area */

{

color:#ffffff;

text-align:center;

font-size:.8em;

font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

font-weight:normal;

}

.handleResizer

{

width:15px;

height:16px;

background-image:url('images/HandleHand.png');

overflow:hidden;

cursor:se-resize;

}

.resizingImage

{

border-style:solid;

border-width:2px;

border-color:#445447;

padding:0px;

}