		Home\|Contacts\|

Article Base

Author Options

New account

Read articles

Manage Articles

Submit Category

Client Products

Calendar

Time Selector

Text Link

Marks System

Menu Bar

Server Products

Sitemap Gen BETA

Photo Viewer

Poll Builder

Counter

Guest Book

Where am i?

LinkExchange

Sample

Here is a sample of what you can do with comTextLink:

Top

Download

DOWNLOAD comTextLink

1) We thank you to fill the data below previous to make the download

Country
Name
Email

Your data will never be transmited to any other person or external entity under no circunstances and will only serve statistic purposes!

2) Click the button below in order to proceed with the download.

3) We would like to remind you of some opportunities for contribution. I provided to you at no charge, and you have every right to redistribute the software. I depend on people willing to contribute their time and support to the project to ensure that my work remains free and available at no cost.

You can help. The basic options consist of Contributing Work or if you have no time Donating Funds.

We appreciate your support for the project.

Top

Installation Process

How to install.

Congratulations, you’ve just downloaded the comTextLink.zip file, which contains a sample set of files that will allow you to quickly set up your own Menu Bar on your server and web pages.

This process will detail the steps needed to install and use comTextLink on your web server.

After downloading the comTextLink.zip file, the included files have to be extracted at the location specified by the user on the server and have to respect the following hierarchy.

The comTextLink.zip file contains the following files:

comTextLink.htm (sample html file that will display the comTextLink component, open this file to see the resulting sample),
comTextLinkD.js (set of javascript functions that will build the comTextLink component. This file has to be placed into the comTextLink folder),
comTextLinkP.js (set of parameters used to build the comTextLink component. This file has to be placed into the comTextLink folder),
Sample set of images (these images have to be placed in the images folder).

If for some reason the comTextLink.zip file is damaged or you don’t have winzip or equivalent installed on your computer, please copy the following contents to the respective folders as described above.

comTextLink.htm

To copy the content, press CTRL+A then CTRL+C

comTextLinkP.js

PARAM2['font2'] = "Verdana";
PARAM2['fontsize2'] = "10";
PARAM2['fontcolor2'] = "#000000";

PARAM2['bgcolor'] = "#AAAAAA";
PARAM2['bgcolor2'] = "#FFFFFF";
PARAM2['bgcolorover'] = "#DDDDDD";
PARAM2['colorover'] = "#FF0000";
PARAM2['width'] = "180px";
PARAM2['margin'] = "3px";
PARAM2['bordercolor'] = "#000000";
PARAM2['bordersize'] = "1px";
PARAM2['folderopen'] = "comTextLink/images/button_menos.gif";
PARAM2['folderclosed'] = "comTextLink/images/button_plus.gif";

var TEXT2 = [
              ["Breaking News n.º1,0,close,",
                 ["It has been a long day for the president<BR><BR>[See More],link.htm"] 
              ],
              ["Breaking News n.º2,0,open,",
                 ["Oil price rises again<BR><BR>[See More] ,link2.htm"] 
              ],
              ["Sports,0,close,",
                 ["Arsenal: Henry stays!!!<BR><BR>[See More] ,link2.htm"] 
              ]
           ]

To copy the content, press CTRL+A then CTRL+C

comTextLinkD.js

// ************************************************
// This file has been written by David Domingues
// you are free to use it and change it as you need
// but i will ask you to keep this header on the file
// and never remove it.
// comTextLink downloaded at http://www.webrickco.com
// webrickco@gmail.com
// ************************************************
// JavaScript Document
function filtro_onclick(botao, hlink, Linhas,closed,open, table, bordercolor, bordersize) {
   if (hlink.value=='-') {
      hlink.value='+';
      botao.src=closed;
      Linhas.style.display = 'none';
      table.style.borderBottom = bordersize + ' solid ' + bordercolor;
   }
   else {
      hlink.value='-';
      botao.src=open;
      Linhas.style.display = '';
      table.style.borderBottom = 'none';
   }
}

function menu_onclick(objecto) {
  open(objecto,"_self");
}

function onMenuIn(id, objecto, bgcolorover) {
   document.getElementById(id+'wbackground').value= objecto.style.background;
   objecto.style.background=bgcolorover;
}
function onMenuInT(id, objecto,colorover) {
	 document.getElementById(id+'wcolor').value= objecto.style.color;
   objecto.style.color=colorover;
}

function onMenuOut(id, objecto) {
   objecto.style.background=document.getElementById(id+'wbackground').value;
}

function onMenuOutT(id, objecto) {
   objecto.style.color=document.getElementById(id+'wcolor').value;
}

