Minikit

Download current version: 22. apr. 07

Minikit is a collection of visual effects and widgets for javascript/html. Some parts have been collected from other freely available libraries, such as moo.fx and nifty corners. Others are the creation of me, Troels Knak-Nielsen.

Because of this, there isn't a single license covering all of minikit. They are all fairly liberal so you shouldn't have any problems using them in your own projects. Refer to the source code for details.

Minikit works alone, but is transparently compatible with mochikit. What this means is that if you are using the mochikit library, minikit will use it's features, which are superior to the more lightweight variant, which is built-in to minikit.

The reason for this design is that mochikit - while being a fantastic library - is a bit large to include on publicly facing sites. Minikit is quite small in itself, which makes it useful in said applications. On the other hand, your application may reach a size where it makes sense to include mochikit (or perhaps some packages from it), and minikit will then simply take advantage of this.

File structure

Minikit is currently divided into three separate files:

minikit.core.js must always be included and contains the basic library used by the various widgets in minikit. The two others contain different types of effects/widgets.

minikit.fx.js is mostly a port of moo.fx, which is a collection of visual effects. It also contains an extended version of nifty corners.

minikit.widgets.js contains a number widgets to use in form elements. All of theese widgets are unobtrusive in that they extend on a standard input field such as <input type="text" />, so if the user has javascript disabled, the form will still be usable.
Some widgets have further auxilliary dependencies, such as stylesheet and images.

Samples

Some online samples, showing off the widget collection.

Feeds for this page: updates updates+comments

