I'm trying to implement some kind of drag and drop snap to grid similar to something like this
http://wordsquared.com/. Was contemplating trying to use JQuery UI and somehow save the position of the items. Seems like snapping to a grid, and saving would be a fairly common scenario. I was contemplating trying to implement this all in Drupal, any suggestions, examples, things I ay not be aware of would be very helpfull.
It sounds like the Homebox module may be close to what you're looking for.
Related
I'm using fancyBox3 in a project and I want to achieve the following:
I wanted to know if there is a CSS trick to achieve it or if it requires some math and calculation to make it fit perfectly?
Basically, there are two ways - using JS (there are ton of scripts, for example https://github.com/brunjo/rowGrid.js, https://haltu.github.io/muuri/, https://github.com/kombai/freewall, http://miromannino.github.io/Justified-Gallery/) or CSS.
The problem with CSS is that it is still not possible to create true "masonry style layout", but you can archive something similar, try googling for "masonry using css", you will find many articles and examples about this topic, for example, this one - https://medium.com/#andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
Have a look at masonry.js - it does all the calculations for you to make your images tesselate as you resize the screen etc.
I need to cerate a web page with dynamic data shown in a designed bar graph. The design of the graph has first priority. Here's a link to an image of the bar graph to create.
What would be the best way to achieve this. I'm thinking of using a simple image of one bar and filling html table cells with that image. But probably there are better ways to do this.
I'm familiar with html css and asp.
Who want to give me a hint in the right direction?
Thanks!
You can use some kind of javascript chart, you can find plenty of them over the net, I have experience with Highcharts and ChartJS , both of them are easy to use and are customizable with dynamic interface. You can use the graph with bars or with lines it really depends on you, you can use them both as well as this wont result in bad performance ! Here you can check a simple demo with them High chart demo and ChartJS docs. Hope this helps.
I want to replicate the dynamic drag-drop layout similar to
http://www.picmonkey.com/ collage,
where you can drag an item on the edges of the container and place it and the layout adjusts accordingly.
Do you know of any algorithm?
Have a look at
http://www.sitepen.com/blog/2011/12/05/dojo-drag-n-drop-redux/
There are many more examples like this if you search in google. Pick anyone and you are good to go.
I discovered the new css controlling scrolling and snapping on http://msdn.microsoft.com/en-us/library/windows/apps/hh466066.aspx
I wonder if there's a tutorial or sample out there explaining how this works and to use those css-attributes.
I'm working on a (angularjs based) calendar and I wonder if it's possible to extend it using css to support touch panning trough the months (like win8 calendar navigating with the fingers).
http://jsfiddle.net/johnnayweiler/FyrtQ/
How to use like -ms-scroll-snap to make the view go with the finger, then snap to the next page? What js events would be recommended to know when the scroll amount reached this snap point(to load the next month).
Also of course, is there something similar in other browsers(this doesnt seem to be a standarts feature)? Probably using javascript, are there some simple solutions for handling momentum and snap?
Thanks for your ideas :)
Theres now an official sample ;)
http://code.msdn.microsoft.com/ie/Scrolling-panning-and-6834aaf9/sourcecode?fileId=68336&pathId=380363024
I'm building a business application which mostly involves tables and other typical form elements. Due to the nature of my application however, I need to place groups of these elements together in a dynamic tree structure which will take up all of the available screen real estate. If real estate is low, there will be some form of smart scrolling allowing users to focus on certain areas of the tree. It could be called an advanced data visualization web form.
Historically, I would have accomplished this by simply using divs and javascript. The canvas element however seems like a more logical way to build my structure. Most uses of the canvas element that I can find are however geared towards graphics and animations (mostly games). Is canvas overkill for this? Will I benefit from using it? Are there alternatives?
Yes, canvas is overkill. It is very much a drawing board and not much more. It is certainly not something that I would expect to create user controls in. Games etc. are more suited as they aren't really standard user controls and wouldn't be expected to behave as such.
A tree structure could easily be implemented with a series of nested uls. Using some JavaScript to expand collapse them by adding and removing classes.
Here is a nice jQuery plugin for you to use or get some ideas of how you could use it.
Edit:
I would stay away from canvas just because of the overhead of the drawing. If you can extend a standard JavaScript treeview to add more functionality this would seem like the best option ot me. Creating controls from scratch in canvas is no small feat.
Edit2 (Post mockup):
This just looks like a multi-part form to me, with hidden forms/areas which are displayed as apropriately. This is far too common to require creating this with canvas.
Canvas is not fully supported in all browsers yet. I recommend using either Jquery or another framework.