Index of /olemissproposal3/inlinex

Name	Last modified	Size

Parent Directory		-
_vti_cnf/	2008-07-10 10:33	-
frame0.html	2008-07-10 10:33	1.2K
frame1.html	2008-07-10 10:33	1.2K
frame2.html	2008-07-10 10:33	1.2K
frame3.html	2008-07-10 10:33	1.2K
frame4.html	2008-07-10 10:33	1.2K
frame5.html	2008-07-10 10:33	1.2K
frame6.html	2008-07-10 10:33	1.2K
frame7.html	2008-07-10 10:33	1.2K
frame8.html	2008-07-10 10:33	1.2K
frame9.html	2008-07-10 10:33	1.2K
resources/	2008-07-10 10:33	-
ws_ftp.log	2008-07-10 10:33	4.1K

Tab Navigation

Tab Navigation - by brothercake

To include the script on your page, paste this code at the end of the <body> section:


<!--  TAB NAVIGATION v1.2.2 by Brothercake  -->

<!--  http://www.brothercake.com/scripts/tabs.shtml  -->

<script language="javascript1.2" src="resources/tabs.js"></script>

You could put it at the beginning, but then it will load first, causing a slightly longer delay before there's any visible content on your page. Wherever you put the script include, it must not be inside any other containing elements.

All the customisation information is at the top of tabs.js; open it with a plain text editor such as notepad or textpad, and configure the variables.

top | style definitions | tab link definitions | control variables | browser support

Style definitions

zINDEX            // base z-order
define the base z-index, bringing the nav structure above (or below) other page content if necessary. The script creates a different number of layers in different browsers, but the total stack is never larger than 20.

baseHREF // base path
set the location of the tabs script and images relative to the page it's on.
In frameset, inline or blank targetting modes, a relative path is fine, because the tabs script is only going to be on one page. However if you use self targetting mode and the pages which use the script are in different folders, you will need to define an absolute root location, from which baseHREF is a relative path

linkTARGET // link target
the base target for all the tab links - the options are "_self", "_blank", "inline" or "framename" where framename is the name of the target frame. If you define it as "" it will default to "_self"
As well as defining the target, this variable sets the fundamental configuration:

linkTARGET = "_self" [demo]
puts the nav on single pages which target themselves - in which case the script include should be on each page on which you want the nav to appear. If you use this configuration, the script will check each page url with the link definitions to find out which tab should be raised onload - if you include the script on a page which isn't listed then none of the tabs will be raised.
Please note:
If you use self targetting mode and the pages which use the script are in different folders, you will need to define an absolute root location, from which baseHREF and the tab links are relative paths. This is necessary because the script needs to know where the tabs script and images are, and where each page is, relative to its current location, for autoUpdate and the tab-raising function to work.
This is what to do:

add this routine at the top of your customisation; it reads the location.href to discover if you're using a live or local copy, and then defines an absolute path:
var rootHREF = "http://www.brothercake.com/"; var thisLoc = document.location.href; if ((thisLoc.indexOf("http://")==-1)&&(thisLoc.indexOf("wysiwyg://")==-1)) {    rootHREF = "C:/Cake/Internet/WebPages/";    if (op5||op6) { rootHREF = "file://localhost/C:/Cake/Internet/WebPages/"; }    if (ns4||ns6||mz7) { rootHREF = "file:///C|/Cake/Internet/WebPages/"; }    }
You will need to change the paths to suit your situation. Ensure that they do not contain any spaces, or the tab-raising may not work.
Define baseHREF relative to this:
var baseHREF = rootHREF+"tabs/resources/";
Define your tab links relative to this, eg:
addTab(rootHREF+"index.html","Tabs",80,"tapestry.jpg","","#555588");

You can see a demo of this working [here]
linkTARGET = "_blank" [demo]
might be useful for triggering a series of information or picture windows. If you use this mode, it's possible to customise the blank windows by defining window properties for them.
Blank targetting should not be used to open windows which themselves contain the same tabs script; it won't work properly
linkTARGET = "inline" [demo]
draws a complete rectangle with the tabs at the top edge, like a dialogue box; there's an iframe in the center and links are loaded into this. If you use inline mode and you have other iframes on the same page, you'll need to specify the tab-frame's location in the frames array.
However netscape 4 doesn't support inline frames, so it works by loading pages into a layer, using the src attribute of the <layer> tag. Some things you should bear in mind when using inline targetting with netscape 4:

