I'm looking to build a Jquery based dashboard. Looking at the following examples:
http://jqueryui.com/sortable/#display-grid
and
http://jqueryui.com/sortable/#portlets
I see that this functionality is easily accomplished if we have a fluid layout. However. I want a dashboard which is slightly more complex than the examples mentioned above.
The dashboard I'm looking to create will have
a grid where items can be dropped onto. The items can be dropped anywhere on the page, and spacing will be allowed to exist between items.
The items can be resizable against the grid causing items to move out of the way.
I do not want a layout like the google homepage dashboard where tiles shift up and do not allow spacing between them in the grid.
So for example I would have a 10 x 10 grid (50 pixels per unit)
A tile can be 1 x 1 and resized to 1 x 2 and then there can be a 1 x 1 spacer and then another tile.
I'm looking for a good algorithm to accomplish this. My ultimate goal is to end up with a dashboard similar to the ones you would see on your android home screens.
However, my major drawback is currently smart collision detection for swapping and organising the grid.
Once accomplished I hope to share my dashboard on github. Thank you.
It's not a jQuery plugin, but Gridster does everything you mentioned EXCEPT for the resizing.
Please let us know if you find something more complete.
Related
I am looking forward to creating a verticle photo slider in my Angular / React app just like we see in the Google Photos Web version. Here is the screenshot attached in case you have not seen it yet on https://photos.google.com/ of your google account
The slider is divided into the yearly category where small dots represents months. It is smart enough to create dots based on photos that you have in particular months.
If you click on any dots or year, your main photos section will move based on the selection.
If you scroll through your photos using a Mouse wheel or mouse pad, this slider will change position based on your scroll photo area.
I tried to find any open source NPM library that I could check but I did not yet. Any help that I can get on how to build this in Pure JavaScript or in TypeScript, I would be damn glad.
Any thoughts, let's discuss them in the comments.
Thank you in advance.
Your requirements have been validated in both the Slider and Linear Gauge components. But currently, we do not have support to render the Slider component with irregular label intervals as shown in your screenshot. This requirement is also not possible with the Linear Gauge. Also, we don’t have direct support to include photos as maintained in the Google photos in Slider component. Please check the available layout of both Slider and Linear Gauge components from the below link.
Linear Gauge: https://ej2.syncfusion.com/demos/#/bootstrap5/linear-gauge/default
Slider: https://ej2.syncfusion.com/demos/#/bootstrap5/slider/default.html
I'm pretty new to JS and CSS so i'm looking for help to make a Grid container in which I drag into an icons in different sizes and I want them to arrange themselves based on the size of each icon and the amount of them.
Let's say the minimum size that each icon can scale down is 20% of its original size.
I tried a lot of methods without finding the perfect way..
If anyone can send me a complete example of something like that I would be thankfull!
There's no magic solution here. You're asking few questions - each has to be addressed separately and depends on the js framework you use. I'm going to assume you're using vanilla js / jQuery.
Grid layout - Bootstrap is a trendy and working-out-of-the-box framework. Here's a simple grid example.
Drag n drop - There's no shortage in drag & drop libs like interactjs, jQueryUI, and Draggabilly (example)
Don't attempt to achieve all your goals at once. Instead, implement the grid, understand it, then move to drag n drop and sort by size logic.
I'm trying to develop a control where one must be able to add elements, move and resize them. The idea is to draw small diagrams by dragging some elements to the dashboard. Here is what I'm trying to accomplish:
The dashboard must have fixed boundaries (left/right/bottom/top). Elements should collide with them and not go beyond.
Elements can be added with a button or dragged from a repository
Elements must be resizable
Elements should collide
Elements must be movable - freestyle, NOT adjust at the top like gridster or gridstack. I need to be able to put an element at the bottom or at the middle of the dashboard and have empty spaces.
I must be able to get all the necessary data from the elements in order to store and recreate the dashboard (save & load).
I started by creating this small test project using the drag & drop features, but soon got the feeling I was trying to reinvent the wheel and maybe doing it in an unnecssary old fashioned way.
But after a few searches, I still didn't find one plugin/control that behaves the way I need or is easy enough for me to change.
Gridster and gridstack make the elements go at the top.
TinyDraggable looks nice, but is not resizable. I did try to make the div elements .resizable() (adding the jQueryUI) but I wasn't able to make it work. This plugin does not have (I think) collisions, which would be OK if I managed to get everything else needed. I do like the freedom of movement of the draggable items compared to my tiny project where they go from slot to slot.
So, the question is: do you know if there is any suitable plugin (jQuery) for me? Ready to use or easy to configure/change?
Many thanks
Try https://github.com/troolee/gridstack.js with float mode. In this mode widgets do not go to the top of container.
The library is in active developing. So I can implement missing reasonable features.
I am looking forward to designing a web page with a matrix layout. like #. It would have max. 8 columns and 3 rows.
I have decided on 8 columns as every screen width resolution on PC, mobile, tablets divides perfectly by 8. I have decided on 3 rows as it is readable. Though vertical scroll bar shows automatically, asking a visitor to click it to see the content is a pain to him. So, visitor needs to see complete paragraphs/sections the first he sees the page.
When I left coding for web (as I started managing my team members. I hardly used to program until some time back and seem to lost out a lot.) when CSS/js was just coming out. Now it dominates even the HTML. So, using CSS is the way to go. (Imho, I actually find coding CSS a scary job).
Looks to be a huge requirement, after I have searched for the resources online.
Problems:
* Fixed columns over different resolutions
* Fixed rows
* Placing right content in right matrix boxes.
How do I start?
Update: I am a huge fan of http://www.nytimes.com/chrome. The main screen which shows assorted news in a matrix is a wonderful and unique design. The matrix changes dynamically to respond to changing screen resolution.
How can we design it?
Probably, first, you forget about non-standard grid of 8x3. Then, you
Check the demo;
Download 960 grid system;
Read tutorial with the video;
start using that grid. Will be much easier to maintain it in the future
You may care about this.
If not, just make <ul> and <table> forms.
I have a 2 column table in a database 1,000 rows long(All integer data).
The display will allow for the user to delete a certain range of data from the table.
What I am looking for is a creative way to display all the data so the user can get to different parts of it really fast. Maybe displaying different chunks at once, represent with bar graphs or zooming the scope in/out would be really cool.
Any ideas,suggestions, examples at all are appreciated. Please just throw them out here for brainstorming.
Note: I am limited to JS, xml, html and C
Thanks!
By mouse scroll resize the text.
Add drag'n'drop for moving text block.
Example: user resizes it to a smaller chunk by mouse weal then moves it by using drag'n'drop.
It is possible to implement such thing with jQuery/JavaScript
Use a double slider with a min and max display range. Here is an example of one based on MooTools. Moving the slider controls will adjust which range of values are displayed in the table.
Could implement something that functions like google maps where you can easily zoom in and out and set points wherever you need that stay when you change elevation.
you can format the html with <h1>, <h2>, <h3> and <p> tags, and use jquery to collapse the paragraphs, leaving headings of major sections.
I did this with documentation i was working on and it worked out great.
I'm a fan of the JavaScript bookmarklet demoed in this video: http://www.youtube.com/watch?v=GPZ8YNgyl_I
The bookmarklet itself is available here: http://t_trace.wed.macserver.jp/overview.html
If you have used WinMerge, you could develop something like the location pane in the left that shows a full preview of the changes in files. It can be used to navigate very fast
Here's a screenshot. (Image too large to inline it here)
Assuming the integer data come in ranges, a common approach is to show how much data there is in each range as a horizontal bar. You click the range to zoom in, until you see the actual data, or click the X to delete.
ID Range
[X] 1-1000 xxxxxxxxxxxxxxxxxxxxx
[X] 1001-2000 xxxxxxxxx
[X] 2001-3000 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
A further refinement is to use colour on the horizontal bars to show data density. For instance red = lots of data, yellow = less