Background
I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics:
- Dashboard is comprised of draggable widgets arranged in a grid layout
- Widgets have a drag handle which can be clicked by the user to start dragging
- Widgets can be re-ordered by dragging and dropping the widget
Question
Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.
Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)
EDIT This one looks even better and more maintained! GRID by UberVU
Next one on the list is gridster.js
PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.
You can easily implement this.
You will get required info from
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
and
http://james.padolsey.com/javascript/inettuts-with-cookies/
First what comes to head is jQuery UI.
Use HTML 5
http://html5doctor.com/native-drag-and-drop/
You can find a lot of info here:
http://jqueryui.com/demos/draggable/
Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1
I am pretty sure this one is going to make you happy!
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
Related
I would like to add a page to my website with a layout with animated panels that auto-slide around based on which one is clicked, as in Stackexchange's Sites page:
https://stackexchange.com/sites
What language and what specific methodology did the designers of Stackexchange use for laying out that page, or more meaningfully, what language and methodology would you recommend I research, in order to learn to create something similar? Perhaps there is a tutorial somewhere for creating something similar to it?
From looking at the sources of that page (achieved by activating the developer console in Chrome and looking at the scripts panel.) I can see they are making use of the Isotope layout engine.
Isotope is a jQuery plugin written in JavaScript and the site linked above contains some solid documentation; however if you are new to JavaScript then they may be a little difficult to follow. A quick google brings up the following Isotope tutorial which may help you get started.
I've being working with a lot of WPF, and I used a lot of listviews to convey information. I wanted to create something like a detailed listview.
An example of what I'm looking for is the "listview" type interface on Facebook's newsfeed, or even Stack Overflow's question browsing list.
The data will come from an XML document. So far my solution was to use divs within divs, but unfortunately it ended up being very messy. I also tried making them with tables and then hiding the table borders (which worked to an extent) but I'm sure there must be a better way! I also heard using tables is not a very good way to do it.
I'm not even sure if the word "Listview" is the right term to describe what I'm trying to talk about. If there's a different term can you please also answer that so that I can search for that on Google too (because I've only been searching for Listview's in HTML/Javascript).
Thanks.
You can try listview plugins with ExtJs or Jquery.
Here's the listView example / doc from Jquery mobile
http://jquerymobile.com/test/docs/lists/docs-lists.html
Listview would be the term to identify the structure. The best possible way to implement it would be to use an un-ordered list ex: and style it with CSS. Its simple and not too messy.
I am working in my senior project which is a web-based system and I want to dedicate one page of the website for some useful links that are related to my website. I tried to present them in such an innovative way like showing a brief description (in a balloon or a new line or anything) about the link when the mouse comes over it.
I heard there are some JQuery templates for that. I tried to search about them but I did not get anything.
So could you please help me in this issue?
Please provide me with any guide that is helpful to do this issue.
Also, please provide me with your suggestions for presenting the useful links in somehow a nice way.
What you're talking about is a tooltip. I like the tooltip component from jQuery Tools quite a lot, and the documentation is excellent.
There's no need to use JQuery!
What you want can be achieved using only CSS.
Utilizing the :hover selector, its possible to display a box over your link when you move your mouse over it.
Here's a good link to get started.
How about something like Simpletip: http://craigsworks.com/projects/simpletip/, or it's successor qTip: http://craigsworks.com/projects/qtip2/ (hat tip #Edmund Y).
If you look at this Xmarks page, it pretty much lists all of the most popular JQuery tooltip plugins: http://www.xmarks.com/topic/jquery_tooltip, sorted by the number of people that have bookmarked them!
I'm looking for a simple Flex or JavaScript based image editing component which can be embedded in a web application. It shouldn't be a web service but rather a component that I can download and customize (i18n etc.).
I only need some basic features: most important is cropping, optional features would be rotating and adjusting brightness/contrast.
Basically something like splashup.com, but as an open source application rather than a web-service.
Thanks a lot in advance for any hints!
-- Andreas
There is pixastic.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Be sure to read the documentation to make sure the operations you are looking to perform are supported by all browsers. There are some issues with IE.
They have a editor you can try. It shows off some of the features.
Your question suggests you want an out of the box solution, or at least a base to stand on.
Quick Google search reveals editImage. This doesn't look polished or bug free, however building on this or rolling your own should not be difficult.
Here is a good article on Image Manipulation in Flex. Towards the end of it read "Cropping, Panning and Zooming", your basically looking at 5 lines of code. I think you might even be happier building this yourself.
Thanks for your answers!
I ended up customizing and extending this component:
http://blog.mediablur.com/2008/02/20/flex-image-cropping-component/
I'm looking to utilize jQuery to handle a few very common requests we get for data tables of varying sizes: scrolling, sorting, and dynamic filtering.
I've handled scrolling in the past by having two separate tables with fixed width columns, along with associated div containers for the "actual" scrolling. However, this method doesn't work with any of the jQuery-based sorting table extensions that I've come across (tablesorter being my favorite so far) as they want everything in a single table.
For filtering, they're requesting something akin to how Excel and SharePoint lists do it (basically all column values are listed in a dropdown, allowing the user to select/deselect them). I haven't seen anything like that yet, although it sounds possible.
One other related nice-to-have feature would be the ability to "freeze" a column for horizontal scrolling.
Ideally I'd like an existing extenstion, but if none are out there I'd also appreciate suggestions from any jQuery gurus on how to best implement it. My current thoughts are to dive into tablesorter and extend/update it as necessary.
To hopefully keep things focused, paging is not an option (along with anything server based, for that matter).
Update:
I do appreciate the answers so far, but none of the options given so far touch on the filtering aspect at all (that said, I must admit that jqGrid looks very good for some future projects I have). In the meantime I'll work on a custom filtering solution; if it works out I'll update again.
I came across this question as I was searching for a sortable table plugin myself; I really wasn't impressed with any of the suggested widgets, but later I discovered DataTables, and I was quite impressed. I recommend checking it out.
Maybe this excellent plug-in could do it:
Demo page
It's called jQGrid, here is the project page:
http://plugins.jquery.com/project/jqGrid
I would encourage you to try out the Flexigrid.
It has a lot of great features and I personally think it looks more professional than the jqGrid.
It doesn't have some of the features that you asking for, but I think it could be a good start. It would be great if you could work on adding some of those features to the code base.
If you are coding in c#, then I posted a blog entry about how to use LINQ to Reflection to bind JSON to the Flexigrid... if you are using another language there are other examples you can find on Flexigrid's Website & Google Group page.
a simple jQuery Scrollable Table Plugin
As mentioned in my update, I ended up using a custom filtering extension (closed source, unfortunately). I've recently started using SlickGrid and it's now my go-to grid.
I'd like to add the Laravel flavored DataTables (GitHub, jquery DataTables API) - perfect if you already work with PHP/Laravel.
Extra, koalyptus/TableFilter another custom filter table (actually, my fav).