FREE.JAVASCRIPT.MENU

HOME FORUM NEW! TUTORIAL SAMPLES LICENSE Advanced JSMenu

LATEST EVENTS

15 January, 2007
Discuss our scripts and get support in new Forum
31 October, 2006
New release of Advanced JSTABLE 0.1
01 July, 2005
New release of Advanced JSMENU 0.3.0: tab control support added
25 June, 2005
New release of Advanced JSMENU 0.2.1: tree control support added
11 May, 2005
New FREE.JAVASCRIPT.INFO has been launched

Rate Our Program

Excellent!
Very Good
Good
Fair
Poor

FREE ADVANCED JSTable

Description

Our free javascript table is a cool script that adds to any table advanced filters for rows, sortable columns, collapsible tbodies and more. It's free, easy to use and extremely hight customizable with CSS. Each table is implemented as plain HTML on the page, making the table contents search engine friendly and potentially much easier to deploy and customize than tables where the contents are stored inside the script.
If your site is dynamic, this may be an easier script to deploy across the entire site.

Easy to use

  • Download menu.js file from our site
  • Download sortableTable.js file from our site
  • Add the following string to HTML body: <SCRIPT SRC="sortableTable.js" LANGUAGE="JavaScript"></SCRIPT><NOSCRIPT><a href="http://free-javascript.all-faqs.info/">Advanced JSTABLE 0.1</a> IdCode: MteyYPmDwC661cWC2AXb8c0XL895lj8T </NOSCRIPT>
  • Add the following string to HTML body: <SCRIPT SRC="menu.js" LANGUAGE="JavaScript"></SCRIPT><NOSCRIPT><a href="http://free-javascript.all-faqs.info/">Advanced JSMENU 0.1</a> IdCode: 4C4l5QRF05WWcSzYx6D0dN7hoj9xJOgp </NOSCRIPT>
  • Add onLoad event to BODY tag: <BODY onLoad="InitTables();">
  • Add a visible link back to http://free-javascript.all-faqs.info
  • Now you can create advanced sortable tables just adding attribute type="sortable" to your table tags.

Eearch engines friendly

Each table is implemented as plain HTML on the page, making the menu contents search engine friendly and potentially much easier to deploy and customize than tables where the contents are stored inside the script.

Widespread Compatibility

The ideal dhtml table must be able to maintain its appearance, functionality and performance in any browser. To this end, we have tested our menu on a variety of browsers and platforms. The list below are examples of browsers that Advanced JSTABLE is compatible with:
  • IE4 and above
  • Netscape 4.05 and above
  • Opera 6 and above
  • Mozilla
  • Firefox
  • Safari
  • Galeon
  • Konqueror

Free

Our Solutions will grant free licenses to all users. The only free license requirement is that there must be a visible link back to http://free-javascript.all-faqs.info on all pages that use JSTABLE.

License

All our scripts will grant free licenses to all users. The only free license requirement is that there must be a visible link back to http://free-javascript.all-faqs.info on all pages that use our scripts and you have to insert the following code to you page.

<SCRIPT SRC="sortableTable.js" LANGUAGE="JavaScript">
/***********************************************************************
* This notice MUST stay intact for legal use
*
* Advanced JSTABLE 0.1 (GPL).
* Copyright (C) 2004-2007 FREE-JAVASCRIPT.ALL-FAQS.INFO All Rights Reserved.
* http://free-javascript.all-faqs.info/
************************************************************************/
</SCRIPT>
<NOSCRIPT>
<!-- This notice MUST stay intact for legal use -->
<a href="http://free-javascript.all-faqs.info/">Advanced JSTABLE 0.1</a>
IdCode: MteyYPmDwC661cWC2AXb8c0XL895lj8T
<!-- ------------------------------------------ -->
</NOSCRIPT>


This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

