Spry vs. PVII
What to use..... the new Spry pop menu scheme or PVII Pop
Menu Magic?
Pros and cons??
"Jus Dreamin" <[email protected]> wrote in
message
news:f2pj9n$gim$[email protected]..
> Interesting, but not sure about all of this... a quicky
check using
> Firefox,
> with js disabled, yielded... yes, the upper level of the
menu, but no
> submenu
> items..... Will be looking at this more later. .......An
interesting
> point.
Actually, having submenus "work" when script is disabled is
not always the
perfect road to accessibility. Accessibility is, of course, a
very
subjective topic, but this article might prove insightful:
http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm
Beyond that, there's no need to get into a contest between
free tools such
as Spry and commercial systems such as Pop Menu Magic. They
each have their
plusses and minuses and which to use depends on the the
goals, needs, and
coding abilities of the user - along with the need for rich
features,
automation, and, of course, one-on-one support.
That said, we also have a free menu that has proven quite
popular:
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
Similar Messages
-
I have playing around with using the SCM on a website. Seems
to be great idea to turn about thirty one paragraph pages into just
one. I think I have run into a problem though. The site has to be
searchable. I ran the Google search from WebAssist on a SCM page I
put on my site and it didn't find any of the text I searched for.
So from my experiment it looks as tough text in a SPRY is not
searchable."Chris Leeds, MVP - FrontPage"
<[email protected]> wrote in message
news:g6qqga$16u$[email protected]..
> Its not just SPRY, it's all that asynchronous stuff (at
least that's what
> I've been finding).
Adobe has confused an already confusing issue, perhaps
purposely, regarding
Ajax and Spry :-)
Ajax simply means that you are using JavaScript in the
browser to read an
xml file and load parts of that file into the document -
that's Adobe's spry
Ajax Framework. Spry "widgets" are simple JavaScript UI
elements: menus,
collapsing panels, accordions, etc. One has nothing to do
with the other
beyond the fact that you can populate the content of a
widget, if you want,
with data from an xml file.
The ironic part of all this, is that when using Ajax to
display content, the
entire xml file is downloaded by the browser, though its
content remains
inaccessible until it is fetched by JavaScript.
Disable JavaScript in the browser, and all content in the xml
file is
inaccessible, even though the file was actually downloaded.
Search bots see absolutely nothing - whether script is
disabled or not.
A widget (spry or PVII) alone, however, is fully accessible
whether or not
script is enabled to both humans and search bots.
The moral:
Using Ajax, as it is available in Dreamweaver, has a price to
pay - and that
price is accessibility. Using a static iframe would, in fact,
be more
accessible, and arguably more usable.
Using server-side scripting (PHP, for example) to download
all the data that
is contained in an xml file, hiding it, then using
client-side scripting to
show what you want on user demand, is more accessible,
easier, and has the
added benefit of being able to be fully accessible to both
humans and bots
if JavaScript is disabled in the browser.
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
http://www.projectseven.com/go/Elevators -
I lost the blue tab on my spry menu.
I've saved my document and re-opened it, but still can't get the blue spry menu tab to show. Also can't see my submenus in the browser. It shows in my code. Here is my code.
<table width="878" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="878" height="37" align="center" valign="middle" bgcolor="#D1D1D1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="#">Become A Member</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">NEWS</a>
<ul>
<li><a href="#">Events</a> </li>
<li><a href="#">Job Listings</a></li>
<li><a href="#">Hot Deals</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">EVENTS</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Chamber Calendar</a></li>
<li><a href="#">Community Calendar</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Hot Deals</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">COMMUNITY</a>
<ul>
<li><a href="#">Scott Air Force Base</a></li>
<li><a href="#">City of O'Fallon</a></li>
<li><a href="#">O'Fallon Welcome Guide</a></li>
<li><a href="#">O'Fallon-Shiloh Area Restaurant Guide</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Shiloh</a>
<ul>
<li><a href="#">Village of Shiloh</a></li>
<li><a href="#">Village Services Guide</a></li>
<li><a href="#">Shiloh Community Calendar</a></li>
</ul>
</li>
<li><a href="#">Events & Reception Planning Guide</a></li>
<li><a href="#">Relocation Packet Info</a></li>
<li><a href="#">The Tourism Burea Illinois South</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">CONTACT US</a>
<ul>
<li><a href="#">Member Login</a></li>
<li><a href="#">Member Directory</a></li>
<li><a href="#">Community Business Info</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">JOIN US</a>
<ul>
<li><a href="#">Member Directory</a></li>
<li><a href="#">Become A Member</a></li>
<li><a href="#">Member Login</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">COMMITTEES</a>
<ul>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Ambassadors</a></li>
<li><a href="#">Star Investors</a></li>
<li><a href="#">Member Directory</a></li>
</ul>
</li>
<li><a href="#">PHOTO GALLERY</a></li>
</ul></td>
</tr>
</table>
@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
list-style-type: none;
cursor: default;
width: 878px;
white-space: nowrap;
display: inline;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 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 auto;
padding: 0;
position: relative;
text-align: left;
cursor: default;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
font-weight: normal;
font-style: normal;
font-size: 87%;
white-space: nowrap;
line-height: normal;
width: auto;
clear: none;
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: auto;
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
text-align: left;
white-space: nowrap;
display: block;
float: none;
font-size: 100%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
font-style: normal;
line-height: normal;
font-weight: bolder;
text-transform: none;
background-color: transparent;
width: auto;
position: relative;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin-top: -5%;
margin-right: 0px;
margin-bottom: 0;
margin-left: 95%;
position: absolute;
/* 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-top-color: #021844;
border-right-color: #021844;
border-bottom-color: #021844;
border-left-color: #021844;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #021844;
color: #FFF;
text-decoration: none;
border: 1px solid #FFF;
text-align: left;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
white-space: nowrap;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #036009;
background-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
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: none;
background-position: 95% 50%;
background-color: #021844;
/* 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(SpryMenuBarRightHover.gif);
background-position: 95% 50%;
background-repeat: no-repeat;
/* 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: none;
background-position: 95% 50%;
color: #036009;
background-color: #FFF;
/* 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;
// SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
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) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// 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";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
})(); // EndSpryComponentYou don't need to upgrade your software. But if you're struggling with Spry, IMO you should cut your losses and switch to something better for the longrun.
If you have a budget to work with, I highly recommend Project Seven's Pop-Menu Magic 3. It's easy to use in DW CS4, 5, 6 or CC. More importantly, it's bullet proof and works in all devices.
Pop-Menu Magic3 by PVII (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget to work with, you can roll your own menus with jQuery plugins. A bit more effort on your part, but they perform better than Spry.
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu2
DEMO:
http://www.geektantra.com/projects/jquery-megamenu-2/
DOWNLOAD:
http://code.google.com/p/jquery-megamenu/
Nancy O. -
Can I get around using Spry for pop-up menus?
Members of our organization tend to be older and not so quick
to update their software or browsers. We're trying to develop a new
site, and although we've had CS3 here since last year, it just
grayed out our ability to use "Show pop-up menu" as an option this
week.
According to Adobe, Spry is only supported on the following
browsers: Firefox, IE6 and higher, Safari 2, and Opera 9.
According to our web stats, our users use: Netscape 4.x
(32.92%), MSIE 6.x (23.08%), Netscape 7x. (8.62%), AOL (4.16%),
Firefox 1.x (0.34%), Opera 3.x (0.13%), *Unknown (29.08%)
I can't use a function that only 25% of my site visitors can
see!
Any suggestions? I'm desperate!> We're trying to develop a new site, and although we've
> had CS3 here since last year, it just grayed out our
ability to use "Show
> pop-up menu" as an option this week.
This has always been the case. CS3 will only enable that
option on a page
that already has one of those nasty menus on it. In other
words, the effect
has been taken on a long walk off a short pier. To see why I
refer to these
as 'nasty', read this -
http://www.losingfight.com/blog/2006/08/11/the-sordid-tale-of-mm_menufw_menujs/
There are so MANY MUCH BETTER ways to do these kinds of
things -
Check the uberlink and MacFly tutorials at PVII -
http://www.projectseven.com/
and the Navbar tutorial/articles at Thierry's place
http://tjkdesign.com/articles/dropdown/
Or this one (more recent article):
http://tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp
Or to get it done fast, go here -
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Remps" <[email protected]> wrote in message
news:fr6gil$hc7$[email protected]..
> Members of our organization tend to be older and not so
quick to update
> their
> software or browsers. We're trying to develop a new
site, and although
> we've
> had CS3 here since last year, it just grayed out our
ability to use "Show
> pop-up menu" as an option this week.
>
> According to Adobe, Spry is only supported on the
following browsers:
> Firefox,
> IE6 and higher, Safari 2, and Opera 9.
>
> According to our web stats, our users use: Netscape 4.x
(32.92%), MSIE 6.x
> (23.08%), Netscape 7x. (8.62%), AOL (4.16%), Firefox 1.x
(0.34%), Opera
> 3.x
> (0.13%), *Unknown (29.08%)
>
> I can't use a function that only 25% of my site visitors
can see!
>
> Any suggestions? I'm desperate!
> -
Spry vertical menu not working
I posted this before and still haven't solved so I am going to try again. .
My Vertical Spry menu bar won't show the submenu items in ANY browser. I have tried completely deleting everything involved with that menu and starting over and still can't get it to work (it did at one time so I'm not sure what has happened to it) BTW, when I view it in DW Live view it looks fine, but once I upload, it won't work. I also have horizonal spry menu and it works fine.
Here is my menu:
<ul id="MenuBar3" class="MenuBarVertical">
<li><a title="sports">Sports</a>
<ul>
<li><a href="../Parks/youthrec.html">Youth Sports</a></li>
<li><a href="../Parks/adultrec.html">Adult Sports</a></li>
<li><a href="../Parks/tennisladder.html">Tennis Ladder</a></li>
</ul>
</li>
<li> <a href="../Parks/communityevents.html">Events</a></li>
<li><a href="../Document_Center/Parks/Scholarship_info.pdf">MPRD Scholarship</a></li>
<li> <a href="../Parks/facilities.html">Facilities</a></li>
<li> <a href="aquaticcenter.html">Aquatic Center</a> </li>
<li> <a href="althleticcomplex.html">Athletic Complex</a></li>
<li><a title="Parks">Parks</a>
<ul>
<li> <a href="rothwellpark.html">Rothwell Park</a>
<ul>
<li> <a href="../Parks/campground.html">Campground</a></li>
<li><a href="../Parks/dogpark.html">Dog Park</a></li>
<li> <a href="../Parks/lake.html">Lakes</a></li>
<li> <a href="../Document_Center/Parks/Rothwell_Park_Map_2009.pdf">Map of Rothwell Park</a></li>
<li> <a href="../Parks/skatepark.html">Skate Park</a></li>
<li> <a href="../Parks/minitrain.html">Miniature Train</a></li>
<li> <a href="../Parks/candycanecity.html">Candy Cane City</a></li>
<li><a href="../Parks/discgolf.html">Disc Golf</a></li>
<li><a href="../Parks/War Memorials.html">War Memorial</a></li>
</ul>
</li>
<li> <a href="areaparks.html">Other Area Parks</a></li></ul></li>
<li><a href="../Projects/Parks.html">Parks & Recreation Projects</a></li>
<li> <a href="../Parks/scrapbook.html">Scrapbook</a> </li>
<li><a href="../Parks/parksboard.html">Park Board</a></li>
<li> <a href="../Parks/parksstaff.html">Staff Directory</a>
<ul>
<li><a href="../Parks/parksdirector.html">Director's Message</a></li>
</ul>
</li>
<li><a href="../Parks/tennisladder.html">Tennis Ladder</a></li>
<li><a href="../Parks/tickets.html">Ticket Consignment</a></li>
<li> <a href="../Parks/employment.html">Employment</a> </li>
<li><a href="../Parks/parksvolunteers.html">Volunteer/Donate</a></li>
</ul>
Here is my css file:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 9em;
margin-top: 10px;
margin-left: 20px;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 9em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 9em;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 9em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size:12px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #fff;
color: #999;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #fff;
color: #999;
ul.MenuBarVertical li
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size:12px;
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.MenuBarVertical a.MenuBarItemSubmenu
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%;
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
If anyone has ANY ideas I would love to hear them! As I said, at one time it worked great, now I can't get the submenu's to work.Spry Menus 10 Commandments
http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php
Fixing Spry Menus 1.6.1
http://www.projectseven.com/testing/adobe-bugs/spry-menus/
Personally, I don't use Spry menus. I think you could find a much better menu system from any of the links below.
Pop-Menu Magic2 by PVII (DW extension purchase)
http://www.projectseven.com/products/menusystems/pmm2/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery Mega Menus
http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
CSS3 Dropdown Menus
http://www.red-team-design.com/css3-dropdown-menu
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O. -
Having followed instructions from web sites and
books I still can't modify the rollover background colour away from
the purple. It must be something basic but I'm stumped. I can
change the style of the menu bar in other ways - text, colour etc
but whatever I try, when I preview in Safari I still get the purple
rollover colour. HelpYou cannot center a CSS horizontal list unless you assign
fixed widths to
each root level LI and then you can use Joe's suggestion by
assigning a
width to the outer wrapper that is equal to the aggregate of
the root LI
widths (adjusted for box-model). If the root level LIs are
set to an auto
width, then you will be able to center the menu construct but
the first LI
will be aligned at the left edge of the centered box.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"letponys" <[email protected]> wrote in
message
news:flk3v7$os6$[email protected]..
>I know I must be missing something simple but where
within the Spry css can
>I make the menu bar center on the page. Thanks for your
help. -
Spry Menu and IE Issue (Hover Font Size)
I'm not able to figure out why the hover focus setting works fine with Firefox or Chrome, but I can't find a setting in the CSS to ensure the value for the font on a hover within IE remains fixed. on a hover, the font size increases slighly in IE and pushes menu out of alignment very slightly. I was able to keep the hover size fixed in Firefox and Chrome via the CSS values for the spry, but not sure why IE is doing this and if there is a setting specific to IE that would allow me to keep the hover font size fixed, but not change the values in Firefox/Chrome. Is there any way to lock in the hover value using CSS for the font so in IE it remains constant?
http://oregonstate.edu/~labellec/CDfiles/index.html
Page is under development, but if you open it up in IE, the menu hover causes too much movement. I'm new to CS4, so, any help appreciated.
Thanks,
ChrisPerhaps you could adapt the techniques used here for your
Spry menu:
http://www.projectseven.com/products/menusystems/pmm2/see-through.htm
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"Webkil" <[email protected]> wrote in
message
news:gnmh2l$dvo$[email protected]..
>I have tried this. I want a transparent background no
colour. As soon as I
>add transparent IE comes up with the word false in the
sub menus. -
Spry Accordion appears to snap shut to its default setting
the moment you use it to navigate to a linked page.
I want to keep the accordion open on the page that it
represents rather than having the user open up the accordion each
time they wish to navigate to the next page.
Can this be done - if of course I have explained myself well
enough which frankly i doubt!
Thanks in advance
NeilAl Sparber- PVII wrote:
> "eclipsme" <[email protected]> wrote in message
> news:fcjsoh$3m1$[email protected]..
>> Al Sparber- PVII wrote:
>>> "skipiouk" <[email protected]>
wrote in message
>>> news:fciqsg$t8i$[email protected]..
>>>> Thanks Al
>>>> is there no way to do this inside CS3 or is
the purchase of piece of
>>>> software necessary?
>>>> Neil
>>>
>>> I don't know. We do not use Spry because it's
just not compatible
>>> with our approach towards markup, CSS, or
scripting. If you are a
>>> casual web developer and don't have a
professional budget, perhaps
>>> someone who is "into" Spry can help you hack a
solution.
>>>
>>>
>> See if this helps.
>>
>>
http://labs.adobe.com/technologies/spry/articles/accordion_overview/
>>
>> Harvey
>
> Hi Harvey,
>
> I don't need "help" understanding how Spry widgets work.
We have
> analyzed the code and methodology and it's just an
approach that we
> would never take, hence we have no interest in it.
Perhaps you meant
> your post to be in response to someone else and not me
>
>
Right, Al. Niel was asking the question. Your's wasn't the
only post.
Sorry if you got confused. The link provides information on
configuring
the widget. I thought this could be useful to Niel.
Harvey -
Spry Navbar Dropdown Under swf file image
I've built an intranet page that works fine in IE but not in
Netscape and Firefox. The spry horizontal drop down falls under the
swf file in Netscape and Firefox, making the drop down items
inaccessible. I've put z-indexes on the navbar, flash component and
the frame around the flash piece. The navbar only falls under the
flash component.
Any suggestions? Thanks.It's not a z-index issue.
All Active content on a page will always rise to the top, so
to speak,
including Flash, certain form elements, Java applets, and
Active X controls.
This means that each of these will poke through layers. There
is not a good
cross-browser/platform reliable way to solve this issue, but
if you can be
confident in your visitors using IE 5+ or NN6+, then you can
use the Flash
wmode parameter (however, Safari does not support this
properly!).
PVII article:
http://www.projectseven.com/support/answers.asp?id=127
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"sdamico" <[email protected]> wrote in
message
news:fqhbdi$7rn$[email protected]..
> I've built an intranet page that works fine in IE but
not in Netscape and
> Firefox. The spry horizontal drop down falls under the
swf file in
> Netscape
> and Firefox, making the drop down items inaccessible.
I've put z-indexes
> on
> the navbar, flash component and the frame around the
flash piece. The
> navbar
> only falls under the flash component.
>
> Any suggestions? Thanks.
> -
Spry toolbar in dreamweaver cs6? is there one?
All in the title
Hi,
because we are becoming so detailed, here some more links
Examples
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/
http://craigsworks.com/projects/simpletip/
http://calebjacob.com/tooltipster/
Tutorials:
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
http://try.jquery.com/
http://learn.jquery.com/
https://tutsplus.com/course/30-days-to-learn-jquery/
http://www.w3schools.com/jquery/
If you have a budget to work with, get PVII's Pop-Menu Magic2.
http://www.projectseven.com/products/menusystems/pmm2/
And to complete here the good old SPRY of Spry Samples.
Hans-Günter
@Jon Fritz II: Hint is arrived, thanks! -
What replaces the CS6 spry menu bar in dreamweaver creative cloud 2014?
Hi,
Previously I used Dreamweaver CS6 and the spry menu bar widget (horizontal). I do not see this in Dreamweaver CC 2014. I am looking around in the Insert Panel (jQuery UI) but don't think a spry menu bar equivalent is listed.
Is there such an equivalent built into Dreamweaver CC 2014?Basic CSS drop-menu
CSS Menu - JSFiddle
Advanced drop-menu with CSS gradients & transitions
CSS Horizontal Drop-Menu - JSFiddle
PVII's Pop-Menu Magic3 (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
Responsive Iconic
http://www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu/
Responsive Hybrid
http://www.dynamicdrive.com/dynamicindex1/responsivehybridmenu/index.html
Nancy O. -
Section 508 Compliance - Spry Menu
I work for the government and am wondering if you could help
me figure out how I can (or if it's even possible) make the spry
menu features in Dreamweaver Section 508 Compliant, so that people
who have screen readers or Java Script turned off would still be
able to access the spry menu items. When we run the pages that have
spry menus through Dreamweaver's accessibility report it just
relays to us the fact that we are using Java script and we need to
provide a "noscript" tag. Do you have any ideas on how we could
accommodate this in our new web site design?
Thanks! EleanorSee if this article helps you:
http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
http://www.projectseven.com/go/Elevators
"luchenburg" <[email protected]> wrote in
message
news:g684j9$7jr$[email protected]..
>I work for the government and am wondering if you could
help me figure out
>how
> I can (or if it's even possible) make the spry menu
features in
> Dreamweaver
> Section 508 Compliant, so that people who have screen
readers or Java
> Script
> turned off would still be able to access the spry menu
items. When we run
> the
> pages that have spry menus through Dreamweaver's
accessibility report it
> just
> relays to us the fact that we are using Java script and
we need to provide
> a
> "noscript" tag. Do you have any ideas on how we could
accommodate this in
> our
> new web site design?
>
> Thanks! Eleanor
>
>
> -
Spry Slide Effect problem in IE 7 only
I am using the Spry Slide Effect as a way of initially hiding
a drop down menu:
Click on menu of products:
http://www.adelantedesign.co.uk/clients/showpiece/menu.asp
I use:
.hideInitially{
display: none;
as recommended here though there is no working example using
display: none; only visibility: hidden
http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
Using initial state of dispay: none it displays NOTHING! Is
this a bug in IE 7?
Anyone come across this problem.
Anyone got a fix?
Thanks
RichHigh Rich,
You were on the right track with EPM. Here's how it works:
http://www.projectseven.com/testing/customers/pow32/
All you do is insert a single panel EPM inside TopMenuWrapper
set to have
all panels close and with gradual stop animation and using
the basic style
theme.
Then you set the trigger DIV to display: none !important; and
to remove all
borders.
.p7EPM05 .p7epm_trigs {
overflow: hidden;
margin-bottom: 12px;
display: none !important;
Then "un-style" the EPM content DIV so it picks up your
colors and
attributes:
.p7EPM05 .p7epm_content {
padding: 12px 24px;
line-height: 1.5em;
border: 0;
Then select your "Menu of Products" link and use the built-in
EPM control
behaviors (available GUI in behaviors panel) to assign an EPM
Trigger
Control to the link, which will then look like this:
<a href="#"
onclick="P7_EPMctl('p7EPMtrg1_1','trigger')">Menu of
Products</a>
That's it.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"RICH POW" <[email protected]> wrote in
message
news:gms1c0$rpj$[email protected]..
>I am using the Spry Slide Effect as a way of initially
hiding a drop down
>menu:
>
> Click on menu of products:
>
http://www.adelantedesign.co.uk/clients/showpiece/menu.asp
>
> I use:
> .hideInitially{
> display: none;
> }
> as recommended here though there is no working example
using display:
> none;
> only visibility: hidden
>
>
http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
>
> Using initial state of dispay: none it displays NOTHING!
Is this a bug in
> IE
> 7?
> Anyone come across this problem.
>
> Anyone got a fix?
>
> Thanks
> Rich
> -
Spry tabs nested in accordion on IE.
I am trying to put a tabbed panel in an accordion panel. In
IE6 and I believe 7 as well, the tabs do not hide. Everything looks
fine in FF and Safari. Any ideas on fixing this?This example, though for our widgets, might help with the
spry issue.
http://www.projectseven.com/products/tools/accordion/tweaks/with_tpm/index2.htm
Essentially, what you do is make each containing DIV for each
accordion
content panel relative.
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
Elevating Dreamweaver Widgets to a Higher Level
"Josh Rawls" <[email protected]> wrote in
message
news:ft0go1$h8m$[email protected]..
>I am trying to put a tabbed panel in an accordion panel.
In IE6 and I
>believe 7 as well, the tabs do not hide. Everything looks
fine in FF and
>Safari. Any ideas on fixing this? -
Odd spry menu / css positioning
Hi folks,
Working on a site with a Spry menu - looks as expected in IE,
but totally
out of whack in FF and Safari. Any suggestions to what I'm
missing?
http://www.applicationdynamics.com/Clients/pwj/
I'm sure I'm just neglecting to configure the CSS correctly
but haven't
found the trick yet.
Thanks!
Lawrence
Cartweaver.com"Lawrence *Adobe Community Expert*"
<[email protected]> wrote in
message news:g915h6$t2o$[email protected]..
> Never mind.... Got it.
Hi Lawrence,
Maybe you got the part of it you caught as an issue, but it
still doesn't
work very well in IE7. The links are not being treated as
blocks so unless
you are moused over the actual text in a submenu, it will
snap shut.
I'd recommend a better menu, but you should be able to fix
this easily
enough and so long as there are not third-level flyouts,
usability with Spry
is OK.
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
http://www.projectseven.com/go/Elevators
Maybe you are looking for
-
Error while applying patch MLR#4
hi, I am getting error while applying patch MLR#4. Can you please let me know whats error can be resolved? Please see below the snapshots from log file. Thanks, Vaibhav Execute perf_wid_pid_pcid.sql Error: Abort transaction java.lang.NullPointerExcep
-
My I iphone 4 isn't being recognized by any computer.
i have checked mulitple cables and computer and the iPhone doesn't shoe under my computer althou it does charge when i plug it to the computers usb
-
Hi, I am new to web services. I need to write a web service client that invokes a web service method. The method takes complex types as parameter and returns a complex type.what kind of client(static stub, dynamic proxy or DII) should I use to invoke
-
I am running CC Suite on a MacBook Pro ver. 10.8.5. I was updating acrobat when I got an error that the uddate did not complete. When I returned to the desktop, the icon had changed and I could no longer drop a file to acrobat. I ran Cleaner and it c
-
All fields with !Format event blank when printing
A client asked for assistance creating a new shipping label template with Adobe Output Designer 5.5, a program I've not used before. I had no problem creating the layout, and slapping the necessary fields on there (they had a few other templates I wa