locked
For jQuery lovers ! Unite ! Topic = equivalence of jquery methods in Javascript metro RRS feed

  • General discussion

  • I use jQuery and jQUery UI and jQuery Mobile a lot, and since most of those knowledge is not realistically practical in Metro programming now. I want to share and start discussion on what should i do in Metro for this and that jQuery method.

    For example:

    if i want $('#redDiv').animate('background-color', 'white'), how do i do that in Metro Javascript.

    I think people should have this resource, so they can transfer their jQUery knowledge in Metro easily without going forth and back with google search. Let me start the topic with:

    - If you want select element(s), instead of $(), use WinJS.Utilities.query().

    I'll try to read the documentation more, right now i am trying to found out the equivalence  of $().animate() with metro.

    Monday, June 18, 2012 3:54 PM

All replies

  • I don't think there is an exact equivalent to the jquery animate function.  The WinJS animations are more targeted animations related to page transitions and showing/hiding specific elements (http://msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx).

    The jQuery animation function is a more generic CSS property animation.  The same can be accomplished using CSS3 transitions and animations in a Metro app:

    http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transitions.htm
    http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm

    Or... you could just continue to use the jQuery animate function :)


    Dave Paquette @Dave_Paquette www.davepaquette.com

    Monday, June 18, 2012 4:05 PM
  • I can use jQuery animate function ????

    I can't ! i used jQuery 1.7.2

    the HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Test1</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" type="text/css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
        <!-- Test1 references -->
        <link href="default.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jQuery.js"></script>
        <script src="default.js"></script>
    </head>
    <body>
        <h1>App H1</h1>
        <p id="p1">Lorem Ipsum LOREM IPSUM !!!!!.</p>
        <div id="div1">
            <p id="p2">I am inside a div</p>
        </div>
    </body>
    </html>

    the default.js

    (function () {
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();
    
        app.onactivated = function (args) {
    
            if (args.detail.kind === activation.ActivationKind.launch) {
    
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    
                    // TODO: This application has been newly launched.
    
                    WinJS.Utilities.ready(function () {
    
                        $('p').animate('background-color','blue');
                    });
    
                    
                } else {
    
                    // This application has been reactivated from suspension. Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        app.oncheckpoint = function (args) {
    
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };
    
        app.start();
    
    })();

    the error log:

    ==

    'WWAHost.exe' (Script): Loaded 'Script Code (MSAppHost/1.0)'.
    Exception was thrown at line 5200, column 4 in ms-appx://1635a84c-7b10-4678-8389-34aefae706f0/js/jQuery.js
    0x800a139e - JavaScript runtime error: SyntaxError
    Exception was thrown at line 5213, column 7 in ms-appx://1635a84c-7b10-4678-8389-34aefae706f0/js/jQuery.js
    0x800a139e - JavaScript runtime error: SyntaxError
    Exception was thrown at line 5213, column 7 in ms-appx://1635a84c-7b10-4678-8389-34aefae706f0/js/jQuery.js
    0x800a139e - JavaScript runtime error: SyntaxError

    ==


    Monday, June 18, 2012 4:19 PM
  • The errors you are getting seem to be related to the minified version of jQuery.  I do not get those errors with the non-minified version.  You don't need to use minified versions since the packaging process will take care of that for you.

    The syntax animating colors is: $('p').animate({backgroundColor: '#444444'}); 

    As per jQuery documentation, you cannot animate a background color out of the box.  Either add the jQuery.color plugin or add jQueryUI.  You cannot use named colors.  You will need to use the hex color values.

    Hope that helps!


    Dave Paquette @Dave_Paquette www.davepaquette.com


    Monday, June 18, 2012 4:54 PM
  • Holy Bookmark !

    I did not add the jQuery UI. And yes, now it works........

    Thanks a lot Dave ! Really appreciates it.

    Monday, June 18, 2012 5:00 PM
  • about the error log, i don't know. I did not use minified version. I use non minified jquery 1.7.2 , it's not problematic though, it's not fatal error. It works fine.
    Monday, June 18, 2012 5:17 PM