css on the inline pages may not be preserved
forms on the inline pages may not appear
the pages will have default body margins of 0
links on inline pages do not target the inline layer as they do with iframes, you would need to use javascript: urls to change the layer src
no history events are recorded
netscape layers do not scroll - only above-the-fold content will be accessible. It is possible to simulate scrolling behaviour ... but the script does not include this because it takes too much code, and lots more images

Basically, interactive content inside an inline layer in netscape 4 is not going to be easy to implement. Well it isn't. If you have something quite complex in mind, it may save your sanity just to exclude netscape 4 from the outset, which you can do using the allowILayer variable.
linkTARGET = "framename" [demo]
as part of a frameset, where the nav is in one frame and targets to another. Define the framename, and then build a frameset something like this:
<frameset rows="40,*" frameborder=0 border=0>    <frame src="tabs.html" name="tabframe" scrolling=no noresize>    <frame src="mainpage.html" name="bottom" scrolling=auto noresze> </frameset>

where the tabs.js script include goes in tabs.html. It will also work inside more complex framesets, but the script only supports a single target.
If you use this mode, you must define a framename - it is not sufficient to target to _parent, _sibling or _top, since the script queries the lack of an underscore in the target name to know that you're using a frameset, and to adjust some size and position values accordingly. Consequently, you can't use frame names which contain underscores.
The script also assumes that the frame which contains the nav is set not to scroll (so no scrollbar is present), and this assumption is part of the width calculation if you set the frame width to 100%, or the positioning calculation if you set the main alignment to "center" or "right"

frameNUM // frame number (if inline target)
if you're using inline targetting, the script assumes that the iframe is element [0] in the frames array. If this is not the case, because you have other iframes on the same page, use this value to specify the tab-frame's location in the array.
In explorer you can find out like this:
for(i=0;i<window.frames.length;i++){    if(window.frames[i].name=="inline"){alert(i);}    }

linkCURSOR // cursor type (ie and ns6 only)
specify the link cursor used for the tabs. This is only supported in internet explorer and netscape 6

frTOP // absolute top position
the distance of the tab structure's containing layer from the top of the browser window, in pixels

frLEFT // left/right offset (if bar !center aligned & width!=0)
the distance of the containing layer from the left or right of the browser window (depending on the main alignment), in pixels. This will not have any effect if the layer is centrally aligned or the frame width is set to 100%

frALIGN // main alignment (if width!=0)
global alignment in the browser window, the choices are "left", "center" or "right". If you set the frame width to 100%, then this value will have no effect.

frPADDING // frame cellpadding
the relative cellpadding between the containing layer and the tabs structure itself

frWIDTH // total frame width
the total width of the containing layer, in pixels.
The width of the tab structure's baseline is calculated from this value, and is equal to (frWIDTH - (frPADDING * 2)). Therefore if the tabs are designed to be exactly the width of the baseline (like the inline demo) then an increase in the frame padding will require an increase in the frame width, or a reduction in the tab widths. If you're using the nav as part of a frameset, this calculation is based on an assumption that the nav frame is set not to scroll.
If you set frWIDTH = 0; then the tabs will be 100% of the available width

frHEIGHT // total frame height (if inline target)
if you're using inline targetting, this variable controls the total height of the containing layer

frCOLOR // frame background color
the background color of the containing layer. Specify a hex color value or a GIF or JPEG image. Color transparency is not supported - if you set this value as frCOLOR="" it will default to light grey. However you can make it transparent by using the blank gif that comes with the script: var frCOLOR = "blank.gif";

tALIGN // relative alignment of tabs
specify the alignment of the tabset relative to the containing layer, the choices are "left", "center" or "right".
If you have the nav set up so that the baseline is exactly the right size for the tabs (like the inline demo), then you might find that using center alignment causes a 1px discrepancy in the raised-tab position - because the center point is calculated from the available free space divided by two, which might not be an integer.
If this happens, setting tALIGN = "left"; will cure it

tINDENT // tab structure indent
indent the tabs relative to the baseline. If the tabs alignment is set to "left" or "right" you'll get indentation from the baseline's edge; if it's set to "center" then you'll get an offset from the center position

