Mortgage Calculator | Loan Calculator | Color Lines

Script Features

The script displays a list of tags associated with all "tagged" sections on HTML page. When a visitor clicks on any tag, the script automatically hides or displays (depending on selected mode of operation) page sections associated with the tag. When multiple tags are clicked the script will hide or display all sections associated with all selected tags. Currently the script has two modes of operation:

• Display data associated with selected tags. In this mode the script displays data sections that have all selected tags associated with them. For example, if a visitor selects "red" and "blue" tags, the script will display the sections that have both "red" and "blue" tags assigned to them, but won't display sections that have only "red" or only "blue" tags. When all tags are de-selected the script displays all data sections.
• Hide data associated with selected tags. In this mode the script hides all data sections that have at least one of their associated tags selected.

Example

Click on "blue", "red" and "green" links to see how it affects colored text.

How to use it:

1. Download a file gs_tags.js (see link below) - this is the only javascript file that you will need. Put it somewhere on your web server. Do not link to original file on this server because:
   • You will be using my bandwidth, and I will not like it.
   • I may post updated version of the javascript file with the same name, and this may break your pages.
   • If somebody breaks into my server it'd be easy for them to modify the file and do some nasty things to your page, like getting user cookies for your domain, or redirecting all users from your page to some other page.
2. Modify gs_tags.js javascript file and set default settings for your site:
   • T_tag_size - set this variable to 1 if you want to display more common tags to be displayed using larger font size, and less common tags to be displayed using smaller font tags. If the variable is set to 0 then all tags will be displayed using the same font size.
   • T_add_all - set this variable to 1 if you want to add "show all" and "hide all" links to the list of tags. If this variable is set to 0 then these links won't be displayed by the script.
   • T_tag_mode - this variable sets default filtering mode. Set it to 0 for "Show data associated with selected tags" and 1 for "Hide data associated with selected tags". You can also call T_setMode function to set the mode.
3. Wrap all HTML code that you want to tag into <DIV> or <SPAN> tags. Add to these DIV/SPAN tags a class "_tags" (it should be the first class in the list) and one or more class names that represent your tags:
   <div class="_tags _red _blue">Red & Blue<div>
   <span class="_tags _red">Red only</span>
   Each tag should be prefixed by '_' character. If the tag doesn't have a '_' character in front of it then the script will assume that you provided actual class name. Multiple tags should be separated by spaces. If you need to create a tag with a space in its name then replace the space with '_'. For example, if you want to add a tag light blue then use _light_blue. If the DIV or SPAN doesn't have any tags assigned to it then use _ tag name.
   <div class="_tags real_class _light_blue _blue">Blue and light blue</div>
   <div class="_tags _">This DIV doesn't have tags assigned</div>
   When the script displays tag name it removes preceding "_" character and replaces all other "_" characters in the name with spaces. Please note that the script automatically detects tags assigned to all sections on page. These tags won't be displayed by the script!
4. Add a special DIV tag to your page:
   <div id="T_tags"></div>
   When a javascript script is loaded, it searches for all tagged sections on the page, extracts all tag names and adds them to the DIV tag that has id T_tags.
5. Don't forget to call main javascript file:
   <script type="text/javascript" src="gs_tags.js"></script>
6. You can optionally give visitors an option to change filtering mode:
   <form action="">
   <select name="mode" onChange="T_setMode(this.selectedIndex)" size=2>
   <option value=0>Show selected</option>
   <option value=1>Hide selected</option>
   </select>
   </form>
   If necessary, you can replace selection box with radio buttons, or a checkbox, and just two buttons or links.

   You can also provide an option to display/hide all data sections:

   <form action="">
   <input type="button" name="P" value="Show All" onClick="T_showAll()">
   <input type="button" name="P" value="Hide All" onClick="T_hideAll()">
   </form>
7. Optionally set styles for your tags:
   <style type="text/css">
   #T_tags { border: 1px solid #000000 }
   .T_on, T_on a { background-color: #404040; color: #FFFFFF; font-weight: bold }
   .T_off, .T_off a { background-color: #FFFFFF; color: #000000; font-weight: bold }
   .T_all, .T_all a { border: 1px solid #404040; color: #FFFFFF; font-weight: bold }
   </style>
   The script uses the following class names:
   • T_on - this class is added to all currently selected tags.
   • T_off - this class is added to all currently de-selected tags.
   • T_all - this class is added to "show all" and "hide all" links when these links are displayed by the script.

Download:

gs_tags.js v1.0 - uncompressed file

License:

The script is released under GPL v3.0 license. You're welcome to distribute the script and to use it on your web pages if you like. If you decide to modify it please make sure that you release the changed code.

Contact

If you have any questions, corrections or additions to the code, you can contact me using this form.

Spread the word:

If you use this script and like it please consider adding a link to this page. This will make it easier for other people to find this script.

(c) Copyright 2007 Gennadiy Shvets