473,385 Members | 1,478 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Highlight left nav based on user position

Hi,
I have a webapp that has several jsp pages. The main page has a left
nav and it loads the sub pages when requested. Can somebody please give
an easy way to track the jsp page you are currently viewing and then
highlight the left nav accordingly.
Ex. My left nav has three items Company, Profile, About.
When user is clicking on pages under company (there can be more than
one sublevel) Company on the left nav is to be highlighted.
Thanks,
Martin

Jul 23 '05 #1
1 1532
Martin Lira wrote:
Hi,
I have a webapp that has several jsp pages. The main page has a left
nav and it loads the sub pages when requested. Can somebody please give
an easy way to track the jsp page you are currently viewing and then
highlight the left nav accordingly.
Ex. My left nav has three items Company, Profile, About.
When user is clicking on pages under company (there can be more than
one sublevel) Company on the left nav is to be highlighted.
Thanks,
Martin

Yes, it can be done. I'm guessing that you have onmouseover/out
functions that make the button change, or maybe you've used CSS
but the technique is much the same.

When the page loads, have a function run over the links and for
any that have an href filename that matches the file name of the
current page, set the link to the required state and remove the
onmouseover/out functions.

An example is below. Just save is as index.html and blah.html.
Whichever page is loaded, its link will be solid red and won't
display any onmouseover/out behaviour. If you've used CSS, just
use the same thing to modify the class or whatever. If you've
used an image, just set the image src and onmouseout image src
to the same as the onmouseover image src.

Of course this method fails if you've used javascript links
(bad) or added anchors to the links, but that can be dealt with
too in the getFilename() function. I've replaced the
onmouseover/out with an empty function 'cos I can't seem to
remove them.

<html><head><title>play</title>
<script type="text/javascript">
function fixLinks() {
var docFile = getFilename(document.location + '');
var lnks = document.links;
var len = lnks.length;
for (var i=0; i<len; i++) {
if ( getFilename(lnks[i].href) == docFile){
lnks[i].style.color = 'red';
lnks[i].onmouseover = emptyFn;
lnks[i].onmouseout = emptyFn;
}
}
}

function getFilename(x) {
var cutFrom = +x.lastIndexOf('/') + 1;
return x.substring(cutFrom,x.length);
}

function emptyFn() {}
</script>

</head><body onload="fixLinks();">

<a href="index.html"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'"Index page</a>
<a href="blah.html"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'"blah page</a>


</body></html>

--
Fred
Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

15
by: 50295 | last post by:
Hi everyone, This one is better experienced than explained, so I'm including a code sample below. Please and save (as an html file) and view with NN or Firefox (or maybe even Mozilla), and then...
3
by: Pete Wilson | last post by:
How can I highlight the <input type="submit"> object that I want to highlight? 1. In my form, the user enters his ID. He sees two submit "buttons," left labeled Cancel, the right labeled Signup....
4
by: Phill | last post by:
Here's what I'm doing to make the right context mnue show up based on what node was cliked: private void tvwMenu_MouseUp(object sender, MouseEventArgs e) { //Select Node When Right Clicked &...
6
by: LU | last post by:
A)I build a datagrid based on a calendar date selection. B)When user clicks a button column on the datagrid I want to highlight this row. I use the code below to highlight the row. ***** CODE...
0
by: jonipony | last post by:
HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600...
35
by: shapper | last post by:
Hello, I am creating a search engine which searches keywords inside SQL database and displays the results in a web page. In the results web page I would like to give a grey background to the...
6
by: Samuel Rhodes | last post by:
Hi I am trying to write a code snippet that would display a '?' sign on the top left of a control. I do not want to hard code the positioning of the DIV which will contain that '?'. Is it...
1
by: raja npedia | last post by:
Hello sir/madam, i have a one img file, in this file i search one keyword, suppose 'sample' , how to highlight this word in img file using javascript. i have one program , <!DOCTYPE HTML PUBLIC...
3
sujathaeeshan
by: sujathaeeshan | last post by:
Hello all, I want to highlight or select data grid row based on first letter of first column in data grid with keyboard. Just by pressing the key of first letter of the column ,it has to...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.