I'm wanting to rearrange table columns dynamically.
I can do the actual rearrange but for the dragging of the header cells I'm wanting something that feels like jqueryui's sortable elements with the placeholder http://jqueryui.com/demos/sortable/#placeholder (obviously horizontally rather than vertically though)
The problem is that I don't want to use jquery (javascript is fine but jquery is too heavy), does anyone know of something more lightweight that does the same thing?
Anything that can handle the complexities of drag-and-drop is going to be big. JavaScript libraries usually try to solve simple things, like DOM selectors and AJAX, then other UI functionality, like sliders, animation and drag-drop are added on top of these.
So finding small a library that does the drag-and-drop alone is unlikely. There are alternatives, such as Scriptaculous, but you'll find they aren't smaller.
Keep in mind that jQuery isn't all that big - smaller than many images you'd use on your site. It is also cached by the browser, so it doesn't have to be downloaded with every page load.
Check out http://microjs.com/ Type in what you need and it will help you narrow down a list of libraries.
Take a look at this:
http://www.switchonthecode.com/sites/default/files/99/source/SOTC-DnDLists.js
It's not horizontal but I'm sure it can be worked with...
[update: Indeed, minor modifications made this work like a charm - code will follow]
Related
Here's a weird one that I've been wracking my brain on.
I want to do two things, in order:
Generate a masonry-style layout from a list of divs, imgs, or whatever. These will utilize images but they can be background images, within the divs, or some other method that works. This can be pure CSS or a jquery plugin.
Once the grid has been generated, apply a physics based plugin like '.throwable' to the individual divs/objects. The objects will fall on each other, but overall retain their structure, much like you'd see in Angry Birds or something.
The goal here is to paste in a list of divs, let a jquery plugin or even pure CSS automatically figure out how to align them, and then apply gravity to the masonry grid.
The problem I've run into over and over is that the masonry grid is generated... but then when I apply a physics system to it, the individual objects snap back to a different position. I think masonry wants them as "relative" while the physics system wants them in "absolute"? Not sure...
I have a rough version of my latest attempt up here if anyone wants to get an idea of what I'm attempting: http://cssdeck.com/labs/full/f5dm0zv8
Jasper's reply hinted at the solution, although I'm not sure why things seemed to work this time for me. I had tried multiple javascript/jquery based masonry plugins, and nothing had worked. I ended up trying "http://masonry.desandro.com/methods.html" and it ended up working for me. I thought I had tried this one already - maybe not? Anyways, I have a more or less working example here, but new issues have arisen: http://output.jsbin.com/runewidapi/2/
I´m currently developing my first jQuery Plugin. It´s called Fraction Slider and is a Slideshow-Framwork which allows you to animate unlimited elements (with different animations, delay, etc) per slide.
Here you can find a small demo, and also the documentation:
Demo
It´s also hosted in the jQuery Plugin repository
So, introduction is over ;)
Now i have a few question:
The general code. What could i improve, what should be replaced, etc.
As you can see, when us different animations, delays, speeds etc. the html tag for each element will have an awfully lot of data-... attributes. I would like to make that a bit more easy and maybe with less markup (damn, i dont know how to say this in english).
How could i do that - any ideas or suggestions?
What should i add to the plugin? I was think about pager/controls, fading and simple show/hide effect and maybe making it responsive.
Last but not least: i would be happy to get some general feedback about the plugin and its realization.
Looks like it doesn't support chaining. e.g.
$('.step-slider').fractionSlider().remove();
I've been seeing a bunch of website with something called tile view (I think).
The idea is you have multiple element on a html page with different width and height.
And you have a javascript that will organize randomly each element next to each other to maximize the number of element you can see at once.
An example is http://www.clipboard.com/feeds (You may have to select tile view next to the search bar)
Is there a jquery plugin already? or a native javascript that do something similar?
If not what kind of algorithm would you use to do it?
Is there a jquery plugin already?
Yes, there is a jQuery for that "already".
or a native javascript that do something similar?
Inside that jQuery there is "native" javascript that does exactly that.
If not what kind of algorithm would you use to do it?
It's explained IIRC, was a blog post outlining how it works. You would need to look that up however.
jQuery Masonry (this is probably exactly what you're looking for)
jQuery Distribute Plugin
I want to make small image browser like the one used on Myfonts.com (link) in the sidebar under "More fonts like this".
I'm wondering if there is a jQuery plugin that could do that.
I know that this is some kind of carousel, but I couldn't find any with this cool resize function on scroll.
I would suggest you take the jCarousel plugin, as it has a very good base, and modify it to your liking. You could combine it with the jquery ui slider to somehow achieve the same effect as on Myfonts.com.
I did come across something similar although not exactly the same. It might help you figure out how the resizing effect is accomplished. See http://www.eogallery.com/ and http://jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/index.html
As of today I couldn't find any out-of-the-box plugin that does what you are trying to do, but maybe if you build this, you'll post it to the jquery gallery and everyone will live happily ever after :-)
I want to build a tool (with HTML5, JS and CSS3), which helps customers to arrange elements on a website mockup (e.g. text blocks and pictures). I want to save the position of these
elements in order to reconstruct the whole mockup website later.
Maybe a grid system would be the best?
alt text http://img.skitch.com/20090817-t4p54kbxw3rj58mkmqxspj4qch.png
I would be happy to get some ideas on approaches for this challenge. Are there any similar projects, I should take a look at?
Regards,
Stefan
YUI has lots of widgets for this sorta thing with lots of examples.
Drag & Drop: Examples
Especially this example
Drag & Drop: Using Interaction Groups
All you would have to do register a listener on the drop event to send an ajax request to the server and save the xy co-ordinates.
ALSO, if you want to do resizing as well
Resize Utility: Examples
They have a few really neat examples, including this image cropper
ImageCropper Control: Real Time Crop Feedback
The jQuery framework would help you in synchronizing the JS and DHTML events. As far as other projects that use this, I'm not aware of any, but a grid model seems like a good way to go. Just make sure it's more precise than the 125px you currently have :)
EDIT: The website that was mentioned in the DHTML book I mentioned in my comment was http://www.panic.com . You can take a look at their JavaScript code for some inspiration, as they implement a drag and drop system for downloading their products.
Not sure if it'll help, but my "PanelManager" might make things a little easier (if you're not already using a larger framework with similar functionality):
DP_PanelManager
"Panels" are just normal DOM elements with extensions for common actions/modifications (moving, resizing, etc). Panels can exist within one or more "PanelManagers" which allow you to treat them as a single unit (sorting, looping, etc).
Look at the example "Drag-and-Drop with Ordering" for a simplified example of (what I think) you're looking for. You would then need to do the same kind of looping to save whatever information you want (probably just name and position).
In any case there might be some code there you can rip out - feel free to fold, spindle and/or mutilate.