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. -
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.htmlNot 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 -
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.
ThanksDefaults 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 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
JanisJanis,
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 1998Most 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,
KatieThis 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 .
ThanksSo 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
-
On start up of my new iMac it locks on the grey screen with the apple logo and the progress wheel spins. Boot up in safe and this is where it stopped at "BootCacheControl: Unable to open /var/db/bootcache.playlist: 2 no such file or directory. "
-
Error while trying to check the stock
hi i am getting an error (item is not releveant for check) checking group is missing . please guide me on this , its urgent
-
Paasing an ArrayList as an argument
In an assignment i am doing i have to pass an arraylist from one swing window to another and i thought i could pass them similar to as you would with methods with the line below: ColBookCar win = new ColBookCar(customers,cars); and then my BookCar wi
-
Hey everyone, I hope this is the proper forum for this question. If not, any direction on that end is appreciated. I am currently in an Enterprise Portal sp12 environment running ESS/MSS sp9. My client wants to upgrade the ERP backend to Service P
-
Need a clean way to talk to different serial ports simultaneously?
I need to be able to read from/write to four different serial ports simultaniously. I'm trying to make a subvi called Tip.vi that handles all the actual writing, reading and parsing of data from a single port. I want to use 4 (instances/copies/whatev