tvPAD // tab vertical padding
specify vertical cellpadding for the tabs

ftOPACITY // flat tabs opacity (win/ie and ns6 only)
specify an opacity filter to make the flat tabs translucent. This is only supported in windows versions of internet explorer and the gecko browsers

rtCOLOR // raised tab override color
optionally specify a hex color value, or a GIF or JPEG image.
The raised tab normally inherits the background of its corresponding flat tab, as specified in the tab link definitions. Setting a value other than rtCOLOR = ""; will override all the raised tabs to this background.

ttALIGN // tab text alignment
the alignment of link text inside the tabs, the choices are "left", "center" or "right".

ttINDENT // tab text indent (if text !center aligned)
if the tab text alignment is set to "left" or "right", you can indent the text relative to the tab edges

tvOFFSET // tab text vertical offset (+/-)
by default, link text is vertically aligned in the middle of the tabs; this variable allows you to offset the text down (+) or up (-) the specified number of pixels

fSIZE // font size
The size is fixed absolutely in ie and ns4, but can be changed in the mozilla 5 browsers, potentially screwing up the whole layout. I suggest calm fatalism. Opera has a "zoom" feature which increases the magnification of the whole page in proportion, so relative positions and sizes should remain intact.

fFACE // font face
if you use unusual fonts it's wise to specify alternatives, eg:
var fFACE = "tempus sans itc,garamond,times new roman,serif";

If you use cursive fonts such as comic sans ms, you may need to do some tweaking with the tab vertical padding to get it to look okay, because cursive fonts are bigger than a specified pixel size. Monotype fonts are unpredictable, since they are sized differently in different browsers.
I recommend you always end a choice of fonts with one which is universally available - either Helvetica (sans serif) or Times (serif). This is essential if you want your tabs to be universally readable - for example, in ie4 sp2 over a new installation of Windows 95, the default cursive font is wingdings!

fWEIGHT // font weight
the choices are "normal" or "bold"

rfCOLOR // raised font override color
optionally specify a hex color value.
The raised tab-text normally inherits the color of its corresponding flat tab, as specified in the tab link definitions. Setting a value other than rfCOLOR = ""; will override all the raised tab links to this color.

top | style definitions | tab link definitions | control variables | browser support

Tab link definitions

The tab links are defined using an array building function. You can add more links to the navbar simply by copying and repeating this function. There is no limit to how many you can have, but it makes sense to keep the total navbar width below about 750 pixels, so it fits on 800x600 monitors.

addTab("../scripts/index.shtml","Scripts",155,"b-gradient.gif","#0000d5","#666699");

"../tabs.shtml"
the link URL. If you use frameset, inline or blank targetting modes then relative links are fine, because they're all starting from the same place.
However if you use self targetting mode and the pages which use the script are in different folders, you will need to define an absolute root location, from which the tab links are relative paths.

"Tab Navigation"
the link text.

155
the width of the tab, in pixels. If a tab is too narrow for its link, causing the next to wrap, you can adjust the tab vertical padding to compensate.

"b-gradient.gif"
the tab color. Specify a hex color value or a GIF or JPEG image. When the tab is raised it will inherit this background, unless you've defined a raised tab override color. Transparency is not supported - if you set this value to "" it will default to light grey.

"#0000d5"
the baseline color. Specify a hex color value or a GIF or JPEG image.
The baseline is the horizontal strip that runs along the bottom of the tabs structure, or as an enclosing frame in inline mode. This variable allows you to control its background independent of the raised tab, so that mixed image-color setups are possible, to very funky effect, as the frameset demo so nicely demonstrates :)
If you set this value to "" it will inherit the tab background.

"#666699"
the tab text color, as a hex color value. When the tab is raised it will retain this color, unless you've defined a raised font override color.

top | style definitions | tab link definitions | control variables | browser support

Control variables

Underneath the link definition arrays are four control variables which have a have a global effect in particular modes:

