Howto: Random color in the spry menu

Im new to css and trying to use random colors when hovering over the links in the spry menu.
I anderstand i need to use javascript for the random hex value, but i cant figgure how to insert the value into the css.

Have a look at th Spry Element Selector Utility which can be found here http://labs.adobe.com/technologies/spry/articles/element_selector/ and here http://labs.adobe.com/technologies/spry/articles/data_api/apis/element_selector.html
I hope this helps.
Ben

Similar Messages

  • I colored the spry menu, but it's not showing up in preview.

    I changed the color of my spry menu from beige to black. It shows up on my work page, but when I try to preview it, it's as if I had never changed the color. I also tried going to the page through Firefox, but it's not showing up there either. The code says the background of the menu is #000, One the design panels it says the background color is #000 as well. Can someone tell me what I'm missing that is making the spry menu stay at the default color?

    Not a good option unfortunately.
    "allow multiple consecutive spaces" is an old option in DW which should be discontinued. It simply inserts multiple non-breaking spaces when you press the spacebar.
    It's ugly, and unpredictable since it depends on font sizes, browser text sizing etc.
    Better to use CSS
    letter-spacing http://www.w3schools.com/cssref/pr_text_letter-spacing.asp
    word-spacing http://www.w3schools.com/cssref/pr_text_word-spacing.asp

  • Multiple text colors in my spry menu

    Can I make multiple text colors in my spry menu? I want to match the text color on one of my spry menu items to the hover color so that you know which link you are currently visiting. I haven't posted the site yet until I work out all the kinks. So, to summarize, I have my spry menu link text color (ul.MenuBarVertical a) set to #E00 and my hover color for those items (ul.MenuBarVertical a.MenuBarItemHover) set to #888. All of the links also contain the same spry menu. I would like the link you're currently in to be #888 and the other links to be #E00 with all of them hovering with color #888. How can I give unique color to an individual menu item? Any help you can give is much appreciated!

    Sorry to bug you again. I implemented your suggestion as you can see in this partial pageview:
    <script src="SpryAssets/SpryDOMUtils.js"></script>
    <script src="js/navbar-select.js"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    ul.MenuBarHorizontal a#button1:hover, ul.MenuBarHorizontal a#button1:focus
    { color:#625647; }
    </style>
    </head>
    <body>
    <div id="team-vision" class="container">
    <div class="header"> <a href="#"><img  id="logo" src="images/logo_i.png" width="215" height="36" alt="Greiner Engineering"></a>
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">INTRO</a>|</li>
    <li><a href="ger-vision.shtml">VISION</a>|</li>
    <li><a href="ger-2firmen.shtml">2FIRMEN</a>|</li>
    <li><a href="#">PROJEKTE</a>|</li>
    <li><a href="ger-network.shtml">NETZWERK</a>|</li>
    <li><a href="ger-contact.shtml"  id="button1" class="MenuBarItemSubmenu">KONTAKT</a>|
    <ul>
    <li><a href="ger-contact.shtml">ADRESSEN</a></li>
    <li><a href="ger-team.shtml">TEAM</a></li>
    <li><a href="ger-location.shtml">LAGEPLAN</a></li>
    </ul>
    </li>
    <li><a href="ger-links.shtml">LINKS</a>|</li>
    <li><a href="ger-publications.shtml">VERÖFFENTLCHUNGEN</a>|</li>
    <li><a href="ger-jobs.shtml" class="MenuBarItemSubmenu">JOBS</a>|
    <ul>
    <li><a href="ger-jobs.shtml">OFFENE STELLEN</a></li>
    <li><a href="ger-practice.shtml">PRAKTIKUM</a></li>
    <li><a href="ger-thesis.shtml">DIPLOMARBEIT</a></li>
    </ul>
    </li>
    <li><a href="ger-impressum.shtml">IMPRESSUM</a>|</li>
    </ul>
    </div>
    I did this in ger-kontakt.shtml, ger-team.shtml, ger-location.shtml
    but it does not leave KONTAKT highlighted.
    If you want to check it out my url is http:/www.lsdcoach.com/greiner-engineering. Select GERMAN and the click on KONTAKT. The other menu items without a submenu work great.

  • Is there any way to disable the mouse-over function of the Spry Menu Bar (CS5)? Click-open preferred

    Hello,
    I'm using the standard CS5 Spry Menu Bar (Horizontal) in Dreamweaver. I have it set up exactly the way I want with CSS. However, I've very little experience with Javascript, consequently I'd like to ask anyone here for some help in modifying this aspect of the Spry Menu Bar. I'd like it to 'click-open' and not open when the mouse is over it. I've tried to change the delay variables in the code to something that has a longer duration in milliseconds; unfortunately, this tends to cause some bugs such as the menu re-opening once the mouse is no longer near it and other such bugs.
    The ideal solution for me would be to have it open when it's clicked on once. The reason I need this is because the menu appears over some buttons - there's no way around this for me, it's the layout I absolutely must have. Although the buttons don't overlap with the menu, they are very close and it is annoying when your hand slips a little and the menu pops up over it all.
    I'd appreciate any help at all, thank you.
    PS:- The Javascript containing the delay variables I tried to modify.
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
        this.element = this.getElement(element);
        // represents the current (sub)menu we are operating on
        this.currMenu = null;
        this.showDelay = 250;
        this.hideDelay = 600;
        if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
            // bail on older unsupported browsers
            return;
        // Fix IE6 CSS images flicker
        if (Spry.is.ie && Spry.is.version < 7){
            try {
                document.execCommand("BackgroundImageCache", false, true);
            } catch(err) {}

    Hello,
    Thank you so much for replying so quickly and moreover, solving my problem. I must apologise for not doing more research about this issue by searching these forums more thoroughly. I found a similar post here:-
    http://forums.adobe.com/message/139937#139937
    Your solution goes one step further and eliminates the need to search through the Javascript for the relevant code.
    Thank you again, you've helped me a great deal.
    Best wishes,
    foreverdusty.

  • I am not able to edit the spry menu via dreamweaver

    After having configured a spry-menu-horizontal-bar in my we page the
    day before, I cam back to add more links, however, I found this error
    message:
    The following translator were not loaded due to errors:
    PHP_MySQL.htm, has configuration information that is invalid.
    Spry.htm: has configuration that is invalid.
    SplyWidget.htm: has configuration information that is invalid.
    XSLT.htm: has configuration information that is invalid
    I am not able to edit the spry menu via dream weaver and doing the
    modifications by hand is cumbersome and prone to errors.
    Does anyone know how to solve this problem?
    Have a good day!
    http://www.tandooristyle.ca/ArbolOne1.html

    Not sure exactly why, but somethings don't look normal like why you have a PHP_MYSQL.htm file?
    Anyways, bets to post this on the Dreamweaver forum instead of the Developer Toolbox forum. You will get a much quicker response as this has nothing to do with the Adobe Dreamweaver Developer's Toolkit.
    Brad Lawryk
    Adobe Community Expert, Dreamweaver
    Adobe Usergroup Manager, Northern British Columbia Adobe User Group

  • Center the Spry Menu?

    How does one get the Spry menu to align center (relative to
    page size)? I'm doing a horizontal menu and it always stays
    left-justified. I can't seem to get it to stay center via CSS
    editing or anything like that. Any help? Thanks!

    Using CSS you need to place a container around the menu with
    the side margins set to auto.

  • How to align the spry menu pannel in dreamweaver cs4

    Can someone tell me how to align the spry menu pannel either left, center, are right in a div tag? I'm talking the whole pannel I have within a div tag.
    Thanks

    Defaults to left align
    To center ul.MenuBarHorizontal{margin: 0 auto; width: 32em;} addjusting the width to suit.
    To align right ul.MenuBarHorizontal {float: right; width: 32em;} addjusting the width to suit.

  • Changing arrow color on vertical spry menu

    How do I change the color of the arrow on the vertical spry menu indicating there are submenus for that topic?

    http://www.ipdctest.com/SpryAssets/SpryMenuBarVertical.css
    It's the background image in these two CSS rules
    ul.MenuBarVertical 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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    PS the path to your SpryAssets folder is wrong in the page code.
    Page code:
    <script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    Should be
    <script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

  • I cannot locate the Jump Menu under Insert/Form. I am looking for a way to replacve the Spry menu I used previously

    I need to modify my website and I used a Spry menu to direct users to specific pages. This is no longer supported with the 2014 version and thought a Jump Menu would work, but it is not on the insert/form menu as instructed in help files. Any ideas?

    Jump Menus still exist in CC, they're just created differently than they used to be. For some reason I can't figure out, they've been a bit buried...
    1. Click in Design View where you want the Select Menu to appear
    2. Go to Insert > Form > Select
    3. Click on the Select Menu created in Design View
    4. Click the + in the Behaviors Window and choose Jump Menu
    From there, you should get the familiar Jump Menu dialogue box.

  • Dreamweaver Help | Working with the Spry Menu Bar widget

    This question was posted in response to the following article: http://helpx.adobe.com/dreamweaver/using/spry-menu-bar-widget.html

    Adobe has discontinued further Spry development.
    http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
    You can continue using Spry but if mobile & tablets are your concern, I would use a different menu system.
    Project Seven's Commercial Extensions:
    http://www.projectseven.com/products/templates/pagepacks/adaptations/index.htm
    http://www.projectseven.com/products/menusystems/index.htm
    Or roll your own with jQuery plug-ins:
    http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-m ulti-level-navigation/
    https://github.com/mattkersley/Responsive-Menu
    http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
    Nancy O.

  • How do I keep the Spry menu fixed to the bottom of the header div?

    I have created a horizontal Spry menu bar using Dreamweaver CS4 but the problem is, I can't figure out how to make it be in the right position at the bottom of the header div. In Design View it is too far below the header background graphic, in Live View it cuts off the bottom of the header graphic, and it also looks higher or lower in Safari and Firefox.
    I'm sure it's very simple, but how can I control them menu on the y-axis and keep the menu fixed to the bottom of the header div? Is there a way to float it to the bottom?
    I really appreciate any help or advice anyone can give me on how to get a stationary menu bar.

    Below is an example of a fixed-header & footer layout with jQuery smooth scrolling.   I did not use a separate scrolling div because mobile users have lots of trouble with them.
    View source to see the code. 
    http://alt-web.com/TEMPLATES/FixedLayout.shtml
    You need 4 basic things:
    jQuery latest core library,
    jQuery easing.js,
    jQuery anchor.js, inside the <head> of your document
    jQuery function code,  near the bottom of your document.
    That's all there is to it.
    Nancy O.

  • Change background color in a Spry Menu

    At last, I understood working of a vertikally spry. But after
    many "try's
    and errors" with changing the "SpryMenuBarVertical.css", the
    backgground
    color will not change from grey to another color.
    Please have a look to for help at
    http://www.kfhgd.internetcafe-kaufbeuren.de/index.php.
    Ciao, servus und salut
    Janis

    Janis,
    Change the background-color here:
    UL.MenuBarVertical A {
    PADDING-RIGHT: 0.75em;
    DISPLAY: block;
    PADDING-LEFT: 0.75em;
    PADDING-BOTTOM: 0.5em;
    CURSOR: pointer;
    COLOR: #000000;
    PADDING-TOP: 0.5em;
    BACKGROUND-COLOR: #eee;
    TEXT-DECORATION: none;
    And for the hover color, change the background-color here:
    UL.MenuBarVertical A:hover {
    COLOR: #fff;
    BACKGROUND-COLOR: #33c;
    Ken Ford
    Adobe Community Expert - Dreamweaver
    Fordwebs, LLC
    http://www.fordwebs.com
    "Janis" <[email protected]> wrote in
    message
    news:frum9v$ath$01$[email protected]..
    > At last, I understood working of a vertikally spry. But
    after many "try's
    > and errors" with changing the "SpryMenuBarVertical.css",
    the backgground
    > color will not change from grey to another color.
    >
    > Please have a look to for help at
    >
    http://www.kfhgd.internetcafe-kaufbeuren.de/index.php.
    > --
    > Ciao, servus und salut
    > Janis
    >

  • Fixing Some of the Spry Menu Limitations

    Example and Tutorial:
    http://www.projectseven.com/testing/adobe-bugs/spry-menus/
    Spry menus bug me. Not because I dislike Adobe and not even because my company makes menu tools for Dreamweaver. Spry menus bug me because they are targeted at beginners, which are the very group that would not be able to understand or fix the limitations and problems. The little tutorial we prepared seeks to do that. Note, however, there is at least one fatal flaw in the Spry menus that ship with Dreamweaver and that is that the menus will not work in mobile devices. There is no easy fix for this so if you decide to go with Spry menus, understand that the sub-menus will not be accessible in mobile devices. In order to get that fixed one must use Spry 2.0, which does not come with Dreamweaver. Our tutorial is for beginners. It addresses real issues and I would hope it becomes something regularly referenced here.
    Enjoy.
    Al Sparber - PVII
    http://www.projectseven.com
    The Finest Dreamweaver Menus | Galleries | Widgets
    Since 1998

    Most modern menus allow for links on the root to be live. Tap once, the
    sub-menu opens. Tap again, the link is executed. This has become the
    convention. But keeping the root menu items null would get around the issue.

  • How do get rid of the highlighted color of the spry fields?

    Whenever the Spry accordion I have embedded is in focus, the whole thing is surrounded by a blue highlighted border & even worse, the background colors of the tabs become blue!  I set all the borders to none in the SpryAccordion.css but this hasn't seemed to help.
    Here is the link to the site I am creating:
    http://www.ucamnet.org/Projects.php
    Suggestions? Please? The launch date for the site is in a couple of weeks & I don't want this error occurring at that time.
    Thanks in advance,
    Katie

    This is called an outline, or focus border. The browser vendors have added that feature to bring better accessibility for users who use keyboard navigation for example. With these borders they actually know where the on the page. Because your element is focused.
    You can remove this by adding outline:none; to your css rules. But its not recommended as it will make your accordion less accessible.

  • How to pass a value instead of index to the spry menu?

    Hi,
    I am  using spry menu in DW and I have a page called products which has a menu with some items. The question is how can I access to item menus using this link:
    ".../products.html#USNP"
    Now I can access to a specific menu item of this page using the following link ".../products.html#tab=3" but i like to have the name of the menu items instead of the item number.
    I would be appreciated if anyone can help me .
    Thanks

    So we are talking SpryTabbedPanels where the tabs are used as your menu bar.
    The out-of-thebox Spry product identifies each tab as a number and as such, only numbers can be use to open each panel.
    To overcome this limitation, you can assign your expressions to corresponding numbers. I am not sure if the '#' will do the trick, thinking that you may need to assign a variable instead.
    Gramps

Maybe you are looking for