[Brandon]

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.

[davidg]

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!

[Brandon]

@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.

[colsta]

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

[davidg]

@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

[Brandon]

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.

[paulD]

@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

[davidg]

@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

[Brandon]

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.

[procomp]

Nice job CincyPlanet thank you for the inspiration

[mike2020]

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

[support-michael]

>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.

[Author]

Posts