How to use

  • Download menu.js and sortableTable.js files from our site
  • Download CSS file from our site or create one
  • Add the following string to HTML body: <SCRIPT SRC="sortableTable.js" LANGUAGE="JavaScript"></SCRIPT><NOSCRIPT><a href="http://free-javascript.all-faqs.info/">Advanced JSTABLE 0.1</a> IdCode: MteyYPmDwC661cWC2AXb8c0XL895lj8T </NOSCRIPT>
  • Add the following string to HTML body: <SCRIPT SRC="menu.js" LANGUAGE="JavaScript"></SCRIPT><NOSCRIPT><a href="http://free-javascript.all-faqs.info/">Advanced JSMENU 0.1</a> IdCode: 4C4l5QRF05WWcSzYx6D0dN7hoj9xJOgp </NOSCRIPT>
  • Add link to CSS file: <link rel="stylesheet" type="text/css" href="your.css"> or add STYLE tag to HTML header:

    table {font-size: 10pt; font-family: Arial; border-right: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#6DA9FF,endColorStr=#2C75DA); width: 500px}
    tfoot td {border-top: 1px solid #aaaaaa; }
    td {border-left: 1px solid #aaaaaa; padding-left: 5px; padding-top: 2px; padding-bottom: 2px;}
    th {border: 1px solid #aaaaaa; cursor: pointer; border-right: 1px none #aaaaaa; padding: 2px; text-align: center;}
    th.ascending { background-image: url('../img/collapse.gif'); background-repeat : no-repeat; background-position : right center;}
    th.descending { background-image: url('../img/drop-down.gif'); background-repeat : no-repeat; background-position : right center;}
    th.hover { background-color: #6DA9FF; text-align: center;}
    tr.odd { background-color: #eeeeff;}
    tr.even {background-color: #e9e9ff;}
    caption {border: 1px solid #aaaaaa; border-bottom: 1px none #aaaaaa; padding: 2px;}
    #main {display: block !important;}
    div {position: static;}
    .hover {background-color: #aaaaff; }
    .filter td {border-bottom: 1px solid #aaaaaa;}

    .collapsed td {background-image: url('../img/plus2.gif'); background-repeat : no-repeat; background-position : left center; background-color: #6DA9FF; cursor: pointer; border-bottom: 1px solid #aaaaaa; border-top: 1px solid #aaaaaa; background-position-x: 10px;}
    .expand td {background-image: url('../img/minus2.gif'); background-repeat : no-repeat; background-position : left center; background-color: #6DA9FF; cursor: pointer; border-bottom: 1px solid #aaaaaa; border-top: 1px solid #aaaaaa; background-position-x: 10px;}
    .over {background-color: #aaaaff !important;}
    .hidden {display: none !important;}
    .hideselected {display: none !important;}
    .edit {border: 1px solid #aaaaaa; margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important; background-color: white !important; text-align: center;}
    .edit input {height: 15px; padding: 0px 0px 0px 0px !important; background-color: white !important; margin: 0px 0px 0px 0px !important; border: 0px none white; display: block !important; }
    .red {color: red !important;}
    .blue {color: blue !important;}
    .selected {background-color: #aaaaff !important; border: 1px solid #555555 !important;}

    MENU {font-size: 10pt; vertical-align: middle !important; border: 1px solid #ABABAB; font-family: Arial; padding: 2px 2px 2px 2px; vertical-align: middle; position: absolute; left: 0px; top: 0px; background-color: #6DA9FF; background-image: url('../img/apple.bg.gif'); display: block; margin: 0px 0px 0px 0px; filter:progid:DXImageTransform.Microsoft.Fade(Overlap=1.00) progid:DXImageTransform.Microsoft.Shadow(direction=180,color=#ABABAB,strength=3); cursor: pointer; position: absolute; border: 1px solid #aaaaaa; background-color: #dddddd; font-family: Arial; font-size: 10pt; padding: 5px;}
    MENU SPAN {background-color: transparent; padding: 3px 3px 3px 3px; border: 1px none white; vertical-align: middle; cursor: pointer; display: inline ! important; padding-right: 20px;}
    MENU DIV {background-color: transparent; padding: 3px 3px 3px 3px; border: 1px none white; vertical-align: middle; cursor: pointer; display: block ! important; padding-right: 20px;}
    .EXPANDABLE {padding: 3px 3px 3px 3px; border: 1px none white; vertical-align: middle; cursor: pointer; background-image: url('../img/arrows/black2_10x9_whitegreybox.gif'); background-repeat: no-repeat; background-position: right center; padding-right: 19px;}
    .EXPANDABLEHOVER {background-color: #2C75DA; padding: 2px 2px 2px 2px; border: 1px solid white; vertical-align: middle; cursor: pointer; background-image: url('../img/arrows/black2_10x9_whitegreybox.gif'); background-repeat: no-repeat; background-position: right center; padding-right: 18px;}
    .HOVER {background-color: #2C75DA; padding: 2px 2px 2px 2px; border: 1px solid white; vertical-align: middle; cursor: pointer; padding-right: 18px;}

  • Add onLoad event to BODY tag: <BODY onLoad="InitTables();">
  • Add a visible link back to http://free-javascript.all-faqs.info
  • Now you can create editable tables:

    <TABLE type="sortable" cellspacing=0 cellpadding=0 class="sortable">
    <caption>Table description</caption>
    <colgroup>
    <col bgcolor="#eeeeff" style="width: 25%;">
    <col bgcolor="#eefee" style="width: 25%;">
    <col bgcolor="#eefee" style="width: 25%;">
    <col bgcolor="#eeeeff" style="width: 25%;">
    </colgroup>
    <thead>
    <tr style="background-color: #5555ff !important; color: white">
    <th compare="compareStrings">String</th>
    <th compare="compareNumbers">Number</th>
    <th compare="compareDates">Date</th>
    <th compare="compareStrings">No Sort</th>
    </tr>
    </thead>

    <tbody type="filter">
    <tr style="background-color: #ffffaa !important; " class="filter">
    <TD filter="!filterRegExp" editable="true" filterClass="hidden"> </TD>
    <TD filter="filterInterval" editable="true" filterClass="hidden"> </TD>
    <TD> </TD>
    <TD> </TD>
    </tr>
    <tr style="display: none !important;">
    <TD filter2="filterNumbers">111</TD>
    <TD filter="filterInterval" editable="true" filterClass="red"><1000</TD>
    <TD> </TD>
    <TD> </TD>
    </tr>
    </tbody>
    <tbody collapse="tb1" collapsed="false"><TR><TD colspan=5 style="padding-left: 30px;">Fruits</TD></TR></tbody>
    <tbody id="tb1">
    <tr><td editable=true>apple</td><td>45</td><td>03/13/2001</td><td>Item 0</td></tr>
    <tr><td editable=true>Banana</td><td>7698</td><td>07/14/1989</td><td>Item 1</td></tr>
    <tr><td editable=true>orange</td><td>4546</td><td>07/04/1949</td><td>Item 2</td></tr>
    <tr><td editable=true>Lemon</td><td>987</td><td>08/19/2005</td><td>Item 3</td></tr>
    <tr><td editable=true>Pear</td><td>98743</td><td>01/01/2001</td><td>Item 4</td></tr>
    <tr><td editable=true>Melon</td><td>4</td><td>04/18/2001</td><td>Item 5</td></tr>
    </tbody>
    <tbody collapse="tb2" collapsed="true"><TR><TD colspan=5 style="padding-left: 30px;">Vegetables</TD></TR></tbody>
    <tbody id="tb2">
    <tr><td editable=true>Potatoes</td><td>45</td><td>03-13-2001</td><td>Item 0</td></tr>
    <tr><td editable=true>Carrot</td><td>7698</td><td>07-14-1789</td><td>Item 1</td></tr>
    <tr><td editable=true>Red beet</td><td>4546</td><td>07-04-1949</td><td>Item 2</td></tr>
    <tr><td editable=true>Garden radish</td><td>987</td><td>08-19-1975</td><td>Item 3</td></tr>
    <tr><td editable=true>Tomat</td><td>98743</td><td>01-01-2001</td><td>Item 4</td></tr>
    <tr><td editable=true>Ñucumber</td><td>4</td><td>04-18-2001</td><td>Item 5</td></tr>
    </tbody>
    <tbody collapse="tb3" collapsed="false"><TR><TD colspan=5 style="padding-left: 30px;">Berries</TD></TR></tbody>
    <tbody id="tb3">
    <tr><td editable=true>Raspberry</td><td>45</td><td>03-13-2001</td><td>Item 0</td></tr>
    <tr><td editable=true>Strawberry</td><td>7698</td><td>07-14-1789</td><td>Item 1</td></tr>
    <tr><td editable=true>Bilberry</td><td>4546</td><td>07-04-1949</td><td>Item 2</td></tr>
    <tr><td editable=true>Great bilberry</td><td>987</td><td>08-19-1975</td><td>Item 3</td></tr>
    <tr><td editable=true>Ñloudberry</td><td>98743</td><td>01-01-2001</td><td>Item 4</td></tr>
    <tr><td editable=true>Ñranberry</td><td>4</td><td>04-18-2001</td><td>Item 5</td></tr>
    </tbody>
    </TABLE>


Sample

Sample 1
Sample 2 (IE)

Table description
String Number Date No Sort
       
111 <1000    
Fruits
apple4503/13/2001Item 0
Banana769807/14/1989Item 1
orange454607/04/1949Item 2
Lemon98708/19/2005Item 3
Pear9874301/01/2001Item 4
Melon404/18/2001Item 5
Vegetables
Potatoes4503-13-2001Item 0
Carrot769807-14-1789Item 1
Red beet454607-04-1949Item 2
Garden radish98708-19-1975Item 3
Tomat9874301-01-2001Item 4
Ñucumber404-18-2001Item 5
Berries
Raspberry4503-13-2001Item 0
Strawberry769807-14-1789Item 1
Bilberry454607-04-1949Item 2
Great bilberry98708-19-1975Item 3
Ñloudberry9874301-01-2001Item 4
Ñranberry404-18-2001Item 5

Main features

  • Sortable columns
  • Filters (RegExp, arithmetic)
  • Collapsible tbodies
  • Hidden conditional filters (allow conditional highlighting)
  • Editable cells (try to click on cell in first column)
  • Selectable rows (press and hold Ctrl to select rows)
  • Header menu (Advanced sample)
  • Collapsible columns
  • Sorting and Filtering progress
  • Row selection features: Select all, Unselect all, Inverse selection, Hid selected
  • Filter features: Clear filters, Clear all filters, Hide/Show filter row, Restore hidden filters
Copyright © 2004-2005 Free JS INFO. Designed by Desing INFO