is there any way to make Gridster.js tile(s) stick, that is not move up vertically to fill empty space. Kind of like the way a layout program with snap-to-grid turned on works...
Use this fork https://github.com/dsmorse/gridster.js with
shift_widgets_up: false
option.
See demo : http://dsmorse.github.io/gridster.js/demos/sticky-postion.html
Have you tried packery? http://packery.metafizzy.co/
This library has many drag and drop features.
You may also be interested in the following prototype from my team: https://github.com/ibmjstart/gridplumb
Specifically, the modifications to grister can be found at https://github.com/ibmjstart/gridplumb/blob/master/src/extend-gridster.js
My answer is not directly linked to gridster but to one of its fork : gridstack. I post this answer as I found this topic while searching for this functionality in gridstack.
So in gridstack solution is to put this property in grid options :
float:true
Related
I want to create a iGoogle kind of layout in which you can drag and drop different widgets in different places. I have to use javascript or jquery only. I wanted to know how to go about it. Basically how to start and implement this kind of structure.
P.S.: I cant use any specific framework which does this job. I have to create it myself.
You can also use draggable and droppable jquery plugins. See example here
http://jqueryui.com/droppable/#revert
update
You have to write your own dragable function. The trick is you listen to onmousedown event and then redraw the element at current x, y postion.
Look at this example
Note : if you want to learn, then do not copy paste the example. Try to understand and then implement on your own !
Check out jQuery UI's Sortable interaction functionality, should give you a good starting point.
http://jqueryui.com/sortable/#display-grid
I am planning on making an analytics dashboard and would like to implement circular charts like the image attached to this question:
and I would like to do it using jQuery. Do you guys have any usefull links to resources or to other SO questions? Would be awesome!
Thanks!
You can also take a look at :
http://bernii.github.com/gauge.js/
http://www.justgage.com/
Both of them look really good and seems pretty easy to use.
The easiest way would probably be to create an SVG that mimics the appearance you want, and then use JavaScript/jQuery to modify the source of the SVG. The design you're requesting could probably be acheived by simply placing two arcs on top of one another.
Deriving from this excellent answer on calculating arcs, creating two overlapping ones could look something like this, which also demonstrates updating the arc dynamically.
lethargicpanda's suggestions are cool. Check out jQuery Knob too. It also allows user input.
i am trying to combine my draggable sortable stuff with some scale code that works well for me. i just failed to find a good solution yet.
take a look at that:
http://jsfiddle.net/UXLAE/7/
i've commented out the scale code so that you can see how the app should actually works.
you have the top panel and can drag items from there to the bottom panel (items are cloned).
in the bottom panel you must be able to sort the items.
now i also want to be able to scale every item on mouseover, both in the top and the bottom panel. the scale must be an overlay and must have the same center as the source item. i failed to do it with .animate() or .effect("scale") which would have made things a lot easier, but i managed to write some custom code that works pretty well (the part i commented out). my problem is that now i have no idea how to combine the custom code with what i already have. they kinda break each other ;) but look for yourself.
would be nice if you could post some ideas or even a solution.
greetings
You have your original element working well enough but I see that your commented out code breaks the functionality.
Have a look at your droppable code:
accept: "#topSquareList li",
Your scaling function has made a clone which is not a part of #topSquareList. I suspect this is why.
When you use clone(), this clone is not a child of #topSquareList (only the original is) which is why your selector does not match it in your droppable code. You need to sort out what you want to drop and make an appropriate selector.
Update:
After some fiddling around, I came up with this: http://jsfiddle.net/UXLAE/27/
Your scale code is now working in conjunction with dragging/dropping/sorting. You should compare what I made to your original code to figure out why it wasn't working - there were more than a few reasons why. Does it help?
If you can use CSS transformations, then simply adding the following rule will accomplish the scaling without any JavaScript and therefore zero impact on the jQueryUI dragging, dropping or sorting.
.square:hover {
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
-moz-transform:scale(1.2);
transform:scale(1.2);
}
Native browser support for transform is not complete, but the major modern browsers are fully supported. There is a workaround for IE < v9 if you need to support those browsers.
I am looking for a straightforward jQuery tooltip script. I have been having troubles finding one that has a fixed position and doesn't move with the user's cursor. If anyone knows of one let me know :) Thanks!
I always use this one here:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
It has the option to both follow the cursor AND keep it's position, along with a few other helpful options. The css is also very minimal and therfore easy to change.
See there's this thing here called a search engine...
Okay, okay... I'll be more constructive...
My favorite is qTip 2. It does everything you want it to do. and you don't have to leave money on the table...
I use qTip2 from http://craigsworks.com/projects/qtip2.
By default, it does not move with the cursor. There are a bunch of options and some themes. The best part is that the developer answers all questions in his forum within a day or less.
Also here are some good ones meeting your requirement that it not follow the mouse cursor:
http://plugins.learningjquery.com/cluetip/
http://edgarverle.com/BetterTip/default.cfm
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://labs.dmlogica.com/dmltip/#more-53
http://www.ajaxdaddy.com/javascript-tooltip-jtip.html
http://plugins.jquery.com/project/bt
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
http://code.drewwilson.com/entry/tiptip-jquery-plugin
http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/
http://gdakram.github.com/JQuery-Tooltip-Plugin/
As a side note, I'd stay away from the tool tip plugin that's part of jQuery Tools by Flowplayer. IMHO, jQ Tools is poorly implemented, out of date and not supported very well by the developer or his community.
100 various solutions on this page (however, some are not jQuery):
http://www.webdesignshock.com/showcase/best-tooltip-scripts-plugins/
The one I always use is: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
It's three short CSS lines to customize colors and easy to work with!
I have a requirement to have a universe type menu, where there is a main item in the center, and "X" amount of items around it. (ie: sun with planets).
I have searched high and low for an example, and all of the search results points to using css, but this requires manually figuring out the position of the items.
How can I create a menu like this where I can dynamically add items?
I am sure there is some jQuery / javascript example somewhere
Did you try searching for pie menus? There are a couple of jQuery Plugins:
jQuery - Pie Menu
jQuery Canvas Pie Menu
check out jQuery Radmenu - http://tikku.com/jquery-radmenu-plugin
I've just done a hell of lot of googling for you - but couldn't find anything either.
So, the answer must be - write it for yourself (see, that's fun!).
I found this great resource to help out. It's not JavaScript, but the code could easily be rewritten to help drawing the invisible circle needed to do the trick.
Some sin/cos stuff will probably also be needed - to determine where on the circle your menu points should be, dynamically. It's unfortunately not just as simple as saying 360/numberOfMenus ;-)
I hope this helps you out. Sometimes, the answer is that you have to do it yourself :D
I found this thread too late, because I also built one. You can find it here: http://www.pritaeas.net/public/jquery/hp/circulate/index.html
It is a jQuery plugin, very small, that positions li items in a circle.