As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I need a JavaScript library that supports Ajax as well as help me in making simple and neat animation effects in a website I am working on.
Which library do you recommend?
I would definitely recommend JQuery as the easiest to use and the one which requires you to write the least code. http://jquery.com/
http://script.aculo.us/
I think it fits your 'neat animation effects' requirement.
That's a pretty broad question, some of the top open source stacks are
- YUI (Yahoo)
- Prototype with Scriptaculuous
- ExtJs
- Dojo
It's a pretty personal choice based on code style, look and feel, and which one you prefer.
Take a look at Dojo/Dijit/Dojox (http://dojotoolkit.org). They have a lot of cool special effects, and a lot more that will come in handy to anyone working with Javascript.
They also keep docs and related articles at http://dojocampus.org/
I like ExtJS a lot. It's a great library for developing complex interfaces with javascript.
I've been playing with Scriptaculous and jQuery. Both are good although I'm leaning more toward jQuery.
I am a fan of YUI. It supports Animation and Ajax.
In addition, there is just a plethora of controls: menus, movable windows, tree controls, sliders, tabview, the list goes on and on. I have used their code and I've had a good cross-browser experience with it. Doesn't surprise me. They do extensive testing on the toolkit.
Stack Overflow uses jQuery if that matters. Scriptaculous tries pretty hard to do everything that you can do in Flash. Dojo has an SVG abstraction that lets you do things that are not directly supported in JavaScript.
Personally, I'm a fan of MooTools' animation classes (Fx.Tween, Fx.Morph, Fx.Transitions). Very straight-forward and easy to use. For more advance animation Fx.Slide, Fx.Scroll and Fx.Elements are also available...
It also has a neat Ajax class (Request) that will take care of all your ajax needs.
Obviously though this is my personal opinion... Any of the big ones (Yahoo UI, jQuery, MooTools, Prototype etc...) will all be able to do both Ajax and Animation so I'd suggest looking at sample code from all those libraries and chose the one you like the most!
Spry has a lot of effects that seem to be relatively easy to use.
The downside (upside?) with Spry is its packaging. It's split into many separate pieces and parts.
So if you want to use a lot of Spry, you'll either be making several calls to external javascript files, or you'll be gluing them together on your own. Spry won't do it for you neatly (like YUI does).
However if you want to just use a single component or effect, Spry is very lightweight!
If you want to implement some basic animation jQuery is ok.
Also personally I like the prototype.js
For more difficult thing we using some features of Microsoft AJAX client library
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have been reading a lot of stuff about HTML 5 recently. Something still looks very fuzzy to me and I hope somebody can help me understand it better.
Is HTML 5 for the "technology" to create the UI only? If I need to create an application to access bank accounts, how is it possible that HTML 5 will replace all other technologies? I mean there must be some kind of web service that the application has to use to access the data on the server and I can't see how that piece can be done with HTML 5.
As with any new technology there is always a lot of speculation from commentators who don't really understand it... It always made me chuckle when I heard people talking about sites being 'Web 2.0' or 'Ajaxy'
Put simply:
HTML5 is just the same old html which we've been using since the nineties but with some improvements from HTML4&XHTML1. There are a few new tags, some of which aren't even new they've just been standardised.
HTML5 provides native support for many features that used to be possible only with plugins or complex hacks (a native drawing API, native sockets, and so on). Plugins, of course, present problems:
Plugins cannot always be installed.
Plugins can be disabled or blocked (for example, the Apple iPad does not ship with a Flash plugin).
Plugins are a separate attack vector.
Plugins are difficult to integrate with the rest of an HTML document (because of plugin boundaries, clipping, and transparency issues).
Although some plugins have high install rates, they are often blocked in controlled corporate environments. In addition, some users choose to disable these plugins due to the unwelcome advertising displays that they empower. However, if users disable your plugin, they also disable the very program you’re relying on to display your content.
This is where HTML5 comes on the scene, smiles, and waves its magic wand of native functionality. You can style elements with CSS and script with JavaScript. In fact, this is where HTML5 flexes its biggest muscle, showing us a power that just didn’t exist in previous versions of HTML. It’s not just that the new elements provide new functionality. It’s also the added native interaction with scripting and styling that enables us to do much more than we could ever do before.
Take the new canvas element, for example. It enables us to do some pretty fundamental things that were not possible before (try drawing a diagonal line in a web page in HTML4). However, what’s most interesting is the power that we can unlock with the APIs and the styling we can apply with just a few lines of CSS code. Like well-behaved children, the HTML5 elements also play nicely together. For example, you can grab a frame from a video element and display it on a canvas, and the user can just click the canvas to play back the video from the frame you just grabbed. This is just one example of what a native code has to offer over a plugin. In fact, virtually everything becomes easier when you’re not working with a black box. What this all adds up to is a truly powerful new medium.
HTML 5 is indeed markup and JavaScript APIs for the browser. It isn't intended to access data on servers.
But it's rarely used on its own.
CSS adds style to content.
JavaScript makes client side code dynamic.
AJAX allows you to make asynchronous calls to services to get data, keeping your UI responsive.
Yes, you still need services.
HTML 5 replaces earlier versions of HTML, nothing more.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Google shows that there are already few generic HTML5 canvas-based libraries available. But no high-quality editing/charting controls that I used to see from "big" control developers like Infragistics, Rad, etc.
Any recommendations on what should I look at?
First of all, I don't think you'll find solutions from big companies for Javascript libraries. People using Javascript are not used to paying high sums for enterprise-ready js libraries ;).
I'll give you a rundown of the possibilities:
Highcharts is a great out of the box solution you may be after. I've used it with great success in one project. It has looots of documentation and is actively being developed on GitHub. It's easy to use, is pretty to look at (don't underestimate the looks "feature") and is interactive: you can bind / attach to events that fire on the elements like "hover over a bar" or "click a point". It does cost $80 bucks for one site for commercial use (non-commercial use is free).
Ext JS 4. Another out of the box solution is a recently (April 2011) released 4th version of a popular Javascript library Ext JS. This forth version now supports plugin-free charting (i.e. no Flash, just native technologies like SVG and VML so it works cross-browser. If you're used to desktop or enterprise features, that you usually don't find in a Javascript library like windows, layout managers, MVC, drag and drop, toolbars, menus, forms, etc., this is definitely for you. Check out the examples here.
gRaphaël is another great library and is under MIT licence (free for commercial use!). It looks a little more "Flash-y" and is more developer friendly / intensive. So you'll have to code a lot of it yourself (it's not a full-blown solution like Highcharts), but if you're fluent in jQuery, you'll feel right at home :). It's strength is the power to code anything you want and you can do lots of animations with it, like in jQuery. All the elements in a graph are SVG nodes so you can attach events to each of those and do some powerfull stuff. The demos are worth checking out.
Flot. Like alexn said, you can use Flot, but I've used it once and was not very fond of it. I don't know what exactly wasn't for me, it's a subjective thing. I'm not very fond of it's looks, but that's just me. Have a look at it yourself.
Other libraries like RGraph or Zingchart. I've not used any of those so this is purely from what I see: they look like they are in their infancy / not polished. I hope they'll improve, but have a look at them anyway and choose your winner.
But you said you want canvas-based controls. Why is that? Is it because canvas is marketed along HTML5. See, Highcharts and gRaphaël are not canvas-based, but I thought this is what you wanted so I put them in anyway. The way gRaphaël works is this (Highcharts work the same way under the hood but that is hidden to the developer): gRaphaël gives you an API (e.g. piechart()) which then creates lots of SVG elements (think of them as <div>s but with more complex shapes and graphics filters) that are then drawn. You can also set event handlers to those elements. But since IE doesn't support SVG (that's a shocker) the library translates those API calls to create VML for IE.
But canvas is different. There are no "elements" per se, you just draw lines and shapes, but you can't just bind to their events with event handlers. So for me, SVG is better (you should see some of the graphics filters that SVG is capable of, like blurring) and I think the libraries are more mature.
But don't take my word for it ;). Check them out and tell me what you think.
Flot
(source: iola.dk)
It's a nice chart control. Flot is actually used for displaying your reputation here at Stack Overflow.
what about google chart
http://code.google.com/apis/chart/
"Google chart tools are powerful, simple to use and free. Try out our rich gallery of interactive charts and data tools.
Get Started
Pie Chart - view source
"
I'm on the ZingChart Team. We render charts in HTML5 Canvas, SVG and Flash (and VML for old IE fallback).
If you have questions, you can reach our team at support[at]zingchart.com with any questions, or http://twitter.com/zingchart.
-Andrew
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I was talking with a colleague about a problem we were having and he suggested that one possible solution was to use an IFrame.
I haven't needed to use an IFrame for he last 5 years and I've done full time web application development, but it made me wonder if the concept of the IFrame and Framesets is something that is supported by browsers for backwards compatibility but really shouldn't be actively used in development any more?
it's one of the major application integration methods for facebook and myspace. and most wysiwyg html editors rely on iframe. thickbox uses iframe. drupal uses iframes. and on and on... so not sure if it's so very simple to just call iframe obsolete. i imagine it'll be actively used for a good long while still...
It's the fastest and easiest way to get any of a number of google services into a web page, where the fuller control of the API integration is not needed.
Like anything else, it is situational. It's far from dead, and there's no reason it should be dead. The web's moving to looser coupling, and IFrame is in line with that.
At best the IFrame isn't ideal for rendering local content, but, like others have said, it is the only way to get external web-content into an application without an API and for that reason it is very important to modern web-development.
No, it shouldn't.
It's a cheap standard way to integrate functionality in a single page. Also allows some useful techniques such as COMET
Not sure if it should be dead. For one of the application I worked on for the manufacturing industry, they wanted multiple tabs to be able to run multiple programs on the same page. Knowing using just regular divs using Ajax would just be a little too much for this intensive app, we used iframes. Of course, it doesn't look like iframes to the end user (using some creative Javascripting and CSS), it looks like just a regular tabbed program.
So, saying it's dead is probably a little too soon unless there are better alternatives.
It's extensively used in ad tracking and conversion tracking; it's one of the easiest ways to put a beacon into a site unobtrusively.
I think that iFrames are not dead yet, they can be used for a lot of things and though they slow the loading speed of a website (with a few miliseconds, depends on the content).
iFrames maybe, Framesets NO. this is what i think. some things can be done only with iframes believe me i searched for another solution for a long time but for eg. a jscript can be used 2 or more times with iframes but when used on a single page it may cause conflicts and sometimes only the first thing that was using the javascript is working.
so sometimes iFrames are the right way to do it, if you can`t do it any other way.
No, its commonly used in junction with AJAX.
For example, on a page where you have ongoing AJAX requests you can't disrupt the response by closing it etc. BUT, you may need to provide a file download on the same page which would normally disrupt the AJAX request. To avoid the conflict, you serve the file download through an IFrame so that the AJAX on the host page isn't disrupted.
That's at least one use case for it =)
Iframes are not dead. They are the only method of fighting several extremely annoying bugs in MSIE (such as div overlapping a <select>), and are widely used in banner exchange networks.
If you consider the fundamental building blocks of the web you will realise that the iframe should never be removed. I have the feeling that many web developers do not properly understand the concepts of data centric systems and prefer to work in a procedural, top-down, application centric manner. There are many things done with async HTTP requests and Javascript that should simply use an iframe.
There are two fundamental concepts when it comes to linking content in a data centric world like the web - cross referencing and embedding. Hyperlinks are used to cross reference data while iframes are used to embed data. URLs are used to reference data in both cases.
A simple example is linking to an image. Cross referencing an image would be done as follows:
Link to the image
While embedding an image would be achieved as follows:
<iframe src="someImageURL" />
Of course you could use the "img" element to embed an image instead, but that is specific to images... I vote that the "img" element be removed in favor of using the more generic and flexible iframe.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
As one of those people that never got around to properly learning design (or having no talent for it), the design seems to be the step always holding me back. It's not a problem for rich-clients, as the standard GUI toolkits provide some acceptable ways to design a good-looking interface, but the web is another story.
Question: Does anyone know of a high-quality framework for designing the interface of web applications? I'm thinking of standard snippets of html for an adequate set of controls (the standard html controls plus maybe navigations, lists, forms) and style sheets to give it an acceptable, modern look. If such a thing existed, it could even support themes in the way wordpress, drupal etc. allow it.
I know of the yahoo yui, but that's mostly javascript, though their grid css is a step in the right direction.
Try the samples on ExtJs.
I find them immensely useful in working out the UI. (trees, panels, modals, etc etc)
I realise this is an old thread but it still comes high up in Google searches so it's worth mentioning that Twitter have recently put out Twitter Bootstrap, a "toolkit for kickstarting CSS for websites, apps, and more" which looks fantastic! » https://github.com/twitter/bootstrap
I'm not sure that what you're looking for exists in the way you're looking for it. However, I've had some luck with places like Open Source Web Design and Open Designs, which have some really slick templates that can be adapted to a web application so they at least don't look like crap.
There are also some commercial offerings, such as Gooey Templates.
Once you're getting closer to launch, you can contact a pro to fix the details for you, or simply build on what you've got.
Edited to add: You might also want to consider learning Blueprint CSS. I've found it helps guide my layouts and helps them look "right", without constraining me to the layout constructed for another purpose.
I'll suggest Google Web Toolkit if you're a Java developer. Examples
I'll also second the suggestion for Ext JS. It's got a vast array of really slick looking UI elements, incredibly well documented code, and a strong community.
You'd probably also find the myriad of Wordpress templates reasonably useful to build on, as Wordpress is at least reasonable at separating content from layout. The also tend to have a modern bloggy feel. Of course teaming up with a talented designer is the ideal way to go in my experience! :)
This will be more than a framework OP originally wanted but I'll suggest having a look at Morfik.
You'll be able to build pretty slick user interfaces with the conventional drag&drop way and with theming support (The homepage itself is built in Morfik). There're numerous other advantages Morfik provides, though let me not drift to off-topic for the subject. You may download the trial and see...
ps. Disclaimer: I'd worked for them.
you can check out this young site, http://guitemplates.com/. The templates are quite clear and modern, and at 20 bucks each they won't break your budget.
We had the same problem so we made our own. CSS UI (http://css-ui.com/), open-source UI framework. The concept is to use pre-defined CSS classes to style any element.
Check out http://jacanasoftware.com. Their templates feature multi level tabs, clean css, it validates, and the CSS won't mess with your controls. I highly recommend them.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am looking for a text editor to be used in a web page. Where users can format the text and get a WYSIWYG experience. Doesn't need to be too fancy. But has to be easy to use and integrate into the page. Has to generate HTML as output. Support AJAX (one I checked works only with standard form submit) and has to be small in terms of download to the user's browser.
Well it depends what platform you are on if you are looking for server-side functionality as well, but the defacto badass WYSIWYg in my opinion is FCKeditor. I have worked with this personally in numerous environments (both professional and hobby level) and have always been impressed.
It's certainly worth a look. I believe it is employed by open source projects such as SubText as well. Perhaps, Jon Galloway can add to this if he reads this question. Or Phil if he is currently a user.
TinyMCE is the simplest I've found to use. I've never used it in an AJAX-enabled application, but there are instructions on how to do so on the project's wiki.
Try FCKeditor. It supports integration with most popular platforms, and it's fairly lightweight.
You might also want to look at YUI's Rich Text Editor.
If you're starting your site from scratch or haven't invested a lot of effort into another JavaScript platform, Yahoo User Interface (YUI) is a very complete JavaScript library that could help you add other AJAX elements beyond a text editor.
I just did a full day of evaluation of all the ones mentioned so far (and then some), and the one I liked the best is Obout Editor. I think it might be for ASP.NET only, so it might not work for you, but if you are using .NET, it's great. The HTML output is clean and nicely styled, and the rendered output looks the same in the editor as it does when you output it to the page (something I had trouble with when using the others due to doctype settings in the editor). It costs a few bucks, but it was worth it for us.
I found TinyMCE pretty easy to implement. And it's light on bandwidth usage too.
Using fck for some tine now, after "free text box", or something like that. Had problems only once, when I put fck inside asp.net ajax updatepanel, but found fix on forums. Problem was solved in next release.
I would like to see some nice photo browser in it, because fck comes only with simple browser that displays filename, no thumbs. The other one, that has thumbs costs bunch of money.
Didn't try it with asp.net mvc, don't know how will uploading work. It uses one ascx for wrapping js functionality.
i started out using free text box when i was doing a lot of asp.net programming, but now that most of what i do is php i've moved to the FCK editor.
while the change wasn't necessarily prompted by the language, i feel that the fck editor is a better choice because of it's versatility.
For something minimalist, take a look at Widg Editor, it's truly tiny and very simple. It's only haphazardly supported as a hobby project though.
I'm currently using the RTE component of DynarchLib, which is highly customisable - definitely does AJAX - but a bit complicated and not very pretty. It is actively supported, and you can get answers on their forum very quickly.
I previously tried Dojo's editor, and found it broken and badly undocumented. YMMV.
Edit: In response to other people's answers, I've now tried TinyMCE and found it to be excellent. More easily configurable and far fewer problems than anything else I've tried. Use TinyMCE!