function createMenu(id,MENU,PARAM)
{
   var wbody = parseInt(PARAM['width'],10) - parseInt(PARAM['margin'],10);
   document.write("<INPUT ID=\""+id+"wbackground\" NAME=\""+id+"wbackground\" TYPE=\"HIDDEN\">");
   document.write("<INPUT ID=\""+id+"wcolor\" NAME=\""+id+"wcolor\" TYPE=\"HIDDEN\">");
   document.write("<TABLE CELLPADDING=\"0\" CELLSPACING=\"0\" height=\"4\" width=\""+PARAM['width']+"\" border=\"0\">");
   document.write("<TR>");
   document.write("<TD>");

for (i=0;i<MENU.length;i++)
   {
      header = MENU[i][0].toString().split(",");
      document.write("<BR>");
      if (header[2]=="close")
      {
         document.write("<TABLE id=\"table"+id+i.toString()+"\" CELLPADDING=\"0\" CELLSPACING=\"0\" height=\"4px\" width=\""+PARAM['width']+"\" style=\"border-top: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; border-bottom: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; border-left: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; border-right: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; padding: "+PARAM['margin']+" ']+"']+""+PARAM['margin']+" ']+"']+""+PARAM['margin']+" ']+"']+""+PARAM['margin']+"\">");
      }
      else
      {
         document.write("<TABLE id=\"table"+id+i.toString()+"\" CELLPADDING=\"0\" CELLSPACING=\"0\" height=\"4px\" width=\""+PARAM['width']+"\" style=\"border-top: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; border-left: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; border-right: "+PARAM['bordersize']+" solid "+PARAM['bordercolor']+"; padding: "+PARAM['margin']+" ']+"']+""+PARAM['margin']+" ']+"']+""+PARAM['margin']+" ']+"']+""+PARAM['margin']+"\">");
      }
      document.write("<TR id=\"dav"+id+i.toString()+"\" style=\"background: "+PARAM['bgcolor']+" color: "+PARAM['fontcolor']+"\">");

if (content[1].indexOf(".") < 0)
         {
            document.write("<TD id=\""+content[0]+"\" style=\"font-family: "+PARAM['font2']+"; font-size: "+PARAM['fontsize2']+"px; color: "+PARAM['fontcolor2']+"\" width=\""+wbody+"px\">"+content[0]+"</TD>");
         }
         else
         {
            document.write("<TD id=\""+content[0]+"\" style=\"cursor: hand; font-family: "+PARAM['font2']+"; font-size: "+PARAM['fontsize2']+"px; color: "+PARAM['fontcolor2']+"\" width=\""+wbody+"px\" onmouseover=\"onMenuInT('"+ id + "', this, '"+PARAM['colorover']+"');\" onmouseout=\"onMenuOutT('"+id+"', this);\" onclick=\"menu_onclick('"+content[1]+"');\">"+content[0]+"</TD>");
         }
         document.write("</TR>");
      }  
      document.write("</TABLE>");
   }
   document.write("</TD>");
   document.write("</TR>");
   document.write("</TABLE>");
}

To copy the content, press CTRL+A then CTRL+C

Top

How it works

Changing parameters.

First thing you should do in order to create a comTextLink component on your page is to define the way it will look like on the page. For this, the parameter files offer you 2 sets of parameters:

General design parameters (which will define how it looks):

comTextLink width on the screen

PARAM['width']: total width of the comTextLink component,

Header item parameters

PARAM['font']: font of the text of the button,
PARAM['fontsize']: size of the font of the text of the button,
PARAM['fontcolor']: color of the font of the text of the button,
PARAM['bgcolor']: color of the button background.

Item parameters

PARAM['font2']: font of the text in each item,
PARAM['fontsize2']: size of the font of the text in each item,
PARAM['fontcolor2']: color of the font of the text in each item,
PARAM['bgcolor2']: color of the item background.

Mouse action

PARAM['bgcolorover']: color of the background when the mouse is over the item,
PARAM['colorover']: color of the font of the item when the mouse is over it.

General margin

PARAM['margin']: size of the margin inside before each item.

Open and Close visualizations

PARAM['folderopen']: relative or full path and image of the open image,
PARAM['folderclosed']: relative or full path and image of the closed image.

Content parameters (which will tell what items to show)

Button and item content parameters:

Each header item and item contents must have the following format:

[

["Header text, level(0), state(open/closed)”

["item text, link location"],
[…]

],
[…]

]

In blue is defined the header item structure, in red, the item that belong to the high level item.
Note that last item or header item description has no comma termination.

Your web file.

After parametrization of the comTextLink component, the only work your web file will have to do is to draw the component according to your requirements. You can do that as follow:

Include in the header of your web page, the 2 comTextLink.js files comTextLinkD.js (procedure file) and comTextLinkP.js (parameter file) as follow:

<Script type="text/javascript" src="comTextLink/comTextLinkP.js"></script>
[…]
<Script type="text/javascript" src="comTextLink/comTextLinkPn.js"></script>

<Script type="text/javascript" src="comTextLink/comTextLinkD.js"></script>

Note that it is possible to include as many parameter files as necessary and have various menus in the same page.
Define a <FORM> tag in your webpage in which the comTextLink control will be held. It is requested to define as many FORM tags as comTextLink controls needed in the page.
<Form name="tab">
<Script type="text/javascript">createTextLink(MENU1,PARAM1);</script>
</Form>
[…]
<Form name="tabx">
<Script type="text/javascript">createTextLink(MENUn,PARAMn);</script>
</Form>
Call the function that will create the comTextLink control on your webpage, for example:
<Script type="text/javascript">createTextLink(MENU1,PARAM1);</script>

Note that the function createTextLink has 2 parameters:
- Menu information variable that is defined in comTextLinkP.js and comTextLinkP1.js (in the example MENU2 and MENU1),
- Parameter information variables that are defined in comTextLinkP.js and comTextLinkP1.js (in the example PARAM2 and PARAM1).

Improve the component

Well, this component is far from being perfect, and if you have the will to improve it, nothing can prevent you to open the comTextLinkD.js file and dive in the code.

Enjoy it…

Home|Contacts|Privacy Policy

Top

Recommend us

delicious

stumbleupon