Javascript error when selecting Spry Menu Bar in Design View

Hi there,
I get the following error message when trying to format the Spry Menu Bar in Design View:
"while executing inspectSelection in spry_menu.htm, a Javascript error occurred."
I have tried the following troubleshooting steps:
deleting site cache
closing/re-opening Dreamweaver
deleting Spry Menu Bar and recreating - same error occurs.
Other information:
I am using a MacBook Pro
it happens when clicking on the Menu Bar itself. I just want to change the properties
the Spry Menu Bar does not appear in Live View.
Here is a link to my site on Browserlab. It has not yet been published:
https://browserlab.adobe.com/en-us/index.html#zoom=100;state=use;view=0;url=dreamweaver%3A %2F%2Fsite%3AHope%2520Against%2520Hope%2FHAH_home.html;browsers=WXPIE6000%2CWXPIE9000%2COS XFF7000%2COSXSF5000%2CWXPCH14000
Is it a case of changing one of the values in the spry_menubar.js file?
Can anyone help?
Thanks,
Charlie

Hi there,
The problem appears to have returned. I am getting the same error message as before and also an error saying there is a syntax error in my source code. Dreamweaver tells me which line the error is in:
var MenuBar1 = new Spry.Widget.MenuBar("hope_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
In response to your earlier questions/points:
I am using version 0.13 of SpryMenuBar.js (is this what you mean?)
The menu now shows in Live View as I would expect it to
Here is a link to my published site:
http://hopeagainsthopeuk.co.uk/HAH_home.html
Do you have any further advice?

Similar Messages

Glassfish 2.1 Admin Console Javascript Error when selecting cluster targets

I recently updated to Firefox 4 and when using the GlassFish 2.1 Admin Console and you have to manage the cluster targets for specific resources there is a javascript error which prevents you from selecting target cluster options. Basically you select what you want, but then it removes it immediately after.
Using FireBug I can see the error below:
uncaught exception: [Exception... "Could not convert JavaScript argument - 0 was passed, expected object. Did you mean null? arg 1 [nsIDOMHTMLSelectElement.add]" nsresult: "0x80570035 (NS_ERROR_XPC_BAD_CONVERT_JS_ZERO_ISNOT_NULL)" location: "JS frame :: http://localhost:4848/theme/META-INF/dojo/dojo.js :: <TOP_LEVEL> :: line 645" data: no]
Line 0
This functionality works fine in other browsers.
Thanks.

Hi there,
Can you check the JDK version and see the compatible with your weblogic installation ?
You can refer the certification matrix from Oracle to check the compatible version of JDK. Here you go - Oracle Fusion Middleware 12c (12.1.3.0.0) Certification Matrix.
Most probably, this issue will occur when JDK is not compatible with weblogic installation..
Lakshman

Error when selecting date range in query designer

hi all,
when iam trying to select date range in query designer like 01.04.2009 to 10.04.2009 it has to select only that dates where as it is selecting all the dates in between those like 010.04.2009,01.03.2009,01.02.2009.why this is happening ,iam unable to understand.plzz help me in this issue.
Vamshi D Krishna

hi ,
i have created a variable as you told but no use.still i have to select the dates manuallyone after the other.for more user friendly can i have a calander where i can select date ranges.is it posible to have calander for selecting date ranges instead selecting dates one by one,if posible i request you to give the detailed steps.plzz guide me in this issue.thanks in advance.
Vamshi D Krishna

Spry Menu Bar Javascript Error - items[i].getElements..."a")[0] is undefined

I have used a spry menu bar on several websites now, and It works very well.
However, I get a javascript error everytime a page loads. Like I said the menu bar works, but i would like my page to run error free.
The error is this items[i].getElements..."a")[0] is undefined
and it occurs in the following block of code from the spry js file.
// safari doesn't support tabindex
    if (Spry.is.safari)
        this.enableKeyboardNavigation = false;
    if(this.element)
        this.currMenu = this.element;
        var items = this.element.getElementsByTagName('li');
        for(var i=0; i<items.length; i++)
            if (i > 0 && this.enableKeyboardNavigation)
                items[i].getElementsByTagName('a')[0].tabIndex='-1';
            this.initialize(items[i], element);
            if(Spry.is.ie)
                this.addClassName(items[i], this.isieClass);
                items[i].style.position = "static";

