What grid library does swivel.com use? It looks pretty nice. Is it made inhouse? In other words, what good JS grid libraries are available?
it's made inhouse with prototype. not that much actual scriptaculous stuff is needed for the grid though. we initially looked at dojo's grid when we started (about 6 months ago) and it didn't do as much as we needed and we would've had to customize the hell out of it anyway. mootools might have a decent one now too.
Swivel is a Ruby on Rails site and is using Prototype and script.aculo.us. The CSS doesn't look like any particular system that I recognize but that's not surprising. I think rolling your own CSS is way more common than using some CSS "framework".
Related
I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.
I was contemplating writing a UI toolkit where setting the position and size of an element/widget was intuitive and powerful. Here are some examples of how it would be used (not currently implemented):
ui("Panel").size(". 40").pos("0 0").attach(element);
ui("Textarea").size(". %-10").pos("0 40").attach(element);
ui("Panel").size(". 10").pos("0 bottom+5");
Where . means auto, % means 100% and the possibility to add pixels to percentages.
Does anything like said exist (even as a jQuery plugin or something)? Somethings just aren't possible with pure CSS.
If you want to create it in Javascript you will have to make the script read the ui code then convert to css. This would cause too much overhead and wouldn't really be worth the hassle. It would be nice to have a quicker more intuitive way to create styles but unfortunately without paying in efficiency it wont work too well.
I would be very wary before lunching into this. This would give any devloper joining your project a major headache of needing to learn your new layout mechanisims.
I have yet to see what CSS can not do, so you may want to look into what it can do further before going ahead look at the various examples from http://www.csszengarden.com/ . I'm not saying CSS is easy but it is standard.
If you need more power look at CSS3 the majority of which can be achived using jQuery.
Sorry to say but I think you are heading down the wrong road by building your own. Use standard, tested, well knowen and documented way. Don't reinvent the wheel unless you are in the wheel making business.
Ok - have been tasked with possibly an impossible (or at least a potentially nightmarish) scenario.
Need to come as close as possible to reproducing PowerPoint-like effects via HTML/JavaScript (the spec is large and ugly, so I will spare you the details).
Ultimately, I am looking for a solid launching point. I have used both Prototype/Scriptaculous as well as jQuery in many projects, and based on what I am seeing, it appears jQuery has the more plug-in available, so am leaning towards using jQuery.
Can anyone point me to some plug-ins, articles, or anything else that would help me in accelerating the research on this so I can define to my client what can and cannot be done.
Any other suggestions from you jQuery gurus are welcome of course.
Thanks -
What do you mean with "PowerPoint-like" effects. If you mean animations between slides you should look into
the Effects available with the standard jQuery download (fadeIn, fadeOut, slideDown, slideUp, ...)
the jQuery Easing plugin
the jQuery Cycle plugins effects browser
I would certainly look at jQuery UI as well, which adds a number of effects. See here for a current list. Click on the link for each to see several demos, there are quite a few options for some that are powerpoint-ish.
For example, try the various options in the dropdown here.
The jQuery documentation is very good:
jQuery animate docs
However, if you are trying to achieve very complex effects you will almost certainly benefit from using a different framework. jQuery is a fantastic tool - particularly with the DOM, but animation isn't its strongpoint.
MooTools has a particularly good animation library (MooTools began life as a JavaScript animation framework) with a number of core modules that give you flexible tools to create complex animation chains yourself as well as a number of official and community-provided plugins. My recommendation would be to at least have a look at that first. You can certainly achieve this in jQuery but you will be making it more difficult for yourself!
MooTools homepage
Mootools Core Documentation
My $0.02: If you're doing complex effects, you need the library that runs the fastest, not the library that is the easiest to work with.
I've been asked to do the front end for a web app, and to use ExtJS specifically.
I've been working through a couple of tutorials, but I've not seen much variation on the default ExtJS look and feel except for some subtle changes to the colors and what not.
The design I've been handed seems to be a radical departure from the standard ExtJs look and feel. So before I head down a dead end or start chasing wild geese, I wondered wether any ExtJS experts out there could point out any potential pit falls in the design, or is everything do-able?
The design is here...
Definitely possible, IF you have pretty strong CSS skills and not afraid to customize the JS components to some extent. You're going to be overriding a lot of the default stylesheet content to get this look-and-feel, and for certain aspects it may require tweaking the markup generated by a component by default. If you are new to Ext JS this may be a bit daunting, but once you wrap your head around it you can do about anything you want.
Yes, it is definitely possible.
ExtJS is designed to be easily customised. With some CSS knowledge, you should not have problems getting that look and feel.
Just as an example, you may want to check out this service, which uses a very customized ExtJS skin:
Filespots - Find Out More
ExtJS Forum - Disussing Filespots
Filespots using ExtJS http://www.filespots.com/static/web/images/en/invite-users.jpg
I'm searching for a Javascript library to create line charts like the ones of Google Analytics. When the mouse is over a point, a box shows you the data.
An example is at http://wikirank.com/en
No Flash or Air, only JS and client-side Canvas...
Better if Free...
Edit: If you want a free library, try Flot.
Emprise Charts is a commercial library that I've seen featured on news sites.
Another option is to use Google's visualization APIs.It's pretty easy to use, and they have a several options for displaying data. One thing to keep in mind is some of the visualizations require you to send your data to their server, though none of the canvas/svg ones have this requirement.
There's JS-Charts which looks pretty awesome.
Or, if you fancy rolling your own you can create your own charting component using this library...
As an alternative to Flot, if you are using Prototype.js as JS framework, you can use Flotr.
Dojo also has something similar, though the example shown doesn't have similar functionalities but can be implemented to behave like the one you want,
http://dojocampus.org/explorer/#Dojox_Charting_2D_Lines,%20Markers,%20No%20Axes,%20Purple%20Theme,%20Custom%20Min%20Max
Raphael.js is pretty good at making graphs with svg/vml, you have to write some custom code though, but you can make some really nice animation with it, next to that it's compatible with ie6+ (only not with android 2 browsers).