473,491 Members | 2,430 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

How can I highlight clicked menu item?

3 New Member
Hi all,

I have a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state.

Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element.

Take a look at a basic example I've mocked up, and see the code below:


CSS:

Expand|Select|Wrap|Line Numbers
  1. #navlist {
  2.     font-family:Arial, Helvetica, sans-serif;
  3.     font-size:.8em;
  4.     font-weight:bold;
  5.     list-style:none;
  6. }
  7. #navlist a {
  8.     display:block;
  9.     width:155px;
  10.     color:#fff;
  11.     text-decoration:none;
  12.     background:url(../images/tab.gif) no-repeat;
  13.     padding-top: 7px;
  14.     padding-right: 4px;
  15.     padding-bottom: 6px;
  16.     padding-left: 10px;
  17. }
  18. #navlist a:hover { 
  19.     background-position:0 -29px;
  20.     color: #1e5ebd;
  21. }
  22. #navlist a:active {
  23.     background-position:0 -58px;
  24.     color:#1e5ebd;
  25. }



HTML:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <title>Test Page</title>
  7.  
  8. <link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />
  9.  
  10.  
  11.  
  12.  
  13. <script>
  14. function changeFlash(url){
  15. var d=document;
  16. (d.all)? d.all("flashMov1").movie = url :
  17. d.embeds["flashMov2"].src = url;
  18. }
  19. </script>
  20.  
  21. </head>
  22.  
  23.  
  24.  
  25. <body>
  26.  
  27.  
  28.  
  29.     <!-- Tour Box Begins Here -->
  30.  
  31.     <div id="box">
  32.  
  33.         <div id="titleBar"></div>
  34.  
  35.         <div id="content">
  36.  
  37.             <div id="menu">
  38.  
  39.  
  40.  
  41.  
  42.                 <ul id="navlist">
  43.                     <li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>
  44.                     <li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>
  45.                     <li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>
  46.                 </ul>
  47.  
  48.  
  49.  
  50.             </div>
  51.  
  52.             <div id="videoDisplay">
  53.                   <object id=flashMov1
  54.                     classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  55.                     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
  56.                     width="233" height="156">
  57.                     <param name="movie" value="sb-main.swf" />
  58.                     <param name="quality" value="high" />
  59.                     <param name="SCALE" value="exactfit" />
  60.                     <embed src="sb-main.swf"
  61.                     width="233" height="156" name=flashMov2 quality=high
  62.                     type="application/x-shockwave-flash"
  63.                     pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
  64.                   </object>
  65.             </div>
  66.  
  67.         </div>
  68.  
  69.     </div>
  70.  
  71.     <!-- Tour Box Ends Here -->
  72.  
  73.  
  74. </body>
  75.  
  76. </html>
Jan 27 '10 #1
4 4120
larztheloser
86 New Member
1) Give each of your menu items a unique CSS id
2) In the function changeFlash, make it so it sets the background to another value for the correct layer.
Jan 27 '10 #2
mojobullfrog
3 New Member
Thanks Larz. I think this solution might do the trick.
Jan 28 '10 #3
mojobullfrog
3 New Member
Here's a follow-up, with a twist:

What if I wanted to replicate the function of the first menu item, with a flash button? - that is, when the flash button is clicked, it loads the first flash movie and also highlights the first menu item. I can easily do the first part using the following AS2 code attached to the button:


Expand|Select|Wrap|Line Numbers
  1. on (release, keyPress "<Enter>") {
  2.         url = "f1.swf";
  3.         getURL("javascript:changeFlash('" + url + "');");
  4. }

But I'm not too sure how to do something similar to highlight the first menu item though. Assume this is the method I'm using:


Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <script>
  5. function changeFlash(url){
  6.     var d=document;
  7.     if (d.all) d.all("flashMov1").movie = url;
  8.     else      d.embeds["flashMov2"].src = url;
  9. }
  10. </script>
  11.  
  12.  
  13. <script type="text/javascript">
  14.  
  15. function highlightLinks(obj) {
  16.    var linkList = document.getElementById("rollover").getElementsByTagName("a");
  17.    for (i = 0; i < linkList.length; i++) {
  18.       linkList[i].className = "";
  19.    }
  20.    obj.className = "selected";
  21. }
  22.  
  23. </script>
  24.  
  25.  
  26. </head>
  27.  
  28.  
  29.  
  30. <body>
  31.  
  32. <div id="rollover">
  33. <a href="javascript: changeFlash('f1.swf')" onclick="highlightLinks(this)" class=""></a>
  34. <a href="javascript: changeFlash('f2.swf')" onclick="highlightLinks(this)" class=""></a>
  35. <a href="javascript: changeFlash('f3.swf')" onclick="highlightLinks(this)" class=""></a>
  36. </div>
  37.  
  38.  
  39. </body>
  40.  
  41. </html>
Jan 28 '10 #4
larztheloser
86 New Member
Shouldn't that be posted under "flash"?
Jan 28 '10 #5

Sign in to post your reply or Sign up for a free account.

Similar topics
3
2882
highlight a menu item in frameset?
by: cpliu | last post by:
I have a page with 3 frames. The left one is the navigation, the top one is the graphic and title, the lower-right one is the content area. I'm wondering if it's possible to add a highlight to...
HTML / CSS
1
2379
Help File: Empty Screen Or Menu Item
by: Tim Marshall | last post by:
I'm putting together my first help file (using Easy Help, http://www.easyhelp.com/). So far, so good. I'm able to use the Help File and Help Context ID to have things from my help file pop up...
Microsoft Access / VBA
1
2462
Setting focus to menu item
by: Mark Smith | last post by:
Hello, I have an application where the user once they have pushed a certain button and completed a function want the focus set to a menutem, as this is always the next thing they do. Is it...
C# / C Sharp
0
1054
How highlight menu item?
by: Woody Splawn | last post by:
We have a Winform with Menu items across the top. There are a number of menu items all horizontal across the top. When an item is selected things change in the bottom part of the screen. It would...
Visual Basic .NET
1
2188
Determining which Menu Item is Clicked
by: Elliot | last post by:
The code creates two menu items at runtime and I want to be know which menu item was clicked in the Menuitems_Click procedure. Sender.Gettype.Name returns the value "MenuItem" only. Any help is...
Visual Basic .NET
3
1149
Problem re-enabling menu item
by: johndevlon | last post by:
Hi, Can someone please help me. I've got a strang problem in Visual Studio 2005 I've created a windows application, using an MDI form and top menu. When a menu item is clicked, a new instance...
Visual Basic .NET
2
1852
Get notification of user clicking on menu item
by: Nathan Baker | last post by:
Hey all, I've had to dive down into unmanaged world from .NET recently to subclass the IE browser window for the purposes of adding menu items. I've gotten the items added thanks to the Win32...
C# / C Sharp
2
3131
How to get the text of a menu item that's clicked.
by: abhisoni | last post by:
Hi, i m hooking the messages that come whenever any menu item is clicked. This is done on a global scale i.e. it handles all the msgs generated for any appln. Now i 've to do this thing...
C / C++
0
1429
How to highlight child menu?
by: nomad | last post by:
Hi, I have the menu below. I was wondering if it was possible to highlight the selected child menu item when the user hovers over it? <span id="MainMenuHolder" onmenuitemclick="OnClick"...
ASP.NET
0
7154
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
1
6858
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
7360
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
0
5451
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice
1
4881
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA
0
3086
Trying to create a lan-to-lan vpn between two differents networks
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
Networking - Hardware / Configuration
0
1392
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
C# / C Sharp
1
633
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP
0
280
bsmnconsultancy
Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us