Hi,
The problem could be in your HTML-code or even in your modified style sheet.
So that we do not have to guess, please give us these code, preferably by supplying an online URL.
Ben

Spry menu bar won't update when published

I am building a dreamweaver webpage though a template.
for some reason it will not change the spry menu bar to update the changes made to the links on it.
that and the links won't work on the website (i uploaded it to a test website).
I am not sure if it is the same problem.
I changed the links from site to document relative.
I also checked the codes in http://validator.w3.org/check and http://jigsaw.w3.org/css-validator/ .
I also read this link and it didn't help me http://helpx.adobe.com/dreamweaver/kb/paths-dreamweaver-templates.html .
Can someone help please!
Thank you

I am not sure why that will not upload to the site correctly.
I am uploading to a godaddy server. Is there a way I should be saving things (links and such) that I might be doing wrong? am I naming my links incorrectly? how do I make them so they will work once uploaded.
I followed the suggestions that you made and it looks like it is there but for somereason when i preview the page in a browser or live view the background image (parchment) doesn't show up on the screen.and the spry menu bar only comes up as an unordered list. I am not sure what would be causing this.
I have attached the code for 2 pages the first is the code of the template test file you suggested I make and the second is the code for the education connection page (this is a page that was made from the template and the background image is not working-i had this problem before but i thought it was fixed as the website has it fixed when i published it)
TEST SITE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Jan Kardys' Literary Agency</title>

<style type="text/css">
#header {
    float: left;
    width: 1000px;
#Menu_bar {
    float: left;
    width: 190px;
#Page_Content {
    float: right;
    width: 1000px;
    font-family: "MS Serif", "New York", serif;
#footer {
    float: left;
    width: 1000px;
#Main_content {
    float: left;
    width: 395px;
    padding-left: 100px;
#xtra_content {
    float: right;
    width: 395px;
    padding-right: 100px;
    font-family: "MS Serif", "New York", serif;
#container {
    width: 1000px;
    margin: 0 auto;
    background-image: url(file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/Images/Parchment.gif);
    overflow: hidden;
#header_title {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #0C3;
    float: left;
#header_menubar {
    float: right;
