What would be the best Javascript framework to implement objects that can be dragged around the window and hovered over to make other objects appear?
I was thinking about AngularJS but is that the best choice? jQuery doesn't seem to be versatile enough.
Also, which one is the most cross-browser compatible?
Thanks
Edit: jQuery UI could be an option but it seems that what I am trying to do would be animation-heavy and a framework using hardware acceleration would be more suitable than one using browser acceleration?
You're only going to get native acceleration using HTML5 in combination with CSS3. To that end, there are means of implementing something similar to dragability, which, in combination with this answer, may achieve what you need via the events. JS still required, but much, much less.
The downside is that you lose browser compatibility. To remedy this, check out Modernizr. You can add in jQuery UI if a legacy browser accesses your site, but otherwise stick with HTML5. As you can guess, doing animations without Flash and with native acceleration AND browser compatibility can get hairy quickly.
Related
I've used a JQuery library called http://spritely.net/ to create image animations, but performance on mobile devices seems to make JQuery look like a bad option. I'm curious to know if anyone has any good alternatives with just HTML5/JS that could accomplish the same effects, but perhaps a little more mobile friendly.
Though personally I have not used to in any mobile application, Createjs is a good option.
http://createjs.com/#!/CreateJS. This is in fact very easy to use framework.
Thre is a nice example of using this framework here.
http://www.mikechambers.com/blog/2011/02/02/pixelflow-easeljs-canvas-dynamic-graphics-example/
Before I launch into the specifics of the issues I am facing, I just need to ask: Is it a mistake to use IE8 as the reference for building a website, particularly one that uses JavaScript animation? I ask because I have written a fairly simple animation page, mostly from scratch, even with my weak grasp of HTML and JavaScript languages, using IE8 to monitor the progress. I have tweaked the code so that it works just fine in IE8 (compatibility mode turned off), but when I tried it in Safari and Chrome, it does some weird hiccuping in the animation.
I find a lot of questions with the opposite problem: that it works well in everything but IE. So I am wondering, should I be using a different browser for my reference? Or is there a better approach to make it compatible with all browsers? It's so frustrating (as I am sure most of you will agree) to have to deal with the different interpretations of the different browsers.
Thanks for any help!
p.s. I have not coded yet for Mozilla.
Using ie8 as a reference from a performance point of view is not a bad idea, since it has weak js and rendering performance. Using ie7 is even better.
Cross browser compatibility wise, it doesn't matter what you use - unless you use a crossbrowser library like jQuery as your base for the animations you will have to write specific code for the various js and render engines.
Even if you use a library like jQuery, you will still run into rendering issues since the various html/render engines are different across browsers. chrome/safari uses webkit, firefox uses gecko etc.
The only way to do it right is to start your project by defining what browsers you wish to support and then test what you do in all of them while you are developing your code.
If you're doing animations, I encourage you to take advantage of css transitions instead of controlling the elements via javascript - you'll have an opportunity to take advantage of graphics hardware as well as more efficient drawing of pixels in general.
If you need to still perform animations in browsers that don't support those css transitions ( some in ie9, none in ie6-8) then you can use a tool like modernizr to detect what's available and control those elements in the event those features aren't available.
Typically, the animations are extra - so I've had good success in ditching the animations for IE users - if you're making slow, javascript driven animations just to work for IE users, you're punishing users that are using better browsers.
Just my $0.02 of course
I have a couple of UI elements such as buttons in my web application. I was going to use CSS3's transitions to animate the transition from one background-image to another. I figured out that it's not possible with the current transitions draft at least. So, I was wondering if it would make sense to use Canvas as the button. I'm sure it can handle events, so, I see no problems here. Are there any?
Other than the fact that it's not supported in IE, no.
canvas is not supported in Internet Explorer. Also, canvas animations render very slowly on PCs with little CPU power.
Unless you are writing something that is for a specific target audience (say internal users with Firefox and dual-core cpu) I think you should avoid using canvas for now...
I came to conclusion: using Canvas for UI elements is not a good idea.
For example, if you create a select-box using Canvas, how is the list going to appear in the top of other HTML elements?
Use raphael.js (MIT license) - it give you canvas-like API using SVG (and VML for IE) and works in all amjor browsers including IE6. And its fast (not too slow even in IE)
In many browsers today you can click and drag images. Can I leverage this in any way? Could I receive an event when an image is dragged and dropped on top of another image in the same browser window?
You could use the JQuery Draggable plugin.
I guess you could do it easily with http://script.aculo.us/
I know it works for block elements, not sure about inline though
You could have a look at this DHTML library = DEMO & API
I think this can be done by any Javascript framework (JQuery, Scriptaculous, MooTools, Dojo) as vrinek says. You could also cook up your own Javascript solution, but stable dragging and dropping routines are at the core of most frameworks.
I think whether an element is a block or inline doesn't really matter as you can set the properties for this as well in CSS.
A number of browsers now support the Drag and Drop API, though not Internet Explorer, which (as usual) has its own way of doing things. If you're looking for a cross-browser solution that works today, one of the libraries is still your best bet.
As much as I love jQuery, it is not always possible to use open source libraries (for reasons having nothing to do with technology). How best to achieve BlockUI functionality using raw javascript? I am really only interested in making it obvious to the user that the browser is busy, and preventing the user from making any more selections. My jQuery-less situations happen to involve only IE 6, so IE 6 is all I'm interested in at this time. I'm trying to avoid a "copy/paste the relevant parts of BlockUI" type of solution.
The general idea is to create a div that covers the entire viewport and has a high z-index, with some level of opacity set. A quick look at the BlockUI source should help you to write your own.