PDA

Click to See Complete Forum and Search --> : You are here indicator

guyweb
03-02-2004, 07:48 AM
I rarely use javascript and don't even know if the following is possible. Maybe somebody can let me know?

I want to create a way of visually indicating to a user what page they are on. I want to do this by matching the text in the H1 tag of the page (there will only be one per page) with the text in an A (link) tag. If there is an exact match then a style will be applie to that particular a tag.

The problem is that the A tags will not IDs.

The script will be something like this:

Check for text match between H1 and A (link)

if there is a match then apply a style to the A tag that contains the text match.

-

Whilst i realised i can do this using css it will not work because i will not have controll of the site after it's been built. Other people will come along and add page and that's why i need an external js script that i can attach to all the pages to apply this rule.

Any help will be greatfully received.
guyweb
03-02-2004, 08:01 AM
Yeah i could match the title. But how would i do it?
crh3675
03-02-2004, 08:51 AM
Will they be maintaining the navigation along with the page title? If so, they will have to make sure that both are typed correctly.

You could include the navigation in a DIV like so:

<html>
<title>My Place</title>

<script type="text/javascript">

function LoadNav(){

var theTitle=document.title; // Get Title
var theNav=document.getElementById("myNav"); // Get Target DIV
var theContent=theNav.innerHTML; // Get Current Nav
eval("regExp=/(<[^(><)]+>)"+theTitle+"(<\\/[^(><)]+>)/"); // Create Regular Expression
theContent=theContent.replace(regExp,theTitle); // Replace Using Regular Expression
theNav.innerHTML=theContent; // Write Back Content

}
</script>
<body onload="LoadNav()">
<div id="myNav">
<a href="#">Home</a> |
<a href="#">Other Place</a> |
<a href="#">My Place</a> |
<a href="#">Your Place</a>
</div>
</body>
</html>
guyweb
03-02-2004, 09:01 AM
Yes they will be maintaining the nav and the style guide will tell them to make sure that all instances of the titles are the same.

Rather than write content the javascript needs to apply a style like this:

a {background-color:#eeeeee;}

to the match.
crh3675
03-02-2004, 10:46 AM
You can still use the same concept:


<html>
<title>My Place</title>

<script type="text/javascript">

function LoadNav(){

var theTitle=document.title; // Get Title
var theNav=document.getElementById("myNav"); // Get Target DIV

for (i=0;i<theNav.childNodes.length;i++){
curChild=theNav.childNodes[i];
if (curChild.nodeName=="A"){
strText=curChild.innerHTML;
if (strText==theTitle){
curChild.style.backgroundColor="#FFCC00";
break;
}
}
}


}
</script>
<body onload="LoadNav()">
<div id="myNav">
<a href="#" class="normal">Home</a> |
<a href="#" class="normal">Other Place</a> |
<a href="#" class="normal">My Place</a> |
<a href="#" class="normal">Your Place</a>
</div>
</body>
</html>
guyweb
03-02-2004, 10:54 AM
excellent, thanks a lot, really appreciate all your help.