Extended RadWindow Animation library using jquery and jquery-ui

19 posts, 0 answers
  1. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 26 Sep 2015 Link to this post

    Requirements

    Telerik Product and Version

    Tested with  version 2015.2.826.45, but should be compatible with older versions too

    Supported Browsers and Platforms

    Chrome, Opera, FireFox, IE 9 and up, Edge

    Components/Widgets used (JS frameworks, etc.)

    JavaScript and jquery


    PROJECT DESCRIPTION 
    This is a client-side library written in JavaScript and jquery that adds to the existing animation abilities of RadWindow by adding to the types of animations and also allowing easy animation at closing stage of RadWindow. Besides ​e​xtending animation, it also enhances RadWindow with  autosizing, anchoring and autoclosing i.e. timed popups. If you ​have been using this autosizing code library:  Auto-size standard dialogs of RadAlert, RadPrompt and RadConfirm, then you can simply replace it with this library, since the autosizing library is a subset of this library.

    This library offers a codeless and effortless approach to extending the native animation that is  available in RadWindowManager/RadWindow. The developer does not need to write any complex animation code in jquery but simply set some properties. You can still use the native animation and disable this library by setting the Animation property of RadWindowManager or RadWindow to a value other than 'None'. If you decide to use the extended animation features then you must set Animation property to 'None' on RadWindowManager or RadWindow. Another big advantage of this library, is once you include the JavaScript file in your page, then all radlert, radconfirm and radprompt will automatically be autosized without any extra code/effort, even when you have passed null values for width and height of these standard dialogs.

    You can make use of sophisticated animations available in jquery ui and also use your own custom animations. This is explained in detail in documentation attached.Code samples and detailed explanations are given in attached documentation.

    NOTEWhen animating RadWindow with a navigation url, then jquery-ui animations cannot be used, but you can use any jquery predefined or custom animation. With all other popups, you can use any type of animation: native or jquery or jquery-ui. RadWindow with content template can use any type of animation including jquery and jquery-ui.

    To start using this library, unzip the attached zip file and follow the steps below.

    1. Add RadScriptManager to the master page or a content page. Adding it in master page means you don't have to repeat this step in every page of your website. 
      <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                    <asp:ScriptReference Path="~/Scripts/ExtendedRadWindowAnimationPacked.js" />
                    <asp:ScriptReference Path="~/Scripts/jquery-ui.min.js" />
                </Scripts>
            </telerik:RadScriptManager>
    2. Add RadWindowManager to the master or content page. 
      <telerik:RadWindowManager ID="RadWindowManager1" runat="server" ShowContentDuringLoad="false"  VisibleStatusbar="false" AutoSize="false" EnableShadow="true" EnableViewState="false" ShowOnTopWhenMaximized="true" Animation="None" AnimationDuration="300" CenterIfModal="true" RenderMode="Auto">
      </telerik:RadWindowManager>
    3. Add a folder by the name of 'Scripts' to the root of the ASP.Net web site/application, and copy the script files under the folder 'Demo Files/Scripts' from the unzipped file. There are 2 script files - ExtendedRadWindowAnimationFull.js and jquery-ui.min.js. The juery-ui file can be skipped if jquery-ui animations will not be used.
    4. Add AutoSizedStandardDialogs.dll to the bin folder of  your ASP.Net website/application, which will allow using this library from server-side. This dll is under the 'Demo Files/bin' folder of unzipped file. This step is only necessary if you want to open these enhanced popups from server-side.

    After above steps, your website/application is ready to use this library, and some code samples for client-side as well as server-side are given below. If you want to quickly generate code for your situation, you do so very easily once you have set up a local demo on your computer as described in attached documentation. There are buttons to generate JavaScript code and also C# code based on settings you want. You could also use an online demo for this purpose at this url: Online Code Generator for this library

    Client-side code in JavaScript to use this library

     

    //None of the jqAnimation settings below will have any effect if RadWindowManager
    //has its Animation property set to something other than None.
    //However, other settings like anchor position, autoclose delay etc.
    //will work in this situation.
     
    az.UIjqAnimationEnabled = true;
    var dialogOptions = {};
    dialogOptions.openjqAnimation = null;
    dialogOptions.openjqAnimationEasing = 'swing';
    dialogOptions.openjqAnimationDuration = 400;
    dialogOptions.closejqAnimation = null;
    dialogOptions.closejqAnimationEasing = 'swing';
    dialogOptions.closejqAnimationDuration = 400;
    dialogOptions.showCountDown  = false;
    dialogOptions.jqUIAnimationEnabled = true;
     
    //you can omit the code below if you like since these properties are automatically
    //set to null, or you could replace the null values with appropriate values
    dialogOptions.openjqAnimationTargetCss = null;
    dialogOptions.closejqAnimationTargetCss = null;
    dialogOptions.jqOpenAnimateStartCallback = null;
    dialogOptions.jqOpenAnimateEndCallback=null;
    dialogOptions.jqCloseAnimateStartCallback = null;
    dialogOptions.jqCloseAnimateEndCallback=null;
     
    //RadAlert code as below
    radalert("Testing standard dialogs of RadWindowManager.", null, null, "Testing", null,null,dialogOptions);
     
    //RadConfirm code as below
    //radconfirm("Testing standard dialogs of RadWindowManager.", confirmCallBackFn, null, null, null, "Testing", null,dialogOptions)
     
    //RadPrompt code as below
    //radprompt("Testing standard dialogs of RadWindowManager.", promptCallBackFn, null, null, null, "Testing", null,dialogOptions)
     
    //RadWindow code as below
    //var wd = $find('radWindow1');
    //az.showAnimatedRadWindow(wd,dialogOptions);

    Server-side code in C# to use this library

     

    //None of the jqAnimation settings below will have any effect if RadWindowManager
    //has its Animation property set to something other than None.
    //However, other settings like anchor position, autoclose delay etc.
    //will work even when RadWindowManager is animated.
     
    AutoSizedStandardDialogOptions dialogOptions = new AutoSizedStandardDialogOptions();
            dialogOptions.UIjqAnimationEnabled = true;
            dialogOptions.ClosejqAnimation = ClosejqAnimation.None;
            dialogOptions.ClosejqAnimationEasing = EasingjqAnimation.Swing;
            dialogOptions.ClosejqAnimationDuration = 400;
            dialogOptions.OpenjqAnimation = OpenjqAnimation.None;
            dialogOptions.OpenjqAnimationEasing = EasingjqAnimation.Swing;
            dialogOptions.OpenjqAnimationDuration = 400;
            dialogOptions.AnchorPosition = AnchorPosition.None;
            dialogOptions.Left =null;
            dialogOptions.Top = null;
            dialogOptions.AutoCloseDelay = 0;
            dialogOptions.CountDownText = null;
            dialogOptions.CountDownClosingText = null;
            dialogOptions.ShowCountDown = false;
     
    //It is assumed that a JavaScript function called 'callbackFunction' exists.
    //If you do not want a callback function then replace that parameter by null.
     
     
    //RadAlert code as below
    AutoSizedStandardDialogs.RadAlertAutoSized("Testing standard dialogs of RadWindowManager.",null, null, "Testing", "callbackFunction", null, dialogOptions: dialogOptions);
     
    //RadAlert code using ajax as below (RadAjaxManager needs to be used on the page for this method)
    AutoSizedStandardDialogs.RadAlertAutoSizedFromAjax("Testing standard dialogs of RadWindowManager.",null, null, "Testing", "callbackFunction", null, dialogOptions: dialogOptions);
     
    //RadConfirm code as below
    AutoSizedStandardDialogs.RadConfirmAutoSized("Testing standard dialogs of RadWindowManager.","callbackFunction", null, null, "Testing", null, dialogOptions: dialogOptions);
     
    //RadConfirm code using ajax as below (RadAjaxManager needs to be used on the page for this method)
    AutoSizedStandardDialogs.RadConfirmAutoSizedFromAjax("Testing standard dialogs of RadWindowManager.","callbackFunction", null, null, "Testing", null, dialogOptions: dialogOptions);
     
    //RadPrompt code as below
    AutoSizedStandardDialogs.RadPromptAutoSized("Testing standard dialogs of RadWindowManager.","callbackFunction", null, null, "Testing", null, dialogOptions: dialogOptions);
     
    //RadPrompt code using ajax as below (RadAjaxManager needs to be used on the page for this method)
    AutoSizedStandardDialogs.RadPromptAutoSizedFromAjax("Testing standard dialogs of RadWindowManager.","callbackFunction", null, null, "Testing", null, dialogOptions: dialogOptions);
     
    //RadWindow code as below
    AutoSizedStandardDialogs.RadWindow(radWindow1,  dialogOptions: dialogOptions);
     
    //RadWindow code using ajax as below (RadAjaxManager needs to be used on the page for this method)
    AutoSizedStandardDialogs.RadWindowFromAjax(radWindow1,  dialogOptions: dialogOptions);

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 29 Sep 2015 Link to this post

    Hi Sunil,

    Thank you for you contribution. I hope people will find this library useful. I have also updated your Telerik points for sharing your efforts with the community.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 14 Oct 2015 Link to this post

    Latest version of this library is as attached. Please use this library in place of the original version.

    Some edge cases on mobile screens were sorted out. Also, the library now allows a popup to be positioned by specifying its bottom value as explained in documentation under 'Anchoring popups'. ​An example of a situation for using  bottom positioning would be when a popup needs to be 5 pixels above a button.  This becomes very simple with this library.    

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 14 Oct 2015 Link to this post

    Hello Sunil,

    I have replaced the archive in the opener post with this one.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 28 Oct 2015 in reply to Marin Bratanov Link to this post

    I have added new functionality that keeps the anchored popup fixed in position, so that even when scrolling the page the position of popup does not change.

    New files with this functionality are as attached.

    Please note that by just anchoring a popup it will not remain fixed in position, but you ​also need to set dialogOptions.isPositionFixed = true.  You can anchor a RadWindow or radalert or radconfirm or radprompt popup in a very easy and effortless manner using this library.

    The demo at following URL can be used to generate JavaScript and C# code for this new functionality which you can directly use in your applications: Demo.

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 29 Oct 2015 Link to this post

    Hi Sunil,

    I updated the opener post with this archive.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 16 Dec 2015 Link to this post

    Please use latest attached files if you are using this in your application.

    I added some extra features as explained below.

    • If you want to prevent jQuery or jQuery UI animation from occurring you can simply set two properties to false as showin in code snippet below. This offers a simple and easy way to disable animation even when using this library. This could be useful when you want to use other features of this library but not it's animation features.
      var dialogOptions = {};
      dialogOptions.jqAnimationEnabled = false;
      dialogOptions.jqUIAnimationEnabled = false;
    • Some edge cases were taken care of.
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 17 Dec 2015 Link to this post

    I replaced the archive in the opener post with this one.
  9. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 01 Jan Link to this post

    An important point to keep in mind when using this library is that all the animation names in jquery or jquery-ui should be lower camel case. If you don't follow this simple rule, no animation will occur plus you will see JavaScript error. For example, don't use Slide as animation name for jquery or jquery-ui animation, but instead use slide.  In the same way, don't use Highlight as animation name but use highlight. Similarly when using easing name with jquery-ui animation you need to follow the same naming rule; for example,  use easeInQuad for easing name and not EasinQuad or easeinquad.

    This is because  jquery-ui framework expects these names to follow this naming rule. The code generator button at following URL will always tell you the correct names for animation and easing to use: Demo, or you can install this demo locally and verify these names using code generator on your computer.

  10. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 09 Apr Link to this post

    I have fixed some issues with the demo when Classic rendering mode is selected. The demo can be seen at following URL: Demo.

    The library has not changed but just the demo page code was changed.

    The full download including the changed demo page is attached with this post.

  11. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 14 Apr Link to this post

    Hello Sunil,

    I have updated the opener post with the new archive.

    Regards,
    Danail Vasilev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  12. Mark
    Mark avatar
    9 posts
    Member since:
    Aug 2012

    Posted 17 Nov in reply to Danail Vasilev Link to this post

    Hi,

    I am getting the following error when I run the demo and click on the radalert button? Please help

    0x800a138f - JavaScript runtime error: Unable to get property 'offsetTop' of undefined or null reference

     

  13. Mark
    Mark avatar
    9 posts
    Member since:
    Aug 2012

    Posted 17 Nov in reply to Sunil Link to this post

    Hi,
    I am getting the following error when I run the demo and click on the radalert button? Please help

    0x800a138f - JavaScript runtime error: Unable to get property 'offsetTop' of undefined or null reference
  14. Mark
    Mark avatar
    9 posts
    Member since:
    Aug 2012

    Posted 17 Nov in reply to Sunil Link to this post

    Hi,
    I am getting the following error when I run the demo and click on the radalert button? Please help

    0x800a138f - JavaScript runtime error: Unable to get property 'offsetTop' of undefined or null reference
  15. Richard
    Richard avatar
    5 posts
    Member since:
    Dec 2011

    Posted 17 Nov in reply to Sunil Link to this post

    Hi,
    I am getting the following error when I run the demo and click on the radalert button? Please help

    0x800a138f - JavaScript runtime error: Unable to get property 'offsetTop' of undefined or null reference
  16. Richard
    Richard avatar
    5 posts
    Member since:
    Dec 2011

    Posted 17 Nov in reply to Sunil Link to this post

    I am getting the following error when I run the demo and click on the radalert button
    0x800a138f - JavaScript runtime error: Unable to get property 'offsetTop' of undefined or null reference
  17. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 17 Nov Link to this post

    Hi there,

     

    Can you show your markup and also the JavaScript you are using to open the radalert? You can paste these as code snippets when you reply to this post. There could be some issue either with the markup or the way you are using it.

    Sunil

  18. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 17 Nov in reply to Richard Link to this post

    Sorry,ote that the demo was showing the error. So, please disregard my last message. Are you seeing this error with the online demo or with the demo you created on your computer?
  19. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 22 hours ago Link to this post

    Hi Richard,

    Your issue was investigated in detail by me and I did find an issue which has been fixed in attached code library.

    Also, you can freely add references to your version of Telerik.Web.UI.dll and Telerik.Web.UI.Skins.dll without any conflict issues that you had also reported.

    Let me know if you still face issues. 

Back to Top