external javascript menu - highlight current page

X-Received	by 10.66.102.68 with SMTP id fm4mr985393pab.27.1404289038511; Wed, 02 Jul 2014 01:17:18 -0700 (PDT)
X-Received	by 10.140.86.21 with SMTP id o21mr7145qgd.24.1404289038464; Wed, 02 Jul 2014 01:17:18 -0700 (PDT)
Path	csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!news.glorb.com!hn18no1761937igb.0!news-out.google.com!a8ni1qaq.1!nntp.google.com!w8no5160491qac.0!postnews.google.com!glegroupsg2000goo.googlegroups.com!not-for-mail
Newsgroups	comp.lang.javascript
Date	Wed, 2 Jul 2014 01:17:18 -0700 (PDT)
Complaints-To	groups-abuse@google.com
Injection-Info	glegroupsg2000goo.googlegroups.com; posting-host=89.3.107.183; posting-account=OI-fcgoAAAANkzgRSRS_Kb7wJzdeKYeV
NNTP-Posting-Host	89.3.107.183
User-Agent	G2/1.0
MIME-Version	1.0
Message-ID	<b82c2a70-e44f-4166-bd3a-727fac2dbf3a@googlegroups.com> (permalink)
Subject	external javascript menu - highlight current page
From	ba pal <bpascal362@gmail.com>
Injection-Date	Wed, 02 Jul 2014 08:17:18 +0000
Content-Type	text/plain; charset=ISO-8859-1
Xref	csiph.com comp.lang.javascript:25187

Show key headers only | View raw

Hi,

My website works using a javascript menu in an external file like the following

The javascript JsMenuShowFile.js
----------------------------------
function JsMenuShow(){
	document.write('<ul>');
	document.write('<li id="Li_style1"><a id="a_style1" href="link1_item.html">link1 page</a></li>');
	document.write('<li id="Li_style1"><a id="a_style1" href="link2_item.html">link2 page</a></li>');	
	document.write('</ul>');
	document.write('<li id="Li_style1"><a id="a_style1" href="link3_item.html">link3 page</a></li>');	
	document.write('</ul>');
	return this;
}

if(document.URL.indexOf("link1_item.html")!=-1){
	JsMenuShow();
}

if(document.URL.indexOf("link2_item.html")!=-1){
	JsMenuShow();
}

And the html page to display these items
------------------------------------------
<script language="JavaScript" type="text/javascript" src="JsMenuShowFile.js"></script><noscript><p id="DisabledJs">Your browser does not support JavaScript</p>
<p>Refer to <a href="info.html">Infos</a> for additional information</p></noscript>

My primary query is how to highlight* the current page with this menu?

My own answer to this would be to change JsMenuShow() into something different other than document.write. I know a little javascript mainly through other programming languages exposure. Has someone experienced a script similar to this? 

Would this create more overheads on the client computer as the menu is a recurring process for every page?

My second query requires additional skills as it's about highlighting* the menu above (or the parent menu as it's known I think). But the menu file works using relative links so it's unlikely javascript can find the parent menu from nowhere.

Illustration
	...
	document.write('<li id="Li_style1"><a id="a_style1" href="link1_item.html">link1 page</a></li>');
	document.write('<li id="Li_SubStyle1a"><a id="a_SubStyle1a" href="link1_subItem1.html">link1 sub page</a></li>');

As it shows, the upper parent menu is within the <li> tags as link1_item.html and the child parent menu is link1_subItem1.html

How to deal with the first query knowing that it's likely the second query will arise any time later?

Thanks,
Pascal

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

external javascript menu - highlight current page ba pal <bpascal362@gmail.com> - 2014-07-02 01:17 -0700
  Re: external javascript menu - highlight current page ba pal <bpascal362@gmail.com> - 2014-07-02 01:19 -0700
  Re: external javascript menu - highlight current page "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-07-02 11:48 +0200
  Re: external javascript menu - highlight current page Christoph Michael Becker <cmbecker69@arcor.de> - 2014-07-02 22:35 +0200

csiph-web