How to make spry menubar first button different colour?

Hi
When making spry menubar how do you make the first button or whatever page you are on a different colour to show that you are on that page?
thanks
alix

1. Add a helper script called SpryDOMUtils.js as per
<script src="SpryAssets/SpryDOMUtils.js"></script>
2. Add a function called InitPage or similar that inspects each of the menu items and compares the link with the current URL as per
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
3. Add a listener for when the page is loaded. The listener will be the trigger for the function
Spry.Utils.addLoadListener(InitPage);
4. Add a style rule for the activeMenuItem that we, in our function, addedto the current menu item.
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
The !important bit is to override the JS
Your complete document should look similar to
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="untitled.php">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
  </li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
</script>
</body>
</html>
Gramps

Similar Messages

  • How to make spry menubar top level only appear for browsers with java turned off

    I was under the impression that just the top level of the horizontal spry menubar appears when someone with Java turned off views it...now I see that the entire unordered list appears vertically and takes up the whole page....is there a way to make just the top level menubar items appear when java is turned off in viewers browser?
    Thank you in advance for any insight you can provide.
    Lois

    When you disable Javascript in your browser...and it is Javascript not Java... if your menubar is properly constructed, the submenus do not appear, only the top level menu items.
    It sounds to me as if you are turning off style rendering in Dreamweaver itself, or have not properly linked your CSS stylesheet to your page.
    When CSS is linked properly, the submenus are "hidden" with left: -10000px; (a BIG distance) offscreen to the left of the Viewport. They stay there unless Javascript is turned on. It is Javascript that "calls them back" onto the Viewport.
    Give me a link, Lois, and I'll check into your page for you...
    Beth

  • How to make each drop down a different color?

    I'm looking to do a menu similar to this: http://www.cca.edu/ and I can't figure out how to make each drop down a different color? Any help or resources greatly appreciated!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style>
    ul.MenuBarHorizontal li#yellow ul a,
    ul.MenuBarHorizontal li#yellow a:hover, ul.MenuBarHorizontal li#yellow a:focus,
    ul.MenuBarHorizonta li#yellow a.MenuBarItemHover, ul.MenuBarHorizontal li#yellow a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#yellow a.MenuBarSubmenuVisible {
        background-color: #FF6;
        color: #333;
    ul.MenuBarHorizontal li#yellow ul a:hover, ul.MenuBarHorizontal li#yellow ul a:focus,
    ul.MenuBarHorizonta li#yellow ul a.MenuBarItemHover, ul.MenuBarHorizontal li#yellow ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#yellow ul a.MenuBarSubmenuVisible {
        background-color: #FF0;
        color: #333;
    ul.MenuBarHorizontal li#red ul a,
    ul.MenuBarHorizontal li#red a:hover, ul.MenuBarHorizontal li#red a:focus,
    ul.MenuBarHorizonta li#red a.MenuBarItemHover, ul.MenuBarHorizontal li#red a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#red a.MenuBarSubmenuVisible {
        background-color: #F30;
        color: #333;
    ul.MenuBarHorizontal li#red ul a:hover, ul.MenuBarHorizontal li#red ul a:focus,
    ul.MenuBarHorizonta li#red ul a.MenuBarItemHover, ul.MenuBarHorizontal li#red ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#red ul a.MenuBarSubmenuVisible {
        background-color: #F00;
        color: #333;
    ul.MenuBarHorizontal li#blue ul a,
    ul.MenuBarHorizontal li#blue a:hover, ul.MenuBarHorizontal li#blue a:focus,
    ul.MenuBarHorizonta li#blue a.MenuBarItemHover, ul.MenuBarHorizontal li#blue a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#blue a.MenuBarSubmenuVisible {
        background-color: #6CC;
        color: #333;
    ul.MenuBarHorizontal li#blue ul a:hover, ul.MenuBarHorizontal li#blue ul a:focus,
    ul.MenuBarHorizonta li#blue ul a.MenuBarItemHover, ul.MenuBarHorizontal li#blue ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#blue ul a.MenuBarSubmenuVisible {
        background-color: #00F;
        color: #333;
    ul.MenuBarHorizontal li#pink ul a,
    ul.MenuBarHorizontal li#pink a:hover, ul.MenuBarHorizontal li#pink a:focus,
    ul.MenuBarHorizonta li#pink a.MenuBarItemHover, ul.MenuBarHorizontal li#pink a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#pink a.MenuBarSubmenuVisible {
        background-color: #F99;
        color: #333;
    ul.MenuBarHorizontal li#pink ul a:hover, ul.MenuBarHorizontal li#pink ul a:focus,
    ul.MenuBarHorizonta li#pink ul a.MenuBarItemHover, ul.MenuBarHorizontal li#pink ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#pink ul a.MenuBarSubmenuVisible {
        background-color: #F36;
        color: #333;
    </style>
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li id="yellow"><a class="MenuBarItemSubmenu" href="#">Item 1</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
      <li id="red"><a href="#">Item 2</a></li>
      <li id="blue"><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li id="pink"><a href="#">Item 4</a></li>
    </ul>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Gramps

  • How to make a completely transparent button in Flash Builder

    I am making a mobile application, and I am wondering how to make a completely transparent button. I've tried using
    <s:Button x="-5" y="0" width="410" height="1504"
                                    skinClass="spark.skins.mobile.TransparentNavigationButtonSkin" click="navigator.pushView(Sun)"/>
    But it still has one line on the side. I need a way to make it completely transparent.
    Thanks,
         8th grade student

    Try this alpha="0.001"
    Also add useHandCursor="true" and buttonMode="true" if you wish to have the hand cursor appear on hover.
    example  x="10" y="10" width="169" height="54" label="Button" alpha="0.001" useHandCursor="true" buttonMode="true" 
    HTH

  • Slide duration - How to make one slide have a different duration to another slide?

    Slide duration - How to make one slide have a different duration to another slide?
    EG So one slide has 2 seconds, another 4 another 6
    All I can see is how to make all slides have the same duration
    Any help very much appreciated!
    Brian

    Slide durations are not changeable on a slide-by-slide basis.

  • How to make separation between added buttons into a jToolBar?

    Hi friends,
    I have made a jToolBar (using NetBeans IDE 5.5) with several buttons, but i dont know how to make custom separation between those added buttons. I will appreciate it if anyboy give me some tips.
    Thanks in advance,
    Reza_mp

    I don't know about NetBeans but yeah U can add horizontal atruts and verticals struts between two components, i.e.
    1.) add first component
    2.) add horizontal or vertical struts(according to ur toolbar)
    3.) add second component
    4.) add add horizontal or vertical struts(according to ur toolbar)
    this will definitely solve ur problem.
    If it does, don't forget to pay ur points.

  • How to make a custom form, buttons etc... please...

    I mean, how to make a form (for example, JFrame) with arbitrary form (geometry, for ex, round, oval, star like etc). I think you understand what i mean.
    Of course, i think i can use winApi, but it's only for windows. It doesn't suit for Java in this problem solution.
    That question also about cusomizing form of buttons, fields.. etc..
    i think, everything.
    What can java allows to cusomize and what not.
    Thanx!!

    I am just a learner and so i can just suggest you a strategy to implement Customized forms in JAVA. However i am sure that in practice it will work as far as Windows OS are concerned. Here is it:-
    The basic IDEA is to declare a native function in JAVA that makes JNI calls which will be further processed by Win32API and processed output will result into an elliptic or any polygonal shaped forms.
    To achieve declare some function as follows:
    public native void createEllipticalForm(formName formRefrance);
    create a Win32 Compiled DLL that manages this function as follows:
    (Mindwell, i havent stated what you call as pure-code but just a pseudo-code to the actual implementation)
    public native void createEllipticalForm(formName formRefrance)
    /* Search for the below stated Functions in Win32 API and work on
    them. I see a ray of success if you work with these functions properly.
    Further-more I assume that you are aware with concept of HANDLES */
    createEllipticRegion(); //WINDOWS.H
    showWindow(handleToTheForm); //WINDOWS.H
    Search for "createEllipticRegion() or showWindow()" on the GOOGLE to get the pure win32 API Code for Creating Customized Forms.
    Reply me in case any of you people get a solution based on my idea.
    [by VISH]

  • How to make the print, email button work in PDF output

    Hello,
    I'm using LC  Designer ES2 to create a xdp form with print, email and httpSubmit  button. Then using LC server to generatePDF output, binding with xml  dynamically. But after that I got the static pdf file and none of the  button work,
    I really need help on how to make it work. Any configuration, plug-in....
    Thanks,

    Hi,
    This is solved by note 1281208.
    Thanks,
    Edited by: Zhijie Kong on May 24, 2011 6:06 PM

  • How to make a long animated button

    Hello
    Does anyone know how to make a animation on a button when you
    put your curser over or click the button longer then just a few
    frames. in other words to extend the over or down parts of the
    button animation.
    Thanks a lot.

    how about using attachMovie() to attach a bullet hole MC
    onPress. Just draw a png image, convert to a MC and then attach it
    at the mouse coordinates when clicked. although your 'can' should
    also be a MC button.

  • Captivate: How to make work constantly numerous buttons in a slide

    Hello,
    In the final slide of my module I'd like to make constantly work numerous buttons. But when one is clicked on, the module tends to finish, and no interaction possible longer.
    How can I solve the problem ?
    Thanks in advance,
    Regards,
    Artem

    Hi there
    If this is the final slide, you may not actually need to resort to Advanced Actions. Often, these tend to intimidate folks.
    Perhaps if you can tell us exactly what the buttons do, we can offer a simplified way to deal with the situation. For example, if one button visits a web site, you can configure it to open in a new window and when you do that, there is an option you can set that keeps things paused.
    Cheers... Rick

  • How to make a good balance in different  browser

    Tt is hard to make a perfet website in different browser,  many times it is beautiful in firefox , but ugly in IE. Do anyone have tips to make a balance in different browser?

    Browser variation is something we must all deal with.  For best results, begin projects with a clear idea of what type of layout you need (1-column, 2-column, 3-column or Multi-column grid).  Then get a CSS Layout that meets your requirements.
    PVII CSS Templates are rock solid & thoroughly tested to perform well in all browsers (commercial product)
    http://www.projectseven.com/products/index.htm
    CSS Layout Magic (commercial extension for Dreamweaver)
    http://www.projectseven.com/products/templates/pagepacks/cssmagic/index.htm
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • How to make a Text in Button to Blink(Flashing) in ADF(Jdev)

    Hi,
    I need help to make my Text in button or Alteast a Text to Blink(Flashing).
    Example, Alerts used to should blink
    If somebody having Some sample code, Please post it

    You should share your solution with the community.

  • How to make a single payment for different open  items with same due date

    Hi,
    I have created a payment method  and selected "Payment per due day " option in payment method company code settings.
    Even I have selected that option, Payment will not happen grouping for the items with same due date
    for ex : I have two open items with one due date and another open item with another due date so when I am trying performing F110 system should make a single payment for the item with same due date and seperate payment for another item.
    But system making single payment for all items
    Could you please suggest anything how to make a seperate payment with due date.
    Regards
    VK GUPTA

    Hi,
    Please check Vendor Master data: FK02 ->company code data -> Payment transaction accounting: unflag 'individual payment'.
    Make a test and let me know if it's okay.
    regards

  • How to make next and previous button function

    Hello
    Can anybody help me with how to achieve next and previous button function such as the one at www.bestbuy.com?
    I would appreciate any help or suggestion.
    Thank you!

    if you're not familiar with flash it might be easiest to place your initial "page" in frame 1, the 2nd (or next) page in frame 2, the 3rd/next page in frame 3 etc.
    place your previous and next buttons in their own layer that spans the main timeline (which will have as many frames as you have "pages").  give them instance names (say prevBtn and nextBtn).
    you can then use the following code placed in frame 1:
    var tl:MovieClip=this
    prevBtn.onRelease=function(){
    tl.prevFrame();
    nextBtn.onRelease=function(){
    tl.nextFrame();

  • How to make Spry menu and submenu backgrounds different

    Hi all. I have a horizontal spry menu bar, and i'm using a gradient image for the background of the main menu, but I want the submenu to just be a solid color. I figure i should just be able to use css for this solid BG, but I can create an image no problem if need be. I just think it looks unprofessional to have multiple segments of a horizontal gradient stacked vertically. I know this is possible, the second to last example on this link demonstrates but doesn't explain:
    http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
    I would greatly appreciate any available help on this subject!  Thanks again!

    Thanks for asking, no that is not my complete css file. Those are only *additional* lines to place adjacent to existing styles in your "SpryMenuBarHorizontal.css", but in each case as the next style, in the location I have indicated. Here, I'll put my complete file here for you:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         cursor: default;
         width: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
         z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         position: relative;
         text-align: left;
         cursor: pointer;
         width: 8em;
         float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         z-index: 1020;
         cursor: default;
         width: 8.2em;
         position: absolute;
         left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
         left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
         width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
         position: absolute;
         margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
         left: auto;
         top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
         border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
         display: block;
         cursor: pointer;
         background-color: #EEE;
         padding: 0.5em 0.75em;
         color: #333;
         text-decoration: none;
    ul.MenuBarHorizontal ul a {
         background-color: yellow;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
         background-color: #33C;
         color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
         background-color: #33C;
         color: #FFF;
    ul.MenuBarHorizontal ul a.MenuBarItemHover, ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal ul a.MenuBarSubmenuVisible {
         background-color: green;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
         background-image: url(SpryMenuBarDown.gif);
         background-repeat: no-repeat;
         background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
         background-image: url(SpryMenuBarRight.gif);
         background-repeat: no-repeat;
         background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
         background-image: url(SpryMenuBarDownHover.gif);
         background-repeat: no-repeat;
         background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
         background-image: url(SpryMenuBarRightHover.gif);
         background-repeat: no-repeat;
         background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
         position: absolute;
         z-index: 1010;
         filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
         ul.MenuBarHorizontal li.MenuBarItemIE
              display: inline;
              f\loat: left;
              background: #FFF;
    .fleft {
         clear: none;
         float: left;
    The idea with putting the new styles *after* the original styles is that they are logically similar to but 'sub' styles to existing styles. In fact, you could probably put them way at the bottom, but if you wanted to edit them you might not find them again easily. I was trying to keep similar style rules together.
    Z

Maybe you are looking for

  • Can print over network, but scan over network doesn't work

    Scanner communication cannot be established from Windows 7 PC to 1536dnf MP. Printing from that computer is fine.  scanning from other computers over the network is fine also. I have uninstalled and reinstalled HP software, but that didn't fix the is

  • When using the DCOM connector to build component dll,Error ...

    When ussing the DCOM connector to build component dll, i get an error massage saying. "Nmake in Project directory failed. A detailed description of the error can be found in C:\Documents and Settings\CTHuang0\My Documents\Lib2\SAPInterface.log " and

  • Free space in external drive when trash is empty

    I had a big folder in my external hard disk (60 Gb) I sent it to the trash and then I empty the trash but the space the file occupied is still ocuppied in the drive. How do I free up the space in my external drive? I know it should be free but someho

  • How can I sync my devices with a new computer?

    I have just purchased a Macbook Pro and I want to back up my devices and sync them with the new computer. How can I change the set up of my iphone to sync with my new computer instead of the old Dell desktop that I had?

  • Embed .mp3 in .pdf without controller?

    Whenever I embed an .mp3 in an interactive .pdf, a gray "controller" box appears as soon as the sound is triggered. And once the sound is triggered, the box cannot be made to go away without closing and reopening the pdf. I have no use at all for the