Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #25187 > unrolled thread

external javascript menu - highlight current page

Back to article view | Back to comp.lang.javascript

Contents

  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

#25187 — external javascript menu - highlight current page

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

[toc] | [next] | [standalone]

#25188

oops highlight* means any change in formatting, bold, color, highlight...

[toc] | [prev] | [next] | [standalone]

#25189

ba pal <bpascal362@gmail.com> wrote on 02 jul 2014 in
comp.lang.javascript: 

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

Your code looks like JS from the last century,
before anyone had ever heard of CSS and Regex.

 
> 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;
>}

btw, why the "return this" ?

Why not just forget about the overhead 
of external loading and do:

===========================================
<ul style='display;none;' id='myMenu'>
[...]
</ul>

if( /link[12]_item\.html/.test(location.href) ){
   document.getElementById('myMenu').style.display =
     'block';   
};
============================================

[Or if you really want an external file, 
use serverside includes, and/or full serverside code?]

> 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"

language="JavaScript" is even more ancient.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#25192

ba pal wrote:

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

IMHO that's a bad idea in the first place, when you referring to client
side scripting.  You should rather do this server side (SSI, PHP,
NodeJS, etc.)

Please avoid Google Groups for posting to Usenet newsgroups.  You and
your readers would have a much better experience, and you'd likely get
more and better replies.

-- 
Christoph M. Becker

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web