Tuesday, July 13, 2010

Horizontal Accordian




This is a horizontal accordion written in javascript (JQUERY). You can download this from horizontal accordion.

How to use it

to use it include "horizAccordian.min.js" in your html and then call this as
$("#yourDiv").horizAccordian(headerWidth,animationDuration);

headerWidth is width of each head you want to assign. And animationDuration is time of animation.
you can copy formate of html from example given inside zip file.
you can assign any border are padding are margin it will handle it.

demo:

  • head number 1

    accordion body number 1
  • head number 2

    accordion body number 2
  • head number 3

    accordion body number 3

Monday, July 12, 2010

Advance javascript combobox


As there is no inbuilt combo box for web application, I have developed a  combo box application. It is very simple to use, very fast, and have many features.
List of feature currently supported are.
  1. Default text( defaultText ):  It can set any of the given k ( key ) as default at start.
  2. Maximum display result(maxDisplayResult): Can be set how many number of result should be shown at any moment.
  3. Trigger at initialization (triggerAtStart): If you want to get selected data at initialization of combo box ( by default true).
  4. Hide drop down button (hideButton) : You can hide drop down button ( by default false).
  5. Show loading icon (showLoadingIcon): You can show loading icon if you are using data from server to show result ( by default false).
  6. Ignore number of characters (ignoreNumberOfCharacters) : You can ignore number of  characters before showing result ( by default 0).
  7. No fill up at initialization ( noFillUpAtStart ): You can ignore filling any data at initialization.
  8. Hint text (hintText): You can set hint text ( combo will show hint text only if there is no data is selected ).
  9. Css for typing box ( inputBoxCSS ) : You can provide css properties as key value pairs for typing box.
  10. Tab index ( inputTabIndex ): You can provide tab index to combo.
  11. Short key ( shortKey ): You can provide short key ( by default 'ctrl + shift + c').
  12. Search function ( searchFunction ): you can provide your own search function ( combo will use your search function to filter data from given list).
  13. Result function ( resultFunction ): Use this function if you want to show result somewhere.
Current Value and Key
Default text( from the list only )
Max results at a time
Hide combo button true false
Show loading icon true false
Fill no data at init true false
Hint text
Css for input box
Tab index
Short key
Hide scroll bar true false
Show result after this number of characters

ComboBOx: