File link identification in CSS menu

**lcklck** · Dec 4, 2012 09:32

HI, I'm new here, hope I'm doing this right!
I am developing a site with a standard vertical menu bar in CSS. The menu resides in the site .dwt file. I am trying to enhance the menu with an action which needs to identify the file which is opened when the menu link is clicked. This will highlight the file which is open. Here's the code:

Code CSS:

#home #homeLink,
#about #aboutlink,
#membership #membershipLink,
#membernews #membernewsLink,
#artists #artistsLink,
#perspectives #perspectivesLink,
#events #eventsLink,
#links #linksLink,
#photogallery #photogalleryLink
 {
 background-color: #FFFFFF;
 background-position: 145px 100%;
 padding-right: 15px;
 padding-left: 30px;
 font-weight: bold;
 border-left-style: inset;
 border-bottom-style: outset;
 border-bottom-width: medium;
 border-left-width: thin;
}

The process needs to identify the file using an ID attached to the <body> tag. The problem is that the .dwt will not allow the <body> tag to be editable, so I can not attach the ID to the <body>.

How can I attach the ID so that the file can be identified to the code? Thank you very much

**Pullo** · Dec 4, 2012 13:40

Hi there,

Welcome to the forums!

So, the first question would be, is there any particular reason that you are using .dwt files (they're DreamWeaver templates, right?)
AFAIK, they define editable areas and you simply cannot change anything which has not been defined as such when using DreamWeaver to edit them.

Apart from that, my suggestions would be as follows:

Use a different text editor to edit the .dwt file. Then you can change what you want.
The following JavaScript will dynamically add an id to the body. This is however, a horrible solution, so please only use as a last resort

Just add this to your HTML in an ediable area:

HTML Code:

<script>
  window.onload=(function(){document.getElementsByTagName("body")[0].id = "someID";})
</script>

HTH

**lcklck** · Dec 5, 2012 18:21

Hi, thanks for the help.

The reason for the .dwt file is that the dynamic web template contains the basic structure for
the website design, it contains the header, navigation, background and a few other things, all in the template; and all secondary pages are linked to that template. With that in place I only have
to change one file to get changes across the website, all attached files are then updated automatically. So, I make one change to the .dwt, and 10 subsequent files are updated without any further effort on my part. I’ve been using this process on old websites I created in Front Page years ago, and it is still available in Exp Web 4, so I’m still using it. The editable regions that I define on the .dwt file are all I need to present the content of the subsequent files. This has worked fine and it still does, except for this problem with file identification. I can change the .dwt file easily, but that does not help me with the subsequent file identification. Any change made to the .dwt is propagated throughout all the subsequent files and that is not what I need. I need a way to identify each of the subsequent files individually, and the only space that is editable in these files is in the areas designated as editable in the .dwt, and the <body> tag is not editable.

I’ll have a run at the JavaScript. I’ve never used it before, so it should be interesting to test.

Thanks again,

larry.k

**lcklck** · Dec 8, 2012 21:02

Originally Posted by Pullo

Hi there,
[/LIST]Just add this to your HTML in an ediable area:

HTML Code:

<script>
  window.onload=(function(){document.getElementsByTagName("body")[0].id = "someID";})
</script>

HTH

Pullo, I inserted the Java into my files and the identification works just fine.
Thanks for the tip!

larry.k

**Pullo** · Dec 9, 2012 00:49

I'm glad it worked.
Thanks for taking the time to follow up

User Tag List

Thread: File link identification in CSS menu

Thread Tools

Display

File link identification in CSS menu

Thanks for the Javascript!

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions