Looking at this control that is made for Silverlight, and wondering where to find something similar for a pure HTML5 and JavaScript solution?
http://www.componentart.com/products/dv/timenavigator.aspx
Looking at the linked site, it seems like that control does quite a variety of things, so while its unlikely that you'll get an exact replica of it in Javascript, you may well be able to find controls which have the specific features that you want.
With that in mind, I'd suggest taking a look at the following:
Timeline Widget.
JSGantt
dygraphs JavaScript Visualization Library
HighCharts
(I also note that the one you linked to is 'Patent Pending', which means that they think they've done something unique and want to prevent anyone else doing something similar. Though looking at their charts on their homepage, I have to say I can't see anything particularly groundbreaking there)
Related
I am looking for a correct method to create something very similar to this (just click Next on that page). I would love to receive any suggestions on how this has been made.
I believe that it's all about a DIV wrapping many ul's. When next is clicked, probably a jQuery code is showing an hidden DIV on the right, but wouldn't know how to position it. Everything clearly must be taken from a database.
Can anyone out there give me an advice? I hope this is not the kind of a thumbs-down question, as I tought this community would have been the best place to share this. Thanks a lot.
Take a look at some existing JavaScript MVC frameworks like Backbone.js, AngularJS, or Knockout, to understand some of the design patterns and philosophies behind these kinds of dynamic UIs.
They can be powerful for tools for a modern web app, especially when you have a lot of moving parts in your UI. They'll play well with your backend and datastore via AJAX, and you get nice features like "routing" which can help you do cool things with page flow, all the while keeping your JavaScript clean and concise.
There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.
I'm going through a pretty amazing ruby on rails course. Just a second ago I learned about flash hashes that show a message after some action has been performed.
Obviously, you can apply styling to it and what have you, but I wonder if there are ready-to-go javascript snippets out there that, in the case of flash hashes, would slide in for a second, and then disappear? (much like the stackoverflow message bar that appears up top)
I don't know if learning rudimentary javascript is something I'd want to do right now (maybe later, I need to stick with one thing) so I was wondering if there was some resource that is known for ready to go scripts like that?
Merci :)
This is not exactly what you asked for but the jQuery and jQuery UI libraries provide a fair number of animation effects that you might find useful.
jQuery UI effect() demos - you can also view the source to see how it's being done.
jQuery effects - in particular, you might be interested in fadeIn() and fadeOut(). Again, you can also view the source to see how to use these functions.
I'm looking for a plug-in to present a table of data in a HTML page. Data is coming from Ajax as XML or JSON. Requirements are fairly standard:
Plug is supported, with a live community
Table binds to data, or a mechanism to fill table with data.
Columns are sortable with the standard UI
Support for filters
Support for search (assisted search)
Preferably, table looks good by default without any change. Able to customize
every aspect of the table
Support interaction. e.g. Mouse Hover or Click
Customizable.
Paging
Scroll bars
Overall I think these are very basic requirements. This question also fold another question: how do you choose a plug-in? Looking at the jQuery plugin page, shows there are 19 pages of plugins, with names such as "Yet another table plug-in".
I don't a "Yet Another ...". I'm looking for the canonical plug-in. The one that "everyone is using", which has live community, people to consult with, reasonable documentation (mainly examples), and bug fixes.
Googl'ing for 'jquery table plug-in' yields 70,000 articles, but I cannot identify any plug-in has multiple references.
Please also advise about a general strategy how do you pick a plug-in. Which web site to you go? Which blogs do you follow? etc. Down the road I'll have to choose a charting plugin (although there, there seems to be two main plug-ins that stands up: Flot and jQuery Google chart).
I don't believe that there is an ultimate strategy to find exactly the plugin you need.
At least not without trying different options. Usually i limit the selection by what a see and read about a plugin (looking at exactly the things you mention: is there a good documentation? are there demos? is it still supported?), but in the end there's no way around trying out.
That said there are two plugins i used, which both do a very decent job, though i never used them for processing json-responses, only for making existing tables more dynamic and user-friendly. But both should do what you want.
http://www.datatables.net/usage/server-side
http://tablesorter.com/docs/example-ajax.html
Lately i prefer datatables as i find the plugin easier to configure and better looking by default. (And as i use jquery-ui already i really appreciate the support for themeroller).
But i guess in the end the choice is pretty subjective.
I would recommend you jqGrid. It meets all of your requirements.
I'd like to know what can be done in a browser UI (using a browser+CSS+javascript, not using Flash or Silverlight). For example, I think it's possible to:
Drag and drop
Arrange list items horizontally, and make them behave like menu items
Make things on page visible or invisible, depending on where the mouse is hovering
I admit this is a broad question, but that's what I'm looking for: an overview of available UI techniques (preferably with, also, at least a little clue or hyperlink as to how to implement each one).
Do you know of such a list or dictionary?
I'm especially interested in any techniques for interaction and user input (i.e. not simply page layout and navigation where the end-user is only consuming information).
Edit: people answered that I should look to see what functionality is implemented in various 'JavaScript UI toolkits'. FWIW, the following are my brief review/summary after looking at some of the suggestions.
http://demos.mootools.net/ -- implements a small (not wide) variety of UI features
http://ajaxian.com/by/topic/ui -- not an organized or coherent reference, more like a blog that reviews various things.
http://jqueryui.com/demos/ -- concise, organized introduction to a dozen interactions and/or widgets
http://plugins.jquery.com/ -- a library of a couple of thousand 'plug-ins' in 20 categories ... vaster and not so immediately understandable nor so consistently documented as the jqueryui demos
http://www.dojotoolkit.org/ -- takes a bit of navigating ... the easiest introduction to all functionality might be http://dojocampus.org/explorer/
http://script.aculo.us/ -- not very big
http://extjs.com/ -- quite a variety of powerful features, with a good set of demos at http://extjs.com/deploy/dev/examples/samples.html
http://mochikit.com/ -- this is another small library
http://developer.yahoo.com/yui/ -- includes about 20 widget classes, thorough documentation (each class description includes a link to demos), and special mention for having "Layout Manager" and "CSS Reset".
http://www.midorijs.com/ -- quite small and simple, no demos
To summarize, I think the best answers (i.e. the easiest-to-browse collections of the most functionality) are:
http://extjs.com/deploy/dev/examples/samples.html
http://dojocampus.org/explorer/
http://developer.yahoo.com/yui/examples/
A very great many things can be done in JS.
Try any of these javascript libraries:
http://www.dojotoolkit.org/
http://mootools.net/
http://jquery.com/
http://script.aculo.us/
http://extjs.com/
http://mochikit.com/
http://developer.yahoo.com/yui/
http://www.midorijs.com/
If you accept the HTML Canvas as valid HTML (Microsoft doesn't), you can do even more (requires Canvas support in your browser):
https://developer.mozilla.org/en/Canvas_tutorial
http://www.blobsallad.se/
http://www.benjoffe.com/code/demos/canvascape/ - 3rd person shooter
look at the documentation for things like mootools and jquery UI, there are plenty of examples of the crazy stuff that you can do in there.
Also check out ajaxians UI section
check out jquery UI http://jqueryui.com/ as well as plugins http://plugins.jquery.com/
this is just a simple example what you can achieve via Java Script
I think you could in principle do almost anything you can think of that involves the page changing how it looks in response to user action. I mean, js can do amazing visual effects, including pretty complex animation and vectors, and retrieve data from anywhere that allows it to using ajax, so put that way you can display anything you want how you want.
The question is how much resources these take client side. While pretty much anything is possible, not everything will necessarily be practical, and I doubt there's any reliable way to decide which things will be too resource-heavy to realistically implement on the client side.
Check out JQuery and JQueryUI