Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: Highlighting currently selected page
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 6/19/2004 at 09:50 PM
Highlighting currently selected page


Some want to make menu indicate section the visitor is currently on. Described approach can be used with any Tigra Menu product including Tigra Tree Menus.

First of all we need the way to highlight one particular item in the block. This can be done with the wrappers - see Setting item colors independently within single block

Now we need to make menu know which item to highlight.

Method #1 (simple, but requires a lot of distributed maintenance)
You can produce separate items file for each section of the site with corresponding menu item highlighted and link on of those files depending on what you want to be selected.

Example: you have 3 main sections: about, products and contact. You create items_about.js, items_products and items_contact.js files - all with the same structure, but with highlighting wrapper applied to about, products and contact items respectively.

Method #2 (a bit more complicated, but at least you?ll have only one items file to maintain)
You maintain single items file and apply wrapper to all items that may be highlighted. Wrapper compares received text (item caption) and compare to some global variable (say CURRENT_ITEM) it they match then wrapper returns HTML for highlighted item, if they don't wrapper returns HTML for normal item. Now in each document where you want to highlight some menu item you define that global variable before linking items file.

Example:
in products.html

Code:
<script language="JavaScript">
<!--// set item caption to highlight
var CURRENT_ITEM = 'products';
//-->
</script>
<!-- items structure. menu hierarchy and links are stored there -->
<script language="JavaScript" src="menu_items.js"></script>


in menu_items.js:

Code:
var MENU_ITEMS = [
[wrap('about'), 'index.html', null],
[wrap('products'), 'products.html', null,
['product1', 'product1.html'],
['product2', 'product2.html'],
['product3', 'product3.html']
],
[wrap('contact'), 'contact.html']
];

function wrap(caption) {
if (caption == CURRENT_ITEM)
return '<font color="red">' + caption + '</font>';
else
return '<font color="white">' + caption + '</font>';
}


for those who likes compact code here is the alternative to above:

Code:
function wrap(caption) {
return '<font color="' + (caption == CURRENT_ITEM ? 'red' : 'white') + '">' + caption + '</font>';
}


Method #3 (no distributed maintenance, but has some limitations)
This method is similar to above but instead of global variable we will use information about URL of current page.

Example:
in menu_items.js (note that wrapper now takes whole item?s array as parameter):

Code:
var MENU_ITEMS = [
wrap(['about', 'index.html', null]),
wrap(['products', 'products.html', null,
['product1', 'product1.html'],
['product2', 'product2.html'],
['product3', 'product3.html']
]),
wrap(['contact', 'contact.html'])
];

function wrap (item) {
if (window.location == item[1])
item[0] = '<font color="red">' + item[0] + '</font>';
else
item[0] = '<font color="white">' + item[0] + '</font>';
return (item);
}


Note that to make URLs match you?ll have specify exact full URL of the document. Below is more advanced version of wrapper which will extract filename from full path with parameters:

Code:
function wrap (item) {
var path = String(window.location).split(/\//);
var file = path[path.length - 1].split(/\?/);

if (file[0] == item[1])
item[0] = '<font color="red">' + item[0] + '</font>';
else
item[0] = '<font color="white">' + item[0] + '</font>';
return (item);
}


This will work fine when all files are in the same directory. If this is not your case then you?ll need to customize path extraction code. Now about limitations: This approach is not applicable if you want to highlight ?products? when you?re on ?product2.html?. Well, it?s possible to find the way around, but you?ll end up with some document naming convention and custom path comparison code (i.e. highlight ?products? if current document has ?/products/? somewhere in its URL).

Hopefully this gives some idea about available approaches. Attached are working samples based on Tigra Menu v2.0

Attachment: highlight_samples.zip (69.58kb)
This file has been downloaded 2248 times
View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Product Page Tigra Menu
Product Demonstrations Live Demos:
Traditional Blue
White Steps
Inner HTML
All Together
Frames Targeting
Free Download Free Download
Free Download Menu Builders
Online Builder
Builder for Windows
Product Documentation Documentation:
Documenation Page
Change Log
Menus Comparison Table
Support Forum Support Forum
 
Tigra Menu PRO
Product Demonstrations Live Demos
Alignment & Multimenus
Unlimited Depth
Item sizing and positioning
Inner HTML
Frames, Targeting
Static Positioning
Free Download Menu Builders
Online Builder
Product Documentation Documentation
Documenation Page
Tigra Menu PRO FAQ
Change Log
Menus Comparison Table
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
 
Product Page Tigra Menu GOLD
Functionality demos Functionality demos
Multiple
Cross-framed
Select-boxes
Effects
Design demos Design demos
Icons & arrows
Idea!
Hi there!
Matrix
MS Style
XP Style
Dots
3D-Buttons
Product Documentation Documentation
Documenation Page
Change Log
Menus Comparison Table
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
 

Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004