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.
Related
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.
Ok - have been tasked with possibly an impossible (or at least a potentially nightmarish) scenario.
Need to come as close as possible to reproducing PowerPoint-like effects via HTML/JavaScript (the spec is large and ugly, so I will spare you the details).
Ultimately, I am looking for a solid launching point. I have used both Prototype/Scriptaculous as well as jQuery in many projects, and based on what I am seeing, it appears jQuery has the more plug-in available, so am leaning towards using jQuery.
Can anyone point me to some plug-ins, articles, or anything else that would help me in accelerating the research on this so I can define to my client what can and cannot be done.
Any other suggestions from you jQuery gurus are welcome of course.
Thanks -
What do you mean with "PowerPoint-like" effects. If you mean animations between slides you should look into
the Effects available with the standard jQuery download (fadeIn, fadeOut, slideDown, slideUp, ...)
the jQuery Easing plugin
the jQuery Cycle plugins effects browser
I would certainly look at jQuery UI as well, which adds a number of effects. See here for a current list. Click on the link for each to see several demos, there are quite a few options for some that are powerpoint-ish.
For example, try the various options in the dropdown here.
The jQuery documentation is very good:
jQuery animate docs
However, if you are trying to achieve very complex effects you will almost certainly benefit from using a different framework. jQuery is a fantastic tool - particularly with the DOM, but animation isn't its strongpoint.
MooTools has a particularly good animation library (MooTools began life as a JavaScript animation framework) with a number of core modules that give you flexible tools to create complex animation chains yourself as well as a number of official and community-provided plugins. My recommendation would be to at least have a look at that first. You can certainly achieve this in jQuery but you will be making it more difficult for yourself!
MooTools homepage
Mootools Core Documentation
My $0.02: If you're doing complex effects, you need the library that runs the fastest, not the library that is the easiest to work with.
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)
Has anyone tried recreating the page flip effect with images like you commonly see in Adobe Flash with JavaScript and HTML 5's canvas tag?
Are there any frameworks or JQuery plug-ins that do this type of effect?
The page flip in Flash allows you to grab a corner of the simulated book page and flip the page like you would flip a real book's page.
I really want to learn how to do this with JavaScript and HTML 5's canvas tag, but not sure where to start nor what formulas would be necessary.
Example page flip in flash
You might have a look at another (nice one) implementation of HTML5-based page flipper: http://jpageflipper.codeplex.com/
It's really nice and it's implemented as a jQuery plugin.
You can try jFlip, it's a jQuery Plugin, It's not IE-compliant but I guess it's not a problem for you since you are asking for HTML5.
This one is a jquery plugin and pretty nifty
http://www.turnjs.com/#home
see this http://www.20thingsilearned.com/home
Here is an HTML5 Page flip App that I built using HTML5's Canvas Element & jQuery. It's called RectoVerso.
I also ran across this one: http://romancortes.com/ficheros/page-flip.html
Which is done with only CSS3.
There is a clear and informative case study about creating your own page flip effect based on the one in the 20 Things I Learned About Browsers and the Web book that Narendrakumar linked to. It’s a great implementation to imitate, the case study is clear with relevant code samples, and it was written by a senior interactive developer for Fi, the company who developed the book.
http://js1k.com/2010-first/demo/441
As compact as possible :D
http://www.romancortes.com/blog/pure-css3-page-flip-effect/
This is better done with SVG's <foreignObject> element and SVG transforms. This blog post by Mark Finkle has some info on rotating stuff as you would need to do in a "page flip/turn" effect. As far as I know, only Gecko 1.9+ and WebKit support this.
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.