473,614 Members | 2,074 Online
Bytes | Software Development & Data Engineering Community
+ 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 4122
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
2891
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 the menu item that its content is currently displayed in the right side. Since it's only 1 file for the navigation, it has to know what was clicked last and use a highlight graphics for that button after it was clicked or be able to detect its...
1
2388
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 when F1 is pressed. But how do I do this when my Access App screen is empty? A hidden form? Also, how do I have a menu item that pulls up the help file? When I open the help file on its own, there is a contents item tht appears, I'd like to...
1
2464
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 possible to say after a button click to set focus to the third item of main menu? I cannot see anything on focus for menus?
0
1062
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 be helpful if when the user selects a top level menu item if that item were highlighted or bolded or otherwise setoff in someway. Is this possible? Is it possible to have a top level menu item highlighted or setoff when it has been selected?
1
2192
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 appreciated. Private Sub Dim mainMenu1 As New MainMenu()
3
1154
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 of a form appeirs. At the same time, i'm disabling the menu item to prevent opening it again.
2
1861
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 API "InsertMenu" call, but they don't do anything. The problem is, I don't own the menu, so I don't process the result codes that are returned from TrackPopupMenu (or TrackPopupMenuEx). I don't know if IE uses the IContextMenu mechanism that the...
2
3141
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 for only the "Help" menu item, as this is the most common one. I want to check whether the clicked menu item has the "Help" caption or not. This can't be done with the ID, as diff appln have different CtrlIDs. I think it can be done using the...
0
1439
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" style="width:100%; clear:both;"> <asp:Menu ID="MainMenu" runat="server" Orientation="Horizontal" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-
0
8182
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8130
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8579
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8279
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8433
tracyyun
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
4127
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2568
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 we have to send another system
1
1747
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1425
bsmnconsultancy
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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.