Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > Adobe Web Programming > Dreamweaver (all versions)
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Dreamweaver (all versions) section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old August 31st, 2004, 06:48 AM
Authorized User
 
Join Date: Aug 2004
Location: As, , Belgium.
Posts: 21
Thanks: 0
Thanked 0 Times in 0 Posts
Default Active links format doesn't work??

Hi all of you.

For the surfer to know where exactly he/she is situated in the site's structure, I made the active links in my left frame appear in bold.

Strangely, wherever I click, even in whitespace, that link doesn't seem to be active anymore and therefore, doesn't appear in bold anymore.

How can I make sure that the active link stays in bold till I click another link in the left frame?

Thanks a lot on advance,

Ruben.

Reply With Quote
  #2 (permalink)  
Old August 31st, 2004, 04:24 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi Ruben,

Active links are only active when "activated" ;) This means when the link is clicked / when the user presses down a mouse button on the link.
Once the link has been clicked, the link defaults to a normal link again (to be exact, to a visited link).

To make a link appear selected, you'll need to do so work yourself. A common practice is to call some JavaScript in the load method of the body that dynamically changes the Css class of the link that applies to the current page.

Another way to do this is to use some Css that override the Css class for a specific link on each page.

Something like this:
Code:
<a href="home.asp" id="home">Home</a>
<a href="clients.asp" id="clients">Home</a>
Then on clients.asp, add the following Css to the <head> section:
Code:
<style type="text/css">
  #clients
  {
    text-decoration: underline;
  }
</script>
and this to home.asp:
Code:
<style type="text/css">
  #home
  {
    text-decoration: underline;
  }
</script>
If you're using a server side language like ASP, you can have this code generated automatically for you, based on the file name.

However, since you're using frames, this probably won't work for you (unless you do yourself a big favor and drop frames altogether ;))
This means you probably need JavaScript to fix this puzzle.

Some thing like this:

1. Helper function in an external JavaScript file:
Code:
function SetSelectedMenu(idOfMenuItem)
{
  if (document.getElementById)
  {
    document.getElementById(idOfMenuItem).className "selectedLink";
  }
}
2. Next, in your onload of each page call this helper function in your navigation frame:
Code:
<body onload="parent.frames['NavFrame'].SetSelectedMenu('clients');">
3. Repeat step two for the home page, but replace clients with home.

4. Next, define behavior for the selectedLink selector in your Css file:
Code:
.selectedLink
{
  text-decoration: underline;
}
5. Finally, make sure your links in your navigation menu have unique IDs:
Code:
<a href="home.asp" id="home">Home</a>
<a href="clients.asp" id="clients">Home</a>
Now, when the content frame loads, it calls the SetSelectedMenu function in the upper frame, and it passes the id of the link you want to select (clients and home, respectively, depending on the page that calls it). This method retrieves a reference to this link using getElementById and then dynamically changes its className that you have defined in your external styles sheet.

Easy, wasn't it ;)

But seriously, this is quite some work. On a frameless page, this is much easier to implement.

I haven't really tested this code (just typed it directly in this post), but I hope you get the general idea.

Does this help?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Another Night In by Tindersticks (Track 1 from the album: Curtains) What's This?
Reply With Quote
  #3 (permalink)  
Old September 1st, 2004, 02:24 AM
Authorized User
 
Join Date: Aug 2004
Location: As, , Belgium.
Posts: 21
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Well, what can I say...

thx A LOT :-)

This is the greatest help I ever got, thx for your effort on this.
I indeed get the general idea and with your explanation, I'm sure this can be accomplished.

I indeed know of the frame issues, but it's on demand...
As there's already a contract and I was hired after that... well, you get the idea.

Anyway, thx a lot again.
You're the best.

Regards,

Ruben.

Reply With Quote
  #4 (permalink)  
Old September 1st, 2004, 02:38 AM
Authorized User
 
Join Date: Aug 2004
Location: As, , Belgium.
Posts: 21
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I forgot to mention something which I thought of this night.
It's another workaround, but I won't use it.
Your's is much better and opens a lot of perspectives.

Still, I'd like your comment on this if you want to.

I thought of putting each separate link in a span-tag with each of them a unique id.
Then, for all links, you could use the OnClick > ChangeProperty behaviour.
Like this, you define all span-tags of which the link must have the inactive text-format.
And you put the just clicked link in a format which defines it is the active link.

So basically I mean that once a link is clicked, all other spans must get the 'plain' text-format and the sole one should get the altered text-format.

I just tested it and it works, but how do you think of this?

Anyway, I'd still be using your solution.
Your's makes up for a totally different dimension if I may call it that way.

Thx again,

Ruben.

Reply With Quote
  #5 (permalink)  
Old September 1st, 2004, 01:52 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi Ruben,

You're welcome. Glad I could help.

Your solution would work quite well too. In your scenario, the nav page is entirely responsible for its own behavior, which, IMO, is a good thing. Other pages in your site don't need to know about the menu, and the methods it uses to select an item.

However, it also introduces a problem. When you add more pages to your site / menu, you also have to change your menu logic. The loop that resets all the links now has to be aware of that new link, reset them and then set the new selected link.
You could minimize the impact of this by sticking to a strict naming scheme. For example, all your links in your nav page could have an ID that starts with lnk for example. Then you could set up a loop that retrieves all <span> tags in the page (getElementsByTagName) and then look at the first three characters of the id of each link to see if you have a nav link and then change the CSS class.

This way, you end up with generic code that will work, regardless of the number of links in your nav menu.

In sites with an hierarchiecal structure, I often generate an ID based on the file and path info. Combined with the onload method I showed you earlier, you can have the preselect code generated automatically. For example:

/Products/Widgets/MyCoolWidget.asp

could end up as :

<body onload="SetSelectedMenu('ProductsWidgetsMyCoolWidg et');">

With ASP, or any other server side language, it's easy to convert the file and path info to the link ID.
All you have to do now, is give each link in the menu an id attribute that matches the file location (ProductsWidgetsMyCoolWidget) in this example.

HtH,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Alles Gaat Voorbij by Doe Maar (Track 11 from the album: 4Us) What's This?
Reply With Quote
  #6 (permalink)  
Old September 2nd, 2004, 02:30 AM
Authorized User
 
Join Date: Aug 2004
Location: As, , Belgium.
Posts: 21
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thx a lot again :-)

I really appreciate your help.
You really got me on the roll now.

I owe you one.
Ruben.

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Convert British format date to American format? fyr PHP How-To 0 December 19th, 2007 03:17 PM
Convert Rich Text Format to Ordinary Format in ASP Andraw Classic ASP Basics 1 August 31st, 2007 10:05 AM
date format differs, need to force format somehow patricolsson HTML Code Clinic 2 January 12th, 2006 05:55 AM
Can't Get Percent Format to Work Properly twsinc Access VBA 2 November 19th, 2004 09:15 AM
Site relative links will not work in flash movies? themonk Dreamweaver (all versions) 0 December 23rd, 2003 06:42 AM



All times are GMT -4. The time now is 09:01 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.