windowProps
If you use blank targetting you can customise the size and appearance of the blank windows with this variable. It's pretty self explanatory, but notice that values for scrollbars and scrolling both need to be defined, for cross-browser support:
var windowProps="height=250,width=240,status=yes, scrollbars=no,scrolling=no,toolbar=no,menubar=no,location=no,resizable=yes";
allowILayer
Inline mode, as discussed earlier, is not always useful in Netscape 4. There may be situations where you need to disable support for this mode in this browser, and you can do using this variable. If you set allowILayer = false; then inline tabs will not be rendered in netscape 4.
autoUpdate
Auto-update tracks the location of the target pages in a frameset or iframe, so that normal links between those pages, and the browser history buttons, will update the tabs automatically. You can see this working in the frameset demo and inline demo
The script continually monitors the target location and checks its url against the tab link definitions, moving the raised tab if they're not consistent. Links to pages outside your definitions will not trigger any tab changes, but the script continues to monitor until a page it recognises is loaded. Auto-update is functional in all supported browsers, but it doesn't work very well in the mac version of nestcape 4.
This feature uses a 150 millisecond timeout to check the target location. If many of your visitors use very slow computers it might be a drag for them; or you might not want this functionality anyway. Whatever the case, you can disable auto-update by setting autoUpdate = false;
You can also raise a tab manually from a link in another frame or iframe. This might be useful to indicate that pages belong to certain sections, without them actually being defined in your tabs. A function for this - remoteControl - is already there, so all you need to do is call it through the frame heirarchy and identify the tab by number.
eg in frameset mode:
eg in inline mode:
Tabs which are raised in this way will not be picked up by auto-update.
allowResize
If you keep allowResize = true; then the page will reload whenever you resize your browser. This functionality is included because the internal width of the window is an important figure in a couple of options:
1. if you have the frame width set to 100%, this value determines the total width of the tabs layer
2. if you have the main alignment set to "center" or "right", this value is used to calculate its position
So, accepting that you will lose the ability to reposition or resize the nav when the window size changes, you can disable resize/reload by setting allowResize = false;
However in netscape 4, if you resize a window containing absolutely positioned layers, they all screw up horribly, making a mess of the navbar. For this reason, resize/reload is never disabled in netscape 4.

top | style definitions | tab link definitions | control variables | browser support

Browser support

	Windows	Mac	Linux
Internet Explorer 4
Internet Explorer 5
Internet Explorer 6		?
Mozilla 0.6+
Netscape 4
Netscape 6
Opera 5		?
Opera 6			?

