Use case:
A web page where the user is presented with several cards containing text. The user can classify the cards by dragging them to one of four containers. The cards should then snap into place, and the container should display a counter with the number of cards it contains.
The app is based on Rails, but this obviuosly needs to be done in JavaScript. The content of the cards is read and written to the server through a JSON API.
I know basic JS, CSS and HTML 5, but I hope someone can point me in the right direction when it comes to implementing this. For instance:
Should I use HTML 5 canvas?
Is there a JS library that will make the implementation easier?
If you can use make it without canvas, by using simple jQuery code.
Take a look at jQuery UI (https://jqueryui.com), especially at Draggable and Droppable.
Related
I've seen this image slider on the front page of http://www.ibm.com/us/en/ and I want to have one like that for my site. (After a timeout, the first image slides out of the screen, then the second image flies out after it, and then a new pair fly in).
I've seen that IBM uses Dojo not jQuery. Is this built in effect in dojo?
I have knowledge in javascript (but not any library like jQuery/dojo) and I can make it myself the hard-way. But I wanted to know first if there is anything built in to do it?
I think you might be better off with dojox.widget.Rotator or even dojox.widget.AutoRotator.
The image slider on the IBM.com front page is built using Dojo, but not a out-of-box component of Dojo library. It's a customized component.
If you want to create image sliders using Dojo, take a look at existing out-of-box components in DojoX library (dojox.image). dojox.image.SlideShow is a good starting point.
Are there any lightweight frameworks out there for this task. I have a collection of divs, that I want to be able to save positions when dragged/resized/pushed etc.
I was going to build one, to my spec, but if there is a lightweight one out there that might save me a lot of time. I've seen some jQuery plugins that push divs around a page fluidly.
I want to be able to save positions, but also snap divs to each other and save all news positions for divs moved or re-sized. I've looked briefly at shindig, but seems a bit heavy... at least I wanted to see if there are any lightweight front end alternatives.
I will be using php for my backend.
Consider midorijs (www.midorijs.com). It is lightweight and contains a simple drag and drop interface complete with a default drop callback function. You can also define your own. You mentioned you wanted a callback for position save, Midori's callback function does pass the x,y coordinates of the object.
Chceck out more drag and drop callback details at the bottom of this page: http://www.midorijs.com/midoriDragDrop.html
Another benefit since you mentioned you are using php is Midori's convertToFields function which converts javascript object to php.
Good luck!
Why not using jQuery ui? You can customize a bundle to fit your needs + when delivering from googlecode you can get sure that a huge amount of users already have that in their cache. And you can easily get the positionings and push them to your server.
http://jqueryui.com/download
I am working in making an app around the 960.gs based system (although the grid framework isn't set in store yet).
What I would like to do is enable the user to drag and drop specific layout elements (DIVs), which would, theoretically, move the blocks of the design around. I know JQuery UI has a drag and drop system, which may be a component of this project, but what I want to do is make sure that the user can only drag, drop and stretch/expand divs according to the limitations of the defined css grid. And make sure that nothing will violate the boundaries of the grid, and generate the proper css classes to display correctly....
I have scoured the net and stack exchange for some examples along this line, but I haven't seen anything. Can someone point me in the right direction?
I'm looking into a similar problem, and I found a few options that are not based on 960.gs.
jQuery EasyUI (www.jeasyui.com/) has something like this; here is a direct link to their demo.
There's also iNettuts, which is something similar.
Since you said the grid framework choice isn't solid, I think these options might be useful.
I am looking to create a grid structure using javascript or one of its libraries. My idea is as follows: I am a merchandise manager for a retailer and want to create an application to tie into the django project I have been working on to track item sales based on display location. The javascript piece would involve drawing a grid on the screen and allowing the user to draw 'areas' over the grid. Each area would contain a set number of gridboxes, each representing a pallet of goods. At the time the grid is drawn, each box is a DOM object that can be assigned to event handlers etc. When an area is drawn over a a series of these boxes, they become active and each box can be assigned different characteristics. In the end, each box would effectively represent an empty pallet that could then be assigned an item. It's position could then be correlated with sales data via my django app. I just need a way to broadcast/manage the location data using javascript.
Is there a jquery plugin or some other js library that would facilitate such a project? I have checked into Raphael and it will work, but will take more time to create. I am wondering if there is already some kind of grid based drawing tool that would facilitate the process.
Everytime I think of a javascript Grid, I always thing about the fantastic TableSorter
And if you append an editable version to it, I would would say you will have the best AWESOME project!
:o)
JQuery UI's Selectable would probably be a good place to start. It makes it easy to create a grid whose areas are selectable by dragging a box over it.
The extJS javascript framework has an editable grid, refer to http://dev.sencha.com/deploy/dev/examples/grid/edit-grid.html for a sample demo and source code
Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.
Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?
infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.
More information can be found on their Github page - https://github.com/airbnb/infinity
Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github.com/elliotcw/infinity
I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many complex elements on the page.
I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.
MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).
So I started writing a barebones list component, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github.com/shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)
[1] http://airbnb.github.io/infinity/
[3] https://github.com/triceam/MegaList
Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.
I only know these two:
Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need.
Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.
Clusterize.js does exactly that.
It's small and works with any tag (table, lists, divs)