I'm building a very basic online application where you can take images from a toolbar (or some kind of storage box, since there will eventually be quite a few images) and drag and drop them onto a canvas. I'm new to web development, but I know how to do the drag and drop, I'm just looking for a way to make a toolbar and put images in it. Ideally, I'd like a box with a scrollbar.
This seems like it should be a pretty simple problem. Any help would be much appreciated!
The simplest way I ended up discovering was using
overflow: scroll;
in the CSS div containing the images.
Here's a very good and simple demonstration of the use of drag&drop in HTML5 :
http://html5demos.com/drag
Beware that it's easy to drag links (as in this demo) but it is not possible to drag any images that aren't inside links in IE9.
If you want a totally cross-browser solution, you'll have to revert to old solutions (track mouse down, move and up and set yourself the position of objects).
If you say you know drag&drop and just want a box with a scroll bar then check this: http://jqueryui.com/demos/slider/side-scroll.html
Related
Is this possible? I don't have an example of what I'm asking about obviously, but essentially what I want to do is to have users be able to drag an element around a page, but not have it be restrained to certain positions like drag and drop-able elements in HTML5. The simplest example would be the way windows work on the desktop. I'm sorry if the answer is out there, but I don't know the term to search for.
Sounds like a job for jQueryUI!
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
https://jqueryui.com/draggable/
I need advice. I need to make something like a rich text editor but only for div tags. User can move div, change place of two divs with drag and drop (add gravity), stretch width and height of div with mouse pointer. All divs which can be edited is in one parent div. My question is, because I am new to JavaScript, which library is the best for these kinds of things, has anyone done something similar with some library ?
jQuery UI has the resizable feature for this.
I think it is a good idea to combine methods. For example you can use hte HTML5 features (draggable=true), combined with plain JavaScript and CSS3 (resize: both;).
Have a look at this article for the drag and drop, and at this preview of CSS3's resize.
I need to make a interactive image gallery (or image slider) where some hotspots need be placed on. It has to be possible to click on those hotspots, to update a sidebar with the corresponding info. Some basic animation must also be possible on a slide or scene of the gallery.
Which setup would be the best solution.
I'm currently thinking about the canvas element, but the lack of specific events for drawn hotspots makes me doubt. EaselJS could be a solution though.
An alternative could be just using a regular javascript image gallery and place some fixed positioned hotspots on it.
This is actually a basic mvc-setup, I have the image gallery, hotspots and the sidebar.
Should I use a javascript mvc library like http://javascriptmvc.com/ or backbone.js
So my question actually is, what would be the best setup, with performance and some basic animation in mind?
Thanks.
other interesting links I found:
http://processingjs.org
http://raphaeljs.com
...
If you are displaying large images or expect users to have older browsers or browsers without current GPU acceleration then you should always use standard HTML4 elements to get this done. Using canvas is overkill and will cause you pain later on if you are not overly-experienced with it.
With DOM-based images you already have click events and can even use image maps to do the click-regions. With canvas you need to code your own click detection and map mouse position to a region to check for clicks.
All in all the simplest solution is usually the best one and for performance and ease of dev, canvas is not the way forward in my opinion.
I want to build into my app a way to select multiple objects on the screen (this is an HTML page with a bunch of absolutely positioned HTML divs). You know, like when you click down with the mouse and drag a transparent/translucent box and anything within that box gets selected upon mouse release?
I don't know how to go about coding that. How would you? Or pointers to solutions is acceptable as well.
Consider using jQuery javascript library. It has an extension jQuery UI that provides abstractions for interaction and animation. For drag an drop you have: Draggable
Here is what I would do.
Mousedown creates a high z-index div, transparent body with a nice border, which has its dimensions informed by mousemove. On mouseup you compare the region of that div with applicable elements. This wouldn't be particularly hard to do without a library, but YUI3 makes it pretty simple, have a look at http://developer.yahoo.com/yui/3/api/Node.html#method_inRegion
HTH.
I was looking to create an image gallery in my blog. However, I was wondering how possible it would be for the gallery to scroll through my images on mouseOver. Basically, when the user moves his/her mouse up or down the image gallery, the images scroll up or down accordingly.
I have seen a few examples where it has been done in flash, but i was wondering if it was possible for it to be done in Javascript. An example of what I am talking about can be seen on deep.co.uk. This example is constructed in flash and allows the user to skim through the agency's portfolio by moving the mouse up and down the div. I am aware that loads of free javascript alternatives are online, but i haven't managed to find anyone that does it on mouseOver. I would appreciate it if someone has come across something like this or has used something like this in one of their projects.
Thanks in advance.
Yours sincerely,
Seedorf
Maaki has i nice version here:
http://www.maaki.com/thomas/SmoothDivScroll/
supports mouse hot spot scrolling, and auto start/stop
Here is a script which scrolls content vertically onMouseOver.
http://www.dyn-web.com/code/scroll/demos.php