facebook

Fun With JQueryUI – things you didnt know could be done

  1. MobiOne Archive
  2.  > 
  3. Feedback & Suggestions
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #338041 Reply

    Brandon
    Member

    I wasn’t quite sure where to put this as its not really a how to, but just showing a few of the things that can be done JQuery UI.
    It goes to show how powerful of a tool Mobione can be.

    http://cincyplanet.com/mobione/jqueryui/

    I will be doing tutorial on JQuery UI down the road.

    #338049 Reply

    davidg
    Member

    wow Cincyplanet this is really cool stuff!

    I have been doing a lot of cool animations with Greensock’s tweenlite/tweenmax inside mobione.

    I don’t know if you used those librarys but they work really well and are easy to use.

    Just thought I would throw that out there.

    Keep up the good work!

    #338052 Reply

    Brandon
    Member

    @davidg
    Thanks.
    I have seen it but never tried it, from what I saw pretty much everything can be done using JQuery animate so I didnt see adding a thrid party js script for it, but I didnt look into it to see if it had added features.

    It does go to show there isnt much that cant be done with mobione though.

    #338053 Reply

    colsta
    Member

    Thanks again,

    Like you say, Mobi One has a lot to offer if you put it to good use. Always love too see what your up too.

    Col

    #338098 Reply

    davidg
    Member

    @CincyPlanet

    Hey I really like your UI.

    Since your post I have been playing with jqueryUI .animate.

    I having a problem that I don’t know if you have ever come across and found a solution for in mobione…

    My main goal is I want to animate several images to the center of the screen (not document center) and then animate them back to where they were.

    I am having trouble getting them to go the vertical center.

    Here is how I am doing it:

    I used a hidden image(image1) to find the center using image1.position(); –This works well and the image always goes to the center

    Then I use
    var p = image1
    var position = p.position();
    xx=position.left
    yy=position.top

    This gives me the top left coordinates of center image at xx, yy

    Then I use:

    image2.animate({left:xx, top:yy});

    This align the image horizontally but makes it really far off vertically and additional images I animate to those coordinates seem to stack instead of overlay.

    I know there is likely several ways to center an image, I just haven’t found one that works yet in mobione using only javascript and jquery.

    Any help would be awesome, Thanks

    #338118 Reply

    Brandon
    Member

    Without doing any real testing or checking my code here is my suggestion (might be an easier way Im not thinking of right now):

    get the center of the screen:
    myWidth = screen.width / 2;
    myHeight = screen.height / 2;

    then something like
    $(‘#m1-myscreen-image1’).css(‘top’) = myHeight – $(‘#m1-myscreen-image1’).css(‘height’) / 2;

    and the same with the left and width.

    #338412 Reply

    paulD
    Member

    @CincyPlanet wrote:

    @davidg
    Thanks.
    I have seen it but never tried it, from what I saw pretty much everything can be done using JQuery animate so I didnt see adding a thrid party js script for it, but I didnt look into it to see if it had added features.

    It does go to show there isnt much that cant be done with mobione though.

    Just my two cents for what little its worth!

    I also use greensock for my animation within mobione. Its really slick and even has a plug in for jquery which takes control of the animate functions with no extra coding I’ve used it with Actionscript for years and the JS version is every bit as good.

    In my experience you have to be a little careful with jquery animate on some devices as the performance can be a little ‘iffy’ to say the least, even on a IPAD 3 you can get it to stutter quite nicely with not much effort, especially if your animating images.

    the greensock platform runs about 20 x faster than jquery for animation so is a very good choice for mobile devices.

    Paul

    #338699 Reply

    davidg
    Member

    @CincyPlanet wrote:

    Without doing any real testing or checking my code here is my suggestion (might be an easier way Im not thinking of right now):

    get the center of the screen:
    myWidth = screen.width / 2;
    myHeight = screen.height / 2;

    then something like
    $(‘#m1-myscreen-image1’).css(‘top’) = myHeight – $(‘#m1-myscreen-image1’).css(‘height’) / 2;

    and the same with the left and width.

    Thanks CincyPlanet,

    For Some reason I get an error when I implement this. Not sure why

    #339002 Reply

    Brandon
    Member

    I didnt test it so it may not be 100percent accurate on the syntax. I am using a somewhat similar code on a face detection I am writing now so if i get a chance Ill compare it.

    #341362 Reply

    procomp
    Member

    Nice job CincyPlanet thank you for the inspiration

    #343682 Reply

    mike2020
    Member

    Could you please post a very short tutorial on how to integrate jQuery UI into Mobione? My widgets (in a web app) do not work properly on Firefox/InternetExplorer, while I see that your project is ok.

    The main error that I am having is that I need to “refresh” in Firefox/IE to have a click event executed. Do you remember of any compatibility issues with MB1 and jQueryUI?

    Thanks for your tutorials and support!
    Mike

    #343685 Reply

    support-michael
    Keymaster

    >My widgets (in a web app) do not work properly on Firefox/InternetExplorer

    Please use a webkit-based browser such as Chrome or Safari.
    MobiOne produces code optimized for mobile devices that use the webkit rendering engine. Thus firefox and IE are not supported.

Viewing 12 posts - 1 through 12 (of 12 total)
Reply To: Fun With JQueryUI – things you didnt know could be done

You must be logged in to post in the forum log in