</style>
<style type="text/css">
body {
</style>
<script src="/js/enhance.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryDOMUtils.js"" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<script type="text/xml">

</script>
<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
        MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
    background-color:transparent;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: normal;
    font-size: 16px;
    font-style: normal;
    padding:0;
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarFixedLeft {
    float: left;
    width: 80em;
.MenuBarFixedCentered {
    float: none;
    width: 80em;
    margin-left:auto;
    margin-right:auto;
.MenuBarFixedCentered br {
    clear:both;
    display:block;
.MenuBarFixedCentered .SubMenu br {
    display:none;
.MenuBarFullwidth {
    float: left;
    width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;     /* Zero out margin on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
    padding: 0px 0px 0px 0px;
    background-color:transparent;
    border-width:1px;
    border-color: #cccccc #ffffff #cccccc #ffffff;
    border-style: none solid none solid;
#MenuBar .MenuItemFirst {
    border-style: none none none none;
#MenuBar .MenuItemLast {
    border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#33ff66;
    background-color:transparent;
    padding: 6px 15px 6px 15px;
    width: 10em;
    width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-style: normal;
    background-color:transparent;
    padding:0px 2px 0px 0px;
    border-width:1px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:transparent;
    color:#00ff33;
    padding: 6px 5px 6px 5px;
    width: 7em;
    width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: transparent;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #000000;
#MenuBar .SubMenu .MenuItemHover {
    background-color: transparent;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #333333;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: transparent;
    min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: transparent;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>


</head>
<body>
<div id= "container">
<div id="header">
<div id="header_title"><h1>Jan kardy's Literary Agency</h1></div>
<div id="header_menubar">
</li>
    </ul>
    
    <ul id="MenuBar">
      <li> <a href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/index.html">Home</a></li>
      <li> <a href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/JanKardys.com/about_jankardys.html">About Jan Kardys</a></li>
      <li> <a href="#">Resources</a>
        <ul>
          <li> <a href="/Education_connection.html">Education Connection</a></li>
          <li> <a href="/submission_guidelines.html">Submission Guidelines</a> </li>
          <li> <a href="#">Blogs</a>
            <ul>
              <li> <a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
              <li> <a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Netwroking Blog</a></li>
            </ul>
          </li>
          <li> <a href="#">First Steps to Publishing</a></li>
          <li> <a href="#">Library & Publishing Events</a></li>
          <li> <a href="#">Art Gallery</a> </li>
        </ul>
      </li>
      <li> <a href="#">Clients</a></li>
      <li> <a href="#">Contact Jan Kardys</a> </li>
    </ul>
    <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar MenuBarLeftShrink",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 200,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
    </script>
</li>
      </ul>
</div>
</div>
<div id="Page_Content">
<div id="Main_content">hi</div>

<div id="xtra_content">
    <h3>News & Events </h3>
    <p> </p>
</div>
</div>
<div id="footer"> <h6>Webpage designed by James S. Molina</h6></div>
</div>
</body>
</html>
EDUCATION CONNECTION CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Jan Kardys' Literary Agency</title>

<style type="text/css">
#header {
    float: left;
    width: 1000px;
#Menu_bar {
    float: left;
    width: 190px;
#Page_Content {
    float: right;
    width: 1000px;
    font-family: "MS Serif", "New York", serif;
#footer {
    float: left;
    width: 1000px;
#Main_content {
    float: left;
    width: 395px;
    padding-left: 100px;
#xtra_content {
    float: right;
    width: 395px;
    padding-right: 100px;
    font-family: "MS Serif", "New York", serif;
#container {
    width: 1000px;
    margin: 0 auto;
    background-image: url(/Images/Parchment.gif);
    overflow: hidden;
#header_title {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #0C3;
    float: left;
#header_menubar {
    float: right;
</style>
<style type="text/css">
body {
</style>
<script src="/js/enhance.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryDOMUtils.js"" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<script type="text/xml">

</script>
<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
        MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
    background-color:transparent;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: normal;
    font-size: 16px;
    font-style: normal;
    padding:0;
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarFixedLeft {
    float: left;
    width: 80em;
.MenuBarFixedCentered {
    float: none;
    width: 80em;
    margin-left:auto;
    margin-right:auto;
.MenuBarFixedCentered br {
    clear:both;
    display:block;
.MenuBarFixedCentered .SubMenu br {
    display:none;
.MenuBarFullwidth {
    float: left;
    width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;     /* Zero out margin on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
    padding: 0px 0px 0px 0px;
    background-color:transparent;
    border-width:1px;
    border-color: #cccccc #ffffff #cccccc #ffffff;
    border-style: none solid none solid;
#MenuBar .MenuItemFirst {
    border-style: none none none none;
#MenuBar .MenuItemLast {
    border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#33ff66;
    background-color:transparent;
    padding: 6px 15px 6px 15px;
    width: 10em;
    width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-style: normal;
    background-color:transparent;
    padding:0px 2px 0px 0px;
    border-width:1px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:transparent;
    color:#00ff33;
    padding: 6px 5px 6px 5px;
    width: 7em;
    width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: transparent;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #000000;
#MenuBar .SubMenu .MenuItemHover {
    background-color: transparent;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #333333;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: transparent;
    min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: transparent;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>


</head>
<body>
<div id= "container">
<div id="header">
<div id="header_title"><h1>Jan kardy's Literary Agency</h1></div>
<div id="header_menubar">
</li>
    </ul>
    
    <ul id="MenuBar">
      <li> <a href="/index.html">Home</a></li>
      <li> <a href="/about_jankardys.html">About Jan Kardys</a></li>
      <li> <a href="#">Resources</a>
        <ul>
          <li> <a href="/Education_connection.html">Education Connection</a></li>
          <li> <a href="/submission_guidelines.html">Submission Guidelines</a> </li>
          <li> <a href="#">Blogs</a>
            <ul>
              <li> <a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
              <li> <a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Netwroking Blog</a></li>
            </ul>
          </li>
          <li> <a href="#">First Steps to Publishing</a></li>
          <li> <a href="#">Library & Publishing Events</a></li>
          <li> <a href="#">Art Gallery</a> </li>
        </ul>
      </li>
      <li> <a href="#">Clients</a></li>
      <li> <a href="#">Contact Jan Kardys</a> </li>
    </ul>
    <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar MenuBarLeftShrink",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 200,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
    </script>
</li>
      </ul>
</div>
</div>
<div id="Page_Content">
<div id="Main_content"><img src="/Images/jankardys.jpg" width="171" height="234" alt="Jan_kardys_pictuer" /></div>

<div id="xtra_content">
    <center><h3>Signed Book Deal</h3>
    <p><a href="http://jankardys.com/Advance_Royalties.html" title="Advance_Royalties.html">Advance/Royalties</a></p>
    <p><a href="http://jankardys.com/Author_Quotes.html" title="Author_Quotes.html">Author Quotes</a></p>
    <p><a href="http://jankardys.com/Book_Deal.html" title="Book_Deal.html">Book Deal</a></p>
    <p><a href="http://jankardys.com/Copyright_Information.html" title="Copyright_Information.html">Copyright Information</a></p>
    <p><a href="http://jankardys.com/Editorial_Assistance.html" title="Editorial_Assistance.html">Freelance Editorial Assistance</a></p>
    <p><a href="http://jankardys.com/Electronic_Rights.html" title="Electronic_Rights.html">Electronic Rights Guidelines</a></p>
    <p><a href="http://jankardys.com/Google_Products.html" title="Google_Products.html">Google Products</a></p>
    <p><a href="http://jankardys.com/Out_of_Print_Reversions.html" title="Out_of_Print_Reversions.html">Out of Print Reversions</a></p>
    <p><a href="http://jankardys.com/Permissions.html" title="Permissions.html">Permissions</a></p>
    <p><a href="http://jankardys.com/Photo_release.html" title="Photo_release.html">Photo Release</a></p>
    <p><a href="http://jankardys.com/Return_of_Advance.html" title="Return_of_Advance.html">Return of Advance</a></p>
    <p><a href="http://jankardys.com/Subrights_Checklist.html" title="Subrights_Checklist.html">Subrights Checklist</a></p></center>
    <p> </p>
    <p> </p>
</div>
</div>
<div id="footer"> <h6>Webpage designed by James S. Molina</h6></div>
</div>
</body>
</html>

Spry menu bar submenu disappears when cursor changes

Hello.
I've been working with a spry menu bar for some time, but when I expand the submenu and then move the cursor over some text on the page (where the sub-menu is on top of), the submenu disappears. In other words, it seems that when the cursor changes from a pointer to a text cursor, the submenu disappears.
Can anyone tell me how to prevent that from happening?

LICAP Webmaster wrote:
Can anyone tell me how to prevent that from happening?
Sorry, but without a link to your online page, it's a time-wasting, error-prone guessing game.
If you put your test page and all dependent files online, and post a link here, we will gladly check that:
    Your server is working
    That all required HTML code is correct
    That your folder hierarchy is correct
    That all required dependent files (HTML, CSS, JS, Images etc.) are uploaded to proper folders
    That Javascript Versions are correct
    That link paths are all correct and case sensitive
Sounds like your submenus may be positioned with a small gap from your top-level links

Spry Menu Bar Java Error

I just put a Spry Menu Bar, but am having issues with it. It seems to function just fine, but I am getting issues when I am trying to edit the properties. I keep getting the error
"When executing inspectSelection in spry_menubar.htm, a JavaScript error occured"
I am not sure where I have gone wrong. I have tried deleting the Spry Menu Bar and doing it again, but I still run into the errors.

which version of SpryMenuBar are you using
which properties did you try to edit
does the error occur in DW or in the browser
if the error occurs in DW, which version of DW are you using
if the error occurs in the browser, which browser and version are you using
which operating system are you using
have you included a DOCTYPE declaration and which one
etc, etc, etc.....
Of course you could send a link to your site and not have to bother about answering the above questions.
Gramps

Error message regarding a spry menu bar

Hello there,
i'm fairly new at Dreamweaver and have been creating my own site.
I have created a template and within this i have formed a spry menu bar. Now it is reporting that there is an error and can not implement updates to my child pages and i may have to insert a tag at the 'head' (thats when i update child pages). Very frustrated.
Code:
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="../01_home.html">HOME</a></li>
      <li><a href="../02_About.html">ABOUT</a></li>
      <li><a class="MenuBarItemSubmenu" href="../03_WORK/catwalk01.html">WORK</a>
        <ul>
          <li><a class="MenuBarItemSubmenu"<li><a href="#">Personal</a>
          <li><a href="#">Asos</a></li>
          <li><a href="#">Harper's Bazaar</a></li>
          <li><a href="#">Wallpaper*</a></li>
        </ul>
      </li>
    <li><a href="../04_Contact.html">CONTACT</a></li></ul>
Message within spry:
The menu bar is missing some important tags. Go to code view and make sure each menu item contains an <a> tag.
Hope someone can help otherwise i may have to start over again.
Nicola

This is your code with the problems highlighted
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="../01_home.html">HOME</a></li>
<li><a href="../02_About.html">ABOUT</a></li>
<li><a class="MenuBarItemSubmenu" href="../03_WORK/catwalk01.html">WORK</a>
    <ul>
      <li><a class="MenuBarItemSubmenu"<li><a href="#">Personal</a>
      <li><a href="#">Asos</a></li>
      <li><a href="#">Harper's Bazaar</a></li>
      <li><a href="#">Wallpaper*</a></li>
    </ul>
</li>
<li><a href="../04_Contact.html">CONTACT</a></li>
</ul>
This is what the code should look like
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../01_home.html">HOME</a></li>
<li><a href="../02_About.html">ABOUT</a></li>
<li><a class="MenuBarItemSubmenu" href="../03_WORK/catwalk01.html">WORK</a>
    <ul>
      <li><a href="#">Personal</a></li>
      <li><a href="#">Asos</a></li>
      <li><a href="#">Harper's Bazaar</a></li>
      <li><a href="#">Wallpaper*</a></li>
    </ul>
</li>
<li><a href="../04_Contact.html">CONTACT</a></li>
</ul>
Gramps

Spry menu bar error in IE 9

Hi everyone,
I added a Spry Menu Bar (menubar1) to my site layout using Dreamweaver CS3. When I clicked 'Live mode' everything looked fine but when I previewed it in a browser and since then I have recently uploaded it to test it out I get white blocks to the right of the nav bar in Internet Explorer 9 (only). When I previewed it in a browser (prior to uploading it) a dialog box would pop up asking to allow blocked content at the bottom. When I clicked "allow" white blocky rectangles showed up to the right of the tabs. I have no idea what it is or why it's showing up. It only seems to be doing this in IE 9 (as I checked it in Firefox & Chrome with no problems to report) when I acknowledge the blocked content by clicking 'allow'. If I ignore the message and click the x the white blocks don't show up. But now that I have it uploaded the blocked content box doesn't show up but I still get the white boxes to the right of the navigation bar. And it's only happening in Internet Explorer (I have version 9 for Windows Vista). I'm attaching a URL to all my files including the html, javascript, CSS, etc.. Note: the files you want to take a look at to see what I'm talking about are: indextest.html and abouttest.html.
If you have any questions or need any additional files let me know. Thanks for the help!
Here's the link to veiw the files: http://www.test.ashleysperrydesigns.com/

Thanks altruistic gramps for the help. Changing the color of the blocks fixed it however there is a slight overlap between the box and the green border. If you go to: http://www.test.ashleysperrydesigns.com/indextest.html you will see what I mean. I know there has to be an easy fix but I don't know how to do it. Do you mind taking a look?
Thanks,
ashmic

Oops - spry menu bar 2.0 does not display correctly when loaded

Oops - obviously I'm new at this. I think I got my graphics loaded now.
Dear Sirs:
I notice bzz31 had a pretty complicated post, so perhaps someone can help me with my complicated problem that has been vexing me for months. I tried the Spry Menu Bar 1.0, but it was impossible for me to edit, and I was delighted to see Spry Menu Bar 2.0 come out. However the 2.0 version has been frustrating me as well.
I can get my menu bar to display properly in Live View, as shown below.
However when I load everything onto the server, the menu bar does not display correctly, as shown below:
I don't quite understand the code "file:///" but I interpret it to mean that the Spry-UI-1.7 folder is in the topmost folder of MacPro5-Docs, which is my hard drive. Here's the code I'm having trouble with:
Here's my computer directory, shown below:
Since my index file is two folders down from Spry-UI-1.7, I loaded the files onto the server similarly, as shown in the next three pictures:
(The picture below is the same as the one just above, but now you can see the path from index to Spry-UI-1.7.)
I would be most appreciative if someone can help me.
Thank you.

Have a look at the following links
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="file:///MacProG5-Docs/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<link href="file:///MacProG5-Docs/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
Each of the above points to a file on your local system and cannot be found by the remote server.
Replace the red coloured parts with http://www.twhsbands.org/ will remedy the situation.
You also have some remnants of the other SpryMenuBar that should be removed from your markup.
Gramps
Wel, so much for the red coloured parts, they did not show up.
The red coloured parts read file:///MacProG5-Docs/

Firefox 4 Menu Bar - When I hover over or select a menu bar item, the menu bar sub-menu becomes transparent and unreadable. Is this a known issue that can be corrected with an update or is it functionality that is not designed to work with this version?

Firefox 4 Menu Bar - When I hover over or select a menu bar item, the menu bar sub-menu becomes transparent and unreadable. Is this a known issue that can be corrected with an update or is it functionality that is not designed to work with this version?

If this happens on monitor 2 of 2, this problem has been solved here:
http://support.mozilla.com/en-US/questions/794823#answer-157988
Go to "Firefox"--> "Options" --> "Advanced"
Then un-check "Use hardware acceleration when available"
While not verified, I believe this problem is due to an SLI configuration where the focus is on monitor 1. (I.e acceleration is available, but only on monitor 1.)

When i add menu bar in my user interface gives me error that this handle is not a panel handle(return value -42)

i have 3 panels in my application and parent panel is displayed first then i display other two panels which come to the front then on entering correct password i discard the child panel and then you can see parent panel , but there is an issue when i add menu to my parent panel i dont know whats wrong when i add menu bar in my user interface (parent panel) gives me error that this handle is not a panel handle(return value -42) for a child panel. when i dont open and display child panel then its fine , and even without menu added to my parent panel all my panels and my application works perfactly

Hello smartprogrammer,
some more informations are needed in order to properlu help you in this situation:
- Are you adding menus dynamically at runtime or in the UIR editor? If dynamically: how are you loading the menu bar?
- Are you dynamically tailoring the menu bar at runtime (adding or deleting menu items, dimming / undimming some of them or checking / unchecking)?
- Can you post the code where you are getting the error, documenting variables and scope (local to the function, global to the source file, global to the project)?
You can look at uirview.prj example that ships with CVI for an example of LoadMenuBar (the exampl eis in <CVI samples>\userint folder): in that project, the menu bar is shown as a context menu when you right-click on a tree element (see DeferredMenuCB callback).

Spry Menu Bar in Javascript

Hi all ,
Is it possible to place a Spry Menu bar in a Javascript? If
so can any one please tell me of a tutorial or URL with an example.
I have a web site (Which was produced solely in Frontpage)
and has several pages with the same menu on them, so if I need to
change any thing on the menu I have to change it on every page.
If I could call the menu in via a javscript then obviously I
would only need to ever alter the one script.
Be gentle with a beginner....lol
Thanks in advance.

Balloony2 wrote:
> If I could call the menu in via a javscript then
obviously I would only need
> to ever alter the one script.
That's a recipe for disaster. Your menu would never be found
by search
engines, nor would anyone be able to access your site if
JavaScript were
disabled in the browser.
The way to approach this issue is to use a server-side
include (SSI).
Ask your hosting company if it supports SSI or a server-side
language
such as ASP or PHP. Using SSI normally involves changing the
filename
extension to .shtml. You would also need to change the
filename
extension with a server-side language.
The advantage of doing this on the server is that every user
sees the
same output, regardless of whether JavaScript is enabled.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Spry Menu Bar onLoad Error

HELP...
I'm trying to insert a new Spry Menu bar and I get the error
"While executing onLoad in SpryMenuBar.htm, a Java Script eroor
occurred."
I press "OK"
I get the error again ...
Press "OK"
I get the Spry Menu Bar to choose either Horizontal or
Vertical ... but doing so ... nothing happens ... I press the X on
the dialog...
I get the same error again
Press "OK"... and i'm back where I started.
Is this a problem with the files located in ... C:\Documents
and Settings\username\Application Data\Adobe\Dreamweaver
9\Configuration\Shared\Spry\Widgets\MenuBar ? ? ?
How do you reinstall Spry?
----later edit ---
... it could be the files located in C:\Program
Files\Adobe\Adobe Dreamweaver CS3\configuration\Commands

I deleted the file that was in the tech note ... and started
DW and tried again ... same error ... however now the last error
says instead of onload ... it says objectTag.
Any suggestions? ... is the SpryMenuBar.htm file pointing to
the correct locations? ...
The other Spry elements are working ... tabs, accourdion,
panel ... just the menu bar isn't working ...

Spry Menu Bar - Freezing the Menu item in hover when clicking a submenu item

Hi,
I am trying to add a feature to a verticle spry menu bar that freezes the menu item or "parent" (to apear to be hovered) when clicking one of the parents sub-menu items. I want to do this so that users can know how they arrived at the page they're on.
Thanks for your help,
-Shiva

To look at your intention in a different way,
Hover over a submenu item
Parent item is colored/indicated
Submenu item is colored/indicated
Click on the submenu item
New page opens
Parent item "remains" colored/indicated on the new page
There are three or four ways to do this, depending on your site setup, but one basic concept to understand. The emphasis on the Parent menu item is totally independent of whether you got to the new page via the menu or by some other means. The emphasis will always be there, though it will appear to be connected to your clicking on the menu!
Say you have a menu with two Parent menu items, flowers and trees.
On the Flowers menu are submenus: Tulips, Roses, and Gardenias, On all three different Flowers pages (Tulips, Roses, Gardenias), the Flowers parent item will be emphasized.
On the Trees menu are submenus: Oak, Maple, Spruce. On all three different Trees pages (Oak, Maple, Spruce), the Trees parent item will be emphasized.
If you want to go in to each page individually, you can use a general indicator like id="localemphasis". (To emphasize more than one thing on a page, use a class instead of an id)
Using this method, on the Tulips, Roses, and Gardenias pages, put id="localemphasis" on the Flowers parent menu item.
On the Oak, Maple, and Spruce pages, put id="localemphasis" on the Trees parent menu item.
To control the emphasis from the CSS stylesheet, you won't need to go into each page, but you will ID each parent menu item.
Give each 'category' (Flowers, Trees) page a body ID to match the category
Every Flower page wants the Flower parent menu item emphasized, give all three Flower pages a body tag like this: <body id="flowers">
LIkewise, every Tree page wants the Tree parent menu item emphasized, as <body id="trees">
Within the menu itself and on ALL pages, give each parent menu item an id to correspond to its category
<li id="flowers_m">Flowers</li>
<li id="trees_m">Trees</li>
          I have added a "_m" to remind myself that it is the menu item's id. You might need to put the id on the <a> link if you have not used a list for your menu.
In your CSS stylesheet,
   #flowers #flowers_m,
     #trees #trees_m {background-color: red; color: white;}
Please use your own code! White on red might not be your cup of tea...use the same styling as the "hover" styling you mention in your query.
To interpret what we have just done, we have said
     make the background-color red and the text white
for the parent menu item Flowers (id="flowers_m") when you are on a Flowers page (body id="flowers")
and for the parent item Trees (id="trees_m") when you are on a Trees page (body id="trees").
This emphasis is good feedback for your user...remember that for SEO purposes, you will also want to use actual HTML text to reinforce the page environment, that is, h1 titles like FLOWERS and TREES. That will provide more feedback for your user.
Beth

Javascript error when selecting Spry Menu Bar in Design View

Similar Messages

Maybe you are looking for