/    Sign up×
Community /Pin to ProfileBookmark

You are here indicator

Copy linkTweet thisAlerts:
Mar 02.2004

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.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@guywebauthorMar 02.2004 — Yeah i could match the title. But how would i do it?
Copy linkTweet thisAlerts:
@crh3675Mar 02.2004 — 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:
<i>
</i>&lt;html&gt;
&lt;title&gt;My Place&lt;/title&gt;

&lt;script type="text/javascript"&gt;

function LoadNav(){

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

}
&lt;/script&gt;
&lt;body onload="LoadNav()"&gt;
&lt;div id="myNav"&gt;
&lt;a href="#"&gt;Home&lt;/a&gt; |
&lt;a href="#"&gt;Other Place&lt;/a&gt; |
&lt;a href="#"&gt;My Place&lt;/a&gt; |
&lt;a href="#"&gt;Your Place&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@guywebauthorMar 02.2004 — 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.
Copy linkTweet thisAlerts:
@crh3675Mar 02.2004 — You can still use the same concept:

<i>
</i>&lt;html&gt;
&lt;title&gt;My Place&lt;/title&gt;

&lt;script type="text/javascript"&gt;

function LoadNav(){

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

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


}
&lt;/script&gt;
&lt;body onload="LoadNav()"&gt;
&lt;div id="myNav"&gt;
&lt;a href="#" class="normal"&gt;Home&lt;/a&gt; |
&lt;a href="#" class="normal"&gt;Other Place&lt;/a&gt; |
&lt;a href="#" class="normal"&gt;My Place&lt;/a&gt; |
&lt;a href="#" class="normal"&gt;Your Place&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@guywebauthorMar 02.2004 — excellent, thanks a lot, really appreciate all your help.
×

Success!

Help @guyweb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...