Comments

  1. Says: 2006-10-31 23:12:54Z
    I saw your announcement on the MochiKit mailing list. Very nice. They mostly work in Safari, but I don't see the rounded corners in the Nifty demo.
    Good work, glad to see it.
  2. Says: 2006-11-01 04:52:58Z
    Your Permissions chooser has a typo -- the 'x' stands for "executable" not "extended." FYI.
  3. Says: 2006-11-01 13:54:43Z
    Nice :D!
  4. Says: 2006-11-01 17:27:46Z
    I'm confused as to what this offers me over moo.fx and some of the other ajax framworks. Why a repackaging of other frameworks? - Rob Cluett
  5. Says: 2006-11-01 17:59:19Z
    nice stuff! keep up the good work!
  6. Says: 2006-11-01 18:00:04Z
    Many thanks.
    Now I can creating admin interfaces very easy
  7. Says: 2006-11-01 18:04:41Z

    Nice! I like the scrollTable, but have found a bug:
    The scrollTable widget doesn't match the widths of the original table and the second (created) table.
    Resizing the browser window in the example moves the column headers (in the original table) but not the data in the second data table.

    Maybe instead of: 

    container.style.width = tablewidth + "px";

    It could be: 

    container.style.width = table2.style.width = table.style.width;

    Any thoughts?

  8. Says: 2006-11-01 19:24:09Z

    @unix nerd
    Thanks - That was a leftover from the application where I used the widget. I have fixed it now.

    @Dzeims
    You're right. I have changed the code to recalculate the dimensions if it has been resized.

    @Rob Cluett
    Minikit isn't a framework - it's a collection of widgets (minikit.widgets) + a port of moo.fx (minikit.fx). The only difference between minikit.fx and moo.fx is that minikit.fx runs against the mochikit framework, where the original moo.fx runs against the prototype framework. What this offers is simply an option to use moo.fx with mochikit, rather than prototype.

  9. Says: 2006-11-02 04:56:56Z
    Nice script, but at least some of it doesn't work properly in IE; not that I use IE, but it's imperative to support. The fx.combo and fx.height appear to work at first, but upon completion the element quickly expands to its original state (although opacity will still be applied). Toggling again produces exactly the same effect (except removing the opacity effect if on odd applications).
  10. Says: 2006-11-02 06:35:17Z
    Thank you. It helped me a lot in programming dashboard front end.
  11. Says: 2006-11-02 09:11:17Z
    Excellent! thanks!
  12. Says: 2006-11-02 19:47:36Z
    I can't get the combox box working inside a table cell (td/td), anyone else tried this?
  13. Says: 2006-11-02 19:54:39Z
    Edit on the above -- the problem exists in IE only, but I'd still like to solve it.
  14. Says: 2006-11-02 22:08:54Z

    @Matt
    I have no trouble using the combobox inside a table cell. However, some widgets (including the combobox) can give some troubles in IE if they are called before the page has loaded. The problem arises if the widget is attatched to an element, which isn't accessible with getElementById. You can solve the problem by applying the delay parameter to the constructor: 

    comboBox("mycombo", ["foo","bar","farfar"], {delay: true});

    If this doesn't solve the issue, maybe you can link to a testcase, showing the problem?

  15. Says: 2006-11-03 23:25:07Z
    When I styled the "accordian" html/css, I discovered if you put a href links in the div, it threw the accordian off track. If I put a link in the second DIV layer, then it will open 4th layer, not the third layer. Strange behavior.
  16. Says: 2006-11-04 11:33:48Z
    This is leaking !
  17. Says: 2006-11-04 15:30:00Z

    @Rene Visco
    Yes, the example combines <a> tags with <div> tags. You can use a className property to distinguish the accordion tags from anchors in the text. I have updated the samples to show this.

  18. Says: 2006-11-04 19:55:24Z
    Can datepicker have time in 12 hours system or only 24?
  19. Says: 2006-11-07 11:49:33Z
    Great work! Have you contacted the moo.fx creators to suggest that they offer your MochiKit version of their library as an alternative to 'get moo.fx for prototype' ?
  20. Says: 2006-12-19 20:10:19Z
    Great stuff. How can I start the combo box in its 'off' state, then onclick toggle first to 'on'? Thanks!
  21. Says: 2006-12-20 17:01:56Z
    Sorry, I meant the box marked 'Combo' on your Moo.fx example page rather than the combo box form. I need the Moo.fx 'combo' effect to start in it's closed state. Thanks again.
  22. Says: 2006-12-23 22:20:32Z

    Just a quick update before I'm off for holiday.

    @kenman
    It appears that the problem is that the paragraphs, which the buttons are in, have a margin. When the element is completely hidden, IE doesn't render the margin, but as soon as it begins to appear, the margins are applied. The only fix I can think of, is to avoid margins in elements in proximity to the effect. I have removed the margins from the demo now, so they'll look like they're supposed to.

    @Greg
    No, and it's limited to display the date in european format. It shouldn't be too hard to change it, so I'll put it on the todo-list, for when I have some spare time (Like that'll ever happen).

    @attila szabo
    You're right. If you want to protect against that, I suggest that you use minikit together with MochiKit, since it will then use MochiKit's event handlers, that prevent leaking in IE. I don't consider it a big problem for small tricks and gadgets, and if you're building a full-blown AJAX-application, you'll need MochiKit anyway.

    @Eoghan
    No, but considering where Moo is going with mootools, I don't think they'll be interested. I may be wrong though?

    @Nice Paul
    The Height thingy works by gradually changing the height style property of the subject element, so you can let the height start at 0, and it'll expand when triggered. The Combo didn't work with this trick, so I have updated the code. You can now start the Combo in off-state by setting inline style height=0 and visibility=hidden. I have updated the examples accordingly

  23. Says: 2007-01-11 22:18:29Z
    congratulations!! very good. :-)
  24. Says: 2007-02-02 13:10:37Z
    This is awesome! Thanks for the examples.
  25. Says: 2007-03-07 13:10:51Z
    hi i'm using your accordion widget (which is great) but i'd like the windows not to move when the panel scroll up and down, Is there a way to stop that and give the accordion a fixed height? Many thanks in advance
  26. Says: 2007-03-12 00:02:14Z
    @vittorio
    You can place the widget inside a block-level (Eg. a div)element, with a fixed height.
    Unfortunately, I don't see a simple way to make the bounding element match the height of its contents - you'll have to manually pick a value big enough to match the highest panel.
  27. Says: 2007-03-12 10:41:54Z
    cool! great works...
  28. Says: 2007-03-28 21:59:08Z
    I've been trying out the combo-box in conjuction with Mochikit and it works great! Thanks for the excellent library. I've a question/suggestion regarding the combo-box widget though. The onchange of the select box should possibly signal the onblur or the onchange of the original text box so that any events tied to the latter are trigger when a new value is selected. What method do you recommend for triggering events tied to the original text-box when a new value is selected in the select box? thanks.
  29. Says: 2007-03-30 16:31:36Z
    Thank you The Accordion works ok now. I had a problem with the fonts in IE6. The fonts looked like they had a shadow or something but I added a background-color to the
    and everything is ok now. Thanks again
  30. Says: 2007-04-22 11:08:01Z
    @satchit
    The newest release will trigger an onchange event on the textfield, when updated from the select.
  31. Says: 2007-04-23 14:15:50Z
    thanks! Looking forward to using it. :-)
  32. Says: 2007-06-22 14:16:27Z
    your download link still points to http://candyscript.com/projects/minikit/download/minikit-2006-12-23.zip
    http://candyscript.com/projects/minikit/download/minikit-2007-04-22.zip works to get the newest version that is mentioned in the link.
  33. Says: 2007-09-19 13:30:39Z
    having problems with minikit accordion and older safari versions. the accordion just won't open - not on click and also not on page landing. some hints how to fix that?
  34. Says: 2007-10-20 14:10:00Z
    having the same problem as andrea (on Safari 2.0.4)

Post Comment




HTML markup allowed in comments. All comments are moderated before posted on the website.