Style definitions
zINDEX	// base z-order define the base z-index, bringing the nav structure above (or below) other page content if necessary. The script creates a different number of layers in different browsers, but the total stack is never larger than 20.
baseHREF	// base path set the location of the tabs script and images relative to the page it's on. In frameset, inline or blank targetting modes, a relative path is fine, because the tabs script is only going to be on one page. However if you use self targetting mode and the pages which use the script are in different folders, you will need to define an absolute root location, from which `baseHREF` is a relative path
linkTARGET	// link target the base target for all the tab links - the options are `"_self"`, `"_blank"`, `"inline"` or `"framename"` where `framename` is the name of the target frame. If you define it as `""` it will default to `"_self"` As well as defining the target, this variable sets the fundamental configuration: `linkTARGET = "_self"` [demo] puts the nav on single pages which target themselves - in which case the script include should be on each page on which you want the nav to appear. If you use this configuration, the script will check each page url with the link definitions to find out which tab should be raised onload - if you include the script on a page which isn't listed then none of the tabs will be raised. Please note: If you use self targetting mode and the pages which use the script are in different folders, you will need to define an absolute root location, from which baseHREF and the tab links are relative paths. This is necessary because the script needs to know where the tabs script and images are, and where each page is, relative to its current location, for autoUpdate and the tab-raising function to work. This is what to do: add this routine at the top of your customisation; it reads the `location.href` to discover if you're using a live or local copy, and then defines an absolute path: `var rootHREF = "http://www.brothercake.com/"; var thisLoc = document.location.href; if ((thisLoc.indexOf("http://")==-1)&&(thisLoc.indexOf("wysiwyg://")==-1)) { rootHREF = "C:/Cake/Internet/WebPages/"; if (op5\|\|op6) { rootHREF = "file://localhost/C:/Cake/Internet/WebPages/"; } if (ns4\|\|ns6\|\|mz7) { rootHREF = "file:///C\|/Cake/Internet/WebPages/"; } }` You will need to change the paths to suit your situation. Ensure that they do not contain any spaces, or the tab-raising may not work. Define baseHREF relative to this: `var baseHREF = rootHREF+"tabs/resources/";` Define your tab links relative to this, eg: `addTab(rootHREF+"index.html","Tabs",80,"tapestry.jpg","","#555588");` You can see a demo of this working [here] `linkTARGET = "_blank"` [demo] might be useful for triggering a series of information or picture windows. If you use this mode, it's possible to customise the blank windows by defining window properties for them. Blank targetting should not be used to open windows which themselves contain the same tabs script; it won't work properly `linkTARGET = "inline"` [demo] draws a complete rectangle with the tabs at the top edge, like a dialogue box; there's an `iframe` in the center and links are loaded into this. If you use inline mode and you have other `iframes` on the same page, you'll need to specify the tab-frame's location in the frames array. However netscape 4 doesn't support inline frames, so it works by loading pages into a layer, using the `src` attribute of the `<layer>` tag. Some things you should bear in mind when using inline targetting with netscape 4: css on the inline pages may not be preserved forms on the inline pages may not appear the pages will have default body margins of 0 links on inline pages do not target the inline layer as they do with `iframes`, you would need to use `javascript:` urls to change the layer `src` no history events are recorded netscape layers do not scroll - only above-the-fold content will be accessible. It is possible to simulate scrolling behaviour ... but the script does not include this because it takes too much code, and lots more images Basically, interactive content inside an inline layer in netscape 4 is not going to be easy to implement. Well it isn't. If you have something quite complex in mind, it may save your sanity just to exclude netscape 4 from the outset, which you can do using the allowILayer variable. `linkTARGET = "framename"` [demo] as part of a frameset, where the nav is in one frame and targets to another. Define the framename, and then build a frameset something like this: `<frameset rows="40," frameborder=0 border=0> <frame src="tabs.html" name="tabframe" scrolling=no noresize> <frame src="mainpage.html" name="bottom" scrolling=auto noresze> </frameset>` where the `tabs.js` script include goes in `tabs.html`. It will also work inside more complex framesets, but the script only supports a single target. If you use this mode, you must* define a framename - it is not sufficient to target to `_parent`, `_sibling` or `_top`, since the script queries the lack of an underscore in the target name to know that you're using a frameset, and to adjust some size and position values accordingly. Consequently, you can't use frame names which contain underscores. The script also assumes that the frame which contains the nav is set not to scroll (so no scrollbar is present), and this assumption is part of the width calculation if you set the frame width to 100%, or the positioning calculation if you set the main alignment to `"center"` or `"right"`
frameNUM	// frame number (if inline target) if you're using inline targetting, the script assumes that the iframe is element `[0]` in the `frames` array. If this is not the case, because you have other `iframes` on the same page, use this value to specify the tab-frame's location in the array. In explorer you can find out like this: `for(i=0;i<window.frames.length;i++){ if(window.frames[i].name=="inline"){alert(i);} }`
linkCURSOR	// cursor type (ie and ns6 only) specify the link cursor used for the tabs. This is only supported in internet explorer and netscape 6
frTOP	// absolute top position the distance of the tab structure's containing layer from the top of the browser window, in pixels
frLEFT	// left/right offset (if bar !center aligned & width!=0) the distance of the containing layer from the left or right of the browser window (depending on the main alignment), in pixels. This will not have any effect if the layer is centrally aligned or the frame width is set to 100%
frALIGN	// main alignment (if width!=0) global alignment in the browser window, the choices are `"left"`, `"center"` or `"right"`. If you set the frame width to 100%, then this value will have no effect.
frPADDING	// frame cellpadding the relative cellpadding between the containing layer and the tabs structure itself
frWIDTH	// total frame width the total width of the containing layer, in pixels. The width of the tab structure's baseline is calculated from this value, and is equal to `(frWIDTH - (frPADDING * 2))`. Therefore if the tabs are designed to be exactly the width of the baseline (like the inline demo) then an increase in the frame padding will require an increase in the frame width, or a reduction in the tab widths. If you're using the nav as part of a frameset, this calculation is based on an assumption that the nav frame is set not to scroll. If you set `frWIDTH = 0;` then the tabs will be 100% of the available width
frHEIGHT	// total frame height (if inline target) if you're using inline targetting, this variable controls the total height of the containing layer
frCOLOR	// frame background color the background color of the containing layer. Specify a hex color value or a GIF or JPEG image. Color transparency is not supported - if you set this value as `frCOLOR=""` it will default to light grey. However you can make it transparent by using the blank gif that comes with the script: `var frCOLOR = "blank.gif";`
tALIGN	// relative alignment of tabs specify the alignment of the tabset relative to the containing layer, the choices are `"left"`, `"center"` or `"right"`. If you have the nav set up so that the baseline is exactly the right size for the tabs (like the inline demo), then you might find that using center alignment causes a 1px discrepancy in the raised-tab position - because the center point is calculated from the available free space divided by two, which might not be an integer. If this happens, setting `tALIGN = "left";` will cure it
tINDENT	// tab structure indent indent the tabs relative to the baseline. If the tabs alignment is set to `"left"` or `"right"` you'll get indentation from the baseline's edge; if it's set to `"center"` then you'll get an offset from the center position
tvPAD	// tab vertical padding specify vertical cellpadding for the tabs
ftOPACITY	// flat tabs opacity (win/ie and ns6 only) specify an opacity filter to make the flat tabs translucent. This is only supported in windows versions of internet explorer and the gecko browsers
rtCOLOR	// raised tab override color optionally specify a hex color value, or a GIF or JPEG image. The raised tab normally inherits the background of its corresponding flat tab, as specified in the tab link definitions. Setting a value other than `rtCOLOR = "";` will override all the raised tabs to this background.
ttALIGN	// tab text alignment the alignment of link text inside the tabs, the choices are `"left"`, `"center"` or `"right"`.
ttINDENT	// tab text indent (if text !center aligned) if the tab text alignment is set to `"left"` or `"right"`, you can indent the text relative to the tab edges
tvOFFSET	// tab text vertical offset (+/-) by default, link text is vertically aligned in the middle of the tabs; this variable allows you to offset the text down (+) or up (-) the specified number of pixels
fSIZE	// font size The size is fixed absolutely in ie and ns4, but can be changed in the mozilla 5 browsers, potentially screwing up the whole layout. I suggest calm fatalism. Opera has a "zoom" feature which increases the magnification of the whole page in proportion, so relative positions and sizes should remain intact.
fFACE	// font face if you use unusual fonts it's wise to specify alternatives, eg: `var fFACE = "tempus sans itc,garamond,times new roman,serif";` If you use cursive fonts such as comic sans ms, you may need to do some tweaking with the tab vertical padding to get it to look okay, because cursive fonts are bigger than a specified pixel size. Monotype fonts are unpredictable, since they are sized differently in different browsers. I recommend you always end a choice of fonts with one which is universally available - either Helvetica (sans serif) or Times (serif). This is essential if you want your tabs to be universally readable - for example, in ie4 sp2 over a new installation of Windows 95, the default cursive font is wingdings!
fWEIGHT	// font weight the choices are `"normal"` or `"bold"`
rfCOLOR	// raised font override color optionally specify a hex color value. The raised tab-text normally inherits the color of its corresponding flat tab, as specified in the tab link definitions. Setting a value other than `rfCOLOR = "";` will override all the raised tab links to this color.

"../tabs.shtml"	the link URL. If you use frameset, inline or blank targetting modes then relative links are fine, because they're all starting from the same place. However if you use self targetting mode and the pages which use the script are in different folders, you will need to define an absolute root location, from which the tab links are relative paths.
"Tab Navigation"	the link text.
155	the width of the tab, in pixels. If a tab is too narrow for its link, causing the next to wrap, you can adjust the tab vertical padding to compensate.
"b-gradient.gif"	the tab color. Specify a hex color value or a GIF or JPEG image. When the tab is raised it will inherit this background, unless you've defined a raised tab override color. Transparency is not supported - if you set this value to `""` it will default to light grey.
"#0000d5"	the baseline color. Specify a hex color value or a GIF or JPEG image. The baseline is the horizontal strip that runs along the bottom of the tabs structure, or as an enclosing frame in inline mode. This variable allows you to control its background independent of the raised tab, so that mixed image-color setups are possible, to very funky effect, as the frameset demo so nicely demonstrates :) If you set this value to `""` it will inherit the tab background.
"#666699"	the tab text color, as a hex color value. When the tab is raised it will retain this color, unless you've